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