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