edumed/static/css/main.scss

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