alignment fixes

thelocalgodd · Apr 22, 2024 · d47422e · d47422e
1 parent e8ea523
commit d47422e
Show file tree

Hide file tree

Showing 11 changed files with 227 additions and 177 deletions.
diff --git a/public/envelope-solid.svg b/public/envelope-solid.svg
diff --git a/public/square-github.svg b/public/square-github.svg
diff --git a/public/square-twitter.svg b/public/square-twitter.svg
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,23 +1,25 @@
 ---
 const date = new Date();
-const year = date.getFullYear()
+const year = date.getFullYear();
 ---
 
-<hr class="mx-auto border-solid border border-zinc-400 mb-4">
+<hr class="mx-auto border-solid border border-zinc-400 mb-4" />
 
-<footer class="flex justify-between w-[350px] md:w-auto md:px-10 mx-auto mb-2 px-3 text-sm">
-    <div id="left" class="">
-        <p>&copy; {year} | thelocalgodd</p>
-        <p class="text-zinc-500 ">astro | tailwind | github pages</p>
-    </div>
-    <div id="right" class="text-right">
-        [ tlg ]
-        <p id="heading">
-            <a href="https://github.com/thelocalgodd">
-                <u class="underline-offset-4">
-                    <p class="hover:text-zinc-600">source code</p>
-                </u>
-            </a>
-        </p>
-    </div>
-</footer>
+<footer
+  class="flex justify-between w-[350px] md:w-auto md:px-10 mx-auto mb-2 px-3 text-sm"
+>
+  <div id="left" class="">
+    <p>&copy; {year} | thelocalgodd</p>
+    <p class="text-zinc-500">astro | tailwind | github pages</p>
+  </div>
+  <div id="right" aria-label="footer, right side" class="text-right">
+    [ tlg ]
+    <p id="heading" aria-label="source code link">
+      <a aria-label="source code link" href="https://github.com/thelocalgodd">
+        <u class="underline-offset-4">
+          <p class="hover:text-zinc-600">source code</p>
+        </u>
+      </a>
+    </p>
+  </div>
+</footer>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,30 +1,59 @@
 ---
-import '../styles/style.css'
-import Navbar from './Navbar.astro'
+import "../styles/style.css";
+import Navbar from "./Navbar.astro";
 ---
 
-<div id="container" class="flex flex-col md:flex-row md:justify-between my-5 items-center justify-between text-xl">
-    <p class="text-xl mb-5">
-        <a href="/">[ tlg ]</a>
-    </p>
+<header
+  id="container"
+  class="flex flex-col md:h-10 md:flex-row md:items-start md:justify-between my-5 items-center justify-between text-xl min-w-max"
+>
+  <p class="text-xl mb-5">
+    <a href="/">[ tlg ]</a>
+  </p>
 
-    <Navbar />
-
-    <ul class="flex items-center border outline-1 p-1 bg-zinc-300 rounded-2xl">
-        <li class="ml-2">
-            <a href="mailto:splashvincentk@outlook.com">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20px" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>
-            </a>
-        </li>
-        <li class="ml-2">
-            <a href="https://x.com/dzidula_1">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20px" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>            </a>
-        </li>
-        <li class="mx-2">
-            <a href="https://github.com/thelocalgodd">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20px" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M448 96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96zM265.8 407.7c0-1.8 0-6 .1-11.6c.1-11.4 .1-28.8 .1-43.7c0-15.6-5.2-25.5-11.3-30.7c37-4.1 76-9.2 76-73.1c0-18.2-6.5-27.3-17.1-39c1.7-4.3 7.4-22-1.7-45c-13.9-4.3-45.7 17.9-45.7 17.9c-13.2-3.7-27.5-5.6-41.6-5.6s-28.4 1.9-41.6 5.6c0 0-31.8-22.2-45.7-17.9c-9.1 22.9-3.5 40.6-1.7 45c-10.6 11.7-15.6 20.8-15.6 39c0 63.6 37.3 69 74.3 73.1c-4.8 4.3-9.1 11.7-10.6 22.3c-9.5 4.3-33.8 11.7-48.3-13.9c-9.1-15.8-25.5-17.1-25.5-17.1c-16.2-.2-1.1 10.2-1.1 10.2c10.8 5 18.4 24.2 18.4 24.2c9.7 29.7 56.1 19.7 56.1 19.7c0 9 .1 21.7 .1 30.6c0 4.8 .1 8.6 .1 10c0 4.3-3 9.5-11.5 8C106 393.6 59.8 330.8 59.8 257.4c0-91.8 70.2-161.5 162-161.5s166.2 69.7 166.2 161.5c.1 73.4-44.7 136.3-110.7 158.3c-8.4 1.5-11.5-3.7-11.5-8zm-90.5-54.8c-.2-1.5 1.1-2.8 3-3.2c1.9-.2 3.7 .6 3.9 1.9c.3 1.3-1 2.6-3 3c-1.9 .4-3.7-.4-3.9-1.7zm-9.1 3.2c-2.2 .2-3.7-.9-3.7-2.4c0-1.3 1.5-2.4 3.5-2.4c1.9-.2 3.7 .9 3.7 2.4c0 1.3-1.5 2.4-3.5 2.4zm-14.3-2.2c-1.9-.4-3.2-1.9-2.8-3.2s2.4-1.9 4.1-1.5c2 .6 3.3 2.1 2.8 3.4c-.4 1.3-2.4 1.9-4.1 1.3zm-12.5-7.3c-1.5-1.3-1.9-3.2-.9-4.1c.9-1.1 2.8-.9 4.3 .6c1.3 1.3 1.8 3.3 .9 4.1c-.9 1.1-2.8 .9-4.3-.6zm-8.5-10c-1.1-1.5-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3c1.1 1.5 1.1 3.3 0 4.1c-.9 .6-2.6 0-3.7-1.5zm-6.3-8.8c-1.1-1.3-1.3-2.8-.4-3.5c.9-.9 2.4-.4 3.5 .6c1.1 1.3 1.3 2.8 .4 3.5c-.9 .9-2.4 .4-3.5-.6zm-6-6.4c-1.3-.6-1.9-1.7-1.5-2.6c.4-.6 1.5-.9 2.8-.4c1.3 .7 1.9 1.8 1.5 2.6c-.4 .9-1.7 1.1-2.8 .4z"/></svg>
-            </a>
-        </li>
-    </ul>	
-</div>
+  <Navbar />
 
+  <ul
+    class="flex items-center justify-center border outline-1 p-1 bg-zinc-300 rounded-2xl"
+  >
+    <li class="ml-2">
+      <a aria-label="email address" href="mailto:splashvincentk@outlook.com">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20px"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"
+          ></path>
+        </svg>
+      </a>
+    </li>
+    <li class="ml-2">
+      <a aria-label="x.com link" href="https://x.com/dzidula_1">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20px"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
+          ></path>
+        </svg>
+      </a>
+    </li>
+    <li class="mx-2">
+      <a aria-label="github.com link" href="https://github.com/thelocalgodd">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20px"
+          viewBox="0 0 448 512"
+        >
+          <path
+            d="M448 96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96zM265.8 407.7c0-1.8 0-6 .1-11.6c.1-11.4 .1-28.8 .1-43.7c0-15.6-5.2-25.5-11.3-30.7c37-4.1 76-9.2 76-73.1c0-18.2-6.5-27.3-17.1-39c1.7-4.3 7.4-22-1.7-45c-13.9-4.3-45.7 17.9-45.7 17.9c-13.2-3.7-27.5-5.6-41.6-5.6s-28.4 1.9-41.6 5.6c0 0-31.8-22.2-45.7-17.9c-9.1 22.9-3.5 40.6-1.7 45c-10.6 11.7-15.6 20.8-15.6 39c0 63.6 37.3 69 74.3 73.1c-4.8 4.3-9.1 11.7-10.6 22.3c-9.5 4.3-33.8 11.7-48.3-13.9c-9.1-15.8-25.5-17.1-25.5-17.1c-16.2-.2-1.1 10.2-1.1 10.2c10.8 5 18.4 24.2 18.4 24.2c9.7 29.7 56.1 19.7 56.1 19.7c0 9 .1 21.7 .1 30.6c0 4.8 .1 8.6 .1 10c0 4.3-3 9.5-11.5 8C106 393.6 59.8 330.8 59.8 257.4c0-91.8 70.2-161.5 162-161.5s166.2 69.7 166.2 161.5c.1 73.4-44.7 136.3-110.7 158.3c-8.4 1.5-11.5-3.7-11.5-8zm-90.5-54.8c-.2-1.5 1.1-2.8 3-3.2c1.9-.2 3.7 .6 3.9 1.9c.3 1.3-1 2.6-3 3c-1.9 .4-3.7-.4-3.9-1.7zm-9.1 3.2c-2.2 .2-3.7-.9-3.7-2.4c0-1.3 1.5-2.4 3.5-2.4c1.9-.2 3.7 .9 3.7 2.4c0 1.3-1.5 2.4-3.5 2.4zm-14.3-2.2c-1.9-.4-3.2-1.9-2.8-3.2s2.4-1.9 4.1-1.5c2 .6 3.3 2.1 2.8 3.4c-.4 1.3-2.4 1.9-4.1 1.3zm-12.5-7.3c-1.5-1.3-1.9-3.2-.9-4.1c.9-1.1 2.8-.9 4.3 .6c1.3 1.3 1.8 3.3 .9 4.1c-.9 1.1-2.8 .9-4.3-.6zm-8.5-10c-1.1-1.5-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3c1.1 1.5 1.1 3.3 0 4.1c-.9 .6-2.6 0-3.7-1.5zm-6.3-8.8c-1.1-1.3-1.3-2.8-.4-3.5c.9-.9 2.4-.4 3.5 .6c1.1 1.3 1.3 2.8 .4 3.5c-.9 .9-2.4 .4-3.5-.6zm-6-6.4c-1.3-.6-1.9-1.7-1.5-2.6c.4-.6 1.5-.9 2.8-.4c1.3 .7 1.9 1.8 1.5 2.6c-.4 .9-1.7 1.1-2.8 .4z"
+          ></path>
+        </svg>
+      </a>
+    </li>
+  </ul>
+</header>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -1,28 +1,22 @@
 ---
-import '../styles/style.css'
+import "../styles/style.css";
 
 const pathname = new URL(Astro.request.url).pathname;
 const currentPath = pathname.slice(1);
 ---
 
 <ul class="flex items-center md:justify-start justify-center text-lg mb-4">
-    <li class="border border-dashed border-zinc-300 bg-zinc-300 px-3 flex items-center justify-center rounded-xl hover:border-zinc-600 mx-2">
-        <a 
-            href="/" 
-            class="mx-3"
-            id={currentPath === "" ? "active" : ""}
-        >
-            home
-        </a>
-    </li>
-    <li class="border border-dashed border-zinc-600 hover:border-blue-300 px-3 flex items-center justify-center rounded-xl mx-2">
-        <a 
-            href="/blog" 
-            class="mx-3"
-            id={currentPath === "blog" ? "active" : ""}
-        >
-            blog
-        </a>
-    </li>
-    <li>
-</ul>
+  <li
+    class="border border-dashed border-zinc-300 bg-zinc-300 px-3 flex items-center justify-center rounded-xl hover:border-zinc-600 mx-2"
+  >
+    <a href="/" class="mx-3" id={currentPath === "" ? "active" : ""}> home </a>
+  </li>
+
+  <li
+    class="border border-dashed border-zinc-600 hover:border-blue-300 px-3 flex items-center justify-center rounded-xl mx-2"
+  >
+    <a href="/blog" class="mx-3" id={currentPath === "blog" ? "active" : ""}>
+      blog
+    </a>
+  </li>
+</ul>
diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro
@@ -1,16 +1,17 @@
 ---
 import Tag from "./Tag.astro";
 
-const {title, description, link, tag} = Astro.props;
+const { title, description, link, tag } = Astro.props;
 ---
 
-
-
 <a href={link}>
-    <div id="project" class="border border-solid border-zinc-600 hover:bg-zinc-300 hover:border-zinc-300 p-5 w-[250px] my-2 mx-2 rounded-xl flex flex-col">
-        <p class="text-zinc-600 mb-2">{title}</p>
-        <p class="">{description}</p>
+  <div
+    id="project"
+    class="border border-solid border-zinc-600 hover:bg-zinc-300 hover:border-zinc-300 p-5 w-[250px] my-2 mx-2 rounded-xl flex flex-col"
+  >
+    <p class="text-zinc-600 mb-2">{title}</p>
+    <p class="">{description}</p>
 
-        <Tag name={tag} />
-    </div>
-</a>
+    <Tag name={tag} />
+  </div>
+</a>
diff --git a/src/components/SpotifyEmbed.jsx b/src/components/SpotifyEmbed.jsx
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -2,11 +2,9 @@
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import { ViewTransitions } from "astro:transitions";
-const { pageTitle } = Astro.props;
-
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
-const { title, description, image = '/placeholder-social.jpg'} = Astro.props;
+const { pageTitle, description, image = "/placeholder.png" } = Astro.props;
 ---
 
 <html lang="en">
@@ -17,31 +15,43 @@ const { title, description, image = '/placeholder-social.jpg'} = Astro.props;
     <meta name="generator" content={Astro.generator} />
 
     <!-- Analytics -->
-	  <script defer src="https://analytics.us.umami.is/script.js" data-website-id="f2eb0fb3-2348-4483-89a8-56906584f090"></script>
+    <script
+      defer
+      src="https://analytics.us.umami.is/script.js"
+      data-website-id="f2eb0fb3-2348-4483-89a8-56906584f090"></script>
 
     <!-- Primary Meta Tags -->
-    <meta name="description" content="Vincent Kwaku Kpemlie | welcome to my page, I am currently a CS Major at KNUST, Kumasi." />
+    <meta
+      name="description"
+      content="Vincent Kwaku Kpemlie | welcome to my page, I am currently a CS Major at KNUST, Kumasi."
+    />
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://test.thelocalgodd.me/" />
     <meta property="og:title" content="VINCENT KWAKU KPEMLIE | tlg" />
-    <meta property="og:description" content="Vincent Kwaku Kpemlie | welcome to my page, I am currently a CS Major at KNUST, Kumasi." />
+    <meta
+      property="og:description"
+      content="Vincent Kwaku Kpemlie | welcome to my page, I am currently a CS Major at KNUST, Kumasi."
+    />
     <meta property="og:image" content="/placeholder" />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
     <meta property="twitter:url" content="https://test.thelocalgodd.me/" />
     <meta property="twitter:title" content="tlg | hello world" />
-    <meta property="twitter:description" content="Vincent Kwaku Kpemlie | welcome to my page, I am currently a CS Major at KNUST, Kumasi." />
+    <meta
+      property="twitter:description"
+      content="Vincent Kwaku Kpemlie | welcome to my page, I am currently a CS Major at KNUST, Kumasi."
+    />
     <meta property="twitter:image" content="/placeholder" />
 
     <link rel="canonical" href={canonicalURL} />
     <link rel="stylesheet" href="/global.css" />
     <link rel="stylesheet" href="/styles.css" />
     <link rel="stylesheet" href="/prism" />
 
-<!-- Meta Tags Generated with https://metatags.io -->
+    <!-- Meta Tags Generated with https://metatags.io -->
 
     <title>{pageTitle}</title>
     <ViewTransitions />

diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -5,25 +5,26 @@ const postCount = allPosts.length;
 import "../styles/style.css";
 import BaseLayout from "../layouts/BaseLayout.astro";
 ---
-<BaseLayout pageTitle = "tlg | blog">
-    <section id="blog flex items-center">
-      <div
-        id="blog-post-count" 
-        class="px-5 py-1 mx-auto md:mx-0 mb-10 border border-solid border-zinc-600 w-fit my-2 rounded-full"
-      >
-        <p id="blogPostCount">blog posts: {postCount}</p>
-      </div>
 
-      <ul>
-        {
-          allPosts.map((post) => (
-            <BlogPost 
-              title = {post.frontmatter.title}
-              date = {post.frontmatter.pubDate}
-              post = {post.url}
-			      />
-          ))
-        }
-      </ul>
-    </section>
-</BaseLayout>
+<BaseLayout pageTitle="tlg | blog">
+  <section id="blog flex items-center">
+    <div
+      id="blog-post-count"
+      class="px-5 py-1 mx-auto md:mx-0 mb-10 border border-solid border-zinc-600 w-fit my-2 rounded-full"
+    >
+      <p id="blogPostCount">blog posts: {postCount}</p>
+    </div>
+
+    <ul>
+      {
+        allPosts.map((post) => (
+          <BlogPost
+            title={post.frontmatter.title}
+            date={post.frontmatter.pubDate}
+            post={post.url}
+          />
+        ))
+      }
+    </ul>
+  </section>
+</BaseLayout>