Skip to content

Commit 083ea48

Browse files
baseballyamabaseballyama
authored
chore: update README for v3 (#1041)
1 parent 1c679b5 commit 083ea48

13 files changed

+637
-681
lines changed

‎README.md

+160-210
Large diffs are not rendered by default.

‎docs-svelte-kit/src/app.css

+184-63
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,226 @@
1-
@import "@fontsource/fira-mono";
1+
@import '@fontsource/fira-mono';
2+
@import 'prismjs/themes/prism-tomorrow';
3+
@import '@shikijs/twoslash/style-rich.css';
24

35
:root {
4-
font-family: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
5-
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
6-
--font-mono: "Fira Mono", monospace;
7-
--pure-white: #ffffff;
8-
--primary-color: #b9c6d2;
9-
--secondary-color: #676778;
10-
--tertiary-color: #edf0f8;
11-
--accent-color: #ff3e00;
12-
--heading-color: rgba(0, 0, 0, 0.7);
13-
--text-color: #444444;
14-
--background-without-opacity: rgba(255, 255, 255, 0.7);
15-
--column-width: 42rem;
16-
--column-margin-top: 4rem;
6+
font-family: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
7+
--font-mono: 'Fira Mono', monospace;
8+
--pure-white: #ffffff;
9+
--primary-color: #ffffff;
10+
--secondary-color: #676778;
11+
--tertiary-color: #edf0f8;
12+
--accent-color: #ff3e00;
13+
--heading-color: rgba(0, 0, 0, 0.7);
14+
--text-color: #444444;
15+
--background-without-opacity: rgba(255, 255, 255, 0.95);
16+
--column-width: 42rem;
17+
--column-margin-top: 4rem;
1718
}
1819

1920
body {
20-
min-height: 100vh;
21-
margin: 0;
22-
background-color: var(--primary-color);
23-
}
24-
25-
body::before {
26-
content: "";
27-
width: 80vw;
28-
height: 100vh;
29-
position: absolute;
30-
top: 0;
31-
left: 10vw;
32-
z-index: -1;
33-
background: radial-gradient(
34-
50% 50% at 50% 50%,
35-
var(--pure-white) 0%,
36-
rgba(255, 255, 255, 0) 100%
37-
);
38-
opacity: 0.05;
21+
min-height: 100vh;
22+
margin: 0;
23+
background-color: var(--primary-color);
24+
color: var(--text-color);
3925
}
4026

4127
#svelte {
42-
min-height: 100vh;
43-
display: flex;
44-
flex-direction: column;
28+
min-height: 100vh;
29+
display: flex;
30+
flex-direction: column;
4531
}
4632

4733
h1,
4834
h2,
4935
p {
50-
font-weight: 400;
51-
color: var(--heading-color);
36+
font-weight: 400;
37+
color: var(--heading-color);
5238
}
5339

5440
p {
55-
line-height: 1.5;
41+
line-height: 1.5;
5642
}
5743

5844
a {
59-
color: var(--accent-color);
60-
text-decoration: none;
45+
color: var(--accent-color);
46+
text-decoration: none;
6147
}
62-
6348
a:hover {
64-
text-decoration: underline;
49+
text-decoration: underline;
6550
}
6651

6752
h1 {
68-
font-size: 2rem;
69-
text-align: center;
53+
font-size: 2rem;
54+
margin: 1rem 0;
55+
}
56+
@media (min-width: 720px) {
57+
h1 {
58+
font-size: 2.4rem;
59+
}
7060
}
7161

7262
h2 {
73-
font-size: 1rem;
63+
font-size: 1.6rem;
64+
margin: 1rem 0;
65+
}
66+
67+
h3,
68+
h4,
69+
h5,
70+
h6 {
71+
margin: 0.5rem 0;
72+
font-weight: 400;
73+
color: var(--heading-color);
74+
font-size: 1rem;
75+
}
76+
77+
h1 + h2,
78+
h2 + h3,
79+
h3 + h4,
80+
h4 + h5,
81+
h5 + h6 {
82+
margin-top: 0;
83+
}
84+
85+
ul {
86+
margin: 1rem 0;
7487
}
7588

7689
pre {
77-
font-size: 16px;
78-
font-family: var(--font-mono);
79-
background-color: rgba(255, 255, 255, 0.45);
80-
border-radius: 3px;
81-
box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
82-
padding: 0.5em;
83-
overflow-x: auto;
84-
color: var(--text-color);
90+
font-size: 16px;
91+
font-family: var(--font-mono);
92+
background-color: rgba(255, 255, 255, 0.45);
93+
border-radius: 3px;
94+
box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
95+
padding: 0.5em;
96+
overflow-x: auto;
97+
color: var(--text-color);
98+
margin: 0.5rem 0;
8599
}
86100

87101
input,
88102
button {
89-
font-size: inherit;
90-
font-family: inherit;
103+
font-size: inherit;
104+
font-family: inherit;
91105
}
92106

93107
button:focus:not(:focus-visible) {
94-
outline: none;
108+
outline: none;
95109
}
96110

97-
@media (min-width: 720px) {
98-
h1 {
99-
font-size: 2.4rem;
100-
}
111+
:target {
112+
scroll-margin-top: 80px;
101113
}
102114

103-
:target {
104-
scroll-margin-top: 80px;
115+
/* twoslash */
116+
.twoslash .twoslash-popup-container {
117+
transform: translateY(2em);
118+
white-space: pre-wrap;
119+
margin-right: 32px;
120+
}
121+
.twoslash .twoslash-error > span:not(.twoslash-popup-container):not(:has(*)) {
122+
min-width: 6px;
123+
display: inline-block;
124+
}
125+
126+
/*** markdown ***/
127+
:not(pre) > code {
128+
padding: 0.1rem 0.4rem;
129+
margin: 0 0.2rem;
130+
background: #e5eef5;
131+
position: relative;
132+
border-radius: 0.3em;
133+
white-space: nowrap;
134+
color: #444;
135+
-webkit-font-smoothing: initial;
136+
transform: translateY(-2px);
137+
display: inline-block;
138+
}
139+
140+
blockquote {
141+
padding: 0.5rem 2.4rem;
142+
color: #09f;
143+
border: 1px solid #40b3ff;
144+
margin: 1.6rem 2.4rem 2.4rem;
145+
border-radius: 0.4rem;
146+
}
147+
blockquote p {
148+
color: #09f;
149+
}
150+
151+
table {
152+
margin: 0 0 2em;
153+
width: 100%;
154+
font-size: 1rem; /* var(--h5)は未定義なので1remに */
155+
}
156+
td,
157+
th {
158+
text-align: left;
159+
border-bottom: 1px solid rgba(0 0 0 / 0.1);
160+
padding: 0.4rem 0.8rem 0.4rem 0;
161+
}
162+
163+
/* custom container */
164+
.custom-block .custom-block-title {
165+
font-weight: 600;
166+
margin-bottom: -0.4rem;
167+
}
168+
169+
.custom-block.danger,
170+
.custom-block.tip,
171+
.custom-block.warning {
172+
padding: 0.1rem 1.5rem;
173+
border-left-width: 4px;
174+
border-left-style: solid;
175+
margin: 1rem 0;
176+
}
177+
178+
.custom-block.tip {
179+
background-color: #f3f5f7;
180+
border-color: #42b983;
181+
}
182+
183+
.custom-block.warning {
184+
background-color: rgba(255, 229, 100, 0.3);
185+
border-color: #e7c000;
186+
color: #6b5900;
187+
}
188+
.custom-block.warning .custom-block-title {
189+
color: #b29400;
190+
}
191+
.custom-block.warning a {
192+
color: #2c3e50;
193+
}
194+
195+
.custom-block.danger {
196+
background-color: #ffe6e6;
197+
border-color: #c00;
198+
color: #4d0000;
199+
}
200+
.custom-block.danger .custom-block-title {
201+
color: #900;
202+
}
203+
.custom-block.danger a {
204+
color: #2c3e50;
205+
}
206+
207+
.custom-block.details {
208+
display: block;
209+
position: relative;
210+
border-radius: 2px;
211+
margin: 1.6em 0;
212+
padding: 1.6em;
213+
background-color: #eee;
214+
}
215+
.custom-block.details h4 {
216+
margin-top: 0;
217+
}
218+
.custom-block.details figure:last-child,
219+
.custom-block.details p:last-child {
220+
margin-bottom: 0;
221+
padding-bottom: 0;
222+
}
223+
.custom-block.details summary {
224+
outline: none;
225+
cursor: pointer;
105226
}

‎docs-svelte-kit/src/lib/footer/Footer.svelte

+33-30
Original file line numberDiff line numberDiff line change
@@ -47,27 +47,25 @@
4747
target="_blank"
4848
rel="noopener noreferrer">Edit this page</a
4949
>
50-
<span>
51-
<svg
52-
xmlns="http://www.w3.org/2000/svg"
53-
aria-hidden="true"
54-
focusable="false"
55-
x="0px"
56-
y="0px"
57-
viewBox="0 0 100 100"
58-
width="15"
59-
height="15"
60-
class="icon outbound"
61-
><path
62-
fill="currentColor"
63-
d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
64-
/>
65-
<polygon
66-
fill="currentColor"
67-
points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
68-
/>
69-
</svg>
70-
</span>
50+
<svg
51+
xmlns="http://www.w3.org/2000/svg"
52+
aria-hidden="true"
53+
focusable="false"
54+
x="0px"
55+
y="0px"
56+
viewBox="0 0 100 100"
57+
width="15"
58+
height="15"
59+
class="icon outbound"
60+
><path
61+
fill="currentColor"
62+
d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
63+
/>
64+
<polygon
65+
fill="currentColor"
66+
points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
67+
/>
68+
</svg>
7169
</div>
7270
{#if fileInfo.lastUpdated}
7371
<div class="last-updated">
@@ -85,29 +83,34 @@
8583
{/if}
8684
</div>
8785
<div class="footer-text">
88-
<span
89-
>This site was built with <a href="https://kit.svelte.dev/" target="_brank">SvelteKit</a
90-
>.</span
91-
>
86+
<span>
87+
This site was built with <a href="https://kit.svelte.dev/" target="_brank">SvelteKit</a>.
88+
</span>
9289
</div>
9390
</footer>
9491

9592
<style>
9693
.footer-tools {
9794
width: 100%;
98-
padding: 1rem;
95+
padding: 0 1rem;
9996
box-sizing: border-box;
10097
display: flex;
10198
}
99+
100+
.edit-link {
101+
display: flex;
102+
gap: 4px;
103+
}
104+
102105
.footer-move {
103106
border-top: 1px solid var(--background-without-opacity);
104107
width: 100%;
105-
padding: 1rem;
108+
padding: 0 1rem;
106109
box-sizing: border-box;
107110
display: flex;
108111
}
109112
.footer-text {
110-
padding: 1rem;
113+
padding: 0 1rem 1rem 1rem;
111114
display: flex;
112115
flex-direction: column;
113116
justify-content: center;
@@ -139,7 +142,7 @@
139142
flex-direction: column;
140143
justify-content: center;
141144
align-items: center;
142-
padding: 40px;
145+
padding: 16px 0 0 0;
143146
}
144147
145148
footer a {
@@ -148,7 +151,7 @@
148151
149152
@media (min-width: 480px) {
150153
footer {
151-
padding: 40px 0;
154+
padding: 24px 0 0 0;
152155
}
153156
}
154157
</style>

0 commit comments

Comments
 (0)