feat: Added navigation bar

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",

src/routes/+layout.svelte

@@ -0,0 +1,15 @@
+<script>
+  import Header from './Header.svelte';
+  import './styles.css';
+</script>
+
+<div class="app">
+  <Header />
+
+  <main>
+    <slot />
+  </main>
+</div>
+
+<style>
+</style>

src/routes/+page.svelte

@@ -1 +1,6 @@
+<svelte:head>
+  <title>Wordacle</title>
+  <meta name="description" content="A Wordle Oracle" />
+</svelte:head>
+
 <h1>Welcome to Wordacle</h1>

src/routes/Header.svelte

@@ -0,0 +1,105 @@
+<script>
+  import { page } from '$app/stores';
+  import github_icon from '$lib/images/github.svg';
+</script>
+
+<header>
+  <div class="corner" />
+
+  <nav>
+    <ul>
+      <li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
+        <a href="/">Home</a>
+      </li>
+      <li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
+        <a href="/about">About</a>
+      </li>
+    </ul>
+  </nav>
+
+  <div class="corner">
+    <a href="https://github.com/szinn/wordacle">
+      <img src={github_icon} alt="Github" />
+    </a>
+  </div>
+</header>
+
+<style>
+  header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .corner {
+    width: 3em;
+    height: 3em;
+  }
+
+  .corner a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .corner img {
+    width: 2em;
+    height: 2em;
+    object-fit: contain;
+  }
+
+  nav {
+    display: flex;
+    justify-content: center;
+    --background: rgba(255, 255, 255, 0.7);
+  }
+
+  ul {
+    position: relative;
+    padding: 0;
+    margin: 0;
+    height: 3em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    list-style: none;
+    background: var(--background);
+    background-size: contain;
+  }
+
+  li {
+    position: relative;
+    height: 100%;
+  }
+
+  li[aria-current='page']::before {
+    --size: 6px;
+    content: '';
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: 0;
+    left: calc(50% - var(--size));
+    border: var(--size) solid transparent;
+    border-top: var(--size) solid var(--color-theme-1);
+  }
+
+  nav a {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    padding: 0 0.5rem;
+    color: var(--color-text);
+    font-weight: 700;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    text-decoration: none;
+    transition: color 0.2s linear;
+  }
+
+  a:hover {
+    color: var(--color-theme-1);
+  }
+</style>

src/routes/about/+page.svelte

@@ -0,0 +1,8 @@
+<svelte:head>
+  <title>About Wordacle</title>
+  <meta name="description" content="About this app" />
+</svelte:head>
+
+<div>
+  <p>This is all about Wordacle.</p>
+</div>

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;

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;
+}