From 55f1b9426aed27b30dcb7838a01edfa70bddf33f Mon Sep 17 00:00:00 2001
From: Dan Grebb <dan@dgrebb.com>
Date: Sat, 13 Jan 2024 20:24:51 -0500
Subject: [PATCH] chore(front): updadtes layout and colors (#1163)

Closes: #1163
---
 front/src/lib/styles/base/theme.css           | 4 ++++
 front/src/lib/styles/components/Code/Code.css | 8 ++++----
 front/src/lib/styles/global.css               | 1 +
 front/src/lib/styles/pages/category.css       | 4 +++-
 front/src/lib/styles/pages/home.css           | 4 ++--
 front/src/lib/styles/pages/post.css           | 2 +-
 6 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/front/src/lib/styles/base/theme.css b/front/src/lib/styles/base/theme.css
index c788f3484..8f842528f 100644
--- a/front/src/lib/styles/base/theme.css
+++ b/front/src/lib/styles/base/theme.css
@@ -108,6 +108,7 @@
     --code-highlight-bg-clr: var(--green);
     --code-hover-header-clr: var(--fg-clr-oo);
     --code-header-hover-clr: var(--highlight-clr);
+    --blocked-content-bg: white;
     --page-nav-heading: var(--fg-clr-oo);
     --page-nav-toggle-bg-clr: var(--sun-50);
     --page-nav-toggle-focus-bg-clr: var(--sun-50);
@@ -191,6 +192,7 @@ html.light-theme {
   --code-highlight-bg-clr: var(--green);
   --code-hover-header-clr: var(--fg-clr-oo);
   --code-header-hover-clr: var(--highlight-clr);
+  --blocked-content-bg: white;
   --page-nav-heading: var(--fg-clr-oo);
   --page-nav-toggle-bg-clr: var(--sun-50);
   --page-nav-toggle-focus-bg-clr: var(--sun-50);
@@ -279,6 +281,7 @@ html.light-theme {
     --code-header-hover-clr: var(--light);
     --code-copied-clr: var(--green);
     --code-highlight-bg-clr: var(--burnt-orange);
+    --blocked-content-bg: black;
     --page-nav-heading: var(--moon);
     --page-nav-toggle-bg-clr: var(--oxford-blue-a50);
     --page-nav-toggle-focus-bg-clr: var(--hardlight-clr);
@@ -352,6 +355,7 @@ html.dark-theme {
   --code-header-hover-clr: var(--light);
   --code-copied-clr: var(--green);
   --code-highlight-bg-clr: var(--burnt-orange);
+  --blocked-content-bg: black;
   --page-nav-heading: var(--moon);
   --page-nav-toggle-bg-clr: var(--oxford-blue-a50);
   --page-nav-toggle-focus-bg-clr: var(--hardlight-clr);
diff --git a/front/src/lib/styles/components/Code/Code.css b/front/src/lib/styles/components/Code/Code.css
index e60b4bb57..0cd03589f 100644
--- a/front/src/lib/styles/components/Code/Code.css
+++ b/front/src/lib/styles/components/Code/Code.css
@@ -18,7 +18,7 @@
   margin-bottom: 2rem;
   box-shadow: var(--shadow-elevation-medium);
   border-radius: 0.5rem;
-  background-color: var(--bg-light-clr);
+  background-color: var(--blocked-content-bg);
   padding: 0 1.5rem 0 1rem;
   width: 100%;
   font-size: 1rem;
@@ -208,11 +208,11 @@
     td:first-child {
       display: none;
       transition-property: color var(--transition-duration);
-      background: var(--bg-light-clr);
+      background: var(--blocked-content-bg);
       background: linear-gradient(
         90deg,
-        var(--bg-light-clr) 65%,
-        var(--bg-light-clr) 81%,
+        var(--blocked-content-bg) 65%,
+        var(--blocked-content-bg) 81%,
         transparent 100%
       );
       color: var(--fg-clr-oooo);
diff --git a/front/src/lib/styles/global.css b/front/src/lib/styles/global.css
index 94f2fca9e..08f2fdbca 100644
--- a/front/src/lib/styles/global.css
+++ b/front/src/lib/styles/global.css
@@ -119,6 +119,7 @@ body {
 .bio a,
 .footer a,
 .privacy a,
+.category-posts-list .post-item-summary a,
 .cv a,
 .not-found a {
   transition-duration: var(--transition-duration);
diff --git a/front/src/lib/styles/pages/category.css b/front/src/lib/styles/pages/category.css
index ef40ff1bd..bb0b0973d 100644
--- a/front/src/lib/styles/pages/category.css
+++ b/front/src/lib/styles/pages/category.css
@@ -60,9 +60,11 @@
     color: var(--fg-clr);
   }
   .post-item-summary,
-  a {
+  .post-item > a {
     display: flex;
+    position: relative;
     flex-direction: row;
+    z-index: 1;
     transition: color 0.5s;
     &:hover,
     &:focus,
diff --git a/front/src/lib/styles/pages/home.css b/front/src/lib/styles/pages/home.css
index 65c6ed792..a21417229 100644
--- a/front/src/lib/styles/pages/home.css
+++ b/front/src/lib/styles/pages/home.css
@@ -20,7 +20,7 @@
   .image-loader {
     margin: 0.5rem 0;
   }
-  h1.headline {
+  h2.headline {
     filter: brightness(1.25);
     transition-duration: var(--transition-duration);
     transition-property: color, font-size;
@@ -69,7 +69,7 @@
 }
 
 @media screen and (min-width: 640px) {
-  .bio h1.headline {
+  .bio h2.headline {
     font-size: 2.25rem;
     line-height: 2.5rem;
   }
diff --git a/front/src/lib/styles/pages/post.css b/front/src/lib/styles/pages/post.css
index 4b88235c4..a5e932a9a 100644
--- a/front/src/lib/styles/pages/post.css
+++ b/front/src/lib/styles/pages/post.css
@@ -280,7 +280,7 @@
     box-shadow: var(--shadow-elevation-medium);
     border-left: 0.5rem solid var(--hardlight-clr);
     border-radius: 0.5rem;
-    background: var(--bg-light-clr);
+    background-color: var(--blocked-content-bg);
     padding: 0.5rem 1.5rem;
     color: var(--fg-clr-oo);
     &::before {