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