build(front): removes content background/shadow at higher breakpoint

dgrebb · Nov 7, 2023 · fbd4336 · fbd4336
1 parent 4458151
commit fbd4336
Show file tree

Hide file tree

Showing 35 changed files with 47 additions and 17 deletions.
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/...tmaps_reference/gh-stg/GithubSTG_Cats_-_Select_All_Category_0_viewport_0_md.png b/...tmaps_reference/gh-stg/GithubSTG_Cats_-_Select_All_Category_0_viewport_0_md.png
diff --git a/...tmaps_reference/gh-stg/GithubSTG_Cats_-_Select_All_Category_0_viewport_1_lg.png b/...tmaps_reference/gh-stg/GithubSTG_Cats_-_Select_All_Category_0_viewport_1_lg.png
diff --git a/...maps_reference/gh-stg/GithubSTG_Cats_-_Select_All_Category_0_viewport_3_2xl.png b/...maps_reference/gh-stg/GithubSTG_Cats_-_Select_All_Category_0_viewport_3_2xl.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/...d/bitmaps_reference/gh-stg/GithubSTG_Post_-_Aside_TOC_Click_0_viewport_0_md.png b/...d/bitmaps_reference/gh-stg/GithubSTG_Post_-_Aside_TOC_Click_0_viewport_0_md.png
diff --git a/...d/bitmaps_reference/gh-stg/GithubSTG_Post_-_Aside_TOC_Click_0_viewport_1_lg.png b/...d/bitmaps_reference/gh-stg/GithubSTG_Post_-_Aside_TOC_Click_0_viewport_1_lg.png
diff --git a/...d/bitmaps_reference/gh-stg/GithubSTG_Post_-_Aside_TOC_Click_0_viewport_2_xl.png b/...d/bitmaps_reference/gh-stg/GithubSTG_Post_-_Aside_TOC_Click_0_viewport_2_xl.png
diff --git a/.../bitmaps_reference/gh-stg/GithubSTG_Post_-_Aside_TOC_Click_0_viewport_3_2xl.png b/.../bitmaps_reference/gh-stg/GithubSTG_Post_-_Aside_TOC_Click_0_viewport_3_2xl.png
diff --git a/...itmaps_reference/gh-stg/GithubSTG_Post_-_Content_Components_0_document_0_xs.png b/...itmaps_reference/gh-stg/GithubSTG_Post_-_Content_Components_0_document_0_xs.png
diff --git a/...itmaps_reference/gh-stg/GithubSTG_Post_-_Content_Components_0_document_1_sm.png b/...itmaps_reference/gh-stg/GithubSTG_Post_-_Content_Components_0_document_1_sm.png
diff --git a/...itmaps_reference/gh-stg/GithubSTG_Post_-_Content_Components_0_document_2_md.png b/...itmaps_reference/gh-stg/GithubSTG_Post_-_Content_Components_0_document_2_md.png
diff --git a/...itmaps_reference/gh-stg/GithubSTG_Post_-_Content_Components_0_document_3_lg.png b/...itmaps_reference/gh-stg/GithubSTG_Post_-_Content_Components_0_document_3_lg.png
diff --git a/...itmaps_reference/gh-stg/GithubSTG_Post_-_Content_Components_0_document_4_xl.png b/...itmaps_reference/gh-stg/GithubSTG_Post_-_Content_Components_0_document_4_xl.png
diff --git a/...tmaps_reference/gh-stg/GithubSTG_Post_-_Content_Components_0_document_5_2xl.png b/...tmaps_reference/gh-stg/GithubSTG_Post_-_Content_Components_0_document_5_2xl.png
diff --git a/...tmaps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_viewport_2_md.png b/...tmaps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_viewport_2_md.png
diff --git a/...tmaps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_viewport_3_lg.png b/...tmaps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_viewport_3_lg.png
diff --git a/...tmaps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_viewport_4_xl.png b/...tmaps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_viewport_4_xl.png
diff --git a/...maps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_viewport_5_2xl.png b/...maps_reference/gh-stg/GithubSTG_Post_-_Navigate_From_Posts_0_viewport_5_2xl.png
diff --git a/...thubSTG_Post_-_Syntax_Highlighter_0_postnth-child1ofsyntax-highlighter_0_xs.png b/...thubSTG_Post_-_Syntax_Highlighter_0_postnth-child1ofsyntax-highlighter_0_xs.png
diff --git a/...thubSTG_Post_-_Syntax_Highlighter_0_postnth-child1ofsyntax-highlighter_1_sm.png b/...thubSTG_Post_-_Syntax_Highlighter_0_postnth-child1ofsyntax-highlighter_1_sm.png
diff --git a/...thubSTG_Post_-_Syntax_Highlighter_0_postnth-child1ofsyntax-highlighter_2_md.png b/...thubSTG_Post_-_Syntax_Highlighter_0_postnth-child1ofsyntax-highlighter_2_md.png
diff --git a/...thubSTG_Post_-_Syntax_Highlighter_0_postnth-child1ofsyntax-highlighter_3_lg.png b/...thubSTG_Post_-_Syntax_Highlighter_0_postnth-child1ofsyntax-highlighter_3_lg.png
diff --git a/...thubSTG_Post_-_Syntax_Highlighter_0_postnth-child1ofsyntax-highlighter_4_xl.png b/...thubSTG_Post_-_Syntax_Highlighter_0_postnth-child1ofsyntax-highlighter_4_xl.png
diff --git a/...hubSTG_Post_-_Syntax_Highlighter_0_postnth-child1ofsyntax-highlighter_5_2xl.png b/...hubSTG_Post_-_Syntax_Highlighter_0_postnth-child1ofsyntax-highlighter_5_2xl.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/_ci/backstop/scenarios/post/post_aside_toc_active.js b/_ci/backstop/scenarios/post/post_aside_toc_active.js
@@ -6,7 +6,7 @@ module.exports = {
   label: 'Post - Aside TOC Active Item Onload',
   url: POST_URL,
   viewports: aboveSmallViewports,
-  delay: 333,
+  delay: 533,
   selectors: ['.post .aside'],
   selectorExpansion: false,
   misMatchThreshold: 0.2,

diff --git a/front/src/lib/styles/base/theme.css b/front/src/lib/styles/base/theme.css
@@ -57,11 +57,17 @@
   :root {
     --bg-clr: var(--lemon-50);
     --bg-light-clr: var(--lemon-25);
+    --content-bg-clr: var(--dirty-sidewalk);
     --bg-gradient: linear-gradient(
       190deg,
       var(--sunshine),
       var(--bg-clr) 333px
     );
+    --content-bg-gradient: linear-gradient(
+      190deg,
+      var(--sunshine),
+      var(--content-bg-clr) 333px
+    );
     --fg-clr: var(--violet);
     --fg-clr-o: var(--violet-a90);
     --fg-clr-oo: var(--violet-a75);
@@ -72,7 +78,6 @@
     --link-clr: var(--fg-clr-oo);
     --link-clr--hover: var(--highlight-clr);
     --mark-bg-clr: var(--green);
-    --content-bg-clr: var(--dirty-sidewalk);
     --headshot-filter: sepia(100%) saturate(70%) brightness(85%)
       hue-rotate(61deg);
     --shadow-color: var(--sunshine-shadow-clr);
@@ -137,6 +142,12 @@ html.light-theme {
   --bg-clr: var(--lemon-50);
   --bg-light-clr: var(--lemon-25);
   --bg-gradient: linear-gradient(190deg, var(--sunshine), var(--bg-clr) 333px);
+  --content-bg-clr: var(--dirty-sidewalk);
+  --content-bg-gradient: linear-gradient(
+    190deg,
+    var(--sunshine),
+    var(--content-bg-clr) 333px
+  );
   --fg-clr: var(--violet);
   --fg-clr-o: var(--violet-a90);
   --fg-clr-oo: var(--violet-a75);
@@ -147,7 +158,6 @@ html.light-theme {
   --link-clr: var(--fg-clr-oo);
   --link-clr--hover: var(--highlight-clr);
   --mark-bg-clr: var(--green);
-  --content-bg-clr: var(--dirty-sidewalk);
   --headshot-filter: sepia(100%) saturate(70%) brightness(85%) hue-rotate(61deg);
   --shadow-color: var(--sunshine-shadow-clr);
   --tag-clr: var(--sand-a50);
@@ -218,12 +228,17 @@ html.light-theme {
     --hardlight-clr: var(--grape);
     --bg-clr: var(--rich-black);
     --bg-light-clr: var(--oxford-blue);
+    --content-bg-clr: var(--blue-rock);
     --bg-gradient: linear-gradient(
       190deg,
       var(--moonshine),
       var(--bg-clr) 333px
     );
-    --content-bg-clr: var(--blue-rock);
+    --content-bg-gradient: linear-gradient(
+      190deg,
+      var(--moonshine),
+      var(--content-bg-clr) 333px
+    );
     --shadow-color: var(--moonshine-shadow-clr);
     --rim-clr: var(--moonshine);
     --link-clr: var(--fg-clr-oo);
@@ -281,9 +296,14 @@ html.dark-theme {
   --fg-clr-oooo: var(--celestial-a30);
   --hardlight-clr: var(--grape);
   --bg-clr: var(--rich-black);
+  --content-bg-clr: var(--blue-rock);
   --bg-light-clr: var(--oxford-blue);
   --bg-gradient: linear-gradient(190deg, var(--moonshine), var(--bg-clr) 333px);
-  --content-bg-clr: var(--blue-rock);
+  --content-bg-gradient: linear-gradient(
+    190deg,
+    var(--moonshine),
+    var(--content-bg-clr) 333px
+  );
   --shadow-color: var(--moonshine-shadow-clr);
   --rim-clr: var(--moonshine);
   --link-clr: var(--fg-clr-oo);

diff --git a/front/src/lib/styles/base/typography.css b/front/src/lib/styles/base/typography.css
@@ -36,7 +36,7 @@
   }
   ol,
   ul {
-    margin: 1rem 0 1rem 0.25rem;
+    margin: 0.75rem 0 0.75rem 0.25rem;
     li {
       margin-bottom: 0.75rem;
       &:last-of-type {
@@ -150,7 +150,7 @@ h1.page-heading {
   .meat {
     ol,
     ul {
-      margin: 1.5rem 0 1.5rem 1.5rem;
+      margin: 0.75rem 0 0.75rem 1.5rem;
       ol,
       ul {
         margin: 0.75rem 0 0.75rem 0.75rem;

diff --git a/front/src/lib/styles/components/Code/Code.css b/front/src/lib/styles/components/Code/Code.css
@@ -13,8 +13,8 @@
   position: relative;
   z-index: 3;
   transition: transform 0s;
-  margin-top: 2.25rem;
-  margin-bottom: 2.25rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
   box-shadow: var(--shadow-elevation-medium);
   border-radius: 0.5rem;
   background-color: var(--bg-light-clr);
@@ -112,8 +112,8 @@
     transition-property: scrollbar-color;
     transition-timing-function: var(--transition-timing-function);
     margin-bottom: -0.5rem;
-    padding: 4rem 0 0.5rem 0;
-    overflow-x: auto;
+    padding: 4.25rem 0 0.5rem 0;
+    overflow-x: scroll;
     scrollbar-color: transparent transparent;
     scrollbar-gutter: stable both-edges;
     scrollbar-width: thin;
@@ -154,7 +154,7 @@
     transition: scrollbar-color 0.5s;
     margin-bottom: -0.5rem;
     padding: 3.25rem 0 0.5rem 0;
-    overflow-x: auto;
+    overflow-x: scroll;
     scrollbar-color: transparent transparent;
     scrollbar-gutter: stable both-edges;
     scrollbar-width: thin;
@@ -292,7 +292,7 @@
 
 @media screen and (min-width: 480px) {
   .syntax-highlighter {
-    padding: 0 0.75rem 0.5rem 0.75rem;
+    padding: 0 0.75rem 0.75rem 0.75rem;
     .line-number-wrap {
       td:first-child {
         display: table-cell;
@@ -339,6 +339,7 @@
     padding: 0 2rem;
     > pre {
       padding-top: 4.5rem;
+      padding-bottom: 1.5rem;
     }
     .line-number-wrap {
       padding-top: 4rem;

diff --git a/front/src/lib/styles/global.css b/front/src/lib/styles/global.css
@@ -171,6 +171,9 @@ a.scroll-top {
     font-size: 1.125rem;
     line-height: 1.75rem;
   }
+}
+
+@media screen and (min-width: 768px) {
   .privacy,
   .post {
     box-shadow: var(--shadow-elevation-high);

diff --git a/front/src/lib/styles/pages/post.css b/front/src/lib/styles/pages/post.css
@@ -247,10 +247,6 @@
     em strong {
       font-family: var(--font-psb);
     }
-    &:has(+ ul),
-    &:has(+ ol) {
-      padding-bottom: 0;
-    }
   }
   a {
     transition-duration: var(--transition-duration);
@@ -271,6 +267,15 @@
         margin-left: 0.5rem;
       }
     }
+    & + h1.post-heading,
+    & + h2.post-heading,
+    & + h3.post-heading,
+    & + h4.post-heading,
+    & + h5.post-heading,
+    & + h6.post-heading,
+    & + h7.post-heading {
+      padding-top: 1rem;
+    }
   }
   code {
     color: var(--fg-clr-o);
@@ -472,6 +477,7 @@
 @media screen and (min-width: 768px) {
   .post {
     margin-top: 3.5rem;
+    background: var(--content-bg-gradient);
     padding: 2.33rem;
   }
   .post-hero-wrap {