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