1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | $nn-grey-bg : #f2f4f6 !default;
|
9 | $nn-grey-border : #d2d4d6 !default;
|
10 | $nn-green-bg : #ddffee !default;
|
11 | $nn-green-border: #00ddaa !default;
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 | $nn-sans-serif : -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, YuGothic, "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 | $nn-serif : Georgia, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 | $nn-monospace : MeiryoKe_Gothic, "Ricty Diminished", Osaka-mono, "MS Gothic", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 | :root {
|
47 |
|
48 | --nn-grey-bg: #f2f4f6;
|
49 | --nn-grey-border: #d2d4d6;
|
50 | --nn-green-bg: #ddffee;
|
51 | --nn-green-border: #00ddaa;
|
52 | --nn-sans-serif: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, YuGothic, "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
53 | --nn-serif: Georgia, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
54 | --nn-monospace: MeiryoKe_Gothic, "Ricty Diminished", Osaka-mono, "MS Gothic", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
55 | }
|
56 |
|
57 |
|
58 | *,
|
59 | ::before,
|
60 | ::after {
|
61 | box-sizing: border-box;
|
62 | }
|
63 |
|
64 |
|
65 | html {
|
66 |
|
67 | font-family: $nn-sans-serif;
|
68 |
|
69 | overflow-y: scroll;
|
70 | cursor: default;
|
71 |
|
72 | text-decoration-skip-ink: none;
|
73 |
|
74 | -webkit-text-size-adjust: 100%;
|
75 |
|
76 | -webkit-text-decoration-skip: objects;
|
77 |
|
78 | -webkit-overflow-scrolling: touch;
|
79 | }
|
80 |
|
81 |
|
82 | body {
|
83 | margin: 0;
|
84 | line-height: 1.7;
|
85 | overflow-wrap: break-word;
|
86 |
|
87 | word-wrap: break-word;
|
88 | }
|
89 |
|
90 |
|
91 | details, main {
|
92 | display: block;
|
93 | }
|
94 |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 |
|
100 |
|
101 | h1, h2, h3, h4, h5, h6, p, hr,
|
102 | dl, dt, dd, ol, ul,
|
103 | address, details, figcaption, fieldset, form, pre, summary, table {
|
104 | margin-top: 0;
|
105 | margin-bottom: 1rem;
|
106 | }
|
107 |
|
108 |
|
109 | ol ol, ol ul,
|
110 | ul ol, ul ul,
|
111 | blockquote > :last-child,
|
112 | fieldset > :last-child,
|
113 | pre > :last-child {
|
114 | margin-bottom: 0;
|
115 | }
|
116 |
|
117 |
|
118 | dd, li {
|
119 | margin-left: 2.5em;
|
120 | }
|
121 |
|
122 |
|
123 | blockquote, figure {
|
124 | margin: 0 0 1rem 2.5em;
|
125 | }
|
126 |
|
127 |
|
128 | ol, ul {
|
129 | padding-left: 0;
|
130 | }
|
131 |
|
132 |
|
133 |
|
134 |
|
135 |
|
136 |
|
137 |
|
138 | h1 {
|
139 | font-size: 2em;
|
140 | }
|
141 |
|
142 | h2 {
|
143 | font-size: 1.7em;
|
144 | }
|
145 |
|
146 | h3 {
|
147 | font-size: 1.5em;
|
148 | }
|
149 |
|
150 | h4 {
|
151 | font-size: 1.2em;
|
152 | }
|
153 |
|
154 | h5, h6 {
|
155 | font-size: 1em;
|
156 | }
|
157 |
|
158 |
|
159 | caption, dt, em, th {
|
160 | font-weight: bold;
|
161 | }
|
162 |
|
163 |
|
164 | address, dfn, em, var {
|
165 | font-style: normal;
|
166 | }
|
167 |
|
168 |
|
169 | pre, code, kbd, samp, var, textarea {
|
170 |
|
171 | font-family: $nn-monospace;
|
172 | }
|
173 |
|
174 |
|
175 | code, kbd, samp, var {
|
176 | font-size: 1em;
|
177 | }
|
178 |
|
179 |
|
180 | button, input, optgroup, select {
|
181 |
|
182 | margin: 0;
|
183 | font-family: inherit;
|
184 | font-size: inherit;
|
185 | }
|
186 |
|
187 |
|
188 | textarea {
|
189 | margin: 0;
|
190 | font-size: inherit;
|
191 | }
|
192 |
|
193 |
|
194 | small {
|
195 | font-size: .8em;
|
196 | }
|
197 |
|
198 |
|
199 | sub, sup {
|
200 | position: relative;
|
201 | font-size: .75em;
|
202 | vertical-align: baseline;
|
203 | }
|
204 |
|
205 | sub {
|
206 | bottom: -.25em;
|
207 | }
|
208 |
|
209 | sup {
|
210 | top: -.5em;
|
211 | }
|
212 |
|
213 |
|
214 |
|
215 |
|
216 |
|
217 |
|
218 |
|
219 | blockquote {
|
220 |
|
221 | border: 1px solid $nn-green-border;
|
222 | border-radius: 4px;
|
223 | padding: 1em;
|
224 |
|
225 | background: $nn-green-bg;
|
226 | }
|
227 |
|
228 |
|
229 | pre {
|
230 |
|
231 | border: 1px solid $nn-grey-border;
|
232 | border-radius: 4px;
|
233 | padding: 1em;
|
234 |
|
235 | background: $nn-grey-bg;
|
236 | overflow: auto;
|
237 | overflow-wrap: normal;
|
238 |
|
239 | word-wrap: normal;
|
240 | word-break: keep-all;
|
241 | white-space: pre;
|
242 | }
|
243 |
|
244 |
|
245 | table {
|
246 | border-collapse: collapse;
|
247 | }
|
248 |
|
249 |
|
250 | td, th {
|
251 |
|
252 | border: 1px solid $nn-grey-border;
|
253 | padding: .25em .5em;
|
254 | }
|
255 |
|
256 |
|
257 | th {
|
258 | text-align: center;
|
259 |
|
260 | background: $nn-grey-bg;
|
261 | }
|
262 |
|
263 |
|
264 | hr {
|
265 | border: 0;
|
266 |
|
267 | border-bottom: 1px solid $nn-grey-border;
|
268 | }
|
269 |
|
270 |
|
271 | fieldset {
|
272 |
|
273 | border: 1px solid $nn-grey-border;
|
274 | border-radius: 4px;
|
275 | }
|
276 |
|
277 |
|
278 | figure {
|
279 |
|
280 | border-left: .5em solid $nn-grey-border;
|
281 | padding-left: 1em;
|
282 | }
|
283 |
|
284 |
|
285 | summary {
|
286 | cursor: pointer;
|
287 | }
|
288 |
|
289 |
|
290 | abbr[title], dfn[title] {
|
291 |
|
292 | text-decoration: underline;
|
293 | text-decoration: underline dotted;
|
294 | cursor: help;
|
295 | }
|
296 |
|
297 |
|
298 | :not(pre) > code,
|
299 | :not(pre) > samp,
|
300 | :not(pre) > kbd,
|
301 | :not(pre) > var {
|
302 | margin: 0 .25em;
|
303 |
|
304 | border: 1px solid $nn-grey-border;
|
305 | border-radius: 4px;
|
306 | padding: .1em .25em;
|
307 |
|
308 | background: $nn-grey-bg;
|
309 | }
|
310 |
|
311 |
|
312 | q {
|
313 | quotes: "“" "”" "‘" "’";
|
314 | }
|
315 |
|
316 | q::before {
|
317 | content: open-quote;
|
318 | }
|
319 |
|
320 | q::after {
|
321 | content: close-quote;
|
322 | }
|
323 |
|
324 |
|
325 | button, input, select, textarea {
|
326 | vertical-align: top;
|
327 | }
|
328 |
|
329 |
|
330 | [type="checkbox"], [type="radio"] {
|
331 | vertical-align: middle;
|
332 | }
|
333 |
|
334 |
|
335 | button, [type="button"], [type="reset"], [type="submit"] {
|
336 | -webkit-appearance: button;
|
337 | }
|