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