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

…#702) …in >480px closes #695
dgrebb · Sep 28, 2023 · 918dc56 · 918dc56
1 parent 954a021
commit 918dc56
Show file tree

Hide file tree

Showing 47 changed files with 45 additions and 34 deletions.
diff --git a/...aps_reference/gh-stg/GithubSTG_Cats_-_Active_Tests_Category_0_viewport_0_xs.png b/...aps_reference/gh-stg/GithubSTG_Cats_-_Active_Tests_Category_0_viewport_0_xs.png
diff --git a/...aps_reference/gh-stg/GithubSTG_Cats_-_Active_Tests_Category_0_viewport_1_sm.png b/...aps_reference/gh-stg/GithubSTG_Cats_-_Active_Tests_Category_0_viewport_1_sm.png
diff --git a/...ackstop/bd/bitmaps_reference/gh-stg/GithubSTG_Cats_-_Mobile_0_document_0_xs.png b/...ackstop/bd/bitmaps_reference/gh-stg/GithubSTG_Cats_-_Mobile_0_document_0_xs.png
diff --git a/...ackstop/bd/bitmaps_reference/gh-stg/GithubSTG_Cats_-_Mobile_0_document_1_sm.png b/...ackstop/bd/bitmaps_reference/gh-stg/GithubSTG_Cats_-_Mobile_0_document_1_sm.png
diff --git a/...itmaps_reference/gh-stg/GithubSTG_Cats_-_Navigate_from_Post_0_document_0_md.png b/...itmaps_reference/gh-stg/GithubSTG_Cats_-_Navigate_from_Post_0_document_0_md.png
diff --git a/...itmaps_reference/gh-stg/GithubSTG_Cats_-_Navigate_from_Post_0_document_1_lg.png b/...itmaps_reference/gh-stg/GithubSTG_Cats_-_Navigate_from_Post_0_document_1_lg.png
diff --git a/...itmaps_reference/gh-stg/GithubSTG_Cats_-_Navigate_from_Post_0_document_2_xl.png b/...itmaps_reference/gh-stg/GithubSTG_Cats_-_Navigate_from_Post_0_document_2_xl.png
diff --git a/...tmaps_reference/gh-stg/GithubSTG_Cats_-_Navigate_from_Post_0_document_3_2xl.png b/...tmaps_reference/gh-stg/GithubSTG_Cats_-_Navigate_from_Post_0_document_3_2xl.png
diff --git a/...aps_reference/gh-stg/GithubSTG_Cats_-_Select_Tests_Category_0_viewport_0_md.png b/...aps_reference/gh-stg/GithubSTG_Cats_-_Select_Tests_Category_0_viewport_0_md.png
diff --git a/...aps_reference/gh-stg/GithubSTG_Cats_-_Select_Tests_Category_0_viewport_0_xs.png b/...aps_reference/gh-stg/GithubSTG_Cats_-_Select_Tests_Category_0_viewport_0_xs.png
diff --git a/...aps_reference/gh-stg/GithubSTG_Cats_-_Select_Tests_Category_0_viewport_1_lg.png b/...aps_reference/gh-stg/GithubSTG_Cats_-_Select_Tests_Category_0_viewport_1_lg.png
diff --git a/...aps_reference/gh-stg/GithubSTG_Cats_-_Select_Tests_Category_0_viewport_1_sm.png b/...aps_reference/gh-stg/GithubSTG_Cats_-_Select_Tests_Category_0_viewport_1_sm.png
diff --git a/...aps_reference/gh-stg/GithubSTG_Cats_-_Select_Tests_Category_0_viewport_2_xl.png b/...aps_reference/gh-stg/GithubSTG_Cats_-_Select_Tests_Category_0_viewport_2_xl.png
diff --git a/...ps_reference/gh-stg/GithubSTG_Cats_-_Select_Tests_Category_0_viewport_3_2xl.png b/...ps_reference/gh-stg/GithubSTG_Cats_-_Select_Tests_Category_0_viewport_3_2xl.png
diff --git a/.../bitmaps_reference/gh-stg/GithubSTG_Homepage_-_Switch_Theme_0_viewport_0_xs.png b/.../bitmaps_reference/gh-stg/GithubSTG_Homepage_-_Switch_Theme_0_viewport_0_xs.png
diff --git a/.../bitmaps_reference/gh-stg/GithubSTG_Homepage_-_Switch_Theme_0_viewport_1_sm.png b/.../bitmaps_reference/gh-stg/GithubSTG_Homepage_-_Switch_Theme_0_viewport_1_sm.png
diff --git a/_ci/backstop/bd/bitmaps_reference/gh-stg/GithubSTG_Homepage_0_viewport_0_xs.png b/_ci/backstop/bd/bitmaps_reference/gh-stg/GithubSTG_Homepage_0_viewport_0_xs.png
diff --git a/_ci/backstop/bd/bitmaps_reference/gh-stg/GithubSTG_Homepage_0_viewport_1_sm.png b/_ci/backstop/bd/bitmaps_reference/gh-stg/GithubSTG_Homepage_0_viewport_1_sm.png
diff --git a/...rence/gh-stg/GithubSTG_Post_-_Aside_TOC_Active_Item_Onload_0_postaside_0_md.png b/...rence/gh-stg/GithubSTG_Post_-_Aside_TOC_Active_Item_Onload_0_postaside_0_md.png
diff --git a/...rence/gh-stg/GithubSTG_Post_-_Aside_TOC_Active_Item_Onload_0_postaside_1_lg.png b/...rence/gh-stg/GithubSTG_Post_-_Aside_TOC_Active_Item_Onload_0_postaside_1_lg.png
diff --git a/...rence/gh-stg/GithubSTG_Post_-_Aside_TOC_Active_Item_Onload_0_postaside_2_xl.png b/...rence/gh-stg/GithubSTG_Post_-_Aside_TOC_Active_Item_Onload_0_postaside_2_xl.png
diff --git a/...ence/gh-stg/GithubSTG_Post_-_Aside_TOC_Active_Item_Onload_0_postaside_3_2xl.png b/...ence/gh-stg/GithubSTG_Post_-_Aside_TOC_Active_Item_Onload_0_postaside_3_2xl.png
diff --git a/...aps_reference/gh-stg/GithubSTG_Post_-_Mobile_Expand_Mininav_0_viewport_0_xs.png b/...aps_reference/gh-stg/GithubSTG_Post_-_Mobile_Expand_Mininav_0_viewport_0_xs.png
diff --git a/...aps_reference/gh-stg/GithubSTG_Post_-_Mobile_Expand_Mininav_0_viewport_1_sm.png b/...aps_reference/gh-stg/GithubSTG_Post_-_Mobile_Expand_Mininav_0_viewport_1_sm.png
diff --git a/...ithubSTG_Post_-_Mobile_Mininav_TOC_Active_Onload_0_page-navigationmini_0_xs.png b/...ithubSTG_Post_-_Mobile_Mininav_TOC_Active_Onload_0_page-navigationmini_0_xs.png
diff --git a/...ithubSTG_Post_-_Mobile_Mininav_TOC_Active_Onload_0_page-navigationmini_1_sm.png b/...ithubSTG_Post_-_Mobile_Mininav_TOC_Active_Onload_0_page-navigationmini_1_sm.png
diff --git a/...tmaps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_document_0_xs.png b/...tmaps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_document_0_xs.png
diff --git a/...tmaps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_document_1_sm.png b/...tmaps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_document_1_sm.png
diff --git a/...tmaps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_document_2_md.png b/...tmaps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_document_2_md.png
diff --git a/...tmaps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_document_3_lg.png b/...tmaps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_document_3_lg.png
diff --git a/...tmaps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_document_4_xl.png b/...tmaps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_document_4_xl.png
diff --git a/...maps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_document_5_2xl.png b/...maps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_document_5_2xl.png
diff --git a/...bitmaps_reference/gh-stg/GithubSTG_Posts_-_Hover_First_Post_0_document_0_sm.png b/...bitmaps_reference/gh-stg/GithubSTG_Posts_-_Hover_First_Post_0_document_0_sm.png
diff --git a/...tmaps_reference/gh-stg/GithubSTG_Posts_-_Navigate_From_Home_0_document_0_xs.png b/...tmaps_reference/gh-stg/GithubSTG_Posts_-_Navigate_From_Home_0_document_0_xs.png
diff --git a/...tmaps_reference/gh-stg/GithubSTG_Posts_-_Navigate_From_Home_0_document_1_sm.png b/...tmaps_reference/gh-stg/GithubSTG_Posts_-_Navigate_From_Home_0_document_1_sm.png
diff --git a/...ckstop/bd/bitmaps_reference/gh-stg/GithubSTG_Privacy_Policy_0_viewport_0_xs.png b/...ckstop/bd/bitmaps_reference/gh-stg/GithubSTG_Privacy_Policy_0_viewport_0_xs.png
diff --git a/...ckstop/bd/bitmaps_reference/gh-stg/GithubSTG_Privacy_Policy_0_viewport_1_sm.png b/...ckstop/bd/bitmaps_reference/gh-stg/GithubSTG_Privacy_Policy_0_viewport_1_sm.png
diff --git a/...ckstop/bd/bitmaps_reference/gh-stg/GithubSTG_Privacy_Policy_0_viewport_2_md.png b/...ckstop/bd/bitmaps_reference/gh-stg/GithubSTG_Privacy_Policy_0_viewport_2_md.png
diff --git a/...ckstop/bd/bitmaps_reference/gh-stg/GithubSTG_Privacy_Policy_0_viewport_3_lg.png b/...ckstop/bd/bitmaps_reference/gh-stg/GithubSTG_Privacy_Policy_0_viewport_3_lg.png
diff --git a/...ckstop/bd/bitmaps_reference/gh-stg/GithubSTG_Privacy_Policy_0_viewport_4_xl.png b/...ckstop/bd/bitmaps_reference/gh-stg/GithubSTG_Privacy_Policy_0_viewport_4_xl.png
diff --git a/...kstop/bd/bitmaps_reference/gh-stg/GithubSTG_Privacy_Policy_0_viewport_5_2xl.png b/...kstop/bd/bitmaps_reference/gh-stg/GithubSTG_Privacy_Policy_0_viewport_5_2xl.png
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),

diff --git a/front/src/lib/styles/pages/home.css b/front/src/lib/styles/pages/home.css
@@ -8,19 +8,28 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  transition-duration: var(--transition-duration);
   transition-property: max-width;
-  @apply dg--transition-effect;
+  padding-right: 1rem;
+  padding-left: 1rem;
   .bio-picture {
     position: relative;
     z-index: 5;
     transition-duration: var(--transition-duration);
     transition-property: border-color, opacity, filter;
     transition-timing-function: var(--transition-timing-function);
+    margin-top: 1rem;
     box-shadow: var(--shadow-elevation-low);
     border-radius: 50%;
     width: 120px;
     height: 120px;
-    @apply dg--transition-effect;
+  }
+  @media screen and (min-width: 480px) {
+    padding-right: 0;
+    padding-left: 0;
+    .bio-picture {
+      margin-top: auto;
+    }
   }
   h1.headline {
     transition: color, font-size;

diff --git a/front/src/lib/styles/pages/post.css b/front/src/lib/styles/pages/post.css
@@ -2,7 +2,7 @@
 .post {
   display: block;
   position: relative;
-  margin-top: 0.75rem;
+  margin-top: 2.25rem;
   border-radius: 0.77rem;
   @media screen and (min-width: 640px) {
     margin-top: 1.5rem;

diff --git a/front/src/lib/styles/pages/privacy.css b/front/src/lib/styles/pages/privacy.css
@@ -1,16 +1,18 @@
 .privacy {
+  margin-top: 1rem;
   font-size: 1rem;
-  @apply max-w-4xl
-    p-5
-    shadow-xl
-    sm:p-9;
-  @screen sm {
-    margin-top: 3rem;
-    padding-top: 7.77rem;
-  }
+  max-width: 56rem;
+  padding: 1.25rem;
   position: relative;
   border-radius: 0.77rem;
   background-color: rgba(var(--background-saturated), 0.77);
+  @media screen and (min-width: 640px) {
+    margin-top: 1rem;
+    padding-top: 7.77rem;
+  }
+  @media screen and (min-width: 768px) {
+    margin-top: 2.75rem;
+  }
   &::before {
     position: absolute;
     mask: