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