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@font-face {
50 font-family: 'Overpass';
51 font-style: normal;
52 font-weight: 400;
53 src: url('/assets/fonts/overpass-v2-latin-regular.eot'); /* IE9 Compat Modes */
54 src: local('Overpass Regular'), local('Overpass-Regular'),
55 url('/assets/fonts/overpass-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
56 url('/assets/fonts/overpass-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
57 url('/assets/fonts/overpass-v2-latin-regular.woff') format('woff'), /* Modern Browsers */
58 url('/assets/fonts/overpass-v2-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
59 url('/assets/fonts/overpass-v2-latin-regular.svg#Overpass') format('svg'); /* Legacy iOS */
60}
61
62/* =Base */
63body {
64 font-family: 'Open Sans';
65 color: $iron;
66 background-color: $dorian;
67}
68
69a {
70 color: $iron;
71 font-weight: bold;
72 text-decoration: none;
73}
74
75.content a {
76 text-decoration: bold;
77 content: '<i class="fa fa-link"></i>'
78}
79
80p {
81 font-size: 20px;
82 line-height: 32px;
83}
84
85p.center {
86 text-align: center;
87}
88
89ul {
90 font-size: 17px;
91 line-height: 27px;
92}
93
94ol {
95 font-size: 17px;
96 line-height: 27px;
97}
98
99img {
100 margin: 40px auto;
101 display: block;
102 max-width: 100%;
103}
104.flex-wrapper {
105 display: flex;
106 justify-content: center;
107 background-color: #333333;
108}
109.flex-cards {
110 width: 100%;
111 display: flex;
112 flex-wrap: wrap;
113 background-color: #333;
114 justify-content: center;
115}
116.card {
117 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
118 margin: 5px;
119 transition: 0.3s;
120 border-radius: 5px;
121 width: 28.3%;
122 background: #4f4f4fff;
123 padding: 15px;
124 font-size: 15px;
125 text-align: center;
126}
127div.card p {
128 font-size: 17px;
129 text-align: left;
130 line-height: 27px;
131}
132.card:hover {
133 box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
134}
135.crypto-card {
136 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
137 margin: 5px;
138 transition: 0.3s;
139 border-radius: 5px;
140 width: 35%;
141 background: #ffffffff;
142 padding: 15px;
143 font-size: 15px;
144 text-align: center;
145 color: #333333;
146 word-wrap: break-word;
147}
148div.crypto-card p {
149 font-size: 17px;
150 text-align: center;
151 line-height: 27px;
152}
153.crypto-card:hover {
154 box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
155}
156.button {
157 border-radius: 8px;
158 border: 0px;
159 color: #4f4f4fff;
160 background-color: white;
161 padding: 16px 32px;
162 text-align: center;
163 text-decoration: none;
164 display: inline-block;
165 font-size: 16px;
166 margin: 4px 2px;
167 -webkit-transition-duration: 0.4s;
168 transition-duration: 0.4s;
169 cursor: pointer;
170 border: 2px solid #fff;
171}
172.button:hover {
173 background-color: #4f4f4fff;
174 color: #FFFFFF;
175}
176.contact-card {
177 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
178 background: #4f4f4fff;
179 margin: 5px;
180 transition: 0.3s;
181 border-radius: 5px;
182 width: 20%;
183 text-align: center;
184}
185div.contact-card h1 {
186 font-size: 50px;
187 text-align: center;
188 line-height: 0px;
189}
190div.contact-card h2 {
191 font-size: 17px;
192 line-height: 27px;
193}
194.contact-card:hover {
195 box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
196}
197blockquote {
198 letter-spacing: 1px;
199 margin:0px;
200 margin-top: 40px;
201 margin-bottom: 20px;
202 padding: 0px;
203 text-align: center;
204 position: relative;
205
206 footer {
207 position: absolute;
208 bottom: -35px;
209 font-size: 15px;
210 color: $iron;
211 letter-spacing: 0px;
212 left:0px;
213 right: 0px;
214
215 &:before { content: "** "; }
216 &:after { content: " **"; }
217 }
218
219 p {
220 display: inline;
221 font-size: 20px;
222 color: $cloudy;
223 font-weight: 400;
224 &:before { content: "“ "; }
225 &:after { content: " ”"; }
226 }
227}
228
229strong {
230 color: $iron;
231}
232
233/* =Header */
234.wrapper {
235 max-width: 70%;
236 margin: 100px auto;
237}
238
239.header {
240 overflow: hidden;
241 font-family: 'Overpass';
242}
243
244.navigation {
245 float:left;
246}
247
248.logo {
249 font-size: 50px;
250 font-weight: 700;
251 color: $iron;
252 display: block;
253}
254
255.menu {
256 color: $cloudy;
257 font-size: 18px;
258 margin:0px;
259 margin-top: 6px;
260 padding: 0px;
261 list-style-type: none;
262}
263
264.menu__entry {
265 display: inline-block;
266 margin-right: 35px;
267
268 &:last-child {
269 margin-right: 0px;
270 }
271}
272
273.menu__entry a {
274 font-weight: 400;
275}
276
277.social-links {
278 float:right;
279 font-size: 24px;
280 color: $cloudy;
281 list-style-type: none;
282}
283
284.social-links__entry {
285 display: inline-block;
286 margin-left: 10px;
287}
288
289/* =Titles */
290.page-title {
291 margin-top:100px;
292 margin-bottom:75px;
293 text-align: center;
294 font-family: 'Overpass';
295}
296
297.page-title__text {
298 font-weight: 600;
299 font-size: 60px;
300}
301
302.page-title__subtitle {
303 font-weight: 400;
304 font-family: 'Inconsolata';
305 font-size: 22px;
306 color: $cloudy;
307}
308
309.post-title {
310 margin-bottom: 110px;
311 font-family: 'Overpass';
312}
313
314.post-title__text {
315 font-size: 40px;
316}
317
318.post-title__subtitle {
319 font-size: 20px;
320}
321
322/* =Post teasers */
323
324.list-posts {
325 list-style-type: none;
326 font-family: 'Overpass';
327 padding: 0px;
328}
329
330.post-teaser {
331 font-family: 'Overpass';
332}
333
334.post-teaser p {
335 margin-bottom: 55px;
336 font-weight: 200;
337 font-family: 'Open Sans';
338 font-size: 15px;
339 font-style: none;
340}
341
342.post-teaser__title {
343 font-size: 25px;
344 color: $iron;
345}
346
347.post-teaser__date {
348 font-size: 17px;
349 float: right;
350 vertical-align: middle;
351 color: $cloudy;
352 font-family: 'Inconsolata';
353}
354
355.empty-post-list {
356 font-size: 22px;
357 font-weight: 700;
358 color: $iron;
359 text-align: center;
360}
361
362/* =Explore */
363.explore {
364 text-align: center;
365 font-family: 'Inconsolata';
366 color: $cloudy;
367 margin-top: 140px;
368}
369
370.explore__devider {
371 font-size: 18px;
372 letter-spacing: 8.18px;
373}
374
375.explore__label {
376 font-size: 14px;
377 margin-top: 15px;
378 font-family: 'Inconsolata';
379}
380
381.categories {
382 list-style-type: none;
383 font-family: 'Inconsolata';
384 margin-top: 15px;
385 padding: 0px;
386}
387
388.categories__item {
389 display: inline-block;
390 font-weight: 700;
391 font-size: 18px;
392}
393
394.categories__item a {
395 color: $iron;
396 font-family: 'Inconsolata';
397}
398
399.categories__item:after {
400 content: "/";
401 margin-left: 6px;
402 color: $cloudy;
403}
404
405.categories__item:last-child:after {
406 content: "";
407 margin-left: 0px;
408}
409
410
411/* =Post page */
412.about {
413 color: $cloudy;
414 margin-top: 70px;
415 text-align: center;
416 line-height: 24px;
417}
418
419.about__devider {
420 font-size: 20px;
421 margin-bottom: 50px;
422 letter-spacing: 9.09px;
423}
424
425.about__text {
426 font-size: 18px;
427}
428
429#disqus_thread {
430 margin-top: 100px;
431}
432@media (max-width: 1000px) {
433 .contact-card {
434 width: 28%;
435 }
436}
437@media (max-width: 800px) {
438 /* =Base */
439 p {
440 font-size: 16px;
441 line-height: 1.6;
442 }
443
444 .wrapper {
445 width: 80%;
446 }
447
448 .navigation,
449 .social-links {
450 @include centered-block();
451 }
452
453 .social-links {
454 font-size: 30px;
455 margin-top: 35px;
456 }
457
458 .page-title {
459 margin-top: 80px;
460 margin-bottom: 60px;
461 }
462
463 .page-title__text {
464 font-size: 40px;
465 }
466
467 .page-title__subtitle {
468 font-size: 18px;
469 }
470
471 .post-teaser__title {
472 font-size: 18px;
473 @include centered-block();
474 }
475
476 .post-teaser__date {
477 font-size: 16px;
478 margin-top: 10px;
479 float: none;
480 @include centered-block();
481 }
482
483 .explore {
484 margin-top: 80px;
485 }
486
487 .post-title__text {
488 font-size: 28px;
489 }
490
491 .post-title__subtitle {
492 font-size: 18px;
493 }
494 .post-teaser p {
495 text-align: center;
496 }
497 .card {
498 width: 40%;
499 }
500 .contact-card {
501 width: 30%;
502 }
503 .crypto-card {
504 width: 70%;
505 }
506}
507@media (max-width: 620px) {
508 .card {
509 width: 80%;
510 }
511 .contact-card {
512 width: 45%;
513 }
514 .crypto-card {
515 width: 70%;
516 }
517}
518@media (max-width: 400px) {
519 .card {
520 width: 100%;
521 }
522 .contact-card {
523 width: 100%;
524 }
525 .crypto-card {
526 width: 100%;
527 }
528}