styled new blog post gallery entries some more; added dates; changed color-highlight-alt variations

src/lib/lists/blog-gallery.svelte

@@ -16,6 +16,7 @@
             </div>
             <div class="entry-text-container">
                 <p class="entry-title">{post.post.title}</p>
+                <p class="entry-date">::&nbsp;{post.post.date}&nbsp;::</p>
                 <p class="entry-description">{post.post.description}</p>
                 <div class="entry-tag-container">
                     {#each post.post.tags as tag}
@@ -39,9 +40,11 @@
         padding: 8px;
         transition: background-color var(--duration-animation) var(--anim-curve),
                     border-color var(--duration-animation) var(--anim-curve),
-                    backdrop-filter var(--duration-blur) var(--anim-curve);
+                    backdrop-filter var(--duration-blur) var(--anim-curve),
+                    border-radius var(--duration-animation) var(--anim-curve);
         border: var(--border-dash-size) var(--border-style) transparent;
         text-decoration: none;
+        border-radius: 24px;
     }
 
     .entry:hover {
@@ -54,12 +57,21 @@
         scale: 1.2;
     }
 
+    .entry:hover .entry-banner-container {
+        /* border-radius: 24px 24px 0 0; */
+        border-top-left-radius: 16px;
+        border-top-right-radius: 16px;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+    }
+
     .entry-banner-container {
         width: 100%;
         height: 160px;
         overflow: hidden;
         display: flex;
         justify-content: center;
+        transition: border-radius var(--duration-animation) var(--anim-curve);
     }
 
     .entry-banner {
@@ -71,12 +83,8 @@
     .entry-text-container {
         display: flex;
         flex-direction: column;
-        margin-top: 16px;
+        margin: 16px 2px 2px;
-        gap: 8px;
+        /* gap: 8px; */
-    }
-    
-    .entry-text-container * {
-        margin: 0;
     }
 
     .entry-title {
@@ -84,17 +92,27 @@
         font-weight: 700;
         font-size: 1.2rem;
         line-height: 1.4rem;
+        margin: 0;
+    }
+
+    .entry-date {
+        font-size: 0.8rem;
+        line-height: 0.8rem;
+        font-weight: 600;
+        margin: 4px 0 0 0;
+        font-family: var(--font-mono);
+        color: var(--color-text-highlight-alt);
     }
 
     .entry-description {
         font-size: 1.0rem;
         line-height: 1.2rem;
+        margin: 4px 0 8px;
     }
 
     .entry-tag-container {
         display: flex;
         gap: 4px;
-        margin-top: 4px;
         flex-direction: row;
         flex-wrap: wrap;
     }

src/routes/+layout.svelte

@@ -97,6 +97,10 @@
             --color-text-secondary: #b0b0b0;
             --color-text-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%);
             --color-text-dark: #1e1e1e;
+
+            --color-text-highlight: color-mix(in srgb, var(--color-highlight) 70%, var(--color-text));
+            --color-text-highlight-alt: color-mix(in srgb, var(--color-highlight-alt) 70%, var(--color-text));
+
             --color-highlight: #51B86B;
             --color-highlight-dark: color-mix(in srgb, var(--color-highlight) 60%, black);
             --color-highlight-alt: #d03b4a;
@@ -105,8 +109,9 @@
 
             --color-background: #111111;
             --color-background-highlight: color-mix(in srgb, var(--color-highlight) 20%, transparent);
-            --color-background-highlight-alt: color-mix(in srgb, var(--color-highlight-alt) 20%, transparent);
+            --color-background-highlight-alt: color-mix(in srgb, var(--color-highlight-alt) 30%, transparent);
             --color-background-highlight-hover: color-mix(in srgb, var(--color-highlight) 60%, transparent);
+            --color-background-highlight-hover-alt: color-mix(in srgb, var(--color-highlight-alt) 66%, transparent);
             --color-background-highlight-hover-dark: color-mix(in srgb, var(--color-highlight-dark) 60%, transparent);
             
             --color-waters: #242424;

src/routes/blog/+page.svelte

@@ -50,7 +50,7 @@
     .tag-filter-container {
         display: flex;
         gap: 8px 12px;
-        margin: 0 10px 8px;
+        margin: 12px 10px 8px;
         flex-wrap: wrap;
     }
 
@@ -69,6 +69,16 @@
     }
 
     .tag-filter:hover {
-        background-color: var(--color-highlight-alt);
+        background-color: var(--color-background-highlight-hover-alt);
+    }
+
+    @media screen and (max-width: 600px) {
+        .tag-filter-container {
+            gap: 8px;
+        }
+
+        .tag-filter {
+            font-size: 0.8rem;
+        }
     }
 </style>