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
289.tags {
290 margin-bottom: 3rem;
291 font-family: 'Open Sans';
292}
293.list-tags a {
294 font-size: 1rem;
295 color: #fff;
296 display:inline-block;
297 border:1px solid #fff;
298 border-radius:.313rem;
299 padding:.25rem .625rem;
300 margin-right:.125rem;
301 margin-bottom:.5rem;
302 text-decoration:none !important;
303 -webkit-user-select: none;
304 -moz-user-select: none;
305 -ms-user-select: none;
306 user-select: none;
307 transition-duration: 0.4s;
308}
309.tag-title {
310 font-family: 'Overpass',sans-serif;
311 font-weight: 400;
312 font-style: normal;
313 font-size: 2.25rem;
314 margin-top: 3.75rem;
315 width: auto;
316 float: none;
317 display: block;
318 margin-right: auto;
319 margin-left: auto;
320 padding-left: 0;
321 padding-right: 0;
322 color: #fff;
323}
324.tag-list {
325 list-style-type: none;
326 font-family: 'Overpass';
327 padding: 0px;
328}
329.tag-list li {
330 font-family: 'Overpass';
331 border-bottom: 1px solid #fff;
332 padding: .625rem 0;
333}
334.tag-list span {
335 font-weight: 500;
336 font-size: 20px;
337 color: $iron;
338}
339.meta {
340 font-size: 15px!important;
341}
342.meta {
343 font-size: 1rem;
344 color: #fff;
345 display:inline-block;
346 border:1px solid #fff;
347 border-radius:.313rem;
348 padding:.15rem .6rem;
349 margin-right:.125rem;
350 margin-bottom:.5rem;
351 text-decoration:none !important;
352 -webkit-user-select: none;
353 -moz-user-select: none;
354 -ms-user-select: none;
355 user-select: none;
356 transition-duration: 0.4s;
357}
358time {
359 font-family: Overpass;
360 font-size: 20px;
361 font-weight: 500;
362 float: right;
363 vertical-align: middle;
364}
365.tags a:hover {
366 color:#323234;
367 background-color: #fff;
368}
369.donate:hover {
370 background-color: #323234;
371 color: #fff;
372}
373.contact-card {
374 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
375 background: #4f4f4fff;
376 margin: 5px;
377 transition: 0.3s;
378 border-radius: 5px;
379 width: 20%;
380 text-align: center;
381}
382div.contact-card h1 {
383 font-size: 50px;
384 text-align: center;
385 line-height: 0px;
386}
387div.contact-card h2 {
388 font-size: 17px;
389 line-height: 27px;
390}
391.contact-card:hover {
392 box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
393}
394blockquote {
395 letter-spacing: 1px;
396 margin: 0px;
397 margin-top: 40px;
398 margin-bottom: 40px;
399 padding: 0px;
400 border-left: 4px solid #fff;
401 p {
402 margin-left: 20px;
403 font-size: 20px;
404 color: #bcbcbc;
405 font-weight: 400;
406 }
407 ul {
408 color: #bcbcbc;
409 }
410}
411.publish-date {
412 color: $iron;
413 font-weight: bold;
414}
415strong {
416 color: $iron;
417}
418
419/* =Header */
420.wrapper {
421 width: 70%;
422 margin: 100px auto;
423}
424
425.header {
426 overflow: hidden;
427 font-family: 'Overpass';
428}
429
430.navigation {
431 float:left;
432}
433
434.logo {
435 font-size: 50px;
436 font-weight: 700;
437 color: $iron;
438}
439
440.menu {
441 color: $cloudy;
442 font-size: 18px;
443 margin:0px;
444 margin-top: 6px;
445 padding: 0px;
446 list-style-type: none;
447}
448
449.menu-entry {
450 display: inline-block;
451 margin-right: 35px;
452
453 &:last-child {
454 margin-right: 0px;
455 }
456}
457
458.menu-entry a {
459 font-weight: 400;
460}
461
462.social-links {
463 float:right;
464 font-size: 24px;
465 color: $cloudy;
466 list-style-type: none;
467}
468
469.social-links-entry {
470 display: inline-block;
471 margin-left: 10px;
472}
473
474/* =Titles */
475.page-title {
476 margin-top:100px;
477 margin-bottom:75px;
478 text-align: center;
479 font-family: 'Overpass';
480}
481
482.page-title-text {
483 font-weight: 600;
484 font-size: 60px;
485}
486
487.page-title-subtitle {
488 font-weight: 400;
489 font-family: 'Inconsolata';
490 font-size: 22px;
491 color: $cloudy;
492}
493
494.post-title {
495 margin-bottom: 100px;
496 font-family: 'Overpass';
497}
498
499.post-title-text {
500 font-size: 40px;
501}
502
503.post-title-subtitle {
504 font-size: 20px;
505}
506
507/* =Post teasers */
508
509.list-posts {
510 list-style-type: none;
511 font-family: 'Overpass';
512 padding: 0px;
513}
514
515.post-teaser {
516 font-family: 'Overpass';
517}
518
519.post-teaser p {
520 font-weight: 200;
521 font-family: 'Open Sans';
522 font-size: 15px;
523 font-style: none;
524}
525
526.post-teaser-title {
527 font-size: 25px;
528 color: $iron;
529}
530
531.post-teaser-date {
532 font-size: 17px;
533 float: right;
534 vertical-align: middle;
535 color: $cloudy;
536 font-family: 'Inconsolata';
537}
538
539.empty-post-list {
540 font-size: 22px;
541 font-weight: 700;
542 color: $iron;
543 text-align: center;
544}
545
546/* =Explore */
547 .pagination {
548 text-align: center;
549 padding: 30px 0 45px;
550 margin: 0 auto;
551 max-width: 62.5rem;
552}
553 .pagination > a {
554 display: inline-block;
555 border-radius: 50% !important;
556 padding: 6px;
557 width: 32px;
558 height: 32px;
559 text-decoration: none;
560}
561 .pagination > a:hover {
562 background-color: transparent;
563}
564
565.explore {
566 text-align: center;
567 font-family: 'Inconsolata';
568 color: $cloudy;
569 margin-top: 80px;
570 word-break: break-all;
571}
572
573.explore-divider {
574 font-size: 18px;
575 letter-spacing: 8.18px;
576}
577
578.explore-label {
579 font-size: 14px;
580 margin-top: 15px;
581 font-family: 'Inconsolata';
582}
583
584.categories {
585 list-style-type: none;
586 font-family: 'Inconsolata';
587 margin-top: 15px;
588 padding: 0px;
589}
590
591.categories-item {
592 display: inline-block;
593 font-weight: 700;
594 font-size: 18px;
595}
596
597.categories-item a {
598 color: $iron;
599 font-family: 'Inconsolata';
600}
601
602.categories-item:after {
603 content: "/";
604 margin-left: 6px;
605 color: $cloudy;
606}
607
608.categories-item:last-child:after {
609 content: "";
610 margin-left: 0px;
611}
612
613
614/* =Post page */
615.about {
616 color: $cloudy;
617 margin-top: 50px;
618 text-align: center;
619 line-height: 24px;
620}
621
622.about-divider {
623 font-size: 20px;
624 margin-bottom: 10px;
625 letter-spacing: 9.09px;
626}
627
628.about-text {
629 font-size: 18px;
630}
631
632#disqus_thread {
633 margin-top: 100px;
634}
635@media (min-width: 1920px) {
636 .wrapper {
637 width: 50%
638 }
639}
640@media (min-width: 2560px) {
641 .wrapper {
642 width: 37%
643 }
644}
645@media (max-width: 1000px) {
646 .contact-card {
647 width: 28%;
648 }
649}
650@media screen and (max-width: 1000px) and (max-height:600px) {
651 .wrapper {
652 width: 75%;
653 }
654 .card {
655 width: 35%;
656 }
657}
658@media (max-width: 800px) {
659 /* =Base */
660 p {
661 font-size: 16px;
662 line-height: 1.6;
663 }
664
665 .wrapper {
666 width: 80%;
667 }
668
669 .navigation,
670 .social-links {
671 @include centered-block();
672 }
673
674 .social-links {
675 font-size: 30px;
676 margin-top: 35px;
677 }
678
679 .tags {
680 text-align: center;
681 }
682
683 time {
684 float: none;
685 }
686
687 time::before {
688 content: " - ";
689 }
690
691 .page-title {
692 margin-top: 80px;
693 margin-bottom: 60px;
694 }
695
696 .page-title-text {
697 font-size: 40px;
698 }
699
700 .page-title-subtitle {
701 font-size: 18px;
702 }
703
704 .post-teaser-title {
705 font-size: 18px;
706 @include centered-block();
707 }
708
709 .post-teaser-date {
710 font-size: 16px;
711 margin-top: 10px;
712 float: none;
713 @include centered-block();
714 }
715
716 .explore {
717 margin-top: 80px;
718 }
719
720 .post-title-text {
721 font-size: 28px;
722 }
723
724 .post-title-subtitle {
725 font-size: 18px;
726 }
727 .post-teaser p {
728 text-align: center;
729 }
730 .card {
731 width: 40%;
732 }
733 .contact-card {
734 width: 30%;
735 }
736 .crypto-card {
737 width: 70%;
738 }
739}
740@media (max-width: 620px) {
741 input[type=text] {
742 width: 80%;
743 }
744 input[type=text]:focus {
745 width: 100%;
746 }
747 .card {
748 width: 80%;
749 }
750 .wrapper {
751 width: 84%;
752 }
753 .contact-card {
754 width: 45%;
755 }
756 .crypto-card {
757 width: 70%;
758 }
759}
760@media (max-width: 400px) {
761 .card {
762 width: 100%;
763 }
764 .contact-card {
765 width: 100%;
766 }
767 .crypto-card {
768 width: 100%;
769 }
770}
771;