emels/static/css/main.scss

   1 $px: .0625em;
   2
   3 $horiz_padding: 10*$px;
   4 $width_offset: 20*$px;
   5
   6 @mixin main-promobox-shape() {
   7   background: #16a487;
   8   padding: 1em $horiz_padding;
   9   border-radius: 15*$px;
  10 }
  11
  12 #main-promobox {
  13   float: right;
  14
  15   width: 220*$px - $width_offset;
  16   height: 235*$px - 2 * 1.5em;
  17
  18   a {
  19     @include main-promobox-shape();
  20
  21     display: block;
  22     margin-bottom: 1em;
  23     width: 220*$px - $width_offset - 2*$horiz_padding;
  24     float: left;
  25
  26     &:last-of-type {
  27       margin-bottom: 0;
  28     }
  29   }
  30   h1 {
  31     @include main-promobox-shape();
  32
  33     color: white;
  34     margin: 0;
  35     text-transform: uppercase;
  36     font-size: .9em;
  37     width: 222*$px - 2 * $horiz_padding;
  38     float: left;
  39     padding-top: 1.25em;
  40     padding-bottom: 1.25em;
  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         height: 80*$px;
  93         display: table;
  94         padding: 5px;
  95
  96         .in-box {
  97           font-size: .9em;
  98           height: 100%;
  99           width: 100%;
 100           display: table-cell;
 101           vertical-align: middle;
 102           border: 1px solid transparent;
 103           border-radius: 10*$px;
 104           padding: 0 16*$px;
 105
 106           .name {
 107             display: block;
 108             font-size: 1.5em;
 109             line-height: 1em;
 110             margin-bottom: .2em;
 111           }
 112         }
 113       }
 114       a:hover .in-box {
 115         border: 1px solid white;
 116       }
 117     }
 118     .box1 {
 119       background-color: #adaeaf;
 120     }
 121     .box2 {
 122       background-color: #f8b323;
 123     }
 124     .box3 {
 125       background-color: #16a487;
 126     }
 127     .box4 {
 128       background-color: #5e6165;
 129     }
 130     // .box5 {background-color: #16a487;}
 131     .box5 {
 132       background-color: #f8b323;
 133     }
 134     .box6 {
 135       background-color: #363a3e;
 136     }
 137     .box7 {
 138       background-color: #adaeaf;
 139     }
 140     .box8 {
 141       background-color: #ed7831;
 142     }
 143   }
 144 }
 145
 146 #main-howto {
 147   float: right;
 148   margin-top: 1.2em;
 149   width: 220*$px;
 150
 151   h1 {
 152     font-size: .9em;
 153     margin: 0 0 0 1.4em;
 154     text-transform: uppercase;
 155   }
 156
 157   ul {
 158     margin: 17*$px 0 17*$px 1.4em;
 159
 160     li {
 161       font-size: .9em;
 162       text-transform: uppercase;
 163       line-height: 1.25em;
 164     }
 165     a:before {
 166       height: 20*$px;
 167     }
 168
 169     .knowledge:before {
 170       content: url(/static/img/icons/knowledge_dark.png);
 171     }
 172     .activity:before {
 173       content: url(/static/img/icons/activity_dark.png);
 174     }
 175     .lesson-plan:before {
 176       content: url(/static/img/icons/lesson-plan_dark.png);
 177     }
 178     .reference:before {
 179       content: url(/static/img/icons/reference_dark.png);
 180     }
 181     .knowledge:hover:before {
 182       content: url(/static/img/icons/knowledge_orange.png);
 183     }
 184     .activity:hover:before {
 185       content: url(/static/img/icons/activity_orange.png);
 186     }
 187     .lesson-plan:hover:before {
 188       content: url(/static/img/icons/lesson-plan_orange.png);
 189     }
 190     .reference:hover:before {
 191       content: url(/static/img/icons/reference_orange.png);
 192     }
 193
 194   }
 195   p {
 196     margin: 0 0 30*$px 1.4em;
 197   }
 198   .side-banner img {
 199     display: block;
 200     width: 100%;
 201     margin-bottom: 0.2em;
 202   }
 203 }
 204
 205 #main-chosen {
 206   clear: left;
 207   float: left;
 208   margin-top: 2em;
 209
 210   h1 {
 211     font-size: .9em;
 212     margin: 0 0 1em 20*$px;
 213     text-transform: uppercase;
 214   }
 215
 216   .levelth {
 217     margin-left: 20*$px;
 218   }
 219 }
 220
 221 #main-tools {
 222   clear: both;
 223   .main-tools-box {
 224     float: left;
 225     margin-top: 1.5em;
 226     margin-right: 20*$px;
 227     width: 280*$px;
 228
 229     h1 {
 230       margin: 0;
 231       font-size: .9em;
 232       text-transform: uppercase;
 233     }
 234
 235     ul, ol {
 236       margin: 1.1em 0 0 0;
 237       font-size: .9em;
 238       line-height: 1.15em;
 239     }
 240   }
 241 }