edumed/static/css/main.scss

   1 $px: .0625em;
   2
   3 @mixin main-promobox-shape() {
   4   background: #16a487;
   5   padding: 0.75em 20*$px;
   6   border-radius: 15*$px;
   7 }
   8
   9 #main-promobox {
  10   float: right;
  11
  12   width: 220*$px - 2 * 20*$px;
  13   height: 235*$px - 2 * 1.5em;
  14
  15   a {
  16     @include main-promobox-shape();
  17
  18     display: block;
  19     margin-bottom: 1.4em;
  20     width: 220*$px - 4 * 20*$px;
  21     float: left;
  22
  23     &:first-of-type {
  24       padding-top: 0;
  25       border-top-right-radius: 0;
  26       border-top-left-radius: 0;
  27     }
  28     &:last-of-type {
  29       margin-bottom: 0;
  30     }
  31   }
  32   h1 {
  33     @include main-promobox-shape();
  34
  35     color: white;
  36     margin: 0;
  37     text-transform: uppercase;
  38     font-size: .9em;
  39     width: 220*$px - 3 * 20*$px;
  40     float: left;
  41     border-bottom-right-radius: 0;
  42     border-bottom-left-radius: 0;
  43   }
  44   h1:before {
  45     content: url(/static/img/icons/announce_white.png);
  46     margin-right: 1.2em;
  47     vertical-align: top;
  48   }
  49   h2 {
  50     color: white;
  51     font-size: .9em;
  52     /*margin: 1.1em 0 0 0;*/
  53     margin: 0;
  54     font-weight: normal;
  55     text-transform: uppercase;
  56   }
  57   p {
  58     color: #363a3e;
  59     font-size: .8em;
  60     line-height: 1.15em;
  61     margin: .3em 0;
  62   }
  63 }
  64
  65 #main-sections {
  66   clear: both;
  67   float: left;
  68   margin-top: 1.2em;
  69   width: 700*$px;
  70
  71   h1 {
  72     font-size: .9em;
  73     margin: 0 0 0 20*$px;
  74     text-transform: uppercase;
  75   }
  76
  77   ul {
  78     margin: -3*$px 0 0 -20*$px;
  79     padding: 0;
  80     list-style: none;
  81
  82     li {
  83       margin-top: 20*$px;
  84       margin-left: 20*$px;
  85       float: left;
  86       height: 90*$px;
  87       border-radius: 15*$px;
  88
  89       a {
  90         color: white;
  91         text-transform: uppercase;
  92         display: block;
  93         height: 80*$px;
  94         display: table;
  95         padding: 5px;
  96
  97         .in-box {
  98           font-size: .9em;
  99           height: 100%;
 100           width: 100%;
 101           display: table-cell;
 102           vertical-align: middle;
 103           border: 1px solid transparent;
 104           border-radius: 10*$px;
 105           padding: 0 16*$px;
 106
 107           .name {
 108             display: block;
 109             font-size: 1.5em;
 110             line-height: 1em;
 111             margin-bottom: .2em;
 112           }
 113         }
 114       }
 115       a:hover .in-box {
 116         border: 1px solid white;
 117       }
 118     }
 119     .box1 {
 120       background-color: #adaeaf;
 121     }
 122     .box2 {
 123       background-color: #f8b323;
 124     }
 125     .box3 {
 126       background-color: #16a487;
 127     }
 128     .box4 {
 129       background-color: #5e6165;
 130     }
 131     // .box5 {background-color: #16a487;}
 132     .box5 {
 133       background-color: #f8b323;
 134     }
 135     .box6 {
 136       background-color: #363a3e;
 137     }
 138     .box7 {
 139       background-color: #adaeaf;
 140     }
 141     .box8 {
 142       background-color: #ed7831;
 143     }
 144   }
 145 }
 146
 147 #main-howto {
 148   float: right;
 149   margin-top: 1.2em;
 150   width: 220*$px;
 151
 152   h1 {
 153     font-size: .9em;
 154     margin: 0 0 0 1.4em;
 155     text-transform: uppercase;
 156   }
 157
 158   ul {
 159     margin: 17*$px 0 17*$px 1.4em;
 160
 161     li {
 162       font-size: .9em;
 163       text-transform: uppercase;
 164       line-height: 1.25em;
 165     }
 166     a:before {
 167       height: 20*$px;
 168     }
 169
 170     .knowledge:before {
 171       content: url(/static/img/icons/knowledge_dark.png);
 172     }
 173     .activity:before {
 174       content: url(/static/img/icons/activity_dark.png);
 175     }
 176     .lesson-plan:before {
 177       content: url(/static/img/icons/lesson-plan_dark.png);
 178     }
 179     .reference:before {
 180       content: url(/static/img/icons/reference_dark.png);
 181     }
 182     .knowledge:hover:before {
 183       content: url(/static/img/icons/knowledge_orange.png);
 184     }
 185     .activity:hover:before {
 186       content: url(/static/img/icons/activity_orange.png);
 187     }
 188     .lesson-plan:hover:before {
 189       content: url(/static/img/icons/lesson-plan_orange.png);
 190     }
 191     .reference:hover:before {
 192       content: url(/static/img/icons/reference_orange.png);
 193     }
 194
 195   }
 196   p {
 197     margin: 0 0 30*$px 1.4em;
 198   }
 199 }
 200
 201 #main-chosen {
 202   clear: left;
 203   float: left;
 204   margin-top: 2em;
 205
 206   h1 {
 207     font-size: .9em;
 208     margin: 0 0 1em 20*$px;
 209     text-transform: uppercase;
 210   }
 211
 212   .levelth {
 213     margin-left: 20*$px;
 214   }
 215 }
 216
 217 #main-tools {
 218   clear: both;
 219   .main-tools-box {
 220     float: left;
 221     margin-top: 1.5em;
 222     margin-right: 20*$px;
 223     width: 280*$px;
 224
 225     h1 {
 226       margin: 0;
 227       font-size: .9em;
 228       text-transform: uppercase;
 229     }
 230
 231     ul, ol {
 232       margin: 1.1em 0 0 0;
 233       font-size: .9em;
 234       line-height: 1.15em;
 235     }
 236   }
 237 }