Split promobox into 2 + carousel height fix

diff --git a/catalogue/static/catalogue/css/carousel.css b/catalogue/static/catalogue/css/carousel.css
index 2d014da..992e285 100644 (file)
--- a/catalogue/static/catalogue/css/carousel.css
+++ b/catalogue/static/catalogue/css/carousel.css
@@ -2,12 +2,13 @@
   float: left;
   position: relative;
   width: 43.75em;
-  height: 14.688em;
+  height: 14.6875em;
   overflow: hidden;
-  border-radius: 0.938em; }
+  border-radius: 0.9375em;
+}
   #catalogue-carousel #catalogue-carousel-links {
     width: 28.75em;
-    height: 14.688em;
+    height: 14.6875em;
     list-style: none;
     margin: 0;
     padding: 0; }
@@ -18,8 +19,8 @@
       left: 0;
       height: 100%;
       background-size: 100% 100%;
-      border-top-left-radius: 0.938em 6.38%;
-      border-bottom-left-radius: 0.938em 6.38%;
+      border-top-left-radius: 0.9375em 6.38%;
+      border-bottom-left-radius: 0.9375em 6.38%;
       z-index: 100;
       background-color: #888; }
       #catalogue-carousel #catalogue-carousel-links li a.catalogue-carousel-link {
@@ -65,19 +66,19 @@
         text-shadow: 0 0 5px #000; }
   #catalogue-carousel #catalogue-carousel-switcher {
     margin: 0;
-    padding: 0.188em 0 0 3.625em;
+    padding: 0.1875em 0 0 3.625em;
     width: 11.375em;
-    height: 14.188em;
+    height: 14.6875em;
     position: absolute;
     right: 0;
     top: 0;
     list-style: none;
-    border-radius: 0 0.938em 0.938em 0;
+    border-radius: 0 0.9375em 0.9375em 0;
     background-color: #ed7831;
     background-image: url(/static/catalogue/img/carousel-right.png);
     background-position: 0 0;
     background-repeat: no-repeat;
-    background-size: auto 14.688em;
+    background-size: auto 14.6875em;
     /* right part of mask as background */ }
     #catalogue-carousel #catalogue-carousel-switcher li {
       margin-bottom: .4em;

diff --git a/catalogue/static/catalogue/css/carousel.scss b/catalogue/static/catalogue/css/carousel.scss
index 17f83d9..299f95b 100755 (executable)
--- a/catalogue/static/catalogue/css/carousel.scss
+++ b/catalogue/static/catalogue/css/carousel.scss
@@ -93,7 +93,7 @@ $ciemny: #363a3e;
         margin: 0;
         padding: 3*$px 0 0 58*$px;
         width: 240*$px - 58*$px;
-        height: 235*$px - 8*$px;
+        height: 243*$px - 8*$px;
         position: absolute;
         right: 0;
         top: 0;

diff --git a/edumed/static/css/main.css b/edumed/static/css/main.css
index d720f44..bbba26e 100644 (file)
--- a/edumed/static/css/main.css
+++ b/edumed/static/css/main.css
@@ -1,17 +1,39 @@
 #main-promobox {
   float: right;
-  border-radius: 0.9375em;
-  background: #16a487;
-  padding: 1.5em 1.25em;
   width: 11.25em;
   height: 11.6875em; }
   #main-promobox a {
-    display: block; }
+    background: #16a487;
+    padding: 0.75em 1.25em;
+    border-radius: 0.9375em;
+    display: block;
+    margin-bottom: 1.4em;
+    width: 8.75em;
+    float: left;
+  }
+
+#main-promobox a:first-of-type {
+  padding-top: 0;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+#main-promobox a:last-of-type {
+  margin-bottom: 0;
+}
   #main-promobox h1 {
+    background: #16a487;
+    padding: 0.75em 1.25em;
+    border-radius: 0.9375em;
     color: white;
     margin: 0;
     text-transform: uppercase;
-    font-size: .9em; }
+    font-size: .9em;
+    width: 10em;
+    float: left;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
   #main-promobox h1:before {
     content: url(/static/img/icons/announce_white.png);
     margin-right: 1.2em;
@@ -19,7 +41,8 @@
   #main-promobox h2 {
     color: white;
     font-size: .9em;
-    margin: 1.1em 0 0 0;
+    /*margin: 1.1em 0 0 0;*/
+    margin: 0;
     font-weight: normal;
     text-transform: uppercase; }
   #main-promobox p {

diff --git a/edumed/static/css/main.scss b/edumed/static/css/main.scss
index 962336e..9b27291 100755 (executable)
--- a/edumed/static/css/main.scss
+++ b/edumed/static/css/main.scss
@@ -1,183 +1,237 @@
 $px: .0625em;
 
+@mixin main-promobox-shape() {
+  background: #16a487;
+  padding: 0.75em 20*$px;
+  border-radius: 15*$px;
+}
+
 #main-promobox {
-    float: right;
+  float: right;
 
-    border-radius: 15*$px;
+  width: 220*$px - 2 * 20*$px;
+  height: 235*$px - 2 * 1.5em;
 
-    background: #16a487;
-    padding: 1.5em 20*$px;
-    width: 220*$px - 2 * 20*$px;
-    height: 235*$px - 2 * 1.5em;
+  a {
+    @include main-promobox-shape();
 
-    a {
-        display: block;
+    display: block;
+    margin-bottom: 1.4em;
+    width: 220*$px - 4 * 20*$px;
+    float: left;
+
+    &:first-of-type {
+      padding-top: 0;
+      border-top-right-radius: 0;
+      border-top-left-radius: 0;
     }
-    h1 {
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+  h1 {
+    @include main-promobox-shape();
+
+    color: white;
+    margin: 0;
+    text-transform: uppercase;
+    font-size: .9em;
+    width: 220*$px - 3 * 20*$px;
+    float: left;
+    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;
+        display: block;
+        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_white.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;
     }
-    p {
-        color: #363a3e;
-        font-size: .8em;
-        line-height: 1.15em;
-        margin: .3em 0;
+    .box3 {
+      background-color: #16a487;
     }
-}
-
-
-#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;
+    .box4 {
+      background-color: #5e6165;
     }
-
-    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;
-                text-transform: uppercase;
-                display: block;
-                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;
-            }
-        }
-        .box1 {background-color: #adaeaf;}
-        .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;}
-        .box8 {background-color: #ed7831;}
+    // .box5 {background-color: #16a487;}
+    .box5 {
+      background-color: #f8b323;
+    }
+    .box6 {
+      background-color: #363a3e;
+    }
+    .box7 {
+      background-color: #adaeaf;
+    }
+    .box8 {
+      background-color: #ed7831;
     }
+  }
 }
 
 #main-howto {
-    float: right;
-    margin-top: 1.2em;
-    width: 220*$px;
-
-    h1 {
-        font-size: .9em;
-        margin: 0 0 0 1.4em;
-        text-transform: uppercase;
+  float: right;
+  margin-top: 1.2em;
+  width: 220*$px;
+
+  h1 {
+    font-size: .9em;
+    margin: 0 0 0 1.4em;
+    text-transform: uppercase;
+  }
+
+  ul {
+    margin: 17*$px 0 17*$px 1.4em;
+
+    li {
+      font-size: .9em;
+      text-transform: uppercase;
+      line-height: 1.25em;
+    }
+    a:before {
+      height: 20*$px;
     }
 
-    ul {
-        margin: 17*$px 0 17*$px 1.4em;
-
-        li {
-            font-size: .9em;
-            text-transform: uppercase;
-            line-height: 1.25em;
-        }
-        a:before {
-            height: 20*$px;
-        }
-
-        .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);}
-
+    .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);
     }
-    p {
-        margin: 0 0 30*$px 1.4em;
+    .lesson-plan:hover:before {
+      content: url(/static/img/icons/lesson-plan_orange.png);
     }
+    .reference:hover:before {
+      content: url(/static/img/icons/reference_orange.png);
+    }
+
+  }
+  p {
+    margin: 0 0 30*$px 1.4em;
+  }
 }
 
 #main-chosen {
-    clear: left;
+  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: 2em;
+    margin-top: 1.5em;
+    margin-right: 20*$px;
+    width: 280*$px;
 
     h1 {
-        font-size: .9em;
-        margin: 0 0 1em 20*$px;
-        text-transform: uppercase;
+      margin: 0;
+      font-size: .9em;
+      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;
-        }
-
-        ul, ol {
-            margin: 1.1em 0 0 0;
-            font-size: .9em;
-            line-height: 1.15em;
-        }
+    ul, ol {
+      margin: 1.1em 0 0 0;
+      font-size: .9em;
+      line-height: 1.15em;
     }
+  }
 }

diff --git a/edumed/static/css/promobox.scss b/edumed/static/css/promobox.scss
index 836b9c0..f90b03f 100755 (executable)
--- a/edumed/static/css/promobox.scss
+++ b/edumed/static/css/promobox.scss
@@ -1,6 +1,9 @@
+/*TODO: delete cause is not used*/
+
 #main-promobox {
     h1 {
         color: white;
         margin: 0;
+      background: red;
     }
 }
\ No newline at end of file