Bunch of style changes

Author: cakePhone

_includes/components/post_card.liquid

@@ -1,5 +1,5 @@
-<a href="{{ post.url }}">
-    <article class="card">
+<article>
+    <a class="post-card" href="{{ post.url }}">
         {% if post.data.image %}
             <img src="{{ post.data.image }}" alt="{{ post.data.title }} thumbnail" class="post-image" loading="lazy" style="width: 100%; height: auto; border-radius: 0.5rem;">
         {% endif %}
@@ -14,48 +14,5 @@
                 <span class="post-date">{{ post.data.date | date: "%B %d, %Y" }}</span>
             </p>
         </div>
-    </article>
-</a>
-
-<style>
-    article {
-        display: flex;
-        flex-direction: row;
-
-        gap: 1rem;
-
-        border-radius: 1rem;
-
-        padding: .5rem;
-    }
-
-    article * {
-        margin: 0;
-    }
-
-    a:hover {
-        text-decoration: none;
-        cursor: pointer;
-    }
-
-    h2 {
-        font-size: 1rem;
-        color: var(--primary-600)
-    }
-
-    .post-image {
-        border-radius: 0.5rem;
-        max-width: 100px;
-        max-height: 100px;
-        aspect-ratio: 1 / 1;
-        object-fit: cover;
-    }
-
-    .description {
-        font-size: 0.9rem;
-    }
-
-    .post-meta {
-        font-size: 0.9rem;
-    }
-</style>
+    </a>
+</article>

assets/css/global.css

@@ -116,10 +116,11 @@ h6 {
 a {
     color: var(--primary-400);
     text-decoration: transparent;
+    transition: color 0.1s ease-in-out;
 }
 
 a:hover {
-    color: var(--primary-200);
+    color: var(--primary-400);
     text-decoration: underline;
 }
 
@@ -128,15 +129,20 @@ a {
     line-height: 1.5;
 }
 
+hr {
+    width: 100%;
+}
+
 .card {
     padding: 0.5rem;
 
-    border: 0.25rem dotted var(--primary-400);
     border-radius: 1rem;
 
     color: var(--fg-900);
 
     background-color: var(--fg-50);
+
+    border: 2px solid var(--primary-400);
 }
 
 @media (max-width: 786px) {
@@ -172,7 +178,7 @@ a {
 
     .card {
         background-color: var(--fg-300);
-        border: 0.25rem dotted var(--primary-800);
+        border-color: var(--primary-800);
         color: var(--primary-900);
     }
 

assets/css/index.css

@@ -1,11 +1,12 @@
 header {
     display: flex;
     align-items: center;
+    justify-content: center;
     flex-direction: row;
     gap: 5rem;
 
     height: 100vh;
-    width: fit-content;
+    width: max(fit-content, 70%);
 
     margin-inline: auto;
 }
@@ -25,28 +26,26 @@ header {
 
 #left-header nav {
     display: flex;
-    gap: 1rem;
+    justify-content: space-between;
     flex-wrap: wrap;
+    gap: 1rem 0;
+    padding-left: 0.45rem;
 }
 
 #left-header a {
     position: relative;
 
     display: block;
 
-    padding: .1rem .75rem;
+    padding: 0.1rem 0.75rem;
 }
 
 #right-header {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    display: grid;
 
-    flex-direction: column;
-
-    gap: .5rem;
+    gap: 0.5rem;
 
-    max-width: 12rem;
+    width: 10rem;
 
     position: relative;
 
@@ -56,8 +55,8 @@ header {
 #right-header * {
     margin: 0;
     padding: 0;
-
     text-align: center;
+    width: 100%;
 }
 
 #right-header h2 {
@@ -77,22 +76,23 @@ header {
 }
 
 #right-header img {
-    height: 7rem;
-    width: 7rem;
+    aspect-ratio: 1;
+    margin-inline: auto;
+    width: 80%;
 
     border-radius: 50%;
 
-    box-shadow: 0 .1rem .5rem rgba(0, 0, 0, 0.7);
+    box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.7);
 
     object-fit: cover;
 }
 
 #bubble-container {
     position: absolute;
 
-    --bubble-1: #EF3E36;
-    --bubble-2: #2E282A;
-    --bubble-3: #17BEBB;
+    --bubble-1: #ef3e36;
+    --bubble-2: #2e282a;
+    --bubble-3: #17bebb;
 
     height: 100vh;
     width: 100vw;
@@ -145,9 +145,9 @@ header {
     }
 
     #bubble-container {
-        --bubble-1: #FF5714;
-        --bubble-2: #6EEB83;
-        --bubble-3: #1BE7FF;
+        --bubble-1: #ff5714;
+        --bubble-2: #6eeb83;
+        --bubble-3: #1be7ff;
 
         filter: blur(40px);
     }

assets/css/post_card.css

@@ -0,0 +1,97 @@
+.post-card {
+    display: flex;
+    flex-direction: row;
+
+    overflow: hidden;
+
+    transition: transform 0.3s ease-out;
+
+    gap: 1rem;
+
+    padding: 0.5rem 0;
+
+    position: relative;
+
+    &:hover {
+        text-decoration: none;
+        cursor: pointer;
+        transform: translateX(0.5rem);
+
+        &::before {
+            opacity: 0;
+            animation: flowGradient 2s linear infinite;
+        }
+    }
+
+    * {
+        margin: 0;
+    }
+
+    h2 {
+        font-size: 1rem;
+        color: var(--primary-600);
+    }
+
+    p {
+        font-size: 0.9rem;
+        color: var(--on-bg-dark);
+    }
+
+    img {
+        border-radius: 0.5rem;
+        max-width: 100px;
+        max-height: 100px;
+        aspect-ratio: 1 / 1;
+        object-fit: cover;
+    }
+
+    .post-meta {
+        opacity: 0.7;
+    }
+}
+
+@keyframes flowGradient {
+    0% {
+        left: -100%;
+        opacity: 0;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        left: 100%;
+        opacity: 0;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .post-card {
+        p {
+            color: var(--on-bg-light);
+        }
+
+        &::before {
+            background: linear-gradient(
+                90deg,
+                transparent 0%,
+                transparent 10%,
+                rgba(255, 182, 193, 0.3) 25%,
+                rgba(221, 160, 221, 0.3) 40%,
+                rgba(173, 216, 230, 0.3) 60%,
+                rgba(255, 218, 185, 0.3) 75%,
+                transparent 90%,
+                transparent 100%
+            );
+            mask: radial-gradient(
+                ellipse at center,
+                black 40%,
+                transparent 80%
+            );
+            -webkit-mask: radial-gradient(
+                ellipse at center,
+                black 40%,
+                transparent 80%
+            );
+        }
+    }
+}

blog/index.liquid

@@ -15,6 +15,7 @@ eleventyImport:
 
     <link href="/assets/css/global.css" rel="stylesheet">
     <link rel="stylesheet" href="/assets/css/general-read.css">
+    <link rel="stylesheet" href="/assets/css/post_card.css">
 
     <style>
         .posts {
@@ -31,6 +32,9 @@ eleventyImport:
     <div class="posts">
         {% for post in collections.posts reversed %}
           {% include 'components/post_card.liquid', post: post %}
+          {% unless forloop.last %}
+            <hr class="divider"/>
+          {% endunless %}
         {% endfor %}
     </div>
     {% include 'layouts/footer.liquid' %}

index.liquid

@@ -34,7 +34,7 @@
                 <a class="card" href="/assets/files/cv.pdf" target="_blank">CV</a>
             </nav>
         </div>
-        <div id="right-header" class="card">
+        <div id="right-header">
             <img src="assets/img/profile.jpg" alt="Profile Picture" id="profile-picture">
             <div id="profile-info">
                 <h2>Miguel Santos</h2>