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}
132.content p a::after {
133 content: "\f08e";
134 font-size: 15px;
135 font-family: "ForkAwesome";
136 margin-left: 5px;
137}
138.content li a::after {
139 content: "\f08e";
140 font-size: 15px;
141 font-family: "ForkAwesome";
142 margin-left: 5px;
143}
144p {
145 font-size: 20px;
146 line-height: 32px;
147}
148p.center {
149 text-align: center;
150}
151ul {
152 font-size: 17px;
153 line-height: 27px;
154}
155ol {
156 font-size: 17px;
157 line-height: 27px;
158}
159img {
160 margin: 40px auto;
161 display: block;
162 max-width: 100%;
163 cursor: pointer;
164}
165.content img {
166 position: relative;
167 transition: transform .3s ease;
168}
169.content img:hover {
170/** box-shadow: 0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);**/
171 transform: translate3d(1px, -5px, 0px);
172}
173.content img:active {
174 transform: scale(1.4);
175}
176.post-image {
177 display: none;
178}
179.flex-wrapper {
180 display: flex;
181 justify-content: center;
182 background-color: #323234;
183}
184.flex-cards {
185 width: 100%;
186 display: flex;
187 flex-wrap: wrap;
188 background-color: #323234;
189 justify-content: center;
190}
191.card {
192 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
193 margin: 5px;
194 transition: 0.3s;
195 border-radius: 5px;
196 width: 28.3%;
197 background: #4f4f4fff;
198 padding: 15px;
199 font-size: 15px;
200 text-align: center;
201}
202div.card p {
203 font-size: 17px;
204 text-align: left;
205 line-height: 27px;
206}
207.card:hover {
208 box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
209}
210.crypto-card {
211 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
212 margin: 5px;
213 transition: 0.3s;
214 border-radius: 5px;
215 width: 35%;
216 background: #ffffffff;
217 padding: 15px;
218 font-size: 15px;
219 text-align: center;
220 color: #323234;
221 word-wrap: break-word;
222}
223div.crypto-card p {
224 font-size: 17px;
225 text-align: center;
226 line-height: 27px;
227}
228.crypto-card:hover {
229 box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
230}
231.button {
232 border-radius: 8px;
233 border: 0px;
234 color: #4f4f4f;
235 background-color: white;
236 padding: 16px 32px;
237 text-align: center;
238 text-decoration: none;
239 display: inline-block;
240 font-size: 16px;
241 margin: 4px 2px;
242 -webkit-transition-duration: 0.4s;
243 transition-duration: 0.4s;
244 cursor: pointer;
245 border: 2px solid #fff;
246}
247.button:hover {
248 background-color: #4f4f4f;
249 color: #FFFFFF;
250}
251.tor {
252 border-radius: 8px;
253 border: 0px;
254 color: #fff;
255 background-color: #7D4699;
256 padding: 16px 16px;
257 text-align: center;
258 text-decoration: none;
259 display: inline-block;
260 font-size: 16px;
261 -webkit-transition-duration: 0.4s;
262 transition-duration: 0.4s;
263 cursor: pointer;
264 border: 2px solid #7D4699;
265 margin-left: 10px;
266}
267.tor:hover {
268 background-color: #4f4f4f;
269 color: #fff;
270 border: 2px solid #fff;
271}
272.donate {
273 border-radius: 8px;
274 border: 0px;
275 color: #323234;
276 background-color: white;
277 padding: 5px 20px;
278 text-align: center;
279 text-decoration: none;
280 display: inline-block;
281 font-size: 16px;
282 margin: 4px 2px;
283 -webkit-transition-duration: 0.4s;
284 transition-duration: 0.4s;
285 cursor: pointer;
286 border: 2px solid #fff;
287}
288.scroll {
289 padding-top: 10px;
290}
291.tags {
292 margin-bottom: 3rem;
293 font-family: 'Open Sans';
294}
295.list-tags a {
296 font-size: 1rem;
297 color: #fff;
298 display:inline-block;
299 border:1px solid #fff;
300 border-radius:.313rem;
301 padding:.25rem .625rem;
302 margin-right:.125rem;
303 margin-bottom:.5rem;
304 text-decoration:none !important;
305 -webkit-user-select: none;
306 -moz-user-select: none;
307 -ms-user-select: none;
308 user-select: none;
309 transition-duration: 0.4s;
310}
311.tag-title {
312 font-family: 'Overpass',sans-serif;
313 font-weight: 400;
314 font-style: normal;
315 font-size: 2.25rem;
316 margin-top: 3.75rem;
317 width: auto;
318 float: none;
319 display: block;
320 margin-right: auto;
321 margin-left: auto;
322 padding-left: 0;
323 padding-right: 0;
324 color: #fff;
325}
326.tag-list {
327 list-style-type: none;
328 font-family: 'Overpass';
329 padding: 0px;
330}
331.tag-list li {
332 font-family: 'Overpass';
333 border-bottom: 1px solid #fff;
334 padding: .625rem 0;
335}
336.tag-list span {
337 font-weight: 500;
338 font-size: 20px;
339 color: $iron;
340}
341.meta {
342 font-size: 15px!important;
343}
344.meta {
345 font-size: 1rem;
346 color: #fff;
347 display:inline-block;
348 border:1px solid #fff;
349 border-radius:.313rem;
350 padding:.15rem .6rem;
351 margin-right:.125rem;
352 margin-bottom:.5rem;
353 text-decoration:none !important;
354 -webkit-user-select: none;
355 -moz-user-select: none;
356 -ms-user-select: none;
357 user-select: none;
358 transition-duration: 0.4s;
359}
360time {
361 font-family: Overpass;
362 font-size: 20px;
363 font-weight: 500;
364 float: right;
365 vertical-align: middle;
366}
367.tags a:hover {
368 color:#323234;
369 background-color: #fff;
370}
371.donate:hover {
372 background-color: #323234;
373 color: #fff;
374}
375.contact-card {
376 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
377 background: #4f4f4fff;
378 margin: 5px;
379 transition: 0.3s;
380 border-radius: 5px;
381 width: 20%;
382 text-align: center;
383}
384div.contact-card h1 {
385 font-size: 50px;
386 text-align: center;
387 line-height: 0px;
388}
389div.contact-card h2 {
390 font-size: 17px;
391 line-height: 27px;
392}
393.contact-card:hover {
394 box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
395}
396blockquote {
397 letter-spacing: 1px;
398 margin: 0px;
399 margin-top: 40px;
400 margin-bottom: 40px;
401 padding: 0px;
402 border-left: 4px solid #fff;
403 p {
404 margin-left: 20px;
405 font-size: 20px;
406 color: #bcbcbc;
407 font-weight: 400;
408 }
409 ul {
410 color: #bcbcbc;
411 }
412}
413.publish-date {
414 color: $iron;
415 font-weight: bold;
416}
417strong {
418 color: $iron;
419}
420
421/* =Header */
422.wrapper {
423 width: 70%;
424 margin: 100px auto;
425}
426
427.header {
428 overflow: hidden;
429 font-family: 'Overpass';
430}
431
432.navigation {
433 float:left;
434}
435
436.logo {
437 font-size: 50px;
438 font-weight: 700;
439 color: $iron;
440}
441
442.menu {
443 color: $cloudy;
444 font-size: 18px;
445 margin:0px;
446 margin-top: 6px;
447 padding: 0px;
448 list-style-type: none;
449}
450
451.menu-entry {
452 display: inline-block;
453 margin-right: 35px;
454
455 &:last-child {
456 margin-right: 0px;
457 }
458}
459
460.menu-entry a {
461 font-weight: 400;
462}
463
464.social-links {
465 float:right;
466 font-size: 24px;
467 color: $cloudy;
468 list-style-type: none;
469}
470
471.social-links-entry {
472 display: inline-block;
473 margin-left: 10px;
474}
475
476/* =Titles */
477.page-title {
478 margin-top:100px;
479 margin-bottom:75px;
480 text-align: center;
481 font-family: 'Overpass';
482}
483
484.page-title-text {
485 font-weight: 600;
486 font-size: 60px;
487}
488
489.page-title-subtitle {
490 font-weight: 400;
491 font-family: 'Inconsolata';
492 font-size: 22px;
493 color: $cloudy;
494}
495
496.post-title {
497 margin-bottom: 100px;
498 font-family: 'Overpass';
499}
500
501.post-title-text {
502 font-size: 40px;
503}
504
505.post-title-subtitle {
506 font-size: 20px;
507}
508
509/* =Post teasers */
510
511.list-posts {
512 list-style-type: none;
513 font-family: 'Overpass';
514 padding: 0px;
515}
516
517.post-teaser {
518 font-family: 'Overpass';
519}
520
521.post-teaser p {
522 font-weight: 200;
523 font-family: 'Open Sans';
524 font-size: 15px;
525 font-style: none;
526}
527
528.post-teaser-title {
529 font-size: 25px;
530 color: $iron;
531}
532
533.post-teaser-date {
534 font-size: 17px;
535 float: right;
536 vertical-align: middle;
537 color: $cloudy;
538 font-family: 'Inconsolata';
539}
540
541.empty-post-list {
542 font-size: 22px;
543 font-weight: 700;
544 color: $iron;
545 text-align: center;
546}
547
548/* =Explore */
549 .pagination {
550 text-align: center;
551 padding: 30px 0 45px;
552 margin: 0 auto;
553 max-width: 62.5rem;
554}
555 .pagination > a {
556 display: inline-block;
557 border-radius: 50% !important;
558 padding: 6px;
559 width: 32px;
560 height: 32px;
561 text-decoration: none;
562}
563 .pagination > a:hover {
564 background-color: transparent;
565}
566
567.explore {
568 text-align: center;
569 font-family: 'Inconsolata';
570 color: $cloudy;
571 margin-top: 80px;
572 word-break: break-all;
573}
574
575.explore-divider {
576 font-size: 18px;
577 letter-spacing: 8.18px;
578}
579
580.explore-label {
581 font-size: 14px;
582 margin-top: 15px;
583 font-family: 'Inconsolata';
584}
585
586.categories {
587 list-style-type: none;
588 font-family: 'Inconsolata';
589 margin-top: 15px;
590 padding: 0px;
591}
592
593.categories-item {
594 display: inline-block;
595 font-weight: 700;
596 font-size: 18px;
597}
598
599.categories-item a {
600 color: $iron;
601 font-family: 'Inconsolata';
602}
603
604.categories-item:after {
605 content: "/";
606 margin-left: 6px;
607 color: $cloudy;
608}
609
610.categories-item:last-child:after {
611 content: "";
612 margin-left: 0px;
613}
614
615
616/* =Post page */
617.about {
618 color: $cloudy;
619 margin-top: 50px;
620 text-align: center;
621 line-height: 24px;
622}
623
624.about-divider {
625 font-size: 20px;
626 margin-bottom: 10px;
627 letter-spacing: 9.09px;
628}
629
630.about-text {
631 font-size: 18px;
632}
633
634#disqus_thread {
635 margin-top: 100px;
636}
637@media (min-width: 1920px) {
638 .wrapper {
639 width: 50%
640 }
641}
642@media (min-width: 2560px) {
643 .wrapper {
644 width: 37%
645 }
646}
647@media (max-width: 1000px) {
648 .contact-card {
649 width: 28%;
650 }
651}
652@media screen and (max-width: 1000px) and (max-height:600px) {
653 .wrapper {
654 width: 75%;
655 }
656 .card {
657 width: 35%;
658 }
659}
660@media (max-width: 800px) {
661 /* =Base */
662 p {
663 font-size: 16px;
664 line-height: 1.6;
665 }
666
667 .wrapper {
668 width: 80%;
669 }
670
671 .navigation,
672 .social-links {
673 @include centered-block();
674 }
675
676 .social-links {
677 font-size: 30px;
678 margin-top: 35px;
679 }
680
681 .tags {
682 text-align: center;
683 }
684
685 time {
686 display: none;
687 }
688
689 .page-title {
690 margin-top: 80px;
691 margin-bottom: 60px;
692 }
693
694 .page-title-text {
695 font-size: 40px;
696 }
697
698 .page-title-subtitle {
699 font-size: 18px;
700 }
701
702 .post-teaser-title {
703 font-size: 18px;
704 @include centered-block();
705 }
706
707 .post-teaser-date {
708 font-size: 16px;
709 margin-top: 10px;
710 float: none;
711 @include centered-block();
712 }
713
714 .explore {
715 margin-top: 80px;
716 }
717
718 .post-title-text {
719 font-size: 28px;
720 }
721
722 .post-title-subtitle {
723 font-size: 18px;
724 }
725 .post-teaser p {
726 text-align: center;
727 }
728 .card {
729 width: 40%;
730 }
731 .contact-card {
732 width: 30%;
733 }
734 .crypto-card {
735 width: 70%;
736 }
737}
738@media (max-width: 620px) {
739 input[type=text] {
740 width: 80%;
741 }
742 input[type=text]:focus {
743 width: 100%;
744 }
745 .card {
746 width: 80%;
747 }
748 .wrapper {
749 width: 84%;
750 }
751 .contact-card {
752 width: 45%;
753 }
754 .crypto-card {
755 width: 70%;
756 }
757}
758@media (max-width: 400px) {
759 .card {
760 width: 100%;
761 }
762 .contact-card {
763 width: 100%;
764 }
765 .crypto-card {
766 width: 100%;
767 }
768}
769;