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