X-Git-Url: https://git.mdrn.pl/edumed.git/blobdiff_plain/e76fdcf2a2488b1787c74fe8dccfa38d7ac04c84..fd7a7728d7595b8340292d79b59d2cf2579a51f5:/edumed/static/css/main.scss

diff --git a/edumed/static/css/main.scss b/edumed/static/css/main.scss
index 56517d9..8d21b1d 100755
--- a/edumed/static/css/main.scss
+++ b/edumed/static/css/main.scss
@@ -1,147 +1,241 @@
 $px: .0625em;
 
+$horiz_padding: 10*$px;
+$width_offset: 20*$px;
+
+@mixin main-promobox-shape() {
+  background: #16a487;
+  padding: 1em $horiz_padding;
+  border-radius: 15*$px;
+}
+
 #main-promobox {
-    /*position: absolute;
-    top: 0;
-    right: 10 * $px;*/
-    float: right;
+  float: right;
 
-    border-radius: 15*$px;
+  width: 220*$px - $width_offset;
+  height: 235*$px - 2 * 1.5em;
 
-    background: #f8b323;
-    padding: 1.5em 20*$px;
-    width: 220*$px - 2 * 20*$px;
-    height: 235*$px - 2 * 1.5em;
+  a {
+    @include main-promobox-shape();
 
-    h1 {
+    display: block;
+    margin-bottom: 1em;
+    width: 220*$px - $width_offset - 2*$horiz_padding;
+    float: left;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+  h1 {
+    @include main-promobox-shape();
+
+    color: white;
+    margin: 0;
+    text-transform: uppercase;
+    font-size: .9em;
+    width: 222*$px - 2 * $horiz_padding;
+    float: left;
+    padding-top: 1.25em;
+    padding-bottom: 1.25em;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  h1:before {
+    content: url(/static/img/icons/announce_white.png);
+    margin-right: 1.2em;
+    vertical-align: top;
+  }
+  h2 {
+    color: white;
+    font-size: .9em;
+    /*margin: 1.1em 0 0 0;*/
+    margin: 0;
+    font-weight: normal;
+    text-transform: uppercase;
+  }
+  p {
+    color: #363a3e;
+    font-size: .8em;
+    line-height: 1.15em;
+    margin: .3em 0;
+  }
+}
+
+#main-sections {
+  clear: both;
+  float: left;
+  margin-top: 1.2em;
+  width: 700*$px;
+
+  h1 {
+    font-size: .9em;
+    margin: 0 0 0 20*$px;
+    text-transform: uppercase;
+  }
+
+  ul {
+    margin: -3*$px 0 0 -20*$px;
+    padding: 0;
+    list-style: none;
+
+    li {
+      margin-top: 20*$px;
+      margin-left: 20*$px;
+      float: left;
+      height: 90*$px;
+      border-radius: 15*$px;
+
+      a {
         color: white;
-        margin: 0;
         text-transform: uppercase;
-        font-size: .9em;
+        height: 80*$px;
+        display: table;
+        padding: 5px;
+
+        .in-box {
+          font-size: .9em;
+          height: 100%;
+          width: 100%;
+          display: table-cell;
+          vertical-align: middle;
+          border: 1px solid transparent;
+          border-radius: 10*$px;
+          padding: 0 16*$px;
+
+          .name {
+            display: block;
+            font-size: 1.5em;
+            line-height: 1em;
+            margin-bottom: .2em;
+          }
+        }
+      }
+      a:hover .in-box {
+        border: 1px solid white;
+      }
     }
-    h1:before {
-        content: url(/static/img/icons/announce.png);
-        margin-right: 1.2em;
-        vertical-align: top;
+    .box1 {
+      background-color: #adaeaf;
     }
-    h2 {
-        color: white;
-        font-size: .9em;
-        margin: 1.1em 0 0 0;
-        font-weight: normal;
-        text-transform: uppercase;
+    .box2 {
+      background-color: #f8b323;
+    }
+    .box3 {
+      background-color: #16a487;
+    }
+    .box4 {
+      background-color: #5e6165;
+    }
+    // .box5 {background-color: #16a487;}
+    .box5 {
+      background-color: #f8b323;
+    }
+    .box6 {
+      background-color: #363a3e;
+    }
+    .box7 {
+      background-color: #adaeaf;
     }
-    p {
-        color: #363a3e;
-        font-size: .8em;
-        line-height: 1.15em;
-        margin: .3em 0;
+    .box8 {
+      background-color: #ed7831;
     }
+  }
 }
 
+#main-howto {
+  float: right;
+  margin-top: 1.2em;
+  width: 220*$px;
 
-#main-sections {
-    clear: both;
-    float: left;
-    margin-top: 1.1em;
-    width: 700*$px;
+  h1 {
+    font-size: .9em;
+    margin: 0 0 0 1.4em;
+    text-transform: uppercase;
+  }
 
-    h1 {
-        font-size: .9em;
-        margin: 0 0 0 1.6em;
-        text-transform: uppercase;
-    }
+  ul {
+    margin: 17*$px 0 17*$px 1.4em;
 
-    ul {
-        margin: -3*$px 0 0 -20*$px;
-        padding: 0;
-        list-style: none;
-
-        li {
-            margin-top: 20*$px;
-            margin-left: 20*$px;
-            float: left;
-            width: 160*$px;
-            height: 90*$px;
-            border-radius: 15*$px;
-            display: table;
-
-            a {
-                display: table-cell;
-                padding-left: 27*$px;
-                vertical-align: middle;
-                height: 100%;
-                color: white;
-                text-transform: uppercase;
-                font-size: .9em;
-            }
-        }
-        .box1 {background-color: #adaeaf;}
-        .box2 {background-color: #f8b323;}
-        .box3 {background-color: #16a487;}
-        .box4 {background-color: #5e6165;}
-        .box5 {background-color: #16a487;}
-        .box6 {background-color: #363a3e;}
-        .box7 {background-color: #adaeaf;}
-        .box8 {background-color: #ed7831;}
+    li {
+      font-size: .9em;
+      text-transform: uppercase;
+      line-height: 1.25em;
     }
-}
-
-#main-chosen {
-    float: right;
-    margin-top: 1.1em;
-    width: 220*$px;
-
-    h1 {
-        font-size: .9em;
-        margin: 0 0 0 1.4em;
-        text-transform: uppercase;
+    a:before {
+      height: 20*$px;
     }
 
-    ul {
-        margin: 17*$px 0 0 1.4em;;
-        padding: 0;
-        list-style-position:inside;
+    .knowledge:before {
+      content: url(/static/img/icons/knowledge_dark.png);
+    }
+    .activity:before {
+      content: url(/static/img/icons/activity_dark.png);
+    }
+    .lesson-plan:before {
+      content: url(/static/img/icons/lesson-plan_dark.png);
+    }
+    .reference:before {
+      content: url(/static/img/icons/reference_dark.png);
+    }
+    .knowledge:hover:before {
+      content: url(/static/img/icons/knowledge_orange.png);
+    }
+    .activity:hover:before {
+      content: url(/static/img/icons/activity_orange.png);
+    }
+    .lesson-plan:hover:before {
+      content: url(/static/img/icons/lesson-plan_orange.png);
+    }
+    .reference:hover:before {
+      content: url(/static/img/icons/reference_orange.png);
+    }
 
-        li {
-            font-size: .9em;
-            text-transform: uppercase;
-            line-height: 1.25em;
+  }
+  p {
+    margin: 0 0 30*$px 1.4em;
+  }
+  .side-banner img {
+    display: block;
+    width: 100%;
+    margin-bottom: 0.2em;
+  }
+}
 
-            a {
-                color: #363a3e;
-            }
-        }
-    }
+#main-chosen {
+  clear: left;
+  float: left;
+  margin-top: 2em;
+
+  h1 {
+    font-size: .9em;
+    margin: 0 0 1em 20*$px;
+    text-transform: uppercase;
+  }
+
+  .levelth {
+    margin-left: 20*$px;
+  }
 }
 
 #main-tools {
-    clear: both;
-    .main-tools-box {
-        float: left;
-        margin-top: 1.5em;
-        margin-right: 20*$px;
-        width: 280*$px;
-
-        h1 {
-            margin: 0;
-            font-size: .9em;
-            text-transform: uppercase;
-        }
+  clear: both;
+  .main-tools-box {
+    float: left;
+    margin-top: 1.5em;
+    margin-right: 20*$px;
+    width: 280*$px;
 
-        ul, ol {
-            margin: 1.1em 0 0 0;
-            padding: 0;
-            list-style-position:inside;
-            color: #ed7831;
-            font-size: .9em;
-            line-height: 1.15em;
-
-            li {
-                a {
-                    color: #ed7831;
-                }
-            }
-        }
+    h1 {
+      margin: 0;
+      font-size: .9em;
+      text-transform: uppercase;
+    }
+
+    ul, ol {
+      margin: 1.1em 0 0 0;
+      font-size: .9em;
+      line-height: 1.15em;
     }
+  }
 }