Design angepasst, damit es weniger Platz verbraucht und besser lesbar ist (im Pycharm Plugin). Neue Einträge in der Materialienliste.

Author: mk1012

css/material_viewer.css

@@ -1,7 +1,15 @@
+#viewer {
+  text-align: left;
+}
+#viewer * {
+  font-size: 12pt;
+}
 #viewer img {
-  max-width: 60%;
+  max-width: 90%;
+  max-height: 400px;
   height: auto;
-  margin: 10px auto;
+  width: auto;
+  margin: 20px auto;
   display: block;
 }
 #viewer .column_container :after {
@@ -24,26 +32,30 @@
 #viewer h1 {
   text-align: center;
   margin-bottom: 50px;
+  font-size: 1.8em;
 }
 #viewer h2 {
-  border-bottom: 1px solid #ffb400;
-  margin-top: 50px;
+  border-bottom: 1px solid #66b8a0;
+  margin: 45px 0 15px 0;
+  font-size: 1.4em;
 }
 #viewer h3 {
-  margin-top: 20px;
-  border-bottom: 1px solid #66b8a0;
+  margin: 20px 0 10px 0;
+  border-bottom: 1px solid #ffb400;
+  font-size: 1.25em;
 }
 #viewer h4 {
-  margin-top: 20px;
+  font-size: 1.1em;
+  margin: 12px 0 5px 0;
   border-bottom: 1px solid darkred;
 }
 #viewer .content_section {
-  font-size: 13pt;
+  font-size: 12pt;
   margin-left: 40px;
   margin-bottom: 30px;
 }
 #viewer .content_sub_section {
-  font-size: 13pt;
+  font-size: 12pt;
   margin-left: 20px;
   margin-bottom: 20px;
 }
@@ -56,27 +68,18 @@ h6 {
   text-align: left;
   margin-bottom: 4px;
 }
-h2 {
-  margin-bottom: 30px;
-}
-h3 {
-  margin-bottom: 20px;
+#chooser {
+  margin-top: 20px;
 }
 #search {
-  margin-bottom: 50px;
+  margin-bottom: 35px;
 }
 #search input {
   padding: 5px;
   font-size: 14pt;
   line-height: 1;
   width: 100%;
 }
-#viewer {
-  text-align: left;
-}
-#viewer code {
-  font-size: 14pt;
-}
 #search_results > ul {
   list-style: none;
 }
@@ -90,22 +93,24 @@ h3 {
   padding: 0;
 }
 #materials > ul > li {
-  margin-bottom: 60px;
+  margin-bottom: 45px;
 }
 #materials ul {
   list-style: none;
-  padding-left: 12px;
+  padding-left: 5px;
 }
 #materials hr {
   margin: 5px 0 16px 0;
 }
 #materials h2 {
-  border-bottom: 1px solid #ffb400;
-  margin-top: 50px;
+  font-size: 16pt;
+  margin: 24px 0;
+  border-bottom: 1px solid #66b8a0;
 }
 #materials h3 {
-  margin-top: 20px;
-  border-bottom: 1px solid #66b8a0;
+  margin: 12px 0;
+  font-size: 14pt;
+  border-bottom: 1px solid #ffb400;
 }
 #materials h4,
 #materials h5,
@@ -115,10 +120,11 @@ h3 {
 .e_res {
   background-color: #fafafa;
   padding: 5px;
-  margin-bottom: 5px;
+  margin-bottom: 2px;
 }
 .e_res:hover {
   background-color: #f0f0f0;
+  cursor: pointer;
 }
 .e_name {
   margin: 0;

less/codo_theme.less

@@ -7,13 +7,10 @@ h1, h2, h3, h4, h5, h6 {
   margin-bottom: 4px;
 }
 
-h2 {
-  margin-bottom: 30px;
+#chooser{
+  margin-top: 20px;
 }
 
-h3 {
-  margin-bottom: 20px;
-}
 
 #search {
   input {
@@ -23,17 +20,7 @@ h3 {
     width: 100%;
   }
 
-  margin-bottom: 50px;
-}
-
-#viewer {
-  text-align: left;
-
-  #btn_back {
-  }
-  code {
-    font-size: 14pt;
-  }
+  margin-bottom: 35px;
 }
 
 #search_results {
@@ -56,27 +43,29 @@ h3 {
     padding: 0;
 
     > li {
-      margin-bottom: 60px;
+      margin-bottom: 45px;
     }
   }
 
   ul {
     list-style: none;
-    padding-left: 12px;
+    padding-left: 5px;
   }
 
   hr {
     margin: 5px 0 @mb_hr 0;
   }
 
   h2 {
-    border-bottom: 1px solid #ffb400;
-    margin-top: 50px;
+    font-size: 16pt;
+    margin: 24px 0;
+    border-bottom: 1px solid #66b8a0;
   }
 
   h3 {
-    margin-top: 20px;
-    border-bottom: 1px solid #66b8a0;
+    margin: 12px 0;
+    font-size: 14pt;
+    border-bottom: 1px solid #ffb400;
   }
 
   h4, h5, h6 {
@@ -87,10 +76,11 @@ h3 {
 .e_res {
   background-color: #fafafa;
   padding: 5px;
-  margin-bottom: 5px;
+  margin-bottom: 2px;
 
   &:hover {
     background-color: #f0f0f0;
+    cursor: pointer;
   }
 }
 

less/material_viewer.less

@@ -6,14 +6,40 @@
 @ml_sub_section: 20px;
 @mb_sub_section: 20px;
 
-@fs_content: 13pt;
+@fs_content: 12pt;
 
 #viewer {
+  text-align: left;
 
-  @import "codo_theme";
+  * {
+    font-size: @fs_content;
+  }
+
+  img {
+    max-width: 90%;
+    max-height: 400px;
+    height: auto;
+    width: auto;
+    margin: 20px auto;
+    display: block;
+  }
+
+  .column_container {
+    :after {
+      clear: both;
+      height: 0;
+      visibility: hidden;
+      content: "";
+    }
+
+    .column {
+      float: left;
+    }
+  }
 
-  p{
+  p {
     margin-bottom: 5px;
+
   }
 
   pre {
@@ -25,20 +51,25 @@
   h1 {
     text-align: center;
     margin-bottom: 50px;
+    font-size: 1.8em;
   }
 
   h2 {
-    border-bottom: 1px solid #ffb400;
-    margin-top: 50px;
+    border-bottom: 1px solid #66b8a0;
+    margin: 45px 0 15px 0;
+    font-size: 1.4em;
   }
 
   h3 {
-    margin-top: 20px;
-    border-bottom: 1px solid #66b8a0;
+    margin: 20px 0 10px 0;
+    border-bottom: 1px solid #ffb400;
+    font-size: 1.25em;
+
   }
 
   h4 {
-    margin-top: 20px;
+    font-size: 1.1em;
+    margin: 12px 0 5px 0;
     border-bottom: 1px solid darkred;
   }