Skip to content

Commit 083ea48

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

File tree

13 files changed

+637
-681
lines changed

13 files changed

+637
-681
lines changed

‎README.md

Lines changed: 160 additions & 210 deletions
Large diffs are not rendered by default.

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

Lines changed: 184 additions & 63 deletions
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

Lines changed: 33 additions & 30 deletions
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy