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