Skip to content

Commit b389522

Browse files
Rich-HarrisRich-Harris
authored
fix some styles (#239)
* fix some styles * prettier * get rid of random font weights
1 parent a3a253b commit b389522

File tree

21 files changed

+113
-145
lines changed

21 files changed

+113
-145
lines changed

‎apps/svelte.dev/src/routes/_home/Video.svelte

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -218,8 +218,7 @@
218218
.captions {
219219
line-height: 1;
220220
color: white;
221-
font-size: 2rem;
222-
font-weight: 700;
221+
font-size: var(--sk-font-size-ui-medium);
223222
filter: var(--control-filter);
224223
}
225224

‎apps/svelte.dev/src/routes/blog/+page.svelte

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@
5555
color: var(--sk-text-4);
5656
font-family: var(--sk-font-ui);
5757
font-size: var(--sk-font-size-ui-small);
58-
font-weight: 400;
5958
text-transform: uppercase;
6059
}
6160
@@ -68,8 +67,7 @@
6867
padding: 0 0 4rem 0;
6968
7069
h2 {
71-
font-size: 4rem;
72-
font-weight: 400;
70+
font-size: var(--sk-font-size-h1);
7371
color: var(--sk-text-2);
7472
}
7573
}

‎apps/svelte.dev/src/routes/blog/[slug]/+page.svelte

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,7 @@
5151
}
5252
5353
h1 {
54-
font-size: 4rem;
55-
font-weight: 500;
54+
font-size: var(--sk-font-size-h1);
5655
}
5756
5857
.standfirst {

‎apps/svelte.dev/src/routes/docs/[...path]/+page.svelte

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,6 @@
110110
display: block;
111111
font-size: var(--sk-font-size-ui-medium);
112112
text-transform: uppercase;
113-
font-weight: 400;
114113
font-family: var(--sk-font-ui);
115114
color: var(--sk-text-3);
116115
}

‎apps/svelte.dev/src/routes/tutorial/[slug]/+page.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -384,6 +384,7 @@
384384
background: var(--sk-back-2);
385385
display: flex;
386386
flex-direction: column;
387+
font-size: var(--sk-font-size-ui-small);
387388
}
388389
389390
.navigator .solve {

‎apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@
135135
background: var(--sk-back-2);
136136
user-select: none;
137137
font-family: var(--sk-font-ui);
138+
font-size: var(--sk-font-size-ui-small);
138139
}
139140
140141
.progress-container {

‎apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte

Lines changed: 22 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -186,19 +186,11 @@
186186
width: 100%;
187187
}
188188
189-
.menu.open {
190-
border-radius: var(--sk-border-radius) var(--sk-border-radius) 0 0;
191-
}
192-
193189
header strong,
194190
h1 {
195191
font-family: inherit;
196192
}
197193
198-
.menu {
199-
border: none;
200-
}
201-
202194
header strong {
203195
color: var(--sk-theme-1);
204196
}
@@ -225,15 +217,19 @@
225217
box-shadow: var(--sk-shadow);
226218
227219
cursor: pointer;
228-
}
229220
230-
.menu > button {
231-
display: flex;
232-
justify-content: center;
233-
align-items: center;
234-
gap: 0.4ch;
235-
width: 100%;
236-
height: 100%;
221+
&.open {
222+
border-radius: var(--sk-border-radius) var(--sk-border-radius) 0 0;
223+
}
224+
225+
& > button {
226+
display: flex;
227+
justify-content: center;
228+
align-items: center;
229+
gap: 0.4ch;
230+
width: 100%;
231+
height: 100%;
232+
}
237233
}
238234
239235
h1 {
@@ -251,16 +247,16 @@
251247
text-align: center;
252248
color: var(--sk-text-2);
253249
font-size: var(--sk-font-size-ui-small);
254-
}
255250
256-
h1 .desktop {
257-
display: flex;
258-
gap: 0.5ch;
259-
align-items: center;
260-
}
251+
.desktop {
252+
display: flex;
253+
gap: 0.5ch;
254+
align-items: center;
255+
}
261256
262-
h1 .mobile {
263-
display: none;
257+
.mobile {
258+
display: none;
259+
}
264260
}
265261
266262
.expand-icon :global(svg) {
@@ -342,19 +338,10 @@
342338
stroke-width: 0 !important;
343339
}
344340
345-
li.expanded > button {
346-
font-weight: bold;
347-
}
348-
349341
li.expanded > button > :global(svg) {
350342
transform: rotate(90deg);
351343
}
352344
353-
li a::before,
354-
li a::after {
355-
position: absolute;
356-
}
357-
358345
.exercise {
359346
--dot-size: 1.2rem;
360347
--color: var(--sk-text-2);
@@ -364,11 +351,11 @@
364351
button {
365352
color: var(--sk-text-2);
366353
padding: 0 0 0 0.5rem;
367-
margin: 0 0.5rem 0 0;
368354
display: block;
369355
font-variant-numeric: tabular-nums;
370-
border: 2px solid transparent;
371356
box-sizing: border-box;
357+
font-size: var(--sk-font-size-ui-medium);
358+
line-height: 1.5;
372359
}
373360
374361
li button {

‎apps/svelte.dev/src/routes/tutorial/[slug]/ScreenToggle.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
z-index: 2;
4444
margin: 0 auto;
4545
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.07);
46+
font-size: var(--sk-font-size-ui-small);
4647
}
4748
4849
@media (min-width: 832px) {

‎apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte

Lines changed: 75 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -123,67 +123,65 @@
123123
padding: 2.2rem 3rem;
124124
border-right: 1px solid var(--sk-back-4);
125125
background: var(--sk-back-3);
126-
}
127126
128-
.text :global(pre) {
129-
background: var(--sk-back-1);
130-
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
131-
border-radius: var(--sk-border-radius);
132-
}
127+
:global {
128+
pre {
129+
background: var(--sk-back-1);
130+
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
131+
border-radius: var(--sk-border-radius);
133132
134-
.text :global(pre) :global(.highlight) {
135-
--color: rgba(220, 220, 0, 0.2);
136-
background: var(--color);
137-
outline: 2px solid var(--color);
138-
border-radius: 2px;
139-
}
133+
.highlight {
134+
--color: rgba(220, 220, 0, 0.2);
135+
background: var(--color);
136+
outline: 2px solid var(--color);
137+
border-radius: 2px;
140138
141-
.text :global(pre) :global(.highlight.add) {
142-
--color: rgba(0, 255, 0, 0.18);
143-
}
139+
&.add {
140+
--color: rgba(0, 255, 0, 0.18);
141+
}
144142
145-
.text :global(pre) :global(.highlight.remove) {
146-
--color: rgba(255, 0, 0, 0.1);
147-
}
143+
&.remove {
144+
--color: rgba(255, 0, 0, 0.1);
148145
149-
:global(html.dark) .text :global(pre) :global(.highlight.remove) {
150-
--color: rgba(255, 0, 0, 0.27);
151-
}
146+
:root.dark & {
147+
--color: rgba(255, 0, 0, 0.27);
148+
}
149+
}
150+
}
151+
}
152152
153-
/** this probably belongs in site-kit */
154-
.text :global(p) :global(a) :global(code) {
155-
color: var(--sk-theme-1);
156-
background: rgba(255, 62, 0, 0.1);
157-
}
153+
p a code {
154+
color: var(--sk-theme-1);
155+
background: rgba(255, 62, 0, 0.1);
156+
}
158157
159-
.text :global([data-file]),
160-
.text :global(.filename) {
161-
cursor: pointer;
162-
background-image: url($lib/icons/file-edit.svg);
163-
background-repeat: no-repeat;
164-
}
158+
[data-file],
159+
.filename {
160+
cursor: pointer;
161+
background-image: url($lib/icons/file-edit.svg);
162+
background-repeat: no-repeat;
165163
166-
.text :global([data-file]) {
167-
background-position: 0.5rem 50%;
168-
background-size: 1rem 1rem;
169-
padding-left: 2rem;
170-
}
164+
:root.dark & {
165+
background-image: url($lib/icons/file-edit-inline-dark.svg);
166+
}
167+
}
171168
172-
.text :global(.filename) {
173-
background-position: 1rem 54%;
174-
background-size: 1rem 1rem;
175-
padding-left: 2.5rem !important;
176-
}
169+
[data-file] {
170+
background-position: 0.5rem 50%;
171+
background-size: 1rem 1rem;
172+
padding-left: 2rem;
173+
}
177174
178-
@media (prefers-color-scheme: dark) {
179-
.text :global([data-file]),
180-
.text :global(.filename) {
181-
background-image: url($lib/icons/file-edit-inline-dark.svg);
182-
}
183-
}
175+
.filename {
176+
background-position: 1rem 54%;
177+
background-size: 1rem 1rem;
178+
padding-left: 2.5rem !important;
179+
}
184180
185-
.text :global(.desktop) {
186-
display: none;
181+
.desktop {
182+
display: none;
183+
}
184+
}
187185
}
188186
189187
footer {
@@ -193,38 +191,40 @@
193191
background: var(--sk-back-3);
194192
border-top: 1px solid var(--sk-back-4);
195193
border-right: 1px solid var(--sk-back-4);
196-
}
197194
198-
footer .edit {
199-
color: var(--sk-text-2);
200-
font-family: var(--sk-font-ui);
201-
font-size: var(--sk-font-size-ui-medium);
202-
padding: 0 0 0 1.4em;
203-
background: url($lib/icons/file-edit.svg) no-repeat 0 calc(50% - 0.1em);
204-
background-size: 1em 1em;
195+
.edit {
196+
color: var(--sk-text-2);
197+
font-family: var(--sk-font-ui);
198+
font-size: var(--sk-font-size-ui-medium);
199+
padding: 0 0 0 1.4em;
200+
background: url($lib/icons/file-edit.svg) no-repeat 0 calc(50% - 0.1em);
201+
background-size: 1em 1em;
202+
}
205203
}
206204
207-
.modal-contents h2 {
208-
font-size: 2.4rem;
209-
margin: 0 0 0.5em 0;
210-
}
205+
.modal-contents {
206+
h2 {
207+
font-size: 2.4rem;
208+
margin: 0 0 0.5em 0;
209+
}
211210
212-
.modal-contents label {
213-
user-select: none;
214-
}
211+
label {
212+
user-select: none;
213+
}
215214
216-
.modal-contents button {
217-
display: block;
218-
background-color: var(--sk-theme-1);
219-
color: white;
220-
padding: 1rem;
221-
width: 10em;
222-
margin: 1em 0 0 0;
223-
border-radius: var(--sk-border-radius);
224-
line-height: 1;
215+
button {
216+
display: block;
217+
background-color: var(--sk-theme-1);
218+
color: white;
219+
padding: 1rem;
220+
width: 10em;
221+
margin: 1em 0 0 0;
222+
border-radius: var(--sk-border-radius);
223+
line-height: 1;
224+
}
225225
}
226226
227-
@media (max-width: 800px) {
227+
@media (max-width: 799px) {
228228
.text {
229229
border-right: none;
230230
}

‎packages/repl/src/lib/CodeMirror.svelte

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -389,7 +389,6 @@
389389
390390
.cm-diagnosticText strong {
391391
font-size: 0.9em;
392-
/* font-weight: 700; */
393392
font-family: var(--sk-font-mono);
394393
opacity: 0.7;
395394
}

‎packages/repl/src/lib/Input/Migrate.svelte

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
position: relative;
1515
display: flex;
1616
text-transform: uppercase;
17-
font-weight: 300;
1817
font-size: var(--sk-font-size-ui-small);
1918
padding: 0.8rem;
2019
gap: 0.5rem;

‎packages/repl/src/lib/Input/RunesInfo.svelte

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,6 @@
6969
position: relative;
7070
display: flex;
7171
text-transform: uppercase;
72-
font-weight: 300;
7372
font-size: var(--sk-font-size-ui-small);
7473
padding: 0.8rem;
7574
gap: 0.5rem;

‎packages/repl/src/lib/Output/console/ConsoleLine.svelte

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -195,10 +195,6 @@
195195
}
196196
}
197197
198-
.group {
199-
font-weight: 700;
200-
}
201-
202198
.log {
203199
padding: 0.5rem 1rem 0.5rem calc(1rem + var(--indent));
204200
display: flex;

0 commit comments

Comments
 (0)