diff --git a/package-lock.json b/package-lock.json index 5480727..d5b6a83 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "wordacle", "version": "0.0.1", "devDependencies": { + "@fontsource/fira-mono": "^4.5.10", "@playwright/test": "^1.28.1", "@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/adapter-node": "^5.0.1", @@ -497,6 +498,12 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fontsource/fira-mono": { + "version": "4.5.10", + "resolved": "https://registry.npmjs.org/@fontsource/fira-mono/-/fira-mono-4.5.10.tgz", + "integrity": "sha512-bxUnRP8xptGRo8YXeY073DSpfK74XpSb0ZyRNpHV9WvLnJ7TwPOjZll8hTMin7zLC6iOp59pDZ8EQDj1gzgAQQ==", + "dev": true + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", diff --git a/package.json b/package.json index b8a0d74..771683b 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "test:unit": "vitest" }, "devDependencies": { + "@fontsource/fira-mono": "^4.5.10", "@playwright/test": "^1.28.1", "@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/adapter-node": "^5.0.1", @@ -23,13 +24,13 @@ "@types/eslint": "^8.56.0", "@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/parser": "^7.0.0", - "eslint": "^8.56.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-svelte": "^2.35.1", - "prettier": "^3.1.1", + "eslint": "^8.56.0", "prettier-plugin-svelte": "^3.1.2", - "svelte": "^4.2.7", + "prettier": "^3.1.1", "svelte-check": "^3.6.0", + "svelte": "^4.2.7", "tslib": "^2.4.1", "typescript": "^5.0.0", "vite": "^5.0.3", diff --git a/src/lib/images/github.svg b/src/lib/images/github.svg new file mode 100644 index 0000000..0e5f54f --- /dev/null +++ b/src/lib/images/github.svg @@ -0,0 +1,16 @@ + + + + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte new file mode 100644 index 0000000..0ca0772 --- /dev/null +++ b/src/routes/+layout.svelte @@ -0,0 +1,15 @@ + + +
+
+ +
+ +
+
+ + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 915d3c2..9581be6 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1 +1,6 @@ + + Wordacle + + +

Welcome to Wordacle

diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte new file mode 100644 index 0000000..aa06835 --- /dev/null +++ b/src/routes/Header.svelte @@ -0,0 +1,105 @@ + + +
+
+ + + +
+ + Github + +
+
+ + diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte new file mode 100644 index 0000000..00598c3 --- /dev/null +++ b/src/routes/about/+page.svelte @@ -0,0 +1,8 @@ + + About Wordacle + + + +
+

This is all about Wordacle.

+
diff --git a/src/routes/about/+page.ts b/src/routes/about/+page.ts new file mode 100644 index 0000000..e739ef4 --- /dev/null +++ b/src/routes/about/+page.ts @@ -0,0 +1,9 @@ +import { dev } from '$app/environment'; + +// we don't need any JS on this page, though we'll load +// it in dev so that we get hot module replacement +export const csr = dev; + +// since there's no dynamic data here, we can prerender +// it so that it gets served as a static asset in production +export const prerender = true; diff --git a/src/routes/styles.css b/src/routes/styles.css new file mode 100644 index 0000000..1dc484a --- /dev/null +++ b/src/routes/styles.css @@ -0,0 +1,107 @@ +@import '@fontsource/fira-mono'; + +:root { + --font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + --font-mono: 'Fira Mono', monospace; + --color-bg-0: rgb(202, 216, 228); + --color-bg-1: hsl(209, 36%, 86%); + --color-bg-2: hsl(224, 44%, 95%); + --color-theme-1: #ff3e00; + --color-theme-2: #4075a6; + --color-text: rgba(0, 0, 0, 0.7); + --column-width: 42rem; + --column-margin-top: 4rem; + font-family: var(--font-body); + color: var(--color-text); +} + +body { + min-height: 100vh; + margin: 0; + background-attachment: fixed; + background-color: var(--color-bg-1); + background-size: 100vw 100vh; + background-image: radial-gradient( + 50% 50% at 50% 50%, + rgba(255, 255, 255, 0.75) 0%, + rgba(255, 255, 255, 0) 100% + ), + linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%); +} + +h1, +h2, +p { + font-weight: 400; +} + +p { + line-height: 1.5; +} + +a { + color: var(--color-theme-1); + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +h1 { + font-size: 2rem; + text-align: center; +} + +h2 { + font-size: 1rem; +} + +pre { + font-size: 16px; + font-family: var(--font-mono); + background-color: rgba(255, 255, 255, 0.45); + border-radius: 3px; + box-shadow: 2px 2px 6px rgb(255 255 255 / 25%); + padding: 0.5em; + overflow-x: auto; + color: var(--color-text); +} + +.text-column { + display: flex; + max-width: 48rem; + flex: 0.6; + flex-direction: column; + justify-content: center; + margin: 0 auto; +} + +input, +button { + font-size: inherit; + font-family: inherit; +} + +button:focus:not(:focus-visible) { + outline: none; +} + +@media (min-width: 720px) { + h1 { + font-size: 2.4rem; + } +} + +.visually-hidden { + border: 0; + clip: rect(0 0 0 0); + height: auto; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; +}