public/css/classes.css

@@ -31,6 +31,11 @@
     padding-left: 10px;
 }
 
+.navbar .navbar-menu {
+    flex-grow: initial;
+    flex-shrink: initial;
+}
+
 .astro-a {
     position: absolute;
     top: -32px;
@@ -86,4 +91,51 @@
     -webkit-text-fill-color: transparent;
     background-size: 400%;
     background-position: 0%;
+}
+
+.astro-a {
+    position: absolute;
+    top: -32px;
+    left: 50%;
+    transform: translatex(-50%);
+    width: 220px;
+    height: auto;
+    z-index: -1;
+}
+
+.text-gradient {
+    background-image: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 400%;
+    background-position: 0%;
+}
+
+.instructions {
+    margin-bottom: 2rem;
+    border: 1px solid rgba(var(--accent-light), 25%);
+    background: linear-gradient(rgba(var(--accent-dark), 66%),
+            rgba(var(--accent-dark), 33%));
+    padding: 1.5rem;
+    border-radius: 8px;
+}
+
+.instructions code {
+    font-size: 0.8em;
+    font-weight: bold;
+    background: rgba(var(--accent-light), 12%);
+    color: rgb(var(--accent-light));
+    border-radius: 4px;
+    padding: 0.3em 0.4em;
+}
+
+.instructions strong {
+    color: rgb(var(--accent-light));
+}
+
+.link-card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
+    gap: 2rem;
+    padding: 0;
 }

public/css/mystyle.css

@@ -13,6 +13,31 @@
     --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%);
 
     font-family: system-ui, sans-serif;
+
+}
+
+html {
+    font-family: system-ui, sans-serif;
+    background: #13151a;
+    background-size: 224px;
+}
+
+main {
+    margin: auto;
+    padding: 1rem;
+    width: 800px;
+    max-width: calc(100% - 2rem);
+    color: white;
+    font-size: 20px;
+    line-height: 1.6;
+}
+
+h1 {
+    font-size: 4rem;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    margin-bottom: 1em;
 }
 
 a:link {

src/components/Head.astro

@@ -8,6 +8,5 @@
 <meta content="she/they" property="pronouns">
 <meta name="generator" content={Astro.generator} />
 <link rel="stylesheet" href="/css/mystyle.css" />
-<link rel="script" href="/scripts/limepot.js" />
 <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
 

src/components/Header.astro

@@ -33,39 +33,5 @@
     </div>
   </nav>
   <div class="navbar-end">
-    <!-- 
-        <a class="navbar-item" href="https://ko-fi.com/limepot">
-          <img src="/assets/other-branding/ko-fi-button-red.png">
-        </a>
-  -->
-    <!-- 
-  <a class="navbar-item" href="https://likeitsthe90s.limepot.xyz/">
-    Lets act like its the 90s
-  </a>
-  -->
   </div>
-  <!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
-  <script>
-    document.addEventListener("DOMContentLoaded", () => {
-      // Get all "navbar-burger" elements
-      const $navbarBurgers = Array.prototype.slice.call(
-        document.querySelectorAll(".navbar-burger"),
-        0
-      );
-
-      // Add a click event on each of them
-      $navbarBurgers.forEach((el) => {
-        el.addEventListener("click", () => {
-          // Get the target from the "data-target" attribute
-          const target = el.dataset.target;
-          const $target = document.getElementById(target);
-
-          // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
-          el.classList.toggle("is-active");
-          $target.classList.toggle("is-active");
-        });
-      });
-    });
-  </script>
 </center>
-<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->

src/layouts/Layout.astro

@@ -31,86 +31,5 @@ const { title } = Astro.props;
         if (chromium)
           window.location.replace("/nochrome");
     </script>
-    <style is:global>
-      .navbar .navbar-menu {
-        flex-grow: initial;
-        flex-shrink: initial;
-      }
-      :root {
-        --accent: 250, 179, 135;
-        --accent-light: 250, 221, 201;
-        --accent-dark: 149, 106, 81;
-        --accent-gradient: linear-gradient(
-          45deg,
-          rgb(var(--accent)),
-          rgb(var(--accent-light)) 30%,
-          white 60%
-        );
-      }
-      html {
-        font-family: system-ui, sans-serif;
-        background: #13151a;
-        background-size: 224px;
-      }
-      main {
-        margin: auto;
-        padding: 1rem;
-        width: 800px;
-        max-width: calc(100% - 2rem);
-        color: white;
-        font-size: 20px;
-        line-height: 1.6;
-      }
-      .astro-a {
-        position: absolute;
-        top: -32px;
-        left: 50%;
-        transform: translatex(-50%);
-        width: 220px;
-        height: auto;
-        z-index: -1;
-      }
-      h1 {
-        font-size: 4rem;
-        font-weight: 700;
-        line-height: 1;
-        text-align: center;
-        margin-bottom: 1em;
-      }
-      .text-gradient {
-        background-image: var(--accent-gradient);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-size: 400%;
-        background-position: 0%;
-      }
-      .instructions {
-        margin-bottom: 2rem;
-        border: 1px solid rgba(var(--accent-light), 25%);
-        background: linear-gradient(
-          rgba(var(--accent-dark), 66%),
-          rgba(var(--accent-dark), 33%)
-        );
-        padding: 1.5rem;
-        border-radius: 8px;
-      }
-      .instructions code {
-        font-size: 0.8em;
-        font-weight: bold;
-        background: rgba(var(--accent-light), 12%);
-        color: rgb(var(--accent-light));
-        border-radius: 4px;
-        padding: 0.3em 0.4em;
-      }
-      .instructions strong {
-        color: rgb(var(--accent-light));
-      }
-      .link-card-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-        gap: 2rem;
-        padding: 0;
-      }
-    </style>
   </body>
 </html>

src/pages/index.astro

@@ -6,25 +6,25 @@ import Card from "../components/Card.astro";
 <Layout title="LimePot">
   <main>
     <div class="content" style="text-align: center;">
-        <marquee Behavior="Alternate">
+      <marquee Behavior="Alternate">
         <h1 class="title">LimePotato</h1>
-        </marquee>
+      </marquee>
-        <hr />
+      <hr />
-        <p class="title">Name(s):</p>
+      <p>
-        <p>
+        Howdy! You can call me <span style="color: #fab387;">[Nelle]</span>,
-          You can call me <span style="color: #fab387;">[Nelle]</span>, although
+        although some call me <span style="color: #fab387;"
-          some call me <span style="color: #fab387;">[Luna, Lilith, ???]</span>.
+          >[Luna, Lilith, ???]</span
-          Or you can simply call me by my username <span style="color: #fab387;"
+        >. Or you can simply call me by my username <span
-            >[LimePot/LimePotato]</span
+          style="color: #fab387;">[LimePot/LimePotato]</span
-          >.
+        >.
-        </p>
+      </p>
-        <hr />
+      <p>
-        <p class="title">Pronoun'd:</p>
+        My pronouns are <span style="color: #fab387;">[She/They]</span>,
-        <p>
+        Alternatively checkout my <a href="https://pronouns.cc/@LimePotato"
-          <span style="color: #fab387;">[She/They]</span>, Alternatively: <a
+          ><u>pronouns.cc page</u></a
-            href="https://pronouns.cc/@LimePotato"><u>pronouns.cc page</u></a
+        >.
-          >.
+      </p>
-        </p>
+      <hr />
     </div>
   </main>
 </Layout>

src/pages/projects.astro

@@ -21,21 +21,15 @@ import Card from "../components/Card.astro";
         <Card
           source="/assets/icons/Forgejo_logo.svg"
           href="https://git.nullafati.xyz/LimePotato/"
-          title="Self-Hosted ForgeJo Instance"
+          title="Git"
           alt="Forgejo Logo"
         />
         <Card
           source="https://avatars.githubusercontent.com/u/67560307?s=200&v=4"
           href="https://modrinth.com/user/limepotato"
-          title="Modrinth"
+          title="Modrinth Profile"
           alt="Modrinth Logo"
         />
-        <Card
-          source="/assets/icons/image-outline.svg"
-          href="https://files.nullafati.xyz/Photos/limepotato/"
-          title="Photography - File Archive"
-          alt="image icon, mountains and a sun in outline"
-        />
       </ul>
       <br /><br />
       <center>