exercises with scoring
[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     &: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 }