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}
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.donate:hover {
289 background-color: #323234;
290 color: #FFFFFF;
291}
292.contact-card {
293 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
294 background: #4f4f4fff;
295 margin: 5px;
296 transition: 0.3s;
297 border-radius: 5px;
298 width: 20%;
299 text-align: center;
300}
301div.contact-card h1 {
302 font-size: 50px;
303 text-align: center;
304 line-height: 0px;
305}
306div.contact-card h2 {
307 font-size: 17px;
308 line-height: 27px;
309}
310.contact-card:hover {
311 box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
312}
313blockquote {
314 letter-spacing: 1px;
315 margin: 0px;
316 margin-top: 40px;
317 margin-bottom: 40px;
318 padding: 0px;
319 border-left: 4px solid #fff;
320 p {
321 margin-left: 20px;
322 font-size: 20px;
323 color: #bcbcbc;
324 font-weight: 400;
325 }
326 ul {
327 color: #bcbcbc;
328 }
329}
330.publish-date {
331 color: $iron;
332 font-weight: bold;
333}
334strong {
335 color: $iron;
336}
337
338/* =Header */
339.wrapper {
340 width: 70%;
341 margin: 100px auto;
342}
343
344.header {
345 overflow: hidden;
346 font-family: 'Overpass';
347}
348
349.navigation {
350 float:left;
351}
352
353.logo {
354 font-size: 50px;
355 font-weight: 700;
356 color: $iron;
357}
358
359.menu {
360 color: $cloudy;
361 font-size: 18px;
362 margin:0px;
363 margin-top: 6px;
364 padding: 0px;
365 list-style-type: none;
366}
367
368.menu-entry {
369 display: inline-block;
370 margin-right: 35px;
371
372 &:last-child {
373 margin-right: 0px;
374 }
375}
376
377.menu-entry a {
378 font-weight: 400;
379}
380
381.social-links {
382 float:right;
383 font-size: 24px;
384 color: $cloudy;
385 list-style-type: none;
386}
387
388.social-links-entry {
389 display: inline-block;
390 margin-left: 10px;
391}
392
393/* =Titles */
394.page-title {
395 margin-top:100px;
396 margin-bottom:75px;
397 text-align: center;
398 font-family: 'Overpass';
399}
400
401.page-title-text {
402 font-weight: 600;
403 font-size: 60px;
404}
405
406.page-title-subtitle {
407 font-weight: 400;
408 font-family: 'Inconsolata';
409 font-size: 22px;
410 color: $cloudy;
411}
412
413.post-title {
414 margin-bottom: 100px;
415 font-family: 'Overpass';
416}
417
418.post-title-text {
419 font-size: 40px;
420}
421
422.post-title-subtitle {
423 font-size: 20px;
424}
425
426/* =Post teasers */
427
428.list-posts {
429 list-style-type: none;
430 font-family: 'Overpass';
431 padding: 0px;
432}
433
434.post-teaser {
435 font-family: 'Overpass';
436}
437
438.post-teaser p {
439 margin-bottom: 55px;
440 font-weight: 200;
441 font-family: 'Open Sans';
442 font-size: 15px;
443 font-style: none;
444}
445
446.post-teaser-title {
447 font-size: 25px;
448 color: $iron;
449}
450
451.post-teaser-date {
452 font-size: 17px;
453 float: right;
454 vertical-align: middle;
455 color: $cloudy;
456 font-family: 'Inconsolata';
457}
458
459.empty-post-list {
460 font-size: 22px;
461 font-weight: 700;
462 color: $iron;
463 text-align: center;
464}
465
466/* =Explore */
467.explore {
468 text-align: center;
469 font-family: 'Inconsolata';
470 color: $cloudy;
471 margin-top: 80px;
472 word-wrap: anywhere;
473}
474
475.explore-divider {
476 font-size: 18px;
477 letter-spacing: 8.18px;
478}
479
480.explore-label {
481 font-size: 14px;
482 margin-top: 15px;
483 font-family: 'Inconsolata';
484}
485
486.categories {
487 list-style-type: none;
488 font-family: 'Inconsolata';
489 margin-top: 15px;
490 padding: 0px;
491}
492
493.categories-item {
494 display: inline-block;
495 font-weight: 700;
496 font-size: 18px;
497}
498
499.categories-item a {
500 color: $iron;
501 font-family: 'Inconsolata';
502}
503
504.categories-item:after {
505 content: "/";
506 margin-left: 6px;
507 color: $cloudy;
508}
509
510.categories-item:last-child:after {
511 content: "";
512 margin-left: 0px;
513}
514
515
516/* =Post page */
517.about {
518 color: $cloudy;
519 margin-top: 50px;
520 text-align: center;
521 line-height: 24px;
522}
523
524.about-divider {
525 font-size: 20px;
526 margin-bottom: 10px;
527 letter-spacing: 9.09px;
528}
529
530.about-text {
531 font-size: 18px;
532}
533
534#disqus_thread {
535 margin-top: 100px;
536}
537@media (min-width: 1920px) {
538 .wrapper {
539 width: 50%
540 }
541}
542@media (min-width: 2560px) {
543 .wrapper {
544 width: 37%
545 }
546}
547@media (max-width: 1000px) {
548 .contact-card {
549 width: 28%;
550 }
551}
552@media screen and (max-width: 1000px) and (max-height:600px) {
553 .wrapper {
554 width: 75%;
555 }
556 .card {
557 width: 35%;
558 }
559}
560@media (max-width: 800px) {
561 /* =Base */
562 p {
563 font-size: 16px;
564 line-height: 1.6;
565 }
566
567 .wrapper {
568 width: 80%;
569 }
570
571 .navigation,
572 .social-links {
573 @include centered-block();
574 }
575
576 .social-links {
577 font-size: 30px;
578 margin-top: 35px;
579 }
580
581 .page-title {
582 margin-top: 80px;
583 margin-bottom: 60px;
584 }
585
586 .page-title-text {
587 font-size: 40px;
588 }
589
590 .page-title-subtitle {
591 font-size: 18px;
592 }
593
594 .post-teaser-title {
595 font-size: 18px;
596 @include centered-block();
597 }
598
599 .post-teaser-date {
600 font-size: 16px;
601 margin-top: 10px;
602 float: none;
603 @include centered-block();
604 }
605
606 .explore {
607 margin-top: 80px;
608 }
609
610 .post-title-text {
611 font-size: 28px;
612 }
613
614 .post-title-subtitle {
615 font-size: 18px;
616 }
617 .post-teaser p {
618 text-align: center;
619 }
620 .card {
621 width: 40%;
622 }
623 .contact-card {
624 width: 30%;
625 }
626 .crypto-card {
627 width: 70%;
628 }
629}
630@media (max-width: 620px) {
631 input[type=text] {
632 width: 80%;
633 }
634 input[type=text]:focus {
635 width: 100%;
636 }
637 .card {
638 width: 80%;
639 }
640 .wrapper {
641 width: 84%;
642 }
643 .contact-card {
644 width: 45%;
645 }
646 .crypto-card {
647 width: 70%;
648 }
649}
650@media (max-width: 400px) {
651 .card {
652 width: 100%;
653 }
654 .contact-card {
655 width: 100%;
656 }
657 .crypto-card {
658 width: 100%;
659 }
660}
661;