Task/fp 1801 guides breadcrumbs headings (#45)

* feat: FP-1800 new cms header typography, from apcd * fix: FP-1800 new hr space vars * fix(elements): FP-1335 do not force capitalize h4
TACC · Aug 29, 2022 · e5f065c · e5f065c
1 parent 7f45eb0
commit e5f065c
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 25 deletions.
diff --git a/src/lib/_imports/elements/html-elements.css b/src/lib/_imports/elements/html-elements.css
@@ -69,28 +69,45 @@ body > main + footer {
   top: 100vh;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  margin-top: revert; /* to overwrite Bootstrap `_reboot.css` */
+/* Headings */
 
-  font-weight: var(--bold);
+h1, h2, h3, h4, h5, h6 {
   color: var(--global-color-primary--xx-dark);
 }
+h1, h2, h4, h5, h6 {
+  font-weight: var(--bold);
+}
+
+h1 {
+  margin-top: 27px;
+  margin-bottom: 27px;
+}
+h2 {
+  margin-top: 30px;
+  margin-bottom: var(--global-space--normal);
+}
+h1 + h2,
+h1 + hr {
+  margin-top: -12px;
+}
 h1 {
   font-size: var(--global-font-size--xxx-large);
 }
 h2 {
-  font-size: var(--global-font-size--xx-large);
+  font-size: var(--global-font-size--x-large);
 }
+
 h3, h4, h5, h6 {
-  margin-bottom: 15px; /* overwrite Bootstrap */
+  margin-top: var(--global-space--normal);
+  margin-bottom: var(--global-space--normal);
 }
 h3 {
   font-size: var(--global-font-size--x-large);
 }
 h4 {
   font-size: var(--global-font-size--large);
 }
-h4, h5 {
+h5 {
   text-transform: uppercase;
 }
 h5, h6 {
@@ -143,7 +160,9 @@ li {
 /* Misc. */
 
 hr {
-  margin-block: var(--global-space--hr-margin);
+  margin-top: var(--global-space--hr-buffer-above); /* overwrite Bootstrap */
+  border-top: 1px solid var(--global-color-primary--light);
+  margin-bottom: var(--global-space--hr-buffer-below); /* overwrite Bootstrap */
 }
 
 

diff --git a/src/lib/_imports/settings/space.css b/src/lib/_imports/settings/space.css
@@ -29,7 +29,7 @@ Styleguide Settings.CustomProperties.Space
   --global-space--x-small: 4px;    /* 0.25rem  (if base is 16px) */
   --global-space--small: 8px;      /* 0.5rem   (if base is 16px) */
   --global-space--normal: 16px;    /* 1.0rem   (if base is 16px) */
-  --global-space--large: 25px;     /* 1.5rem   (if base is 16px) */
+  --global-space--large: 24px;     /* 1.5rem   (if base is 16px) */
   --global-space--x-large: 48px;   /* 3.0rem   (if base is 16px) */
 
   /* Miscellaneous */
@@ -47,4 +47,8 @@ Styleguide Settings.CustomProperties.Space
     var(--global-space--section-right)
     var(--global-space--section-bottom)
     var(--global-space--section-left);
+
+  /* CMS Pages */
+  --global-space--hr-buffer-above: 10px;
+  --global-space--hr-buffer-below: 30px;
 }
diff --git a/src/lib/_imports/trumps/s-breadcrumbs.css b/src/lib/_imports/trumps/s-breadcrumbs.css
@@ -45,11 +45,11 @@ nav.s-breadcrumbs {
 
 /* Elements i.e. Content */
 
-/* To undo default list styles ONLY for major breadcrumbs */
-/* FAQ: Minor breadcrumbs have not been designed, so we should not unstyle it */
+/* To undo default list styles */
 nav.s-breadcrumbs ol {
   list-style: none; /* overwrite browser styles */
-  padding-left: 0; /* overwrite html-elements.css */
+  padding-left: unset; /* undo html-elements.css */
+  margin-bottom: unset; /* undo html-elements.css */
 
   font-weight: var(--global-font-weight--medium);
 }

diff --git a/src/lib/_imports/trumps/s-document.css b/src/lib/_imports/trumps/s-document.css
@@ -16,17 +16,6 @@ Styleguide Trumps.Scopes.Document
 
 /* ELEMENTS */
 
-
-/* ELEMENTS: Content Sectioning */
-
-.s-document h2 {
-  margin-bottom: var(--global-space--normal);
-}
-
-.s-document h3 {
-  margin-bottom: var(--global-space--normal);
-}
-
 /* ELEMENTS: Text Content */
 
 .s-document blockquote {

diff --git a/src/lib/_imports/trumps/s-guide-doc.css b/src/lib/_imports/trumps/s-guide-doc.css
@@ -15,13 +15,15 @@ Styleguide Trumps.Scopes.GuideDoc
 
 /* ELEMENTS: Content Sectioning */
 
-/* Fake <hr> above <h3> */
-.s-guide-doc h3::before {
+/* Fake <hr> above <h2> */
+.s-guide-doc h2:not(hr + h2)::before {
   display: block;
   content: '';
 
-  margin: var(--global-space--large) 0;
+  /* To mirror hr (site.css) */
+  margin-top: var(--global-space--hr-buffer-above);
   border-top: 1px solid var(--global-color-primary--light);
+  margin-bottom: var(--global-space--hr-buffer-below);
 }