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