add noscript
[edumed.git] / 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 }