From 4aa3865148675812cef1949df786a403a048b9c9 Mon Sep 17 00:00:00 2001
From: Firq <firelp42@gmail.com>
Date: Sat, 8 Jul 2023 15:02:07 +0200
Subject: [PATCH] Finishing Touches

---
 src/components/contactCard.astro    | 28 ++++++++++--------
 src/components/navbar.astro         |  2 +-
 src/components/technologyCard.astro | 12 +++++---
 src/layouts/aboutSection.astro      |  6 ++++
 src/layouts/blogPost.astro          | 46 ++++++++++++++++++++++++-----
 src/layouts/contactSection.astro    |  6 ++++
 6 files changed, 76 insertions(+), 24 deletions(-)

diff --git a/src/components/contactCard.astro b/src/components/contactCard.astro
index 0a6ed12..1317487 100644
--- a/src/components/contactCard.astro
+++ b/src/components/contactCard.astro
@@ -24,15 +24,27 @@ const icon: string = `background-image: url('/assets/social/${image}.webp')`
     text-decoration: none;
   }
 
+  article div {
+    border-radius: 1.25rem;
+    background-size: contain;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    --size-value: 6.25rem;
+    width: var(--size-value);
+    height: var(--size-value);
+  }
+
   article:hover span {
-    padding: 0.5rem 0.5rem;
+    border-radius: 1.25rem;
+    padding: 0 0.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     background-color: var(--c-darkgray);
-    height: 85%;
-    width: 100%;
+    height: calc(var(--size-value) + 0.1rem);
+    width: calc(var(--size-value) + 0.1rem);
     opacity: 90%;
   }
 
@@ -51,16 +63,8 @@ const icon: string = `background-image: url('/assets/social/${image}.webp')`
   article span {
     display: none;
   }
-
-  article div {
-    background-size: contain;
-    width: 100px;
-    height: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
   article {
+    border-radius: 1.25rem;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/src/components/navbar.astro b/src/components/navbar.astro
index a8fe435..8653125 100644
--- a/src/components/navbar.astro
+++ b/src/components/navbar.astro
@@ -110,7 +110,7 @@
     justify-self: top;
   }
 
-  @media (min-width: 1120px) {
+  @media (min-width: 1140px) {
     .mobile {
       display: none;
     }
diff --git a/src/components/technologyCard.astro b/src/components/technologyCard.astro
index b710ae2..55f2e8d 100644
--- a/src/components/technologyCard.astro
+++ b/src/components/technologyCard.astro
@@ -33,28 +33,32 @@ const icon: string = `background-image: url('/assets/technologies/${image}.webp'
     height: auto;
     width: auto;
     line-height: 100px;
+    border-radius: 1.25rem;
   }
   article:hover {
     transform: scale(var(--hover-scale));
   }
   article > div {
+    border-radius: 1.25rem;
     display: flex;
     justify-content: center;
     align-items: center;
     background-size: contain;
-    width: 100px;
-    height: 100px;
+    --size-value: 6.25rem;
+    width: var(--size-value);
+    height: var(--size-value);
   }
 
   article:hover span {
+    border-radius: 1.25rem;
     padding: 0 0.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     background-color: var(--c-darkgray);
-    height: 100%;
-    width: 100%;
+    height: calc(var(--size-value) + 0.1rem);
+    width: calc(var(--size-value) + 0.1rem);
     opacity: 90%;
   }
 
diff --git a/src/layouts/aboutSection.astro b/src/layouts/aboutSection.astro
index ac19e08..cd89b5e 100644
--- a/src/layouts/aboutSection.astro
+++ b/src/layouts/aboutSection.astro
@@ -15,11 +15,17 @@ const { title } = Astro.props
 
 <style>
   h1 {
+    font-size: 26px;
+    line-height: 32px;
+    letter-spacing: -1px;
     color: white;
     margin: 0.5rem 0.75rem 0.5rem 0.75rem;
     padding: 0.25rem 0.75rem;
     width: max-content;
     background-color: var(--c-darkgray);
+    padding: 0.25rem 1rem;
+    border-radius: 0.5rem;
+    padding-bottom: 0.5rem;
   }
   div {
     row-gap: 1em;
diff --git a/src/layouts/blogPost.astro b/src/layouts/blogPost.astro
index 492b341..503d0d0 100644
--- a/src/layouts/blogPost.astro
+++ b/src/layouts/blogPost.astro
@@ -42,11 +42,17 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
     text-decoration: none;
   }
   h1 {
+    font-size: 34px;
+    line-height: 40px;
+    letter-spacing: -1px;
     color: white;
     margin: 0.5rem 3rem 0.5rem 3rem;
     padding: 0.25rem 0.75rem;
     max-width: max-content;
     background-color: var(--c-darkgray);
+    padding: 0.25rem 1rem;
+    border-radius: 0.5rem;
+    padding-bottom: 0.5rem;
   }
   p {
     color: white;
@@ -54,6 +60,8 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
     padding: 0.25rem 0.75rem;
     max-width: max-content;
     background-color: var(--c-gray);
+    border-radius: 0.5rem;
+    padding-bottom: 0.5rem;
   }
   article :global(h2) {
     margin-right: 3rem;
@@ -62,6 +70,9 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
     padding: 0.25rem 0.75rem;
     max-width: max-content;
     background-color: var(--c-darkgray);
+    padding: 0.25rem 1rem;
+    border-radius: 0.5rem;
+    padding-bottom: 0.5rem;
   }
 
   article :global(h3) {
@@ -72,6 +83,9 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
     padding: 0.25rem 0.75rem;
     max-width: max-content;
     background-color: var(--c-darkgray);
+    padding: 0.25rem 1rem;
+    border-radius: 0.5rem;
+    padding-bottom: 0.5rem;
   }
 
   article :global(h4) {
@@ -82,6 +96,9 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
     padding: 0.25rem 0.75rem;
     max-width: max-content;
     background-color: var(--c-darkgray);
+    padding: 0.25rem 1rem;
+    border-radius: 0.5rem;
+    padding-bottom: 0.5rem;
   }
   article :global(a) {
     color: #dcb7ff;
@@ -103,18 +120,33 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
     color: orange;
   }
 
-  @media (min-width: 1500px) {
+  @media (min-width: 1000px) {
     article {
-      margin-left: 15rem;
-      margin-right: 15rem;
+      margin-left: 10rem;
+      margin-right: 10rem;
     }
     h1 {
-      margin-left: 15rem;
-      margin-right: 15rem;
+      margin-left: 10rem;
+      margin-right: 10rem;
     }
     p {
-      margin-left: 15rem;
-      margin-right: 15rem;
+      margin-left: 10rem;
+      margin-right: 10rem;
+    }
+  }
+
+  @media (min-width: 1500px) {
+    article {
+      margin-left: 20rem;
+      margin-right: 20rem;
+    }
+    h1 {
+      margin-left: 20rem;
+      margin-right: 20rem;
+    }
+    p {
+      margin-left: 20rem;
+      margin-right: 20rem;
     }
   }
 </style>
diff --git a/src/layouts/contactSection.astro b/src/layouts/contactSection.astro
index 4519510..d872bc5 100644
--- a/src/layouts/contactSection.astro
+++ b/src/layouts/contactSection.astro
@@ -16,10 +16,16 @@ const { title } = Astro.props
 <style>
   h1 {
     color: white;
+    font-size: 26px;
+    line-height: 32px;
+    letter-spacing: -1px;
     margin: 0.5rem 0px 0.5rem 0.5em;
     padding: 0.25rem 0.75rem;
     width: max-content;
     background-color: var(--c-darkgray);
+    padding: 0.25rem 1rem;
+    border-radius: 0.5rem;
+    padding-bottom: 0.5rem;
   }
   div {
     row-gap: 1em;