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