_06_typography.scss 10.9 KB
Newer Older
1
@charset "utf-8";
2
/* TOC – Typography
3

4
Check typography variables › _3_typography_settings.scss
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

- Links
- Customize Foundation Typography
- Headlines
- Images
- Lists
- Tables
- Code
- Quotes
- Typography for Articles
- Smaller Fontsize for Bigteaser on small devices
- Additional typographical elements
- Footnotes
- Icon Font

*/


Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
23

Moritz »mo.« Sauer's avatar
update    
Moritz »mo.« Sauer committed
24
25
26
27
/* Links
------------------------------------------------------------------- */

a,
28
29
30
a:link {
    transition: all .4s;
}
Moritz »mo.« Sauer's avatar
update    
Moritz »mo.« Sauer committed
31
32

a:visited {
33
    border-bottom: $grey-2;
Moritz »mo.« Sauer's avatar
update    
Moritz »mo.« Sauer committed
34
35
36
}

a:hover {
37
    color: darken( $ci-1, 10% );
Moritz »mo.« Sauer's avatar
update    
Moritz »mo.« Sauer committed
38
39
40
}

a:focus {
41
    color: lighten( $ci-1, 20% );
Moritz »mo.« Sauer's avatar
update    
Moritz »mo.« Sauer committed
42
43
44
}

a:active {
45
    color: darken( $ci-1, 20% );
Moritz »mo.« Sauer's avatar
update    
Moritz »mo.« Sauer committed
46
47
48
49
}



50
/* Customize Foundation Typography
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
51
52
------------------------------------------------------------------- */

53
p {
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
54
55
56
57
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
58
    -ms-word-break: normal;
plutonik's avatar
plutonik committed
59
    /* Non standard for webkit */
60
    word-break: normal;
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
61
62
}
p a,
63
64
article a,
li a {
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
65
66
67
68
69
70
71
    font-weight: bold;
    border-bottom: 1px dotted;
}
p a:hover,
article a:hover {
    border-bottom: 2px solid;
}
72
p a.button,
Moritz »mo.« Sauer's avatar
update    
Moritz »mo.« Sauer committed
73
.button,
74
.button:hover {
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
75
    border: 0;
Moritz »mo.« Sauer's avatar
update    
Moritz »mo.« Sauer committed
76
    color: #fff;
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
77
78
79
80
81
82
83
}
p.button a {
    border: 0;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

84
85


Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
86
87
88
89
90
91
92
/* Headlines
------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: $header-font-family;
    font-weight: normal;
    padding: 0;
Sietse Ringers's avatar
Sietse Ringers committed
93
94
95
96
97
98
99
    // a {
    //   position: relative;
    //   top: -2em;
    //   display: block;
    //   height: 0;
    //   width: 0;
    // }
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
}

h1 {
    font-size: $font-size-h1;
    margin-top: 0;
}
h2 {
    font-size: $font-size-h2;
    margin: 1.563em 0 0 0;
}
    .blog-index h2 {
        margin-top: 0;
    }
h3 {
    font-size: $font-size-h3;
Sietse Ringers's avatar
Sietse Ringers committed
115
    margin-top: 1.152em;
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
116
117
118
}
h4 {
    font-size: $font-size-h4;
Sietse Ringers's avatar
Sietse Ringers committed
119
    margin-top: 1.152em;
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
120
121
122
}
h5 {
    font-size: $font-size-h5;
Sietse Ringers's avatar
Sietse Ringers committed
123
    margin-top: 1em;
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
}



/* Images
------------------------------------------------------------------- */

img { border-radius: $global-radius;}
    img.alignleft,
    img.left        { float: left; margin:5px 15px 5px 0; }
    img.alignright,
    img.right       { float: right; margin:5px 0 5px 15px; }
    img.aligncenter,
    img.center      { display: block; margin:0 auto 10px; }

139
140
141
figure {
    margin: 0 0 rem-calc(30) 0;
}
142
143
144
145
146
147
#masthead-with-background-color figure,
#masthead-with-pattern figure {
    margin: 0;
}
figcaption,
.masthead-caption {
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
148
149
150
151
152
    color: $grey-10;
    font-family: $font-family-sans-serif;
    font-size: rem-calc(13);
    padding-top: rem-calc(2);
}
153
154
figcaption a,
.masthead-caption a {
155
156
157
    border-bottom: 1px dotted $grey-4;
    color: $grey-10;
}
158
159
160
161
162
163
164
165
166
figcaption a:hover,
.masthead-caption a:hover {
    border-bottom: 2px solid $primary-color;
    color: $primary-color;
}
.masthead-caption {
    padding-right: 10px;
    text-align: right;
}
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221



/* Tables
------------------------------------------------------------------- */

td {
    vertical-align: top;
}



/* Code
------------------------------------------------------------------- */

pre {
    overflow: auto;
    margin-bottom: rem-calc(20);
    padding: 5px;
    background-color: $code-background-color;
    border-radius: $global-radius;
}
pre code {
    padding: rem-calc(2) rem-calc(5) rem-calc(1) rem-calc(0);
    border: 0;
}

code {
    font-size: rem-calc(14);
    line-height: 1.5;
}



/* Lists
------------------------------------------------------------------- */

ul, ol {
    margin-left: 20px;
    padding: 0;
}
li {
    margin-left: 0;
}

.no-bullet {
    list-style: none;
    margin-left: 0;
}

li {
    > ul,
    > ol {
         margin-bottom: 0;
    }
222
223
224
    p {
         margin-bottom: 0;
    }
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
225
226
227
228
229
230
231
232
233
234
235
236
237
238
}

dl {

}
dt:first-child {
    padding-top: 0px;
}
dt {
    font-weight: bold;
    padding-top: 30px;
}
dd {
}
239
article dl dt   { line-height: 1.3; }
Sietse Ringers's avatar
Sietse Ringers committed
240
article dl dd   { line-height: 1.6; margin-bottom: rem-calc(12); margin-left: rem-calc(30); }
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
241
242
243
244
245
246
247
248
249
250
251



/* Quotes
------------------------------------------------------------------- */

blockquote {
    font-style: italic;
    position: relative;
    border: none;
    margin: 0 30px 30px 30px;
252
    color:  $grey-11;
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
253
}
254

Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
255
    blockquote p {font-style: italic; color: $grey-10; }
256

Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
257
258
259
    blockquote:before {
        display:block;content:"\00BB";
        font-size:80px;
260
        line-height: 0;
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
261
262
        position:absolute;
        left:-25px;
263
        top: auto;
264
        color: $grey-11;
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
265
266
267
268
269
    }
    blockquote:after {
        display:block;
        content:"\00AB";
        font-size:80px;
270
        line-height: 0;
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
271
272
        position:absolute;
        right:-10px;
273
        bottom: 20px;
274
        color: $grey-11;
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
275
276
277
278
279
    }
    blockquote cite:before {
        content:"\2014 \0020"
    }
    blockquote cite a,blockquote cite a:visited {
280
        color: $grey-10;
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
    }
cite {
    padding-top: 5px;
}

button, .button {
    letter-spacing: 1px;
}

mark {
    background-color: scale-color($warning-color, $lightness: 60%);
}



/* Typography for Articles
------------------------------------------------------------------- */

.subheadline {
    font-size: rem-calc(16);
    margin: 0;
    text-transform: uppercase;
}
.teaser {
    font-size: rem-calc(20);
}
.big-teaser {
    font-style: italic; font-weight: 300;
}
.big-teaser a {
    font-style: italic; font-weight: 400;
}

314
/* Smaller Fontsize for Bigteaser on small devices */
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
@media only screen {
    .big-teaser {
        font-size: rem-calc(20);
    }
}
@media only screen and (min-width: 40.063em) {
    .big-teaser         {
        font-size: rem-calc(29);
    }
}



/* Additional typographical elements
------------------------------------------------------------------- */

331
332
.sans           { font-family: $font-family-sans-serif; }
.serif          { font-family: $font-family-serif; }
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
333
334
335
336
337
338
339
340
341

.font-size-h1   { font-size: $font-size-h1; }
.font-size-h2   { font-size: $font-size-h2; }
.font-size-h3   { font-size: $font-size-h3; }
.font-size-h4   { font-size: $font-size-h4; }
.font-size-h5   { font-size: $font-size-h5; }
.font-size-p    { font-size: $font-size-p; }


342

Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
343
344
345
/* Footnotes
------------------------------------------------------------------- */

Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
346
347
348
349
350
351
352
353
.footnotes:before {
    content: "";
    position: absolute;
    height: 1px;
    width: 60px;
    margin-top: -10px;
    border-bottom: 1px solid $grey-2;
}
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
354
355
356
.footnotes {
    margin-top: 60px;
}
357
.footnotes ol {
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
358
359
    font-size: $font-size-small;
}
360
.footnotes p {
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
361
362
    font-size: inherit;
    margin-bottom: 0;
363
}
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
364
365


Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
366
367


368
/* Icon Font
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
   See the icon-set/preview in /assets/fonts/iconfont-preview.html
------------------------------------------------------------------- */

@font-face {
  font-family: 'iconfont';
  src: url('../fonts/iconfont.eot'); /* IE9 Compat Modes */
  src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/iconfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/iconfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/iconfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

.iconfont       { font-family: iconfont; }
.iconfont-48    { font-size: 48px; }


[data-icon]:before { content: attr(data-icon); }

[data-icon]:before,
.icon-archive:before,
.icon-browser:before,
.icon-calendar:before,
.icon-camera:before,
.icon-chat:before,
.icon-check:before,
.icon-chevron-down:before,
.icon-chevron-left:before,
.icon-chevron-right:before,
.icon-chevron-up:before,
.icon-circle-with-cross:before,
.icon-circle-with-minus:before,
.icon-circle-with-plus:before,
.icon-cloud:before,
.icon-code:before,
.icon-cog:before,
.icon-dropbox:before,
.icon-edit:before,
.icon-export:before,
.icon-eye:before,
.icon-facebook:before,
.icon-feather:before,
.icon-github:before,
.icon-globe:before,
412
.icon-googleplus:before,
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
.icon-heart:before,
.icon-heart-outlined:before,
.icon-home:before,
.icon-instagram:before,
.icon-lab-flask:before,
.icon-leaf:before,
.icon-linkedin:before,
.icon-mail:before,
.icon-message:before,
.icon-mic:before,
.icon-network:before,
.icon-paper-plane:before,
.icon-pinterest:before,
.icon-price-tag:before,
.icon-rocket:before,
.icon-rss:before,
.icon-soundcloud:before,
.icon-star:before,
.icon-star-outlined:before,
.icon-thumbs-down:before,
.icon-thumbs-up:before,
.icon-tree:before,
.icon-tumblr:before,
.icon-twitter:before,
.icon-upload-to-cloud:before,
.icon-video:before,
.icon-vimeo:before,
.icon-warning:before,
441
.icon-xing:before,
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
.icon-youtube:before {
  display: inline-block;
font-family: "iconfont";
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1;
text-decoration: inherit;
text-rendering: optimizeLegibility;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}

.icon-archive:before { content: "\f100"; }
.icon-browser:before { content: "\f101"; }
.icon-calendar:before { content: "\f133"; }
.icon-camera:before { content: "\f102"; }
.icon-chat:before { content: "\f103"; }
.icon-check:before { content: "\f104"; }
.icon-chevron-down:before { content: "\f105"; }
.icon-chevron-left:before { content: "\f106"; }
.icon-chevron-right:before { content: "\f107"; }
.icon-chevron-up:before { content: "\f108"; }
.icon-circle-with-cross:before { content: "\f109"; }
.icon-circle-with-minus:before { content: "\f10a"; }
.icon-circle-with-plus:before { content: "\f10b"; }
.icon-cloud:before { content: "\f10c"; }
.icon-code:before { content: "\f10d"; }
.icon-cog:before { content: "\f10e"; }
.icon-dropbox:before { content: "\f10f"; }
.icon-edit:before { content: "\f110"; }
.icon-export:before { content: "\f111"; }
.icon-eye:before { content: "\f112"; }
.icon-facebook:before { content: "\f113"; }
.icon-feather:before { content: "\f114"; }
.icon-github:before { content: "\f115"; }
.icon-globe:before { content: "\f116"; }
481
.icon-googleplus:before { content: "\f136"; }
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
.icon-heart:before { content: "\f117"; }
.icon-heart-outlined:before { content: "\f118"; }
.icon-home:before { content: "\f119"; }
.icon-instagram:before { content: "\f11a"; }
.icon-lab-flask:before { content: "\f11b"; }
.icon-leaf:before { content: "\f11c"; }
.icon-linkedin:before { content: "\f11d"; }
.icon-mail:before { content: "\f11e"; }
.icon-message:before { content: "\f11f"; }
.icon-mic:before { content: "\f120"; }
.icon-network:before { content: "\f121"; }
.icon-paper-plane:before { content: "\f122"; }
.icon-pinterest:before { content: "\f123"; }
.icon-price-tag:before { content: "\f124"; }
.icon-rocket:before { content: "\f125"; }
.icon-rss:before { content: "\f126"; }
.icon-soundcloud:before { content: "\f127"; }
.icon-star:before { content: "\f128"; }
.icon-star-outlined:before { content: "\f129"; }
.icon-thumbs-down:before { content: "\f12a"; }
.icon-thumbs-up:before { content: "\f12b"; }
.icon-tree:before { content: "\f134"; }
.icon-tumblr:before { content: "\f12c"; }
.icon-twitter:before { content: "\f12d"; }
.icon-upload-to-cloud:before { content: "\f12e"; }
.icon-video:before { content: "\f12f"; }
.icon-vimeo:before { content: "\f130"; }
.icon-warning:before { content: "\f131"; }
510
.icon-xing:before { content: "\f135"; }
Moritz »mo.« Sauer's avatar
Moritz »mo.« Sauer committed
511
.icon-youtube:before { content: "\f132"; }