source: main/waeup-hugo/public/sass/base/_typography.scss @ 15185

Last change on this file since 15185 was 14926, checked in by Henrik Bettermann, 7 years ago
File size: 3.1 KB
Line 
1///
2/// Dimension by HTML5 UP
3/// html5up.net | @ajlkn
4/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5///
6
7/* Type */
8
9        html {
10                font-size: 16pt;
11
12                @include breakpoint(xlarge) {
13                        font-size: 12pt;
14                }
15
16                @include breakpoint(small) {
17                        font-size: 11pt;
18                }
19
20                @include breakpoint(xxsmall) {
21                        font-size: 10pt;
22                }
23        }
24
25        body, input, select, textarea {
26                color: _palette(fg);
27                font-family: _font(family);
28                font-weight: _font(weight);
29                font-size: 1rem;
30                line-height: 1.65;
31        }
32
33        a {
34                @include vendor('transition', (
35                        'color #{_duration(transition)} ease-in-out',
36                        'background-color #{_duration(transition)} ease-in-out',
37                        'border-bottom-color #{_duration(transition)} ease-in-out'
38                ));
39                border-bottom: dotted 1px _palette(fg-light);
40                text-decoration: none;
41                color: inherit;
42
43                &:hover {
44                        border-bottom-color: transparent;
45                }
46        }
47
48        strong, b {
49                color: _palette(fg-bold);
50                font-weight: _font(weight-bold);
51        }
52
53        em, i {
54                font-style: italic;
55        }
56
57        p {
58                margin: 0 0 _size(element-margin) 0;
59        }
60
61        h1, h2, h3, h4, h5, h6 {
62                color: _palette(fg-bold);
63                font-weight: _font(weight-bold);
64                line-height: 1.5;
65                margin: 0 0 (_size(element-margin) * 0.5) 0;
66                text-transform: uppercase;
67                letter-spacing: _font(letter-spacing);
68
69                a {
70                        color: inherit;
71                        text-decoration: none;
72                }
73
74                &.major {
75                        border-bottom: solid _size(border-width) _palette(border);
76                        width: -moz-max-content;
77                        width: -webkit-max-content;
78                        width: -ms-max-content;
79                        width: max-content;
80                        padding-bottom: 0.5rem;
81                        margin: 0 0 (_size(element-margin) * 1) 0;
82                }
83        }
84
85        h1 {
86                font-size: 2.25rem;
87                line-height: 1.3;
88                letter-spacing: _font(letter-spacing-heading);
89        }
90
91        h2 {
92                font-size: 1.5rem;
93                line-height: 1.4;
94                letter-spacing: _font(letter-spacing-heading);
95        }
96
97        h3 {
98                font-size: 1rem;
99        }
100
101        h4 {
102                font-size: 0.8rem;
103        }
104
105        h5 {
106                font-size: 0.7rem;
107        }
108
109        h6 {
110                font-size: 0.6rem;
111        }
112
113        @include breakpoint(small) {
114                h1 {
115                        font-size: 1.75rem;
116                        line-height: 1.4;
117                }
118
119                h2 {
120                        font-size: 1.25em;
121                        line-height: 1.5;
122                }
123        }
124
125        sub {
126                font-size: 0.8rem;
127                position: relative;
128                top: 0.5rem;
129        }
130
131        sup {
132                font-size: 0.8rem;
133                position: relative;
134                top: -0.5rem;
135        }
136
137        blockquote {
138                border-left: solid (_size(border-width) * 4) _palette(border);
139                font-style: italic;
140                margin: 0 0 _size(element-margin) 0;
141                padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
142        }
143
144        code {
145                background: _palette(border-bg);
146                border-radius: _size(border-radius);
147                font-family: _font(family-fixed);
148                font-size: 0.9rem;
149                margin: 0 0.25rem;
150                padding: 0.25rem 0.65rem;
151        }
152
153        pre {
154                -webkit-overflow-scrolling: touch;
155                font-family: _font(family-fixed);
156                font-size: 0.9rem;
157                margin: 0 0 _size(element-margin) 0;
158
159                code {
160                        display: block;
161                        line-height: 1.75;
162                        padding: 1rem 1.5rem;
163                        overflow-x: auto;
164                }
165        }
166
167        hr {
168                border: 0;
169                border-bottom: solid _size(border-width) _palette(border);
170                margin: (_size(element-margin) * 1.375) 0;
171        }
172
173        .align-left {
174                text-align: left;
175        }
176
177        .align-center {
178                text-align: center;
179        }
180
181        .align-right {
182                text-align: right;
183        }
Note: See TracBrowser for help on using the repository browser.