Skip to content

Commit efba111

Browse files
Rich-HarrisRich-Harris
committed
refactor CSS
1 parent ef199e9 commit efba111

File tree

1 file changed

+133
-129
lines changed

1 file changed

+133
-129
lines changed

‎packages/site-kit/src/lib/components/Text.svelte‎

Lines changed: 133 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -7,128 +7,136 @@
77
<div class="text">{@render children()}</div>
88

99
<style>
10-
:global {
11-
.text :where(h2) {
10+
.text :global {
11+
h2 {
1212
margin-top: 7rem;
1313
}
1414
15-
.text :where(h3) {
15+
h3 {
1616
margin-top: 5rem;
1717
}
1818
19-
.text :where(p, ol, ul) {
19+
p,
20+
ol,
21+
ul {
2022
margin: 1em 0;
2123
font-size: var(--sk-text-s);
2224
}
2325
24-
.text :where(section) {
26+
/* TODO is this still used? don't think so */
27+
section {
2528
max-width: var(--sk-line-max-width);
2629
padding: 0 0 0 1rem;
27-
}
2830
29-
.text :where(section) :where(h2, h3, h4) {
30-
margin-left: -1rem;
31+
h2,
32+
h3,
33+
h4 {
34+
margin-left: -1rem;
35+
}
36+
37+
a code {
38+
color: inherit;
39+
}
3140
}
3241
33-
/* code */
34-
.text :where(code) {
42+
code {
3543
white-space: pre-wrap;
3644
padding: 0.2rem 0.4rem;
3745
margin: 0 0.2rem;
3846
top: -0.1rem;
3947
background: var(--sk-back-4);
4048
}
4149
42-
.text :where(.code-block) {
50+
.code-block {
4351
position: relative;
44-
}
4552
46-
.text :where(.copy-code-block) {
47-
box-shadow: 1px 2px 1rem hsla(0 0 0 / 0.08);
53+
.filename {
54+
content: attr(data-file);
55+
display: block;
56+
width: 100%;
57+
font-family: var(--sk-font-mono);
58+
font-size: 1.2rem;
59+
font-weight: 400;
60+
padding: 1rem 1rem 0.8rem 1rem;
61+
color: var(--sk-text-2);
62+
background: var(--sk-back-4);
63+
border-radius: var(--sk-border-radius) var(--sk-border-radius) 0 0;
64+
box-sizing: border-box;
65+
}
66+
67+
pre {
68+
margin-top: 0;
69+
border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
70+
}
4871
}
4972
50-
.text :where(pre) {
73+
pre {
5174
position: relative;
5275
margin: 1em 0;
5376
width: 100%;
5477
padding: 1rem;
55-
56-
/* box-shadow: inset 1px 1px 6px hsla(205.7, 63.6%, 30.8%, 0.06); */
5778
box-sizing: border-box;
58-
/* background-color: var(--sk-code-bg); */
5979
color: var(--sk-code-base);
6080
border-radius: var(--sk-border-radius);
6181
font-size: var(--sk-text-s);
6282
overflow-x: auto;
63-
}
6483
65-
.text :where(pre code) {
66-
display: block;
67-
padding: 0;
68-
margin: 0;
69-
top: 0;
70-
width: 100%;
71-
background: transparent;
84+
code {
85+
display: block;
86+
padding: 0;
87+
margin: 0;
88+
top: 0;
89+
width: 100%;
90+
background: transparent;
91+
}
92+
93+
a:hover {
94+
border-bottom: 1px solid var(--sk-theme-1);
95+
text-decoration: none;
96+
}
97+
98+
/* TODO what is this for? */
99+
&.border {
100+
border-left: 5px solid var(--sk-theme-2);
101+
}
102+
103+
&.language-diff code {
104+
color: var(--sk-code-diff-base);
105+
}
72106
}
73107
74-
.text :where(p code) {
108+
p code {
75109
max-width: 100%;
76110
display: inline-flex;
77111
overflow-x: auto;
78112
padding-top: 0;
79113
padding-bottom: 0;
80114
}
81115
82-
.text :where(.code-block .filename) {
83-
content: attr(data-file);
84-
display: block;
85-
width: 100%;
86-
font-family: var(--sk-font-mono);
87-
font-size: 1.2rem;
88-
font-weight: 400;
89-
padding: 1rem 1rem 0.8rem 1rem;
90-
color: var(--sk-text-2);
91-
background: var(--sk-back-4);
92-
border-radius: var(--sk-border-radius) var(--sk-border-radius) 0 0;
93-
box-sizing: border-box;
94-
}
95-
96-
.text :where(.code-block pre) {
97-
margin-top: 0;
98-
border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
116+
/* TODO what is this for? */
117+
.copy-code-block {
118+
box-shadow: 1px 2px 1rem hsla(0 0 0 / 0.08);
99119
}
100120
101-
.text :where(a:not(.permalink)) {
121+
a:not(.permalink) {
102122
color: inherit;
103123
text-decoration: underline;
104124
transition: box-shadow 0.1s ease-in-out;
105-
}
106-
107-
.text :where(a:not(.permalink) code) {
108-
all: unset !important;
109-
color: inherit;
110-
background-color: transparent !important;
111-
}
112125
113-
.text :where(pre a):hover {
114-
border-bottom: 1px solid var(--sk-theme-1);
115-
text-decoration: none;
116-
}
117-
118-
.text :where(pre.border) {
119-
border-left: 5px solid var(--sk-theme-2);
120-
}
121-
122-
.text :where(pre.language-diff code) {
123-
color: var(--sk-code-diff-base);
126+
/* TODO what is this for? */
127+
code {
128+
all: unset !important;
129+
color: inherit;
130+
background-color: transparent !important;
131+
}
124132
}
125133
126134
/* permalinks */
127-
.text :where([id]) {
135+
[id] {
128136
scroll-margin-top: calc(var(--sk-nav-height) + 4rem);
129137
}
130138
131-
.text :where(a.permalink) {
139+
a.permalink {
132140
position: absolute !important;
133141
display: block;
134142
background: url(../icons/link.svg) 0 50% no-repeat;
@@ -153,111 +161,107 @@
153161
}
154162
}
155163
156-
@media (max-width: 768px) {
157-
.text :where(blockquote *) {
158-
word-break: break-word;
159-
}
160-
}
161-
162-
/* lists */
163-
.text :where(ol, ul) {
164+
ol,
165+
ul {
164166
--list-padding: 3rem;
165167
margin-left: var(--list-padding);
166168
}
167169
168-
.text :where(ul) {
170+
ul {
169171
list-style: none;
172+
173+
li::before {
174+
content: '';
175+
position: absolute;
176+
margin-top: 0.8rem;
177+
margin-left: -1.8rem;
178+
background-color: var(--sk-back-5);
179+
width: 0.6rem;
180+
height: 0.6rem;
181+
border-radius: 2px;
182+
opacity: 0.7;
183+
}
184+
185+
ul {
186+
margin-bottom: 0;
187+
}
170188
}
171189
172-
.text :where(ol) {
190+
ol {
173191
list-style: decimal;
174192
}
175193
176-
.text :where(li) {
194+
li {
177195
position: relative;
178196
max-width: calc(var(--sk-line-max-width) - var(--list-padding));
179197
line-height: 1.5;
180198
margin: 0 0 0.5em 0;
181199
}
182200
183-
.text :where(ul li)::before {
184-
content: '';
185-
position: absolute;
186-
margin-top: 0.8rem;
187-
margin-left: -1.8rem;
188-
background-color: var(--sk-back-5);
189-
width: 0.6rem;
190-
height: 0.6rem;
191-
border-radius: 2px;
192-
opacity: 0.7;
193-
}
194-
195-
.text :where(table) {
201+
table {
196202
margin: 1em 0;
197203
}
198204
199-
.text :where(small) {
205+
small {
200206
font-size: var(--sk-text-s);
201207
float: right;
202208
pointer-events: all;
203209
color: var(--sk-theme-1);
204210
cursor: pointer;
205211
}
206212
207-
.text :where(blockquote) {
213+
blockquote {
208214
--primary-hsl: var(--sk-theme-1-hsl);
209215
color: var(--sk-text-1);
210216
padding: 0 0 0 4.5rem;
211217
font-style: italic;
212218
213-
em,
214-
i {
215-
font-style: normal;
219+
&:first-child {
220+
margin-top: 0;
216221
}
217222
218-
code {
219-
font-style: normal;
223+
&:last-child {
224+
margin-bottom: 0;
220225
}
221-
}
222-
223-
.text :where(blockquote)::before {
224-
content: '';
225-
display: block;
226-
width: 3rem;
227-
height: 3rem;
228-
position: absolute;
229-
left: 0.5rem;
230-
top: 0;
231-
background: url($lib/icons/lightbulb.svg) no-repeat 50% 50% / contain;
232-
}
233226
234-
.text :where(blockquote):first-child {
235-
margin-top: 0;
236-
}
227+
&::before {
228+
content: '';
229+
display: block;
230+
width: 3rem;
231+
height: 3rem;
232+
position: absolute;
233+
left: 0.5rem;
234+
top: 0;
235+
background: url($lib/icons/lightbulb.svg) no-repeat 50% 50% / contain;
236+
}
237237
238-
.text :where(blockquote):last-child {
239-
margin-bottom: 0;
240-
}
238+
&.deprecated {
239+
--primary-hsl: var(--sk-text-warning-hsl);
240+
--color: var(--primary-hsl);
241241
242-
.text :where(blockquote.deprecated) {
243-
--primary-hsl: var(--sk-text-warning-hsl);
244-
--color: var(--primary-hsl);
245-
}
242+
&::before {
243+
content: 'Deprecated';
244+
}
246245
247-
.text :where(blockquote.deprecated)::before {
248-
content: 'Deprecated';
249-
}
246+
a {
247+
--color: var(--primary-hsl);
248+
}
249+
}
250250
251-
.text :where(blockquote.deprecated a) {
252-
--color: var(--primary-hsl);
253-
}
251+
em,
252+
i {
253+
font-style: normal;
254+
}
254255
255-
.text :where(section a code) {
256-
color: inherit;
257-
}
256+
code {
257+
font-style: normal;
258+
}
258259
259-
.text :where(ul ul) {
260-
margin-bottom: 0;
260+
@media (max-width: 767px) {
261+
* {
262+
word-break: break-word;
263+
}
264+
}
261265
}
262266
263267
details.legacy {

0 commit comments

Comments
 (0)