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