added signature in contact page
[theme-danix.xyz.git] / assets / sass / base / _typography.scss
CommitLineData
748286b5 1///\r
2/// Forty by HTML5 UP\r
3/// html5up.net | @ajlkn\r
4/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
5///\r
6\r
7/* Type */\r
8\r
9 body, input, select, textarea {\r
cb4379e1 10 color: _palette_light(fg);\r
11 @media screen and (prefers-color-scheme: dark) {\r
12 color: _palette_dark(fg);\r
13 }\r
748286b5 14 font-family: _font(family);\r
15 font-size: 17pt;\r
16 font-weight: _font(weight);\r
17 letter-spacing: _font(letter-spacing);\r
18 line-height: 1.65;\r
19\r
20 @include breakpoint('<=xlarge') {\r
21 font-size: 14pt;\r
22 }\r
23\r
24 @include breakpoint('<=large') {\r
25 font-size: 12pt;\r
26 }\r
27\r
28 @include breakpoint('<=xxsmall') {\r
29 font-size: 11pt;\r
30 }\r
31 }\r
32\r
33 a {\r
34 @include vendor('transition', (\r
35 'color #{_duration(transition)} ease-in-out',\r
36 'border-bottom-color #{_duration(transition)} ease-in-out'\r
37 ));\r
38 border-bottom: dotted 1px;\r
39 color: inherit;\r
40 text-decoration: none;\r
41\r
42 &:hover {\r
43 border-bottom-color: transparent;\r
cb4379e1 44 color: _palette_light(highlight) !important;\r
45 @media screen and (prefers-color-scheme: dark) {\r
46 color: _palette_dark(highlight);\r
47 }\r
748286b5 48 }\r
49\r
50 &:active {\r
cb4379e1 51 color: desaturate(darken(_palette_light(highlight), 15), 5) !important;\r
52 @media screen and (prefers-color-scheme: dark) {\r
53 color: desaturate(darken(_palette_dark(highlight), 15), 5) !important;\r
54 }\r
748286b5 55 }\r
56 }\r
57\r
58 strong, b {\r
cb4379e1 59 color: _palette_light(fg-bold);\r
60 @media screen and (prefers-color-scheme: dark) {\r
61 color: _palette_dark(fg-bold);\r
62 }\r
748286b5 63 font-weight: _font(weight-bold);\r
64 }\r
65\r
66 em, i {\r
67 font-style: italic;\r
68 }\r
69\r
70 p {\r
71 margin: 0 0 _size(element-margin) 0;\r
72 }\r
73\r
74 h1, h2, h3, h4, h5, h6 {\r
cb4379e1 75 color: _palette_light(fg-bold);\r
76 @media screen and (prefers-color-scheme: dark) {\r
77 color: _palette_dark(fg-bold);\r
78 }\r
748286b5 79 font-weight: _font(weight-bold);\r
80 line-height: 1.65;\r
81 margin: 0 0 (_size(element-margin) * 0.5) 0;\r
82\r
83 a {\r
84 color: inherit;\r
85 border-bottom: 0;\r
86 }\r
87 }\r
88\r
89 h1 {\r
90 font-size: 2.5em;\r
91 }\r
92\r
93 h2 {\r
94 font-size: 1.75em;\r
95 }\r
96\r
97 h3 {\r
98 font-size: 1.35em;\r
99 }\r
100\r
101 h4 {\r
102 font-size: 1.1em;\r
103 }\r
104\r
105 h5 {\r
106 font-size: 0.9em;\r
107 }\r
108\r
109 h6 {\r
110 font-size: 0.7em;\r
111 }\r
112\r
113 @include breakpoint('<=small') {\r
114 h1 {\r
115 font-size: 2em;\r
116 }\r
117\r
118 h2 {\r
119 font-size: 1.5em;\r
120 }\r
121\r
122 h3 {\r
123 font-size: 1.25em;\r
124 }\r
125 }\r
126\r
127 sub {\r
128 font-size: 0.8em;\r
129 position: relative;\r
130 top: 0.5em;\r
131 }\r
132\r
133 sup {\r
134 font-size: 0.8em;\r
135 position: relative;\r
136 top: -0.5em;\r
137 }\r
138\r
139 blockquote {\r
cb4379e1 140 border-left: solid 4px _palette_light(border);\r
141 @media screen and (prefers-color-scheme: dark) {\r
142 border-left: solid 4px _palette_dark(border);\r
143 }\r
748286b5 144 font-style: italic;\r
145 margin: 0 0 _size(element-margin) 0;\r
146 padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);\r
147 }\r
148\r
149 code {\r
cb4379e1 150 background: _palette_light(border-bg);\r
151 @media screen and (prefers-color-scheme: dark) {\r
152 background: _palette_dark(border-bg);\r
153 }\r
748286b5 154 font-family: _font(family-fixed);\r
155 font-size: 0.9em;\r
156 margin: 0 0.25em;\r
157 padding: 0.25em 0.65em;\r
158 }\r
159\r
160 pre {\r
161 -webkit-overflow-scrolling: touch;\r
162 font-family: _font(family-fixed);\r
163 font-size: 0.9em;\r
164 margin: 0 0 _size(element-margin) 0;\r
165\r
166 code {\r
167 display: block;\r
168 line-height: 1.75;\r
169 padding: 1em 1.5em;\r
170 overflow-x: auto;\r
171 }\r
172 }\r
173\r
174 hr {\r
175 border: 0;\r
cb4379e1 176 border-bottom: solid 1px _palette_light(border);\r
177 @media screen and (prefers-color-scheme: dark) {\r
178 border-bottom: solid 1px _palette_dark(border);\r
179 }\r
748286b5 180 margin: _size(element-margin) 0;\r
181\r
182 &.major {\r
183 margin: (_size(element-margin) * 1.5) 0;\r
184 }\r
185 }\r
186\r
187 .align-left {\r
188 text-align: left;\r
189 }\r
190\r
191 .align-center {\r
192 text-align: center;\r
193 }\r
194\r
195 .align-right {\r
196 text-align: right;\r
197 }\r
198\r
199 .screen-reader-text,\r
37ce5147 200 .hidden,\r
201 .js-hidden {\r
748286b5 202 @include hide-visually;\r
203 }\r
0042e5bc 204\r
205 // large code blocks are wrapped in the highlight shortcode\r
206 .highlight {\r
207 max-width: 100%;\r
208 overflow-x: auto;\r
b96eccb7 209 }\r
210\r
211 .has-dropcap:first-letter {\r
212 font-family: _font(family-fixed);\r
213 font-weight: 900;\r
214 float: left;\r
215 font-size: 6rem;\r
216 line-height: 0.65;\r
217 margin: 0.1em 0.1em 0.2em 0;\r
218 }\r
219\r