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