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