💄Alter design for more impact

SamBWagner · Oct 18, 2024 · 1a087ff · 1a087ff
1 parent b348a5e
commit 1a087ff
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 38 deletions.
diff --git a/UI/app/components/blogCard.js b/UI/app/components/blogCard.js
@@ -2,14 +2,15 @@ import Link from "next/link";
 import styles from "./blogCard.module.css";
 
 export default function BlogCard({
+  className,
   children,
   title,
   url,
   urlAria,
   releaseDate,
 }) {
   return (
-    <Link href={url} className={styles.cardLink}>
+    <Link href={url} className={`${className} ${styles.cardLink}`}>
       <article className={styles.card}>
         <h2>{title}</h2>
         {children}

diff --git a/UI/app/components/header.js b/UI/app/components/header.js
@@ -1,9 +1,9 @@
-export default function Header() {
+export default function Header({className}) {
   return (
     <header>
       <h1
         id="heading-page-name"
-        className="container heading-page-name heading-name"
+        className={`heading-page-name heading-name ${className}`}
       >
         Sam Wagner
       </h1>

diff --git a/UI/app/first-commander-deck/page.jsx b/UI/app/first-commander-deck/page.jsx
@@ -6,8 +6,8 @@ import style from "./style.module.css";
 export default function Page() {
   return (
     <>
-      <Link href="/" className={"container" + style.headerLink}>
-        <Header />
+      <Link href="/" className={`${style.headerLink}`}>
+        <Header className={`container`} />
       </Link>
 
       <main>

diff --git a/UI/app/page.js → UI/app/page.jsx b/UI/app/page.js → UI/app/page.jsx
@@ -4,13 +4,14 @@ import BlogCard from "./components/blogCard";
 
 export default function home() {
   return (
-    <main className={`container ${styles.mainContainer}`}>
-      <Header />
+    <main className={`${styles.mainContainer}`}>
+      <Header className={`${styles.header}`} />
 
       <h2 className={`${styles.byLine}`}>Develop · Deploy · Deliver</h2>
-      <hr className={`${styles.divider}`}></hr>
       <div className={`${styles.blogCardContainer}`}>
+        <h3 className={`container ${styles.blogContainerHeading}`}>Blogs</h3>
         <BlogCard
+          className={`container`}
           url="first-commander-deck"
           urlAria="navigate to the Build your first commander deck article"
           releaseDate={"September 29th 2024"}
@@ -29,6 +30,7 @@ export default function home() {
         </BlogCard>
 
         <BlogCard
+          className={`container`}
           url="rust-game"
           urlAria="navigate to Learning Rust blog post"
           releaseDate={"December 10th 2023"}
@@ -43,7 +45,7 @@ export default function home() {
         </BlogCard>
       </div>
 
-      <div className={`${styles.socials}`}>
+      <div className={`container ${styles.socials}`}>
         <p>
           GitHub: <a href="https://github.com/SamBWagner">@SamBWagner</a>
         </p>

diff --git a/UI/app/rust-game/page.jsx b/UI/app/rust-game/page.jsx
@@ -6,8 +6,8 @@ import style from "./style.module.css";
 export default function Page() {
   return (
     <>
-      <Link href="/" className={"container" + style.headerLink}>
-        <Header />
+      <Link href="/" className={`${style.headerLink}`}>
+        <Header className={`container`} />
       </Link>
 
       <main className={style.mainContainer}>

diff --git a/UI/app/styles.module.css b/UI/app/styles.module.css
@@ -1,46 +1,28 @@
 .mainContainer {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
     align-items: center;
     text-align: center;
     margin-top: auto;
     margin-bottom:auto;
-    width: auto;
 }
 
-.divider {
-    display: block;
-    width: 100%;
-    border: 0;
-    border-radius: 1px;
-    height: 3px;
-    background-color: var(--accent1);
-
-    animation: grow 0.4s ease-in-out forwards;
-    transform-origin: left;
+.header {
+    margin-bottom: 1rem;
 }
 
-@keyframes grow {
-    0% {
-        transform: scaleX(0);
-    }
-    100% {
-        transform: scaleX(1);
-    }
-
+.byLine {
+    font-weight: 600;
+    font-size: 2.5rem;
+    text-decoration: underline;
+    text-decoration-line: overline;
+    padding-bottom: 2rem;
 }
 
 .socials {
     display: flex;
     justify-content: center;
-
     margin-top: 3rem;
     padding: 0.5rem 1rem 0.5rem 1rem;
-
     gap: 1rem;
-    border-radius: var(--border-radius);
-    background-color: var(--background-color-darkened);
     flex-wrap: wrap;
 }
 
@@ -50,9 +32,16 @@
 }
 
 .blogCardContainer {
-    padding-top: 3rem;;
+    padding: 2rem;
+    padding-bottom: 4rem;
     display: flex;
     flex-direction: column;
     gap: 2rem;
     justify-content: center;
+    background-color: var(--background-color-darkened);
+}
+
+.blogContainerHeading {
+    margin-top: 0;
+    margin-bottom: 0;
 }