edumed/static/css/main.scss

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