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