Streamline navbar and index page about me

src/lib/components/Navbar.svelte

@@ -1,5 +1,4 @@
 <script>
-    import { page } from "$app/state";
     import links from "../../data/links.json";
 </script>
 
@@ -9,7 +8,6 @@
         <img src="/favicon.png" alt="a black cat with large eyes"/>
         <a href="/">pancakes</a>
     </span>
-    {#if page.url.pathname !== "/"}
     <ul class="links">
         {#each links as link}
             {#if link.href && !link.mainOnly}
@@ -28,7 +26,6 @@
             {/if}
         {/each}
     </ul>
-    {/if}
 </nav>
 
 <style>
@@ -64,8 +61,17 @@
         list-style: none;
     }
 
-    a {
-        color: var(--text);
+    .icon-link > a {
+        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

@@ -33,7 +33,9 @@
     {/if}
 </svelte:head>
 
+{#if page.url.pathname !== "/"}
     <Navbar/>
+{/if}
 
 {@render children?.()}
 

src/routes/+page.svelte

@@ -45,18 +45,19 @@
     }
 </script>
 
-<main id="main-content">
 <header>
-        <h1 id="about-me">About Me</h1>
-        <p>
-            I'm a 22 year old enby (<em>they/it</em>) from Australia (it's
-            <DateTime display="time" timeZone="Australia/Brisbane"/>
-            ). I like
-            cats, Linux, and programming in C# and Python (for now). You can
-            find my links, projects, and other pages here.
-        </p>
+    <img src="/favicon.png" alt="a black cat with large eyes"/>
+    <h1>pancakes</h1>
 </header>
 
+<main id="main-content">
+    <p>
+        I'm a cat <abbr title="non-binary">enby</abbr> (<abbr
+            title="they/them/their/theirs/themself or it/it/its/its/itself in English">they/it</abbr>) from Australia
+        that likes cats, Linux, and programming. You can find my
+        links, projects, and other pages here.
+    </p>
+
     <h2 id="accounts">Accounts</h2>
 
     <p>Other places you can find me</p>
@@ -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;
 }