Streamline navbar and index page about me

src/lib/components/Navbar.svelte

@@ -1,34 +1,31 @@
 <script>
-    import { page } from "$app/state";
     import links from "../../data/links.json";
 </script>
 
 <a href="#main-content" class="skip-to-main">Skip to main content</a>
 <nav>
     <span class="brand icon-link">
-        <img src="/favicon.png" alt="a black cat with large eyes" />
+        <img src="/favicon.png" alt="a black cat with large eyes"/>
         <a href="/">pancakes</a>
     </span>
-    {#if page.url.pathname !== "/"}
+    <ul class="links">
-        <ul class="links">
+        {#each links as link}
-            {#each links as link}
+            {#if link.href && !link.mainOnly}
-                {#if link.href && !link.mainOnly}
+                <li>
-                    <li>
+                    <div class="icon-link">
-                        <div class="icon-link">
+                        <img
-                            <img
                                 class={link.iconInvert ? "invert" : ""}
                                 src={"/assets/icons/" + link.icon}
                                 alt={link.name}
-                            />
+                        />
-                            <a href={link.href} target="_blank">
+                        <a href={link.href} target="_blank">
-                                {link.name}
+                            {link.name}
-                            </a>
+                        </a>
-                        </div>
+                    </div>
-                    </li>
+                </li>
-                {/if}
+            {/if}
-            {/each}
+        {/each}
-        </ul>
+    </ul>
-    {/if}
 </nav>
 
 <style>
@@ -64,8 +61,17 @@
         list-style: none;
     }
 
-    a {
+    .icon-link > a {
-        color: var(--text);
+        padding-left: 0.15rem;
+        line-height: 2em;
+    }
+
+    .icon-link > img {
+        display: inline-block;
+        width: 2em;
+        max-height: 2em;
+        vertical-align: middle;
+        margin-right: 0.25rem;
     }
 
     .brand {

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { page } from "$app/state";
+    import {page} from "$app/state";
     import Footer from "$lib/components/Footer.svelte";
     import Navbar from "$lib/components/Navbar.svelte";
     import "./inter.css";
@@ -10,31 +10,33 @@
      */
 
     /** @type {Props} */
-    let { children } = $props();
+    let {children} = $props();
 </script>
 
 <svelte:head>
     <title>
         {page.data.title ? page.data.title + " | pancakes" : "pancakes"}
     </title>
-    <meta name="description" content={page.data.description || "🐈‍⬛"} />
+    <meta name="description" content={page.data.description || "🐈‍⬛"}/>
-    <meta property="og:site_name" content="pancakes" />
+    <meta property="og:site_name" content="pancakes"/>
     <meta
-        property="og:url"
+            property="og:url"
-        content={"https://pancakes.gay" + page.url.pathname}
+            content={"https://pancakes.gay" + page.url.pathname}
     />
-    <meta property="og:title" content={page.data.title || "pancakes"} />
+    <meta property="og:title" content={page.data.title || "pancakes"}/>
     {#if page.data.header}
-        <meta property="og:type" content="article" />
+        <meta property="og:type" content="article"/>
     {:else}
-        <meta property="og:type" content="website" />
+        <meta property="og:type" content="website"/>
-        <meta property="og:image" content="/favicon.png" />
+        <meta property="og:image" content="/favicon.png"/>
-        <meta property="og:image:alt" content="a black cat with large eyes" />
+        <meta property="og:image:alt" content="a black cat with large eyes"/>
     {/if}
 </svelte:head>
 
-<Navbar />
+{#if page.url.pathname !== "/"}
+    <Navbar/>
+{/if}
 
 {@render children?.()}
 
-<Footer />
+<Footer/>

src/routes/+page.svelte

@@ -45,17 +45,18 @@
     }
 </script>
 
+<header>
+    <img src="/favicon.png" alt="a black cat with large eyes"/>
+    <h1>pancakes</h1>
+</header>
+
 <main id="main-content">
-    <header>
+    <p>
-        <h1 id="about-me">About Me</h1>
+        I'm a cat <abbr title="non-binary">enby</abbr> (<abbr
-        <p>
+            title="they/them/their/theirs/themself or it/it/its/its/itself in English">they/it</abbr>) from Australia
-            I'm a 22 year old enby (<em>they/it</em>) from Australia (it's
+        that likes cats, Linux, and programming. You can find my
-            <DateTime display="time" timeZone="Australia/Brisbane"/>
+        links, projects, and other pages here.
-            ). I like
+    </p>
-            cats, Linux, and programming in C# and Python (for now). You can
-            find my links, projects, and other pages here.
-        </p>
-    </header>
 
     <h2 id="accounts">Accounts</h2>
 
@@ -500,6 +501,16 @@
 </main>
 
 <style>
+    header {
+        padding-top: 4rem;
+        text-align: center;
+    }
+
+    header img {
+        height: 8rem;
+        border-radius: var(--radius);
+    }
+
     .account-links {
         display: flex;
         flex-direction: row;

src/routes/style.css

@@ -176,6 +176,10 @@ a.button {
     text-decoration: none;
 }
 
+abbr[title] {
+    cursor: help;
+}
+
 input[type="text"] {
     padding: 0.5em;
 
@@ -210,20 +214,6 @@ table.rows tbody tr:nth-child(2n) {
     background-color: transparent;
 }
 
-.icon-link > a,
-.icon-link > span {
-    padding-left: 0.15rem;
-    line-height: 2em;
-}
-
-.icon-link > img {
-    display: inline-block;
-    width: 2em;
-    max-height: 2em;
-    vertical-align: middle;
-    margin-right: 0.25rem;
-}
-
 .upper {
     text-transform: uppercase;
 }