Migrated from @blog -> @site
[editorial.git] / assets / main / sass / base / _typography.scss
1 ///
2 /// Editorial 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 body, input, select, textarea {
10 color: _palette(fg);
11 font-family: _font(family);
12 font-size: 13pt;
13 font-weight: _font(weight);
14 line-height: 1.65;
15
16 @include breakpoint('<=xlarge') {
17 font-size: 11pt;
18 }
19
20 @include breakpoint('<=large') {
21 font-size: 10pt;
22 }
23
24 @include breakpoint('<=xxsmall') {
25 font-size: 9pt;
26 }
27 }
28
29 a {
30 @include vendor('transition', (
31 'color #{_duration(transition)} ease-in-out',
32 'border-bottom-color #{_duration(transition)} ease-in-out'
33 ));
34 border-bottom: dotted 1px;
35 color: _palette(accent);
36 text-decoration: none;
37
38 &:hover {
39 border-bottom-color: _palette(accent);
40 color: _palette(accent) !important;
41
42 strong {
43 color: inherit;
44 }
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-family: _font(family-heading);
64 font-weight: _font(weight-heading);
65 line-height: 1.5;
66 margin: 0 0 (_size(element-margin) * 0.5) 0;
67
68 a {
69 color: inherit;
70 text-decoration: none;
71 border-bottom: 0;
72 }
73 }
74
75 h1 {
76 font-size: 4em;
77 margin: 0 0 (_size(element-margin) * 0.25) 0;
78 line-height: 1.3;
79 }
80
81 h2 {
82 font-size: 1.75em;
83 }
84
85 h3 {
86 font-size: 1.25em;
87 }
88
89 h4 {
90 font-size: 1.1em;
91 }
92
93 h5 {
94 font-size: 0.9em;
95 }
96
97 h6 {
98 font-size: 0.7em;
99 }
100
101 @include breakpoint('<=xlarge') {
102 h1 {
103 font-size: 3.5em;
104 }
105 }
106
107 @include breakpoint('<=medium') {
108 h1 {
109 font-size: 3.25em;
110 }
111 }
112
113 @include breakpoint('<=small') {
114 h1 {
115 font-size: 2em;
116 line-height: 1.4;
117 }
118
119 h2 {
120 font-size: 1.5em;
121 }
122 }
123
124 sub {
125 font-size: 0.8em;
126 position: relative;
127 top: 0.5em;
128 }
129
130 sup {
131 font-size: 0.8em;
132 position: relative;
133 top: -0.5em;
134 }
135
136 blockquote {
137 border-left: solid 3px _palette(border);
138 font-style: italic;
139 margin: 0 0 _size(element-margin) 0;
140 padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
141 }
142
143 code {
144 background: _palette(border-bg);
145 border-radius: _size(border-radius);
146 border: solid 1px _palette(border);
147 font-family: _font(family-fixed);
148 font-size: 0.9em;
149 margin: 0 0.25em;
150 padding: 0.25em 0.65em;
151 }
152
153 pre {
154 -webkit-overflow-scrolling: touch;
155 font-family: _font(family-fixed);
156 font-size: 0.9em;
157 margin: 0 0 _size(element-margin) 0;
158
159 code {
160 display: block;
161 line-height: 1.75;
162 padding: 1em 1.5em;
163 overflow-x: auto;
164 }
165 }
166
167 hr {
168 border: 0;
169 border-bottom: solid 1px _palette(border);
170 margin: _size(element-margin) 0;
171
172 &.major {
173 margin: (_size(element-margin) * 1.5) 0;
174 }
175 }
176
177 .align-left {
178 text-align: left;
179 }
180
181 .align-center {
182 text-align: center;
183 }
184
185 .align-right {
186 text-align: right;
187 }