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.flex-wrapper {
104    display: flex;
105    justify-content: center;
106    background-color: #333333;
107}
108.flex-cards {
109    width: 100%;
110    display: flex;
111    flex-wrap: wrap;
112    background-color: #333;
113    justify-content: center;
114}
115.card {
116    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
117    margin: 5px;
118    transition: 0.3s;
119    border-radius: 5px;
120    width: 28.3%;
121    background: #4f4f4fff;
122    padding: 15px;
123    font-size: 15px;
124    text-align: center;
125}
126div.card p {
127    font-size: 17px;
128    text-align: left;
129    line-height: 27px;
130}
131.card:hover {
132    box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
133}
134.button {
135    border-radius: 8px;
136    border: 0px;
137    color: #4f4f4fff;
138    background-color: white;
139    padding: 16px 32px;
140    text-align: center;
141    text-decoration: none;
142    display: inline-block;
143    font-size: 16px;
144    margin: 4px 2px;
145    -webkit-transition-duration: 0.4s;
146    transition-duration: 0.4s;
147    cursor: pointer;
148    border: 2px solid #fff;
149}
150.button:hover {
151    background-color: #4f4f4fff;
152    color: #FFFFFF;
153}
154blockquote {
155    letter-spacing: 1px;
156    margin:0px;
157    margin-top: 40px;
158    margin-bottom: 20px;
159    padding: 0px;
160    text-align: center;
161    position: relative;
162
163    footer {
164        position: absolute;
165        bottom: -35px;
166        font-size: 15px;
167        color: $iron;
168        letter-spacing: 0px;
169        left:0px;
170        right: 0px;
171
172        &:before { content: "** "; }
173        &:after { content: " **"; }
174    }
175
176    p {
177        display: inline;
178        font-size: 20px;
179        color: $cloudy;
180        font-weight: 400;
181        &:before { content: "“ "; }
182        &:after { content: " ”"; }
183    }
184}
185
186strong {
187    color: $iron;
188}
189
190/* =Header */
191.wrapper {
192    max-width: 70%;
193    margin: 100px auto;
194}
195
196.header {
197    overflow: hidden;
198    font-family: 'Inconsolata';
199}
200
201.navigation {
202    float:left;
203}
204
205.logo {
206    font-size: 50px;
207    font-weight: 700;
208    color: $iron;
209    display: block;
210}
211
212.menu {
213    color: $cloudy;
214    font-size: 18px;
215    margin:0px;
216    margin-top: 6px;
217    padding: 0px;
218    list-style-type: none;
219}
220
221.menu__entry {
222    display: inline-block;
223    margin-right: 35px;
224
225    &:last-child {
226        margin-right: 0px;
227    }
228}
229
230.menu__entry a {
231    font-weight: 400;
232}
233
234.social-links {
235    float:right;
236    font-size: 24px;
237    color: $cloudy;
238    list-style-type: none;
239}
240
241.social-links__entry {
242    display: inline-block;
243    margin-left: 10px;
244}
245
246/* =Titles */
247.page-title {
248    margin-top:100px;
249    margin-bottom:125px;
250    text-align: center;
251    font-family: 'Inconsolata';
252}
253
254.page-title__text {
255    font-weight: 700;
256    font-size: 70px;
257}
258
259.page-title__subtitle {
260    font-weight: 400;
261    font-family: 'Inconsolata';
262    font-size: 22px;
263    color: $cloudy;
264}
265
266.post-title {
267    margin-bottom: 110px;
268    font-family: 'Inconsolata';
269}
270
271.post-title__text {
272    font-size: 40px;
273}
274
275.post-title__subtitle {
276    font-size: 20px;
277}
278
279/* =Post teasers */
280
281.list-posts {
282    list-style-type: none;
283    font-family: 'Inconsolata';
284    padding: 0px;
285}
286
287.post-teaser {
288    margin-bottom: 45px;
289    font-weight: 700;
290    font-family: 'Inconsolata';
291}
292
293.post-teaser__title {
294    font-size: 22px;
295    color: $iron;
296}
297
298.post-teaser__date {
299    font-size: 16px;
300    float: right;
301    vertical-align: middle;
302    color: $cloudy;
303}
304
305.empty-post-list {
306    font-size: 22px;
307    font-weight: 700;
308    color: $iron;
309    text-align: center;
310}
311
312/* =Explore */
313.explore {
314    text-align: center;
315    font-family: 'Inconsolata';
316    color: $cloudy;
317    margin-top: 140px;
318}
319
320.explore__devider {
321    font-size: 18px;
322    letter-spacing: 8.18px;
323}
324
325.explore__label {
326    font-size: 14px;
327    margin-top: 15px;
328    font-family: 'Inconsolata';
329}
330
331.categories {
332    list-style-type: none;
333    font-family: 'Inconsolata';
334    margin-top: 15px;
335    padding: 0px;
336}
337
338.categories__item {
339    display: inline-block;
340    font-weight: 700;
341    font-size: 18px;
342}
343
344.categories__item a {
345    color: $iron;
346    font-family: 'Inconsolata';
347}
348
349.categories__item:after {
350    content: "/";
351    margin-left: 6px;
352    color: $cloudy;
353}
354
355.categories__item:last-child:after {
356    content: "";
357    margin-left: 0px;
358}
359
360
361/* =Post page */
362.about {
363    color: $cloudy;
364    margin-top: 70px;
365    text-align: center;
366    line-height: 24px;
367}
368
369.about__devider {
370    font-size: 20px;
371    margin-bottom: 50px;
372    letter-spacing: 9.09px;
373}
374
375.about__text {
376    font-size: 18px;
377}
378
379#disqus_thread {
380    margin-top: 100px;
381}
382
383@media (max-width: 800px) {
384    /* =Base */
385    p {
386        font-size: 16px;
387        line-height: 1.6;
388    }
389
390    .wrapper {
391        width: 80%;
392    }
393
394    .navigation,
395    .social-links {
396        @include centered-block();
397    }
398
399    .social-links {
400        font-size: 30px;
401        margin-top: 35px;
402    }
403
404    .page-title {
405        margin-top: 80px;
406        margin-bottom: 60px;
407    }
408
409    .page-title__text {
410        font-size: 40px;
411    }
412
413    .page-title__subtitle {
414        font-size: 18px;
415    }
416
417    .post-teaser__title {
418        font-size: 18px;
419        @include centered-block();
420    }
421
422    .post-teaser__date {
423        font-size: 16px;
424        margin-top: 10px;
425        float: none;
426        @include centered-block();
427    }
428
429    .explore {
430        margin-top: 80px;
431    }
432
433    .post-title__text {
434        font-size: 28px;
435    }
436
437    .post-title__subtitle {
438        font-size: 18px;
439    }
440    .card {
441        width: 40%;
442    }
443}
444@media (max-width: 620px) {
445    .card {
446        width: 80%;
447    }
448}
449@media (max-width: 400px) {
450    .card {
451        width: 100%;
452    }
453}