c2b0f06abc6cf4e0d3ece9fd5c6b036433e64dd2
[static.git] / content / media / css / base.scss
1 @charset "UTF-8";
2 @import url(//fonts.googleapis.com/css?family=Dosis:400,700&subset=latin,latin-ext);
3
4 html {
5     margin: 0;
6     padding: 0;
7 }
8
9 body {
10     margin: 0;
11     padding: 0;
12     font-family: Dosis;
13
14     color: #363a3b;
15     background-color: #e8e8e8;
16     background-repeat:no-repeat;
17     background-position: 100% 120px;
18 }
19
20 #body {
21     max-width: 48em;
22     margin: 0 auto;
23     spadding: 0 .5rem;
24 }
25
26 a {
27     text-decoration: none;
28     color: black;
29     &:hover {
30         text-decoration: underline;
31     }
32 }
33
34 #home-link {
35     padding: .5em;
36     display: block;
37     float:left;
38
39     &:hover {
40         text-decoration: none;
41         background: rgba(255,255,255,.9);
42     }
43 }
44
45 #top-logo {
46     float: right;
47     margin: 0 1rem 0 1rem;
48 }
49
50 header {
51     background-image: url("{{ media_url('images/okladka.jpg') }}");
52     background-position: 50% 76%;
53     background-size: auto 100%;
54
55     @media screen and (min-width: 20em) {
56         padding-top: 8rem;
57     }
58
59     @media screen and (min-width: 24em) {
60         background-size: 100% auto;
61     }
62
63     h1 {
64         margin: 0;
65         padding: 2em .5em 1em;
66         background: rgba(255,255,255,.7);
67         clear: both;
68
69         @media screen and (min-width: 20em) {
70             padding: 1em;
71             float: right;
72             text-align: right;
73         }
74
75         .author {
76             font-size: 1rem;
77             font-weight: normal;
78         }
79     }
80
81     nav {
82         margin-top: 0;
83     }
84 }
85
86 section#lead {
87     margin-left: 40%;
88     text-align: right;
89 }
90
91 section.home-section {
92     font-size: 1.3rem;
93
94     h2 {
95         padding: 1rem;
96         margin: 0;
97     }
98
99     a {
100         display: block;
101         padding: .25em .5em .25em .5em;
102         color: black;
103         position:relative;
104         font-size: 1.2rem;
105
106         @media screen and (min-width: 20em) {
107             padding-left: 2.7rem;
108             font-size: 1.3rem;
109
110             &:before {
111                 content: '\bb';
112                 position: absolute;
113                 left: 1rem;
114             }
115         }
116
117         &:hover {
118             background: #f4f4f4;
119             text-decoration: none;
120         }
121         .author {
122             display: block;
123             font-size: 1rem;
124         }
125     }
126 }
127 #tools {
128     background: #eee;
129     padding-bottom: 1em;
130
131     @media screen and (min-width: 36em) {
132         float: right;
133         z-index: 1000;
134         margin: 0 0 1em 1em;
135         width: 14em;
136         position: relative;
137         border-color: #ddd;
138         border-style: solid;
139         border-width: 0 0 1px 1px;
140     }
141 }
142
143
144 footer {
145     border-top: 1px solid #fff;
146     padding: 1em 0;
147     margin-top: 3em;
148 }
149
150 nav {
151     clear: both;
152     margin-top: 3em;
153
154     a:hover {
155         text-decoration: none;
156         background: rgba(255,255,255,.9);
157     }
158
159     .link-prev {
160         float: left;
161         padding: 1em;
162         &:before {
163             content: '\25c4';
164             margin-right: .4em;
165         }
166     }
167     .link-next {
168         float: right;
169         text-align:right;
170         padding: 1em;
171         &:after {
172             content: '\25ba';
173             margin-left: .4em;
174         }
175     }
176 }
177
178
179 #logos {
180     margin: 0;
181     padding: 1.5rem 0 1rem;
182     section {
183         display: inline-block;
184         h1 {
185             font-size: .8rem;
186             font-weight: normal;
187             margin: 0 0 .7rem 1.25rem;
188         }
189         a {
190             display: inline-block;
191             margin-left: 1.23rem;
192             margin-bottom: 1rem;
193         }
194         img {
195             width: 8.125rem;
196             vertical-align: middle;
197         }
198     }
199 }
200
201
202 body#index {
203     #body {
204         display: -webkit-box;
205         display: -moz-box;
206         display: box;
207         -webkit-box-orient: vertical;
208         -moz-box-orient: vertical;
209         box-orient: vertical;
210
211         @media screen and (min-width: 36em) {
212             display: block;
213         }
214
215
216         header {
217             -webkit-box-ordinal-group: 1;
218             -moz-box-ordinal-group: 1;
219             box-ordinal-group: 1;
220         }
221         #logos {
222             -webkit-box-ordinal-group: 4;
223             -moz-box-ordinal-group: 4;
224             box-ordinal-group: 4;
225         }
226         .home-section {
227             -webkit-box-ordinal-group: 3;
228             -moz-box-ordinal-group: 3;
229             box-ordinal-group: 3;
230         }
231         footer {
232             -webkit-box-ordinal-group: 100;
233             -moz-box-ordinal-group: 100;
234             box-ordinal-group: 100;
235         }
236     }
237 }