fix(front): adds background color to privacy, post pages; reduce marg…

…in >480px
dgrebb · Sep 27, 2023 · 54a3118 · 54a3118
1 parent 954a021
commit 54a3118
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 23 deletions.
diff --git a/front/src/lib/styles/base/theme.css b/front/src/lib/styles/base/theme.css
@@ -176,12 +176,12 @@
     .privacy,
     .post,
     .category-posts-transition-container {
+      background: var(--rim-light-bg), var(--bg-clr);
+      &::before {
+        background: var(--rim-light-mask-bg);
+      }
       @media screen and (min-width: 640px) {
         box-shadow: var(--shadow-elevation-high);
-        background: var(--rim-light-bg);
-        &::before {
-          background: var(--rim-light-mask-bg);
-        }
       }
       h1,
       h2,
@@ -215,9 +215,6 @@
     }
 
     .post {
-      @media screen and (max-width: 639px) {
-        background-color: var(--bg-clr);
-      }
       .summary::first-letter {
         color: var(--highlight-clr);
       }
@@ -564,12 +561,12 @@
     .privacy,
     .post,
     .category-posts-transition-container {
+      background: var(--rim-light-bg), var(--bg-clr);
+      &::before {
+        background: var(--rim-light-mask-bg);
+      }
       @media screen and (min-width: 640px) {
         box-shadow: var(--shadow-elevation-high);
-        background: var(--rim-light-bg);
-        &::before {
-          background: var(--rim-light-mask-bg);
-        }
       }
       h1,
       h2,
@@ -612,9 +609,6 @@
       .pubdate {
         color: var(--celestial-a75);
       }
-      .post-title {
-        /* text-shadow: 0 -0.11rem 1.5rem hsl(var(--shadow-color) / 5); */
-      }
       .post-article {
         .heading-anchor-link {
           &:hover,

diff --git a/front/src/lib/styles/components/posts-grid.css b/front/src/lib/styles/components/posts-grid.css
@@ -26,12 +26,14 @@
     transition-property: filter;
     transition-timing-function: var(--transition-timing-function);
     cursor: pointer;
-    box-shadow: var(--shadow-elevation-medium);
     border-radius: 0.75rem;
     background-position: center top;
     background-size: cover;
     background-repeat: no-repeat;
     min-height: 7rem;
+    @media screen and (min-width: 480px) {
+      box-shadow: var(--shadow-elevation-medium);
+    }
     .post-link {
       display: block;
       backdrop-filter: blur(0.5rem);

diff --git a/front/src/lib/styles/global.css b/front/src/lib/styles/global.css
@@ -86,25 +86,29 @@ html {
 }
 
 body {
-  @apply dg--font-psxl
-    flex
-    flex-col
-    items-center
-    text-base
-    md:text-lg;
+  display: flex;
   position: relative;
+  flex-direction: column;
+  align-items: center;
   transition: scrollbar-color 1s;
-  padding-right: 7px;
-  padding-left: 7px;
   height: 100vh;
   min-height: 100vh;
   overflow: overlay;
   scroll-behavior: smooth;
   scrollbar-gutter: stable both-edges;
   scrollbar-width: thin;
   color: var(--fg-clr);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-family: var(--font-psxl);
+  @media screen and (min-width: 480px) {
+    padding-right: 7px;
+    padding-left: 7px;
+  }
   @media screen and (min-width: 640px) {
     scrollbar-gutter: stable;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
   }
   @media (hover: none),
     (hover: on-demand),