Finishing Touches

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%;
+    height: calc(var(--size-value) + 0.1rem);
-    width: 100%;
+    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;

src/components/navbar.astro

@@ -110,7 +110,7 @@
     justify-self: top;
   }
 
-  @media (min-width: 1120px) {
+  @media (min-width: 1140px) {
     .mobile {
       display: none;
     }

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;
+    --size-value: 6.25rem;
-    height: 100px;
+    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%;
+    height: calc(var(--size-value) + 0.1rem);
-    width: 100%;
+    width: calc(var(--size-value) + 0.1rem);
     opacity: 90%;
   }
 

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;

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-left: 10rem;
-      margin-right: 15rem;
+      margin-right: 10rem;
     }
     h1 {
-      margin-left: 15rem;
+      margin-left: 10rem;
-      margin-right: 15rem;
+      margin-right: 10rem;
     }
     p {
-      margin-left: 15rem;
+      margin-left: 10rem;
-      margin-right: 15rem;
+      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>

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;