From bc818b463f46ef4bb23708dd930bb38fdecd5615 Mon Sep 17 00:00:00 2001
From: shizuka <shizuka@wmi.amu.edu.pl>
Date: Mon, 15 Oct 2018 16:26:02 +0200
Subject: [PATCH] css changes

---
 static/css/labs.css | 156 +++++++++++++++++++-------------------------
 1 file changed, 67 insertions(+), 89 deletions(-)

diff --git a/static/css/labs.css b/static/css/labs.css
index 09ed852..ee77373 100644
--- a/static/css/labs.css
+++ b/static/css/labs.css
@@ -1,5 +1,5 @@
 BODY {
-  padding-top: 75px;  
+  padding-top: 7.5rem;  
   letter-spacing: +.02rem;
   font-weight: 300;
   font-size: 1.6rem;
@@ -8,7 +8,6 @@ BODY {
 }
 
 code {
-  color: f00;
   font-size: 1.6rem;
   background-color: #f9f2f4;
   
@@ -39,7 +38,7 @@ h4 {
 }
 
 img{
-  max-width: 500px;
+  max-width: 50rem;
   height: auto;
 }
 
@@ -51,46 +50,41 @@ video {
 pre {
   font-size: 1.6rem;
   line-height: 1.7rem;
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 
 }
 
 .input-group {
-  padding-right: 30px;
-  padding-left:  20px;
+  padding-right: 3rem;
+  padding-left:  2rem;
 }
 
-
 .warning {
-  border-left: 10px solid #ba3232;
+  border-left: 0.60em solid #ba3232;
   margin-left: auto;
-  margin-bottom: 20px;
-  margin-top: 20px;     
+  margin-bottom: 1em;
+  margin-top: 1em;     
   color: #ba3232;
-  padding: 25px 35px;
+  padding: 2.5rem 3.5rem;
   text-align: left;
   background-color: #fdf7f7;
 }
 
 .info {
-  border-left: 10px solid #918f8a; /*#4d5363*/
+  border-left: 0.6em solid #918f8a; /*#4d5363*/
   margin-left: auto;
-  margin-bottom: 20px;
-  margin-top: 20px;     
+  margin-bottom: 1em;
+  margin-top: 1em;     
   color: black;
-  padding: 25px 35px;
+  padding: 2.5rem 3.5rem;
   text-align: left;
   background-color: #f2f2f2;
 }
 
 .navbar {
-
-  letter-spacing: +.05rem;
-  font-weight: bold;
-  font-size: 1.8rem;
   background-color: #292929;
-
+  position: fixed;
 }
 
 a:link {
@@ -104,76 +98,47 @@ a:visited {
 a:hover {
   color: #000;
 }
-.navbar a {
-  font-size: 1rem;
-}
-.navbar a:link{
-  color: #ba3232;
-
-}
-
-.navbar a:visited {
-  color: #ba3232;
-  /*font-size: 1.5rem;*/
-}
-
-.navbar a:hover {
-  color: #ba3232;
-  /*font-size: 2rem;*/
-}
 
 .sidebar-header {
   color: #000;
-  font-size: 3rem;
+  font-size: 1rem;
   text-align: center;
   letter-spacing: 0.3rem;
   font-weight: bold;
-  padding-bottom: 10px;
+  padding-bottom: 1rem;
   background-color: #ba3232;
 }
 
 .sidebar-toggle {
   float: left;
-  margin-left: 15px;
+  margin-left: 1.5rem;
 }
 
 .sidebar {
-  margin-top: -1px;
+  margin-top: -0.15rem;
   position: fixed;
-  top: 51px;
+  top: 5.1rem;
   bottom: 0;
   left: 0;
   z-index: 1050;
-  padding-left: 20px;
+  padding-left: 2rem;
   overflow-x: hidden;
   overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
   background-color: #292929;
-  border-right: 1px solid #eee;
-  /*letter-spacing: +.05rem;*/
+  border-right: 0.1rem solid #eee;
   font-weight: 400;
   font-size: 1.25rem;
   line-height: 1.55;
-  width: 325px;
+  width: 32.5rem;
 }
 
 .sidebar.active {
   display: block;
-
-}
-
-@media (min-width: 768px) {
-  .sidebar {
-    display: block;
-    top: 0px;
-  }
-  .navbar a {
-  font-size: 2rem;
-  }
 }
 
 .sidebar a {
   display: block;
-  padding: 10px 20px;
+  padding: 1rem 2rem;
   text-decoration: none;
   color: #ccc;
 }
@@ -181,36 +146,33 @@ a:hover {
 
 .sidebar-header a {
   color: #fff;
-
   font-size: 3rem;
   text-align: center;
 }
 
-
-
 .sidebar ul {
   list-style-type: none;
   padding: 0;
 }
 
 .sidebar > ul {
-  margin-right: -21px; /* 20px padding + 1px border */
-  margin-bottom: 20px;
-  margin-left: -20px;
+  margin-right: -2.1rem; /* 20px padding + 1px border */
+  margin-bottom: 2rem;
+  margin-left: -2rem;
 }
 
 .sidebar .sub-item > a{
-  padding-left: 40px;
+  padding-left: 4rem;
   background-color: #111;
 }
 
 .sidebar .subsub-item > a{
-  padding-left: 60px;
+  padding-left: 6rem;
   background-color: #111;
 }
 
 .sidebar .subsubsub-item > a{
-  padding-left: 80px;
+  padding-left: 8rem;
   background-color: #111;
 }
 
@@ -223,22 +185,12 @@ a:hover {
 
 .sidebar a:hover {
   color: #fff;
-/*  background-color: #ba3232;
-*/  font-weight: bold;
+  font-weight: bold;
 }
 
 .main {
-  padding: 20px;
-}
-@media (min-width: 768px) {
-  .main {
-    padding-right: 5rem;
-    padding-left: 12rem;
-
-  }
-  .navbar {
-    display: none;
-  }
+  padding: 2rem;
+  margin-left: 0rem;
 }
 
 .main .page-header {
@@ -249,28 +201,54 @@ a:hover {
     font-weight: bold;
 }
 
+
+@media (min-width: 768px) {
+  .sidebar {
+    display: block;
+    top: 0rem;
+  }
+  .navbar a {
+  font-size: 2rem;
+  }
+  .main {
+    margin-left: 32.5rem;
+  }
+  .navbar {
+    display: none;
+  }
+/*  img {
+    max-width: screen-width;
+  }*/
+}  
+/*
+@media (min-width: 1800) {
+  .main{
+    margin-right: 100px;
+  }
+}
+*/
 .bs-callout {
-    padding: 20px;
-    margin: 20px 0;
-    border: 1px solid #eee;
-    border-left-width: 5px;
-    border-radius: 3px;
+    padding: 2rem;
+    margin: 2rem 0;
+    border: 0.1rem solid #eee;
+    border-left-width: 0.5rem;
+    border-radius: 0.3rem;
 }
 .bs-callout:first-child {
     margin-top: 0;
 }
 .bs-callout h4 {
     margin-top: 0;
-    margin-bottom: 5px;
+    margin-bottom: 0.5rem;
 }
 .bs-callout p:last-child {
     margin-bottom: 0;
 }
 .bs-callout code {
-    border-radius: 3px;
+    border-radius: 0.3rem;
 }
 .bs-callout+.bs-callout {
-    margin-top: -5px;
+    margin-top: -0.5rem;
 }
 .bs-callout-default {
     border-left-color: #777;