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