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