Skip to content

Commit 2646ce0

Browse files
Rich-HarrisRich-Harris
authored
use old-style padding (#3900)
* use old-style padding * bump site-kit * revert more stuff * revert more stuff * i think thats all of them. good riddance
1 parent f412dc5 commit 2646ce0

File tree

10 files changed

+159
-169
lines changed

10 files changed

+159
-169
lines changed

‎pnpm-lock.yaml

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sites/kit.svelte.dev/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"devDependencies": {
1111
"@sveltejs/adapter-auto": "workspace:*",
1212
"@sveltejs/kit": "workspace:*",
13-
"@sveltejs/site-kit": "^2.0.2",
13+
"@sveltejs/site-kit": "^2.0.3",
1414
"@types/node": "^16.6.1",
1515
"flexsearch": "^0.7.21",
1616
"marked": "^4.0.5",

‎sites/kit.svelte.dev/src/lib/docs/Contents.svelte

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -108,43 +108,42 @@
108108

109109
<style>
110110
nav {
111-
inset-block-start: 0;
112-
inset-inline-start: 0;
111+
top: 0;
112+
left: 0;
113113
overflow: hidden;
114114
background-color: var(--second);
115115
color: white;
116116
}
117117
118118
.sidebar {
119-
padding-inline: 3.2rem 0;
120-
padding-block: var(--top-offset) 6.4rem;
119+
padding: var(--top-offset) 0 6.4rem 3.2rem;
121120
font-family: var(--font);
122121
overflow-y: auto;
123-
block-size: 100%;
124-
inset-block-end: auto;
125-
inline-size: 100%;
122+
height: 100%;
123+
bottom: auto;
124+
width: 100%;
126125
columns: 2;
127126
}
128127
129128
li {
130129
display: block;
131130
line-height: 1.2;
132131
margin: 0;
133-
margin-block-end: 4rem;
132+
margin-bottom: 4rem;
134133
}
135134
136135
a {
137136
position: relative;
138137
transition: color 0.2s;
139-
border-block-end: none;
138+
border-bottom: none;
140139
padding: 0;
141140
color: var(--sidebar-text);
142141
user-select: none;
143142
}
144143
145144
.section {
146145
display: block;
147-
padding-block-end: 0.8rem;
146+
padding-bottom: 0.8rem;
148147
font-size: var(--h6);
149148
text-transform: uppercase;
150149
letter-spacing: 0.1em;
@@ -155,22 +154,22 @@
155154
display: block;
156155
font-size: 1.6rem;
157156
font-family: var(--font);
158-
padding-block-end: 0.6em;
157+
padding-bottom: 0.6em;
159158
}
160159
161160
.active::after {
162161
content: '';
163162
position: absolute;
164-
inset-inline-end: 0;
165-
inset-block-start: 2px;
166-
inline-size: 0;
167-
block-size: 0;
163+
right: 0;
164+
top: 2px;
165+
width: 0;
166+
height: 0;
168167
border: 6px solid transparent;
169-
border-inline-end-color: white;
168+
border-right-color: white;
170169
}
171170
172171
.nested {
173-
padding-inline-start: 1.2rem;
172+
padding-left: 1.2rem;
174173
}
175174
176175
ul ul,
@@ -188,25 +187,27 @@
188187
@media (min-width: 600px) {
189188
.sidebar {
190189
columns: 2;
191-
padding-inline: var(--side-nav);
190+
padding-left: var(--side-nav);
191+
padding-right: var(--side-nav);
192192
}
193193
}
194194
195195
@media (min-width: 832px) {
196196
.sidebar {
197197
columns: 1;
198-
padding-inline: 3.2rem 0;
198+
padding-left: 3.2rem;
199+
padding-right: 0;
199200
}
200201
201202
nav::after {
202203
content: '';
203204
position: fixed;
204-
inset-inline-start: 0;
205-
inset-block-end: 0;
206-
inline-size: var(--sidebar-w);
207-
block-size: 2em;
205+
left: 0;
206+
bottom: 0;
207+
width: var(--sidebar-w);
208+
height: 2em;
208209
pointer-events: none;
209-
block-size: var(--top-offset);
210+
height: var(--top-offset);
210211
background: linear-gradient(
211212
to bottom,
212213
rgba(103, 103, 120, 0) 0%,

‎sites/kit.svelte.dev/src/routes/__error.svelte

Lines changed: 40 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -14,48 +14,9 @@
1414
1515
// we don't want to use <svelte:window bind:online> here, because we only care about the online
1616
// state when the page first loads
17-
let online = typeof navigator !== 'undefined'
18-
? navigator.onLine
19-
: true;
17+
let online = typeof navigator !== 'undefined' ? navigator.onLine : true;
2018
</script>
2119

22-
<style>
23-
.container {
24-
padding-inline: var(--side-nav);
25-
padding-block: var(--top-offset) 6rem;
26-
}
27-
28-
h1, p {
29-
margin-inline: auto;
30-
margin-block: 0;
31-
}
32-
33-
h1 {
34-
font-size: 2.8em;
35-
font-weight: 300;
36-
margin: 0;
37-
margin-block-end: 0.5em;
38-
}
39-
40-
p {
41-
margin-inline: auto;
42-
margin-block: 1em;
43-
}
44-
45-
.error {
46-
background-color: #da106e;
47-
color: white;
48-
padding-inline: 16px;
49-
padding-block: 12px;
50-
font: 600 16px/1.7 var(--font);
51-
border-radius: 2px;
52-
}
53-
54-
/* @media (min-width: 480px) {
55-
h1 { font-size: 4em }
56-
} */
57-
</style>
58-
5920
<svelte:head>
6021
<title>{status}</title>
6122
</svelte:head>
@@ -77,11 +38,49 @@
7738
<p>Please try reloading the page.</p>
7839
{/if}
7940

80-
<p>If the error persists, please drop by <a href="https://svelte.dev/chat">Discord chatroom</a> and let us know, or raise an issue on <a href="https://github.com/sveltejs/svelte">GitHub</a>. Thanks!</p>
41+
<p>
42+
If the error persists, please drop by <a href="https://svelte.dev/chat">Discord chatroom</a>
43+
and let us know, or raise an issue on
44+
<a href="https://github.com/sveltejs/svelte">GitHub</a>. Thanks!
45+
</p>
8146
{/if}
8247
{:else}
8348
<h1>It looks like you're offline</h1>
8449

8550
<p>Reload the page once you've found the internet.</p>
8651
{/if}
8752
</div>
53+
54+
<style>
55+
.container {
56+
padding: var(--top-offset) var(--side-nav) 6rem var(--side-nav);
57+
}
58+
59+
h1,
60+
p {
61+
margin: 0 auto;
62+
}
63+
64+
h1 {
65+
font-size: 2.8em;
66+
font-weight: 300;
67+
margin: 0;
68+
margin-bottom: 0.5em;
69+
}
70+
71+
p {
72+
margin: 1em auto;
73+
}
74+
75+
.error {
76+
background-color: #da106e;
77+
color: white;
78+
padding: 12px 16px;
79+
font: 600 16px/1.7 var(--font);
80+
border-radius: 2px;
81+
}
82+
83+
/* @media (min-width: 480px) {
84+
h1 { font-size: 4em }
85+
} */
86+
</style>

‎sites/kit.svelte.dev/src/routes/__layout.svelte

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,8 @@
5555
<style>
5656
main {
5757
position: relative;
58-
margin-inline: auto;
59-
margin-block: 0;
60-
padding-block-start: var(--nav-h);
58+
margin: 0 auto;
59+
padding-top: var(--nav-h);
6160
overflow-x: hidden;
6261
}
6362
@@ -108,12 +107,12 @@
108107
/* this is an unfortunate hack, but necessary to temporarily avoid
109108
breaking changes to site-kit */
110109
:global(ul.external) {
111-
inline-size: 40rem !important;
110+
width: 40rem !important;
112111
}
113112
114113
@media (min-width: 960px) {
115114
:global(ul.external) {
116-
inline-size: 30rem !important;
115+
width: 30rem !important;
117116
}
118117
}
119118
</style>

‎sites/kit.svelte.dev/src/routes/docs/[slug].svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,9 @@
7575
position: relative;
7676
top: -0.1rem;
7777
left: 0.3rem;
78-
inline-size: 1.4rem;
79-
block-size: 1.4rem;
80-
margin-inline-end: 0.5rem;
78+
width: 1.4rem;
79+
height: 1.4rem;
80+
margin-right: 0.5rem;
8181
}
8282
8383
.controls {

0 commit comments

Comments
 (0)