7d95145e0eea9e2603b687be9179a83dffddec8c
[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   .side-banner img {
202     display: block;
203     width: 100%;
204     margin-bottom: 0.2em;
205   }
206 }
207
208 #main-chosen {
209   clear: left;
210   float: left;
211   margin-top: 2em;
212
213   h1 {
214     font-size: .9em;
215     margin: 0 0 1em 20*$px;
216     text-transform: uppercase;
217   }
218
219   .levelth {
220     margin-left: 20*$px;
221   }
222 }
223
224 #main-tools {
225   clear: both;
226   .main-tools-box {
227     float: left;
228     margin-top: 1.5em;
229     margin-right: 20*$px;
230     width: 280*$px;
231
232     h1 {
233       margin: 0;
234       font-size: .9em;
235       text-transform: uppercase;
236     }
237
238     ul, ol {
239       margin: 1.1em 0 0 0;
240       font-size: .9em;
241       line-height: 1.15em;
242     }
243   }
244 }