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