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