1;
2@font-face {
3 font-family: 'Open Sans';
4 font-display: auto;
5 font-style: normal;
6 font-weight: 300;
7 src: url('assets/fonts/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
8 src: local('Open Sans Light'), local('OpenSans-Light'),
9 url('/assets/fonts/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
10 url('/assets/fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
11 url('/assets/fonts/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
12 url('/assets/fonts/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
13 url('/assets/fonts/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
14}
15@font-face {
16 font-family: 'Open Sans';
17 font-display: auto;
18 font-style: italic;
19 font-weight: 300;
20 src: url('/assets/fonts/open-sans-v15-latin-300italic.eot'); /* IE9 Compat Modes */
21 src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
22 url('/assets/fonts/open-sans-v15-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
23 url('/assets/fonts/open-sans-v15-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
24 url('/assets/fonts/open-sans-v15-latin-300italic.woff') format('woff'), /* Modern Browsers */
25 url('/assets/fonts/open-sans-v15-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
26 url('/assets/fonts/open-sans-v15-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
27}
28@font-face {
29 font-family: 'Inconsolata';
30 font-display: auto;
31 font-style: normal;
32 font-weight: 400;
33 src: url('/assets/fonts/inconsolata-v16-latin-regular.eot'); /* IE9 Compat Modes */
34 src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
35 url('/assets/fonts/inconsolata-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
36 url('/assets/fonts/inconsolata-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
37 url('/assets/fonts/inconsolata-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
38 url('/assets/fonts/inconsolata-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
39 url('/assets/fonts/inconsolata-v16-latin-regular.svg#Inconsolata') format('svg'); /* Legacy iOS */
40}
41@font-face {
42 font-family: 'Inconsolata';
43 font-display: auto;
44 font-style: normal;
45 font-weight: 700;
46 src: url('/assets/fonts/inconsolata-v16-latin-700.eot'); /* IE9 Compat Modes */
47 src: local('Inconsolata Bold'), local('Inconsolata-Bold'),
48 url('/assets/fonts/inconsolata-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
49 url('/assets/fonts/inconsolata-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
50 url('/assets/fonts/inconsolata-v16-latin-700.woff') format('woff'), /* Modern Browsers */
51 url('/assets/fonts/inconsolata-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
52 url('/assets/fonts/inconsolata-v16-latin-700.svg#Inconsolata') format('svg'); /* Legacy iOS */
53}
54@font-face {
55 font-family: 'Overpass';
56 font-display: auto;
57 font-style: normal;
58 font-weight: 400;
59 src: url('/assets/fonts/overpass-v2-latin-regular.eot'); /* IE9 Compat Modes */
60 src: local('Overpass Regular'), local('Overpass-Regular'),
61 url('/assets/fonts/overpass-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
62 url('/assets/fonts/overpass-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
63 url('/assets/fonts/overpass-v2-latin-regular.woff') format('woff'), /* Modern Browsers */
64 url('/assets/fonts/overpass-v2-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
65 url('/assets/fonts/overpass-v2-latin-regular.svg#Overpass') format('svg'); /* Legacy iOS */
66}
67
68/* =Base */
69input[type=text] {
70 width: 30%;
71 box-sizing: border-box;
72 border: 0px;
73 border-radius: 5px;
74 background-color: #292929;
75 font-size: 16px;
76 text-align: center;
77 padding: 10px 0px 10px 0px;
78 -webkit-transition: width 0.4s ease-in-out;
79 transition: width 0.4s ease-in-out;
80}
81input[type=text]:focus {
82 width: 75%;
83}
84body {
85 font-family: 'Open Sans';
86 color: $iron;
87 background-color: $dorian;
88}
89a {
90 color: $iron;
91 font-weight: bold;
92 text-decoration: none;
93}
94.content {
95 margin-top: -20px;
96 word-wrap: anywhere;
97}
98.content .headerlink {
99 display: none;
100 float: left;
101 padding-right: 4px;
102 margin-left: -30px;
103}
104.content .headerlink::before {
105 content: "\f0c1";
106 font-size: smaller;
107 font-family: "ForkAwesome";
108}
109.content h1:hover .headerlink {
110 display: block;
111}
112.content h2:hover .headerlink {
113 display: block;
114}
115.content h3:hover .headerlink {
116 display: block;
117}
118.content > h1,h2 {
119 border-bottom: 2px solid #fff;
120 padding-bottom: 7px;
121}
122.content > h3 {
123 font-size: 21px;
124}
125.content > h4 {
126 font-size: 19px;
127}
128.content a {
129 text-decoration: none;
130 font-weight: bold;
131 text-align: justify;
132 white-space: nowrap;
133}
134.content p a::after {
135 content: "\f08e";
136 font-size: 15px;
137 font-family: "ForkAwesome";
138 margin-left: 5px;
139}
140.content li a::after {
141 content: "\f08e";
142 font-size: 15px;
143 font-family: "ForkAwesome";
144 margin-left: 5px;
145}
146p {
147 font-size: 20px;
148 line-height: 32px;
149}
150p.center {
151 text-align: center;
152}
153ul {
154 font-size: 17px;
155 line-height: 27px;
156}
157ol {
158 font-size: 17px;
159 line-height: 27px;
160}
161img {
162 margin: 40px auto;
163 display: block;
164 max-width: 100%;
165}
166.post-image {
167 display: none;
168}
169.flex-wrapper {
170 display: flex;
171 justify-content: center;
172 background-color: #323234;
173}
174.flex-cards {
175 width: 100%;
176 display: flex;
177 flex-wrap: wrap;
178 background-color: #323234;
179 justify-content: center;
180}
181.card {
182 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
183 margin: 5px;
184 transition: 0.3s;
185 border-radius: 5px;
186 width: 28.3%;
187 background: #4f4f4fff;
188 padding: 15px;
189 font-size: 15px;
190 text-align: center;
191}
192div.card p {
193 font-size: 17px;
194 text-align: left;
195 line-height: 27px;
196}
197.card:hover {
198 box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
199}
200.crypto-card {
201 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
202 margin: 5px;
203 transition: 0.3s;
204 border-radius: 5px;
205 width: 35%;
206 background: #ffffffff;
207 padding: 15px;
208 font-size: 15px;
209 text-align: center;
210 color: #323234;
211 word-wrap: break-word;
212}
213div.crypto-card p {
214 font-size: 17px;
215 text-align: center;
216 line-height: 27px;
217}
218.crypto-card:hover {
219 box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
220}
221.button {
222 border-radius: 8px;
223 border: 0px;
224 color: #4f4f4f;
225 background-color: white;
226 padding: 16px 32px;
227 text-align: center;
228 text-decoration: none;
229 display: inline-block;
230 font-size: 16px;
231 margin: 4px 2px;
232 -webkit-transition-duration: 0.4s;
233 transition-duration: 0.4s;
234 cursor: pointer;
235 border: 2px solid #fff;
236}
237.button:hover {
238 background-color: #4f4f4f;
239 color: #FFFFFF;
240}
241.tor {
242 border-radius: 8px;
243 border: 0px;
244 color: #fff;
245 background-color: #7D4699;
246 padding: 16px 16px;
247 text-align: center;
248 text-decoration: none;
249 display: inline-block;
250 font-size: 16px;
251 -webkit-transition-duration: 0.4s;
252 transition-duration: 0.4s;
253 cursor: pointer;
254 border: 2px solid #7D4699;
255 margin-left: 10px;
256}
257.tor:hover {
258 background-color: #4f4f4f;
259 color: #fff;
260 border: 2px solid #fff;
261}
262.donate {
263 border-radius: 8px;
264 border: 0px;
265 color: #323234;
266 background-color: white;
267 padding: 5px 20px;
268 text-align: center;
269 text-decoration: none;
270 display: inline-block;
271 font-size: 16px;
272 margin: 4px 2px;
273 -webkit-transition-duration: 0.4s;
274 transition-duration: 0.4s;
275 cursor: pointer;
276 border: 2px solid #fff;
277}
278.donate:hover {
279 background-color: #323234;
280 color: #FFFFFF;
281}
282.contact-card {
283 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
284 background: #4f4f4fff;
285 margin: 5px;
286 transition: 0.3s;
287 border-radius: 5px;
288 width: 20%;
289 text-align: center;
290}
291div.contact-card h1 {
292 font-size: 50px;
293 text-align: center;
294 line-height: 0px;
295}
296div.contact-card h2 {
297 font-size: 17px;
298 line-height: 27px;
299}
300.contact-card:hover {
301 box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
302}
303blockquote {
304 letter-spacing: 1px;
305 margin: 0px;
306 margin-top: 40px;
307 margin-bottom: 40px;
308 padding: 0px;
309 border-left: 4px solid #fff;
310 p {
311 margin-left: 20px;
312 font-size: 20px;
313 color: #bcbcbc;
314 font-weight: 400;
315 }
316 ul {
317 color: #bcbcbc;
318 }
319}
320.publish-date {
321 color: $iron;
322 font-weight: bold;
323}
324strong {
325 color: $iron;
326}
327
328/* =Header */
329.wrapper {
330 width: 70%;
331 margin: 100px auto;
332}
333
334.header {
335 overflow: hidden;
336 font-family: 'Overpass';
337}
338
339.navigation {
340 float:left;
341}
342
343.logo {
344 font-size: 50px;
345 font-weight: 700;
346 color: $iron;
347 display: block;
348}
349
350.menu {
351 color: $cloudy;
352 font-size: 18px;
353 margin:0px;
354 margin-top: 6px;
355 padding: 0px;
356 list-style-type: none;
357}
358
359.menu-entry {
360 display: inline-block;
361 margin-right: 35px;
362
363 &:last-child {
364 margin-right: 0px;
365 }
366}
367
368.menu-entry a {
369 font-weight: 400;
370}
371
372.social-links {
373 float:right;
374 font-size: 24px;
375 color: $cloudy;
376 list-style-type: none;
377}
378
379.social-links-entry {
380 display: inline-block;
381 margin-left: 10px;
382}
383
384/* =Titles */
385.page-title {
386 margin-top:100px;
387 margin-bottom:75px;
388 text-align: center;
389 font-family: 'Overpass';
390}
391
392.page-title-text {
393 font-weight: 600;
394 font-size: 60px;
395}
396
397.page-title-subtitle {
398 font-weight: 400;
399 font-family: 'Inconsolata';
400 font-size: 22px;
401 color: $cloudy;
402}
403
404.post-title {
405 margin-bottom: 100px;
406 font-family: 'Overpass';
407}
408
409.post-title-text {
410 font-size: 40px;
411}
412
413.post-title-subtitle {
414 font-size: 20px;
415}
416
417/* =Post teasers */
418
419.list-posts {
420 list-style-type: none;
421 font-family: 'Overpass';
422 padding: 0px;
423}
424
425.post-teaser {
426 font-family: 'Overpass';
427}
428
429.post-teaser p {
430 margin-bottom: 55px;
431 font-weight: 200;
432 font-family: 'Open Sans';
433 font-size: 15px;
434 font-style: none;
435}
436
437.post-teaser-title {
438 font-size: 25px;
439 color: $iron;
440}
441
442.post-teaser-date {
443 font-size: 17px;
444 float: right;
445 vertical-align: middle;
446 color: $cloudy;
447 font-family: 'Inconsolata';
448}
449
450.empty-post-list {
451 font-size: 22px;
452 font-weight: 700;
453 color: $iron;
454 text-align: center;
455}
456
457/* =Explore */
458.explore {
459 text-align: center;
460 font-family: 'Inconsolata';
461 color: $cloudy;
462 margin-top: 80px;
463 word-wrap: anywhere;
464}
465
466.explore-divider {
467 font-size: 18px;
468 letter-spacing: 8.18px;
469}
470
471.explore-label {
472 font-size: 14px;
473 margin-top: 15px;
474 font-family: 'Inconsolata';
475}
476
477.categories {
478 list-style-type: none;
479 font-family: 'Inconsolata';
480 margin-top: 15px;
481 padding: 0px;
482}
483
484.categories-item {
485 display: inline-block;
486 font-weight: 700;
487 font-size: 18px;
488}
489
490.categories-item a {
491 color: $iron;
492 font-family: 'Inconsolata';
493}
494
495.categories-item:after {
496 content: "/";
497 margin-left: 6px;
498 color: $cloudy;
499}
500
501.categories-item:last-child:after {
502 content: "";
503 margin-left: 0px;
504}
505
506
507/* =Post page */
508.about {
509 color: $cloudy;
510 margin-top: 50px;
511 text-align: center;
512 line-height: 24px;
513}
514
515.about-divider {
516 font-size: 20px;
517 margin-bottom: 10px;
518 letter-spacing: 9.09px;
519}
520
521.about-text {
522 font-size: 18px;
523}
524
525#disqus_thread {
526 margin-top: 100px;
527}
528@media (min-width: 1920px) {
529 .wrapper {
530 width: 50%
531 }
532}
533@media (min-width: 2560px) {
534 .wrapper {
535 width: 37%
536 }
537}
538@media (max-width: 1000px) {
539 .contact-card {
540 width: 28%;
541 }
542}
543@media screen and (max-width: 1000px) and (max-height:600px) {
544 .wrapper {
545 width: 75%;
546 }
547 .card {
548 width: 35%;
549 }
550}
551@media (max-width: 800px) {
552 /* =Base */
553 p {
554 font-size: 16px;
555 line-height: 1.6;
556 }
557
558 .wrapper {
559 width: 80%;
560 }
561
562 .navigation,
563 .social-links {
564 @include centered-block();
565 }
566
567 .social-links {
568 font-size: 30px;
569 margin-top: 35px;
570 }
571
572 .page-title {
573 margin-top: 80px;
574 margin-bottom: 60px;
575 }
576
577 .page-title-text {
578 font-size: 40px;
579 }
580
581 .page-title-subtitle {
582 font-size: 18px;
583 }
584
585 .post-teaser-title {
586 font-size: 18px;
587 @include centered-block();
588 }
589
590 .post-teaser-date {
591 font-size: 16px;
592 margin-top: 10px;
593 float: none;
594 @include centered-block();
595 }
596
597 .explore {
598 margin-top: 80px;
599 }
600
601 .post-title-text {
602 font-size: 28px;
603 }
604
605 .post-title-subtitle {
606 font-size: 18px;
607 }
608 .post-teaser p {
609 text-align: center;
610 }
611 .card {
612 width: 40%;
613 }
614 .contact-card {
615 width: 30%;
616 }
617 .crypto-card {
618 width: 70%;
619 }
620}
621@media (max-width: 620px) {
622 input[type=text] {
623 width: 80%;
624 }
625 input[type=text]:focus {
626 width: 100%;
627 }
628 .card {
629 width: 80%;
630 }
631 .wrapper {
632 width: 84%;
633 }
634 .contact-card {
635 width: 45%;
636 }
637 .crypto-card {
638 width: 70%;
639 }
640}
641@media (max-width: 400px) {
642 .card {
643 width: 100%;
644 }
645 .contact-card {
646 width: 100%;
647 }
648 .crypto-card {
649 width: 100%;
650 }
651}
652;