remove back button

src/components/Back.astro

@@ -1,20 +0,0 @@
----
-export interface Props {
-  url: string;
-  text?: string;
-}
-const { text = "Back", url } = Astro.props;
----
-
-<nav><a class="back-link" href={url}>&larr; {text}</a></nav>
-
-<style>
-  nav {
-    margin-bottom: -1rem;
-  }
-
-  nav a.back-link {
-    font-size: var(--font-size-lg);
-    text-decoration: none;
-  }
-</style>

src/components/Nav.astro

@@ -6,6 +6,8 @@ export type Link = {
   newTab?: boolean;
 };
 
+const url = Astro.url.pathname.toString();
+
 export interface Props {
   links: Array<Link>;
 }
@@ -13,43 +15,57 @@ export interface Props {
 const { links } = Astro.props;
 ---
 
-<nav>
+<div class="nav-wrapper">
-  <div id="wrapper">
+  <nav>
-    {
+    <div id="left-wrapper">
-      links
+      {
-        .filter((link) => link.url !== "")
+        (url !== "/") &&
-        .map((link) => (
+        (<a href="/"><Icon pack="mdi" name="home" />Home</a>)
-          <a
+      }
-            href={link.url}
+    </div>
-            target={link.newTab ? "_blank" : null}
+    <div id="right-wrapper">
-            title={link.icon}
+      {
-          >
+        links
-            <Icon pack="mdi" name={link.icon} />
+          .filter((link) => link.url !== "")
-          </a>
+          .map((link) => (
-        ))
+            <a href={link.url} target={link.newTab ? "_blank" : null}>
-    }
+              <Icon pack="mdi" name={link.icon} /> {link.icon}
-  </div>
+            </a>
-</nav>
+          ))
+      }
+    </div>
+  </nav>
+</div>
 
 <style>
-  nav {
+  div.nav-wrapper {
-    width: 100%;
     background: var(--ayo-gradient);
   }
-  nav a {
+  nav {
-    text-decoration: none;
+    display: flex;
+    width: var(--content-width);
+    margin: 0 auto;
   }
-  nav a:hover svg {
+  nav a {
+    display: inline-block;
+    text-decoration: underline;
+    font-weight: normal;
+    color: var(--color-bg);
+    padding: 5px;
+  }
+  nav a:hover {
     color: var(--color-brand-complement);
   }
+
   nav a svg {
-    color: var(--color-bg);
+    width: 0.75rem;
-    width: 1rem;
-    padding: 1rem;
   }
-  #wrapper {
+
-    max-width: var(--content-width);
+  #left-wrapper,
-    margin: 0 auto;
+  #right-wrapper {
+    flex: 1;
+  }
+  #right-wrapper {
     text-align: right;
   }
 </style>

src/layouts/Layout.astro

@@ -1,4 +1,5 @@
 ---
+import "./reset.css";
 import Head from "../components/Head.astro";
 import Nav from "../components/Nav.astro";
 import type { Link } from "../components/Nav.astro";
@@ -9,10 +10,6 @@ export interface Props {
 
 const { title, description } = Astro.props;
 const links: Link[] = [
-  {
-    url: "/",
-    icon: "home",
-  },
   {
     url: "https://ayos.blog",
     icon: "blog",

src/layouts/reset.css

@@ -0,0 +1,76 @@
+/**
+THANKS TO JOSH COMEAU FOR HIS CUSTOM CSS RESET
+👉 https://www.joshwcomeau.com/css/custom-css-reset/
+**/
+
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+/*
+    2. Remove default margin
+  */
+* {
+  margin: 0;
+}
+/*
+    3. Allow percentage-based heights in the application
+  */
+html,
+body {
+  height: 100%;
+}
+/*
+    Typographic tweaks!
+    4. Add accessible line-height
+    5. Improve text rendering
+  */
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+    6. Improve media defaults
+  */
+img,
+picture,
+video,
+canvas,
+svg,
+iframe {
+  display: block;
+  max-width: 100%;
+  margin: 0 auto;
+}
+/*
+    7. Remove built-in form typography styles
+  */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+/*
+    8. Avoid text overflows
+  */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+/*
+    9. Create a root stacking context
+  */
+#root,
+#__next {
+  isolation: isolate;
+}

src/pages/now/and-then/index.astro

@@ -1,7 +1,6 @@
 ---
 import Layout from "../../../layouts/Layout.astro";
 import Footer from "../../../components/Footer.astro";
-import Back from "../../../components/Back.astro";
 import Posts from "../../../components/Posts.astro";
 
 const posts = await Astro.glob("./posts/*.astro");
@@ -10,7 +9,6 @@ const title = "Previously...";
 
 <Layout title={title} description="What Ayo Ayco have been up to?">
   <main>
-    <Back text="Home" url="/" />
     <h1><span class="text-gradient">{title}</span></h1>
     <em>What have I been up to?</em>
     <Posts posts={posts} />

src/pages/now/and-then/posts/09-20-2022.astro

@@ -1,7 +1,6 @@
 ---
 import Layout from "../../../../layouts/Layout.astro";
 import Footer from "../../../../components/Footer.astro";
-import Back from "../../../../components/Back.astro";
 const title = "Settling in The Netherlands";
 const description =
   "This year (2022) I have moved to The Netherlands with my family; specifically to the northern area of Amsterdam.";
@@ -9,7 +8,6 @@ const description =
 
 <Layout title={title} description={description}>
   <main>
-    <Back url="/now" />
     <h1><span class="text-gradient">{title}</span></h1>
     <p>
       This year (2022) I have moved to The Netherlands with my family;

src/pages/now/index.astro

@@ -1,7 +1,6 @@
 ---
 import Layout from "../../layouts/Layout.astro";
 import Footer from "../../components/Footer.astro";
-import Back from "../../components/Back.astro";
 import Posts from "../../components/Posts.astro";
 
 const posts = await Astro.glob("./and-then/posts/*.astro");
@@ -9,7 +8,6 @@ const posts = await Astro.glob("./and-then/posts/*.astro");
 
 <Layout title="Now" description="What is Ayo Ayco currently up to?">
   <main>
-    <Back url="/" />
     <h1><span class="text-gradient">Now</span></h1>
     <em>What am I currently up to?</em>
     <p>

src/pages/showcase/astro-github-stats.astro

@@ -1,7 +1,6 @@
 ---
 import Layout from "../../layouts/Layout.astro";
 import Footer from "../../components/Footer.astro";
-import Back from "../../components/Back.astro";
 import GithubStats from "astro-github-stats";
 ---
 
@@ -10,7 +9,6 @@ import GithubStats from "astro-github-stats";
   description="Embed GitHub stats on your Astro page"
 >
   <main>
-    <Back url="/showcase" />
     <h1>Astro GitHub Stats</h1>
     <p>Embed GitHub stats on your Astro page</p>
     <ul>

src/pages/showcase/astro-reactive-form.astro

@@ -1,7 +1,6 @@
 ---
 import Layout from "../../layouts/Layout.astro";
 import Footer from "../../components/Footer.astro";
-import Back from "../../components/Back.astro";
 
 import Form, { ControlConfig, FormGroup } from "@astro-reactive/form";
 import { Validators } from "@astro-reactive/validator";
@@ -70,7 +69,6 @@ const characteristicsForm: FormGroup = new FormGroup(
   description="Generate a dynamic form based on your data, and modify programatically"
 >
   <main>
-    <Back url="/showcase" />
     <h1>Astro Reactive Form</h1>
     <p>
       Generate a dynamic form based on your data, and modify programatically

src/pages/showcase/index.astro

@@ -2,7 +2,6 @@
 import Layout from "../../layouts/Layout.astro";
 import Footer from "../../components/Footer.astro";
 import Card from "../../components/Card.astro";
-import Back from "../../components/Back.astro";
 ---
 
 <Layout
@@ -10,7 +9,6 @@ import Back from "../../components/Back.astro";
   description="See demos of opensource side projects Ayo Ayco created"
 >
   <main>
-    <Back url="/" />
     <h1>Fun <span class="text-gradient">Side Projects</span></h1>
     <ul role="list">
       <Card

src/pages/social.astro

@@ -2,7 +2,6 @@
 import Layout from "../layouts/Layout.astro";
 import Card from "../components/Card.astro";
 import Footer from "../components/Footer.astro";
-import Back from "../components/Back.astro";
 ---
 
 <Layout
@@ -10,7 +9,6 @@ import Back from "../components/Back.astro";
   description="Connect with Ayo Ayco on various social platforms"
 >
   <main>
-    <Back url="/" />
     <h1>Social <span class="text-gradient">Links</span></h1>
     <ul role="list" class="link-card-grid">
       <Card