1/* open-sans-300 - latin */
  2@font-face {
  3  font-family: 'Open Sans';
  4  font-style: normal;
  5  font-weight: 300;
  6  src: local('Open Sans Light'), local('OpenSans-Light'),
  7       url('/assets/fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  8       url('/assets/fonts/open-sans-v15-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  9}
 10
 11/* open-sans-300italic - latin */
 12@font-face {
 13  font-family: 'Open Sans';
 14  font-style: italic;
 15  font-weight: 300;
 16  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
 17       url('/assets/fonts/open-sans-v15-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
 18       url('/assets/fonts/open-sans-v15-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 19}
 20/* inconsolata-regular - latin */
 21@font-face {
 22  font-family: 'Inconsolata';
 23  font-style: normal;
 24  font-weight: 400;
 25  src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
 26       url('/assets/fonts/inconsolata-v16-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
 27       url('/assets/fonts/inconsolata-v16-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 28}
 29
 30/* inconsolata-700 - latin */
 31@font-face {
 32  font-family: 'Inconsolata';
 33  font-style: normal;
 34  font-weight: 700;
 35  src: local('Inconsolata Bold'), local('Inconsolata-Bold'),
 36       url('/assets/fonts/inconsolata-v16-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
 37       url('/assets/fonts/inconsolata-v16-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 38}
 39
 40/* =Base */
 41body {
 42    font-family: 'Open Sans Light';
 43    color: $iron;
 44    background-color: $dorian;
 45}
 46
 47a {
 48    color: $iron;
 49    font-weight: bold;
 50    text-decoration: none;
 51
 52    &:hover {
 53        text-decoration: underline;
 54    }
 55}
 56
 57.contact {
 58    font-weight: normal;
 59    font-size: 40px;
 60    line-height: 52px;
 61    text-decoration: none;
 62    text-align: center;
 63}
 64
 65.contact:hover {
 66    color: #BEBEBE;
 67}
 68
 69p {
 70    font-size: 20px;
 71    line-height: 32px;
 72}
 73
 74p.center {
 75  text-align: center;
 76  }
 77
 78ul {
 79    font-size: 17px;
 80    line-height: 27px;
 81}
 82
 83ol {
 84    font-size: 17px;
 85    line-height: 27px;
 86}
 87
 88img {
 89    margin: 40px auto;
 90    display: block;
 91    max-width: 100%;
 92}
 93
 94blockquote {
 95    letter-spacing: 1px;
 96    margin:0px;
 97    margin-top: 40px;
 98    margin-bottom: 20px;
 99    padding: 0px;
100    text-align: center;
101    position: relative;
102
103    footer {
104        position: absolute;
105        bottom: -35px;
106        font-size: 15px;
107        color: $iron;
108        letter-spacing: 0px;
109        left:0px;
110        right: 0px;
111
112        &:before { content: "** "; }
113        &:after { content: " **"; }
114    }
115
116    p {
117        display: inline;
118        font-size: 20px;
119        color: $cloudy;
120        font-weight: 400;
121        &:before { content: "“ "; }
122        &:after { content: " ”"; }
123    }
124}
125
126strong {
127    color: $iron;
128}
129
130/* =Header */
131.wrapper {
132    max-width: 800px;
133    margin: 100px auto;
134}
135
136.header {
137    overflow: hidden;
138    font-family: 'Inconsolata';
139}
140
141.navigation {
142    float:left;
143}
144
145.logo {
146    font-size: 50px;
147    font-weight: 700;
148    color: $iron;
149    display: block;
150}
151
152.menu {
153    color: $cloudy;
154    font-size: 18px;
155    margin:0px;
156    margin-top: 6px;
157    padding: 0px;
158    list-style-type: none;
159}
160
161.menu__entry {
162    display: inline-block;
163    margin-right: 35px;
164
165    &:last-child {
166        margin-right: 0px;
167    }
168}
169
170.menu__entry a {
171    font-weight: 400;
172}
173
174.social-links {
175    float:right;
176    font-size: 24px;
177    color: $cloudy;
178    list-style-type: none;
179}
180
181.social-links__entry {
182    display: inline-block;
183    margin-left: 10px;
184}
185
186/* =Titles */
187.page-title {
188    margin-top:100px;
189    margin-bottom:125px;
190    text-align: center;
191    font-family: 'Inconsolata';
192}
193
194.page-title__text {
195    font-weight: 700;
196    font-size: 70px;
197}
198
199.page-title__subtitle {
200    font-weight: 400;
201    font-family: 'Inconsolata';
202    font-size: 22px;
203    color: $cloudy;
204}
205
206.post-title {
207    margin-bottom: 110px;
208    font-family: 'Inconsolata';
209}
210
211.post-title__text {
212    font-size: 40px;
213}
214
215.post-title__subtitle {
216    font-size: 20px;
217}
218
219/* =Post teasers */
220
221.list-posts {
222    list-style-type: none;
223    font-family: 'Inconsolata';
224    padding: 0px;
225}
226
227.post-teaser {
228    margin-bottom: 45px;
229    font-weight: 700;
230    font-family: 'Inconsolata';
231}
232
233.post-teaser__title {
234    font-size: 22px;
235    color: $iron;
236}
237
238.post-teaser__date {
239    font-size: 16px;
240    float: right;
241    vertical-align: middle;
242    color: $cloudy;
243}
244
245.empty-post-list {
246    font-size: 22px;
247    font-weight: 700;
248    color: $iron;
249    text-align: center;
250}
251
252/* =Explore */
253.explore {
254    text-align: center;
255    font-family: 'Inconsolata';
256    color: $cloudy;
257    margin-top: 140px;
258}
259
260.explore__devider {
261    font-size: 18px;
262    letter-spacing: 8.18px;
263}
264
265.explore__label {
266    font-size: 14px;
267    margin-top: 15px;
268    font-family: 'Inconsolata';
269}
270
271.categories {
272    list-style-type: none;
273    font-family: 'Inconsolata';
274    margin-top: 15px;
275    padding: 0px;
276}
277
278.categories__item {
279    display: inline-block;
280    font-weight: 700;
281    font-size: 18px;
282}
283
284.categories__item a {
285    color: $iron;
286    font-family: 'Inconsolata';
287}
288
289.categories__item:after {
290    content: "/";
291    margin-left: 6px;
292    color: $cloudy;
293}
294
295.categories__item:last-child:after {
296    content: "";
297    margin-left: 0px;
298}
299
300
301/* =Post page */
302.about {
303    color: $cloudy;
304    margin-top: 70px;
305    text-align: center;
306    line-height: 24px;
307}
308
309.about__devider {
310    font-size: 20px;
311    margin-bottom: 50px;
312    letter-spacing: 9.09px;
313}
314
315.about__text {
316    font-size: 18px;
317}
318
319#disqus_thread {
320    margin-top: 100px;
321}
322
323@media (max-width: 800px) {
324    /* =Base */
325    p {
326        font-size: 16px;
327        line-height: 1.6;
328    }
329
330    .wrapper {
331        width: 80%;
332    }
333
334    .navigation,
335    .social-links {
336        @include centered-block();
337    }
338
339    .social-links {
340        font-size: 30px;
341        margin-top: 35px;
342    }
343
344    .page-title {
345        margin-top: 80px;
346        margin-bottom: 60px;
347    }
348
349    .page-title__text {
350        font-size: 40px;
351    }
352
353    .page-title__subtitle {
354        font-size: 18px;
355    }
356
357    .post-teaser__title {
358        font-size: 18px;
359        @include centered-block();
360    }
361
362    .post-teaser__date {
363        font-size: 16px;
364        margin-top: 10px;
365        float: none;
366        @include centered-block();
367    }
368
369    .explore {
370        margin-top: 80px;
371    }
372
373    .post-title__text {
374        font-size: 28px;
375    }
376
377    .post-title__subtitle {
378        font-size: 18px;
379    }
380}