Split promobox into 2 + carousel height fix

diff --git a/edumed/static/css/main.css b/edumed/static/css/main.css
index bbba26e..80bdea8 100644 (file)
--- a/edumed/static/css/main.css
+++ b/edumed/static/css/main.css
@@ -1,14 +1,14 @@
 #main-promobox {
   float: right;
 #main-promobox {
   float: right;

-  width: 11.25em;
+  width: 12.5em;

   height: 11.6875em; }
   #main-promobox a {
     background: #16a487;
   height: 11.6875em; }
   #main-promobox a {
     background: #16a487;

-    padding: 0.75em 1.25em;
+    padding: 1em 1.25em;

     border-radius: 0.9375em;
     display: block;
     border-radius: 0.9375em;
     display: block;

-    margin-bottom: 1.4em;
-    width: 8.75em;
+    margin-bottom: 1em;
+    width: 10em;

     float: left;
   }
 
     float: left;
   }
 


@@ -23,14 +23,16 @@
 }
   #main-promobox h1 {
     background: #16a487;
 }
   #main-promobox h1 {
     background: #16a487;

-    padding: 0.75em 1.25em;
+    padding: 1em 1.25em;

     border-radius: 0.9375em;
     color: white;
     margin: 0;
     text-transform: uppercase;
     font-size: .9em;
     border-radius: 0.9375em;
     color: white;
     margin: 0;
     text-transform: uppercase;
     font-size: .9em;

-    width: 10em;
+    width: 11.375em;

     float: left;
     float: left;

+    padding-top: 1.25em;
+    padding-bottom: 1.25em;

     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }

diff --git a/edumed/static/css/main.scss b/edumed/static/css/main.scss
index 9b27291..1818e60 100755 (executable)
--- a/edumed/static/css/main.scss
+++ b/edumed/static/css/main.scss
@@ -2,22 +2,22 @@ $px: .0625em;
 
 @mixin main-promobox-shape() {
   background: #16a487;
 
 @mixin main-promobox-shape() {
   background: #16a487;

-  padding: 0.75em 20*$px;
+  padding: 1em 20*$px;

   border-radius: 15*$px;
 }
 
 #main-promobox {
   float: right;
 
   border-radius: 15*$px;
 }
 
 #main-promobox {
   float: right;
 

-  width: 220*$px - 2 * 20*$px;
+  width: 220*$px - 20*$px;

   height: 235*$px - 2 * 1.5em;
 
   a {
     @include main-promobox-shape();
 
     display: block;
   height: 235*$px - 2 * 1.5em;
 
   a {
     @include main-promobox-shape();
 
     display: block;

-    margin-bottom: 1.4em;
-    width: 220*$px - 4 * 20*$px;
+    margin-bottom: 1em;
+    width: 220*$px - 3 * 20*$px;

     float: left;
 
     &:first-of-type {
     float: left;
 
     &:first-of-type {


@@ -36,8 +36,10 @@ $px: .0625em;
     margin: 0;
     text-transform: uppercase;
     font-size: .9em;
     margin: 0;
     text-transform: uppercase;
     font-size: .9em;

-    width: 220*$px - 3 * 20*$px;
+    width: 222*$px - 2 * 20*$px;

     float: left;
     float: left;

+    padding-top: 1.25em;
+    padding-bottom: 1.25em;

     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }