-
Notifications
You must be signed in to change notification settings - Fork 0
/
nhlpa.base.css
127 lines (112 loc) · 10.9 KB
/
nhlpa.base.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
/*! NHLPACSS */
:root {
--size0: .125rem;
--size1: .25rem;
--size2: .5rem;
--size3: 1rem;
--size4: 2rem;
--size5: 4rem;
--size6: 8rem;
--size7: 16rem;
--gap: var(--size3);
--fontsize1: 2.5em;
--fontsize2: 1.875em;
--fontsize3: 1.4625em;
--fontsize4: 1.25em;
--fontsize5: 1em;
--fontsize6: .8375em;
--fontsize7: .75em;
--lh-solid: 1;
--lh-title: 1.25;
--lh-copy: 1.5;
--bg-body: snow;
--bg-button: rgba(0, 0, 0, .15);
--color-text: black;
--color-link: dodgerblue;
--border-color: rgba(0, 0, 0, .35);
--logo: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273 274"><path fill="none" d="M-1-1h275v276H-1z"/><path fill="%23000" d="m60 214.8-14.1 40.9-7.4-40.9h-16L5 265.8h10.5l14-41 7.4 41h16l17.5-51zm61.9 0h-11.4l-7.2 21H81.2l7.2-21H77l-17.5 51h11.4l7.6-22.1h22.1L93 265.8h11.4l5.6-16.3 9.7-28.1zm6.2 34.7 11.9-34.7h-11.4l-2.3 6.6-9.6 28.1-5.6 16.3h38.6l2.7-8h-27.2zm75.6-34.7h-32.5l-4 11.7h33c5.9 0 5.7 1.6 3.8 6.8-2.3 6.5-4.9 7.1-10.9 7.3h-15.8l4.2-11.9h-15l-7.2 20.7-5.6 16.4h15l4.6-13.5h16.9c15.8 0 21-4.9 26.1-19 4.8-13.2 1.5-18.5-12.6-18.5zm60.3 30.7h-28.9l7-20.4 6.3 18.2h14.9l-9.9-28.5h-22.7l-17.5 51h14.9l3-8.6h22l2.9 8.6h14.9zM26.9 182.2c.2 0 1.8.5 2.5.5.8-1.5 1.9-2.7 3-2.7h22c1.6 0 3-.5 4.4-1.2 2.1-1.1 3.9-2.8 5.1-4.1l38.8-46.4c6.1-6.8 5.1-14.8 2.7-16.9-9-7.8-10.2-18-13.3-28.7-2.3-8-7.1-17.7-1.9-26.1 0 0 9.4-13.4 11.2-14.7l.1-.1v-.1c-2.8-2.2-4.4-5.6-5.2-9-.4 0-.8.1-1.2.1-1.2 0-2.2-.3-2.7-1.5-1-2.7-1.4-8.1-1.3-8.6 0-1.6.2-4 1-5.8 1.3-3 2.6-5.5 4.3-7.2 1.3-1.3 2.8-2.4 4.1-3.1-.5 0-.9-.1-1.3-.1-4.4 0-6.6 2-8.9 4.8a32.7 32.7 0 0 0-4.6 7.4c-.8 1.8-1 4.2-1 5.8 0 .5.3 5.8 1.3 8.6.5 1.2 1.5 1.5 2.7 1.5.4 0 .8 0 1.2-.1.9 3.4 1.9 6.8 4.7 9v.1C92.8 44.8 84 58.3 84 58.3c-5.2 8.5-.3 18.1 1.9 26.1 1.7 6 8.2 25.7 11.7 28.7 2.5 2.1 4.8 7.9-1.4 14.7L64 166.4c-1.2 1.3-3.1 3.1-5.3 4.2-1.2.6-2.6 1-3.9 1l-23.2-.1c-1.2 0-2.3 1.3-3.2 2.9-.4.8-.9 1.7-1.3 2.5-.6 1.3-2.2 4.7-.2 5.3z" class="a"/><path fill="%23000" d="M97.7 23.8c0 .5 1.3 5.8 2.3 8.6.7 1.6 2.1 1.6 3.9 1.4.9 3.4 2.4 6.8 5.2 9v.1c-1.8 1.2-11.2 14.7-11.2 14.7-5.2 8.5-.3 18.1 1.9 26.1 3 10.7 4.3 20.9 13.3 28.7 2.3 2 4.8 7.3.5 13.6l-48.3 58c-.7.8-1.7 1.8-2.9 2.6-1.9 1.4-4.2 2.7-6.7 2.7l-23.2-.1c-1.2 0-2.2 1.2-3.1 2.8l-.1.1c-.4.8-.9 1.7-1.3 2.5-.6 1.3-2.4 5.3.5 5.3h30.8c2.1 0 4.1-1.2 5.7-2.7.4-.4 46.1-54.9 46.1-54.9 0 2.7.8 11.8 1.5 13.5 2.1 5.6 19 21.5 23.4 27.4 0 0-11.4 5.3-12.1 7.1-.7 1.8-.1 4.4.3 5.1.4.7 1.5 1.3 1.7 1.4.4.7 1.5 3 3.5 3h31.1c1.2-.1 1.4-.7 1.1-1.1l-3.2-6.2-.1-1.2c.2-1 .9-1.8.7-3.1 0 0-11.6-28-12.5-29.9-.7-1.5-4.5-7.9-4.5-7.9.9-.6 14.2-19 19.2-23.9 2.2 3.6 8.4 18.5 15.3 24.1 16.6 13.3 38.8 33.3 38.8 33.3-3.7 1.3-6 4.8-6.5 6.3-.8 2.4-.2 4.4.3 5.1.5.7 1.8 1.5 1.8 1.5.3.4 1.4 3.1 3.6 3.1H246c1.8 0 2.1-.7 1.8-1.1l-5.4-7.5c-.1-1 .3-1.8-.3-3.1 0 0-15.7-26.2-21.5-34-7.3-9.5-17.8-17.5-19.2-25.1-1.4-7.6-6.8-30.9-14.6-41.2-8-10.7-3.6-14.6-1.3-17.5.5-.6 6.2-7.4 7.1-8.9 1.3-1.9 3.9-7.4 4.1-12.4.1-1.5-.1-3-.5-4.4-.7-2.1-2.2-4-4.2-5.9-4.8-4.6-19-17.4-30.7-17.5-3.9 0-5.6-.3-10.9.8-4.3.9-6.6 1.7-10.5 3.6 0 0-6.1 2.8-7.8 2.8 0 0-3.2.5-3.5-5.1-.3-4.6-.3-8.1-1-9.6-.3-.8-.6-1.5-1-2.2-.7-1.2-1.5-2.2-2.4-2.9-1.4-1.1-3-1.6-5.1-2.1l-1.7-.3c-3.3-.4-9.1 1-11.2 2.7-1.6 1.3-6.3 5.9-7.5 8.8-.7 2-.9 4.4-1 6z" class="a"/></svg>')
}
@media (prefers-color-scheme: dark) {
:root {
--bg-body: black;
--bg-button: rgba(255,255,255,.15);
--color-text: snow;
--border-color: rgba(255, 255, 255, .35);
--logo: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273 274"><path fill="none" d="M-1-1h275v276H-1z"/><path fill="%23fff" d="m60 214.8-14.1 40.9-7.4-40.9h-16L5 265.8h10.5l14-41 7.4 41h16l17.5-51zm61.9 0h-11.4l-7.2 21H81.2l7.2-21H77l-17.5 51h11.4l7.6-22.1h22.1L93 265.8h11.4l5.6-16.3 9.7-28.1zm6.2 34.7 11.9-34.7h-11.4l-2.3 6.6-9.6 28.1-5.6 16.3h38.6l2.7-8h-27.2zm75.6-34.7h-32.5l-4 11.7h33c5.9 0 5.7 1.6 3.8 6.8-2.3 6.5-4.9 7.1-10.9 7.3h-15.8l4.2-11.9h-15l-7.2 20.7-5.6 16.4h15l4.6-13.5h16.9c15.8 0 21-4.9 26.1-19 4.8-13.2 1.5-18.5-12.6-18.5zm60.3 30.7h-28.9l7-20.4 6.3 18.2h14.9l-9.9-28.5h-22.7l-17.5 51h14.9l3-8.6h22l2.9 8.6h14.9zM26.9 182.2c.2 0 1.8.5 2.5.5.8-1.5 1.9-2.7 3-2.7h22c1.6 0 3-.5 4.4-1.2 2.1-1.1 3.9-2.8 5.1-4.1l38.8-46.4c6.1-6.8 5.1-14.8 2.7-16.9-9-7.8-10.2-18-13.3-28.7-2.3-8-7.1-17.7-1.9-26.1 0 0 9.4-13.4 11.2-14.7l.1-.1v-.1c-2.8-2.2-4.4-5.6-5.2-9-.4 0-.8.1-1.2.1-1.2 0-2.2-.3-2.7-1.5-1-2.7-1.4-8.1-1.3-8.6 0-1.6.2-4 1-5.8 1.3-3 2.6-5.5 4.3-7.2 1.3-1.3 2.8-2.4 4.1-3.1-.5 0-.9-.1-1.3-.1-4.4 0-6.6 2-8.9 4.8a32.7 32.7 0 0 0-4.6 7.4c-.8 1.8-1 4.2-1 5.8 0 .5.3 5.8 1.3 8.6.5 1.2 1.5 1.5 2.7 1.5.4 0 .8 0 1.2-.1.9 3.4 1.9 6.8 4.7 9v.1C92.8 44.8 84 58.3 84 58.3c-5.2 8.5-.3 18.1 1.9 26.1 1.7 6 8.2 25.7 11.7 28.7 2.5 2.1 4.8 7.9-1.4 14.7L64 166.4c-1.2 1.3-3.1 3.1-5.3 4.2-1.2.6-2.6 1-3.9 1l-23.2-.1c-1.2 0-2.3 1.3-3.2 2.9-.4.8-.9 1.7-1.3 2.5-.6 1.3-2.2 4.7-.2 5.3z" class="a"/><path fill="%23fff" d="M97.7 23.8c0 .5 1.3 5.8 2.3 8.6.7 1.6 2.1 1.6 3.9 1.4.9 3.4 2.4 6.8 5.2 9v.1c-1.8 1.2-11.2 14.7-11.2 14.7-5.2 8.5-.3 18.1 1.9 26.1 3 10.7 4.3 20.9 13.3 28.7 2.3 2 4.8 7.3.5 13.6l-48.3 58c-.7.8-1.7 1.8-2.9 2.6-1.9 1.4-4.2 2.7-6.7 2.7l-23.2-.1c-1.2 0-2.2 1.2-3.1 2.8l-.1.1c-.4.8-.9 1.7-1.3 2.5-.6 1.3-2.4 5.3.5 5.3h30.8c2.1 0 4.1-1.2 5.7-2.7.4-.4 46.1-54.9 46.1-54.9 0 2.7.8 11.8 1.5 13.5 2.1 5.6 19 21.5 23.4 27.4 0 0-11.4 5.3-12.1 7.1-.7 1.8-.1 4.4.3 5.1.4.7 1.5 1.3 1.7 1.4.4.7 1.5 3 3.5 3h31.1c1.2-.1 1.4-.7 1.1-1.1l-3.2-6.2-.1-1.2c.2-1 .9-1.8.7-3.1 0 0-11.6-28-12.5-29.9-.7-1.5-4.5-7.9-4.5-7.9.9-.6 14.2-19 19.2-23.9 2.2 3.6 8.4 18.5 15.3 24.1 16.6 13.3 38.8 33.3 38.8 33.3-3.7 1.3-6 4.8-6.5 6.3-.8 2.4-.2 4.4.3 5.1.5.7 1.8 1.5 1.8 1.5.3.4 1.4 3.1 3.6 3.1H246c1.8 0 2.1-.7 1.8-1.1l-5.4-7.5c-.1-1 .3-1.8-.3-3.1 0 0-15.7-26.2-21.5-34-7.3-9.5-17.8-17.5-19.2-25.1-1.4-7.6-6.8-30.9-14.6-41.2-8-10.7-3.6-14.6-1.3-17.5.5-.6 6.2-7.4 7.1-8.9 1.3-1.9 3.9-7.4 4.1-12.4.1-1.5-.1-3-.5-4.4-.7-2.1-2.2-4-4.2-5.9-4.8-4.6-19-17.4-30.7-17.5-3.9 0-5.6-.3-10.9.8-4.3.9-6.6 1.7-10.5 3.6 0 0-6.1 2.8-7.8 2.8 0 0-3.2.5-3.5-5.1-.3-4.6-.3-8.1-1-9.6-.3-.8-.6-1.5-1-2.2-.7-1.2-1.5-2.2-2.4-2.9-1.4-1.1-3-1.6-5.1-2.1l-1.7-.3c-3.3-.4-9.1 1-11.2 2.7-1.6 1.3-6.3 5.9-7.5 8.8-.7 2-.9 4.4-1 6z" class="a"/></svg>')
}
input, textarea, select { color-scheme: dark }
}
/* Base */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; color: inherit; line-height: var(--lh-title) }
html, body { height: 100%; margin: 0 }
html { font-size: 16px; scroll-behavior: smooth }
body { background: var(--bg-body); font-size: clamp(.875rem, 1.5vw, 1rem); color: var(--color-text); -webkit-font-smoothing: antialiased; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif }
body * + * { margin-top: var(--gap) }
.nomargin * + * { margin-top: 0 }
/* Shared */
button, [role='button'], input[type='submit'], input[type='reset'], input[type='button'], table, article, aside, blockquote, pre, code, mark, samp, kbd, time, input, textarea, select, fieldset, legend, img, video { border-radius: 2px }
button, [role='button'], input[type='submit'], input[type='reset'], input[type='button'], pre, samp { padding: calc(var(--gap) * .5) }
button, [role='button'], input[type='submit'], input[type='reset'], input[type='button'], select[multiple] > option:checked, code, data, mark, kbd, time, pre, samp, aside, blockquote { color: var(--color-text); background: var(--bg-button) }
dt, details > summary, li, option, input, textarea, select { margin: 0 }
article, input, textarea, select, fieldset, legend { border: 1px solid var(--border-color) }
h1, h2, h3, h4, h5, h6, h1 small, h2 small, h3 small, button,[role='button'], input[type='submit'], input[type='reset'], input[type='button'] { font-weight: 400 }
blockquote, aside, article, .wrap { padding: calc(var(--gap) * .75) var(--gap) }
/* Text */
h1, h2, h3, h4, h5, h6 { line-height: var(--lh-title) }
h1 small, h2 small, h3 small { display: block; font-size: var(--fontsize7); color: dimgray }
h1 { font-size: var(--fontsize1) }
h2 { font-size: var(--fontsize2) }
h3 { font-size: var(--fontsize3) }
h4 { font-size: var(--fontsize4) }
h5 { font-size: var(--fontsize5) }
h6 { font-size: var(--fontsize6) }
p, ul, li, dd { line-height: var(--lh-copy) }
hr { height: 1px; background: var(--border-color); border-style: none }
dd { margin: 0 0 var(--gap) }
ol, ul { list-style-position: inside; margin: var(--size1) 0 0 var(--size2) }
ol > li > ol, ul > li > ul { margin: 0; padding: 0 calc(var(--gap) * 1.5) }
blockquote { padding-left: var(--gap); border-left: solid .25rem dimgray }
dt, details > summary { font-weight: 700 }
/* Tables */
table { width: 100%; max-width: 100%; border-collapse: collapse }
table caption { color: var(--color-text) }
th, td { padding: var(--size0) var(--size2); text-align: left; vertical-align: top }
th { font-weight: 700 }
thead th { border-bottom: solid var(--size0) dimgray }
tfoot th { border-top: solid var(--size0) dimgray }
tr:nth-child(odd) td { background-color: var(--bg-button) }
tr:hover td { background-color: lightcyan; color: black }
/* Inline Text */
a { color: var(--color-link) }
code, samp, kbd { font-family: Consolas, monaco, monospace; font-size: 98% }
code, data, mark, kbd, time { padding: 0 var(--size1) }
mark, time { color: black }
mark, time { background: gold }
time { background: lightcyan }
pre, sam, pre > code { line-height: 1.15 }
pre, samp { display: block; font-size: .875rem; }
pre > code { background: inherit; color: inherit }
/* Forms */
[readonly], [disabled] { opacity: .6 }
[disabled] { cursor: not-allowed }
input, textarea, select, fieldset, button { line-height: var(--lh-solid) !important }
input, button, textarea, select, fieldset { font: inherit }
textarea, select, input:not([type=button]):not([type=checkbox]):not([type=color]):not([type=radio]):not([type=range]):not([type=reset]):not([type=submit]) { display: block; width: 100%; background: var(--bg-body); font-weight: 400 }
input, textarea { padding: .3125rem var(--size2) }
input:user-invalid, select:user-invalid, textarea:user-invalid { border: 1px dashed crimson }
label { display: block; margin-bottom: var(--size1); font-weight: 700 }
form * + label { margin-top: var(--size2) }
label > *:first-child { margin: var(--size1) 0 0 }
fieldset { padding: var(--size2) }
legend { margin: 0 0 0 -1.1rem; padding: .25rem 1rem; font-weight: 700; background-color: var(--bg-body); }
legend + * { margin-top: 0 }
select { padding: var(--size1) var(--size2) }
textarea { width: 100%; resize: vertical }
fieldset { max-width: -webkit-fill-available }
button,[role='button'], input[type='submit'], input[type='reset'], input[type='button'] { display: inline-block; margin: calc(var(--gap) * .5) calc(var(--gap) * .5) 0 0; line-height:1; text-decoration: none; background: var(--bg-button); border: 0; cursor: pointer }
/* Media */
img, picture, video, audio, canvas, svg { display: block; max-width: 100% }
figcaption { margin-top: 0 }
@media screen and (min-width: 40rem) {
aside { float: right; width: 33.333%; margin-left: var(--gap); margin-bottom: var(--gap) }
}