chore(front): updadtes layout and colors (#1163)

Closes: #1163
dgrebb · Jan 17, 2024 · 55f1b94 · 55f1b94
1 parent 1ead3a4
commit 55f1b94
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {