Skip to content

Commit 307838e

Browse files
adam-costeradam-coster
committed
feat: Drafted layout, terms, and privacy pages.
1 parent 5f92953 commit 307838e

12 files changed

Lines changed: 385 additions & 4 deletions

File tree

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
"lint": "prettier --check ."
1414
},
1515
"devDependencies": {
16+
"@fortawesome/free-brands-svg-icons": "^6.7.2",
17+
"@fortawesome/free-solid-svg-icons": "^6.7.2",
1618
"@sveltejs/adapter-static": "^3.0.8",
1719
"@sveltejs/kit": "^2.15.2",
1820
"@sveltejs/vite-plugin-svelte": "^5.0.3",
@@ -21,6 +23,7 @@
2123
"prettier-plugin-svelte": "^3.3.2",
2224
"svelte": "^5.17.1",
2325
"svelte-check": "^4.1.3",
26+
"svelte-fa": "^4.0.3",
2427
"typescript": "^5.7.3",
2528
"vite": "^6.0.7"
2629
}

‎pnpm-lock.yaml‎

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

‎src/app.html‎

Lines changed: 172 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
5+
<link rel="icon" sizes="any" href="%sveltekit.assets%/favicon.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<title>Redirect</title>
88
<meta
@@ -11,6 +11,8 @@
1111
/>
1212
<meta name="theme-color" content="#000000" />
1313
<style>
14+
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
15+
1416
@layer reset {
1517
/* FROM https://www.joshwcomeau.com/css/custom-css-reset/ */
1618
/* 1. Use a more-intuitive box-sizing model */
@@ -82,10 +84,178 @@
8284
isolation: isolate;
8385
}
8486
}
87+
@layer global {
88+
:root {
89+
--font-family: 'Ubuntu', sans-serif;
90+
--font-family-mono: 'Ubuntu Mono', monospace;
91+
92+
--color-logo: #ffd43b;
93+
--color-text: white;
94+
--color-background: #0e0e0e;
95+
--color-text-subtle: rgb(169, 169, 169);
96+
--color-text-danger: rgb(255, 44, 101);
97+
--color-link: rgb(57 156 199);
98+
--color-link-hover: rgb(83 207 207);
99+
--color-link-underline: var(--color-link);
100+
--content-max-width: 960px;
101+
--header-max-width: var(--content-max-width);
102+
}
103+
body {
104+
background-color: var(--color-background);
105+
color: var(--color-text);
106+
font-family: var(--font-family);
107+
margin: auto;
108+
padding-inline: 1em;
109+
max-width: var(--content-max-width);
110+
overflow-wrap: break-word;
111+
min-height: 100vh;
112+
}
113+
114+
p {
115+
font-size: 1.1rem;
116+
}
117+
}
118+
119+
@layer basic {
120+
/* Some sensible defaults for easy overriding in specific components */
121+
h1,
122+
h2,
123+
h3,
124+
h4,
125+
h5,
126+
h6 {
127+
font-weight: bold;
128+
}
129+
130+
a {
131+
color: var(--color-link);
132+
text-decoration: none;
133+
}
134+
135+
a:hover,
136+
a:focus {
137+
color: var(--color-link-hover);
138+
}
139+
140+
a,
141+
a:hover,
142+
a:focus {
143+
text-decoration: underline;
144+
cursor: pointer;
145+
text-decoration-color: var(--color-link-underline);
146+
text-decoration-thickness: 0.1rem;
147+
text-underline-offset: 0.25rem;
148+
}
149+
150+
a:hover {
151+
text-decoration-thickness: 0.2rem;
152+
}
153+
154+
pre,
155+
code {
156+
font-family: var(--font-family-mono);
157+
}
158+
159+
[role='button'] {
160+
cursor: pointer;
161+
user-select: none;
162+
}
163+
164+
/* Add some default margin between common semantic flow items */
165+
:where(p, img, h1, h2, h3, h4, h5, h6, ul, ol, header, table, nav, section)
166+
+ :where(p, img, h1, h2, h3, h4, h5, h6, ul, ol, table, nav, section) {
167+
margin-top: 0.5em;
168+
}
169+
}
170+
171+
/* UTILITY CLASSES */
172+
.reset:where(ul, ol, menu) {
173+
list-style: none;
174+
padding: 0;
175+
margin: 0;
176+
}
177+
178+
.reset:where(a) {
179+
text-decoration: none;
180+
}
181+
182+
:where(button) {
183+
font-size: 1em;
184+
font-style: bold;
185+
color: var(--color, inherit);
186+
text-align: center;
187+
border-style: solid;
188+
border-radius: 0.5em;
189+
border-color: currentColor;
190+
border-width: 0;
191+
margin: 0;
192+
padding: 0;
193+
background: none;
194+
user-select: none;
195+
cursor: pointer;
196+
}
197+
198+
:where(button):hover {
199+
color: var(--color-highlight, var(--color-text-highlight, var(--color-link-hover)));
200+
}
201+
202+
.select-none {
203+
user-select: none;
204+
}
205+
206+
.select-all {
207+
user-select: all;
208+
}
209+
210+
.select-this {
211+
user-select: contain;
212+
}
213+
214+
.monospace {
215+
font-family: var(--font-family-mono);
216+
}
217+
218+
.sr-only:not(:focus):not(:active) {
219+
clip: rect(0 0 0 0);
220+
clip-path: inset(50%);
221+
height: 1px;
222+
overflow: hidden;
223+
position: absolute;
224+
white-space: nowrap;
225+
width: 1px;
226+
}
227+
228+
.scroller {
229+
overflow-y: auto;
230+
--scrollbar-width: 0.4em;
231+
--scrollbar-radius: calc(var(--scrollbar-width) * 0.5);
232+
}
233+
234+
/* Scrolling */
235+
.scroller::-webkit-scrollbar {
236+
width: var(--scrollbar-width);
237+
height: var(--scrollbar-width);
238+
}
239+
240+
.scroller::-webkit-scrollbar-thumb {
241+
/* foreground color */
242+
background: var(--color-text-subtle);
243+
border-radius: var(--scrollbar-radius);
244+
}
245+
246+
.scroller::-webkit-scrollbar-track {
247+
/* background color */
248+
background: var(--color-background);
249+
border-radius: var(--scrollbar-radius);
250+
}
251+
252+
.warning {
253+
color: var(--color-text-danger);
254+
}
85255
</style>
86256
%sveltekit.head%
87257
</head>
88-
<body data-sveltekit-preload-data="hover">
258+
<body data-sveltekit-preload-data="hover" class="scroller">
89259
<div style="display: contents">%sveltekit.body%</div>
90260
</body>
91261
</html>

‎src/lib/Footer.svelte‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<footer>
2+
<nav class="links">
3+
<ul class="reset">
4+
<li><a href="/privacy">🔒 Privacy Policy</a></li>
5+
<li><a href="/terms">📖 Terms of Service</a></li>
6+
<li><a href="https://github.com/bscotch/stitch/issues">🐛 Issues</a></li>
7+
</ul>
8+
</nav>
9+
<p>
10+
💖 Support this project by <a
11+
href="https://store.steampowered.com/app/1401730?utm_source=stitch-site&utm_term=tools&utm_content=support-cta"
12+
>wishlisting Crashlands 2</a
13+
>
14+
</p>
15+
<p>
16+
🚀 Created by <a href="https://www.bscotch.net/">Butterscotch Shenanigans</a>
17+
</p>
18+
</footer>
19+
20+
<style>
21+
footer {
22+
margin-top: 3em;
23+
padding-block: 1.5em;
24+
border-top: 1px solid var(--color-text-subtle);
25+
width: 100%;
26+
max-width: var(--header-max-width);
27+
margin: 3em auto 0 auto;
28+
text-align: center;
29+
}
30+
footer :where(p, a) {
31+
font-size: 0.8rem;
32+
}
33+
ul {
34+
display: flex;
35+
flex-direction: row;
36+
justify-content: center;
37+
gap: 0.75em;
38+
}
39+
</style>

‎src/lib/Header.svelte‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<script lang="ts">
2+
import { base } from '$app/paths';
3+
import { faGithub } from '@fortawesome/free-brands-svg-icons';
4+
import { faDiamondTurnRight } from '@fortawesome/free-solid-svg-icons';
5+
import Fa from 'svelte-fa';
6+
</script>
7+
8+
<nav>
9+
<a href={base || '/'} title="Go home">
10+
<span class="sr-only">Go Home</span>
11+
<span class="name">
12+
<Fa icon={faDiamondTurnRight} size="lg" color="var(--color-logo)" /> Redirector
13+
</span>
14+
</a>
15+
16+
<menu class="reset">
17+
<li>
18+
<a href="https://github.com/bscotch/redirect" title="See the source code">
19+
<Fa icon={faGithub} size="lg" />
20+
</a>
21+
</li>
22+
</menu>
23+
</nav>
24+
25+
<style>
26+
nav {
27+
display: flex;
28+
width: 100%;
29+
max-width: var(--header-max-width);
30+
justify-content: space-between;
31+
}
32+
nav menu a {
33+
color: var(--color-text);
34+
}
35+
nav menu a:hover {
36+
color: var(--color-link-hover);
37+
}
38+
nav a {
39+
display: flex;
40+
align-items: center;
41+
text-decoration: none;
42+
}
43+
nav a:hover {
44+
text-decoration: underline;
45+
}
46+
nav a .name {
47+
font-weight: bold;
48+
color: var(--color-text);
49+
display: inline-flex;
50+
gap: 0.5rem;
51+
}
52+
</style>

0 commit comments

Comments
 (0)