Merge branch 'main' into task/GH-88-system-specs

TACC · Aug 23, 2021 · fd5ed61 · fd5ed61
2 parents 0bfb57f + 2689b8b
commit fd5ed61
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 18 deletions.
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/objects/o-section.css b/taccsite_cms/static/site_cms/css/src/_imports/objects/o-section.css
@@ -91,6 +91,8 @@ Styleguide Objects.Section
 }
 
 /* Modifers: Style: Dark & Light */
+/* HELP: How can we change style of `o-section` content without overlap? */
+/* SEE: https://confluence.tacc.utexas.edu/x/DyUFDg */
 
 .o-section--style-dark,
 .o-section--style-dark::before {
@@ -117,7 +119,7 @@ Styleguide Objects.Section
 /* FAQ: Banners should not touch a border of the following section */
 .o-section--style-light:not(.o-section--banner)
 + .o-section--style-light:not(.o-section--banner) {
-  border-top: var(--hr-height) solid var(--global-color-primary--xx-light);
+  border-top: var(--hr-height) solid var(--global-color-primary--normal);
 }
 
 /* Modifers: Style: (Fake) Endless Background */

diff --git a/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css b/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css
@@ -21,7 +21,7 @@
 
   --global-color-primary--xx-light: #FFFFFF;
   --global-color-primary--x-light: #F4F4F4;
-  --global-color-primary--x-light-rgb: 244, 244, 244;
+    --global-color-primary--x-light-rgb: 244, 244, 244;
   --global-color-primary--light: #C6C6C6;
   --global-color-primary--normal: #AFAFAF;
   --global-color-primary--dark: #707070;

diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-style-guide.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-style-guide.css
@@ -9,11 +9,6 @@ A style guide. This is intended for:
 Styleguide Trumps.Scopes.StyleGuide
 */
 
-.s-style-guide {
-  margin-top: var(--global-space--large);
-  margin-bottom: var(--global-space--x-large);
-}
-
 
 
 
@@ -24,16 +19,34 @@ Styleguide Trumps.Scopes.StyleGuide
 
 /* ELEMENTS: Content Sectioning */
 
-.s-style-guide section {
-  clear: both;
-}
-.s-style-guide section:not(section section) {
-  border-top: var(--global-border--x-thick);
-  padding-top: var(--global-space--x-large);
+/* NOTE: Similar to `s-document` "ELEMENTS: Content Sectioning" */
+
+/* To give little margin above isolated headings for sections */
+/* FAQ: Headings with no prior sibling need spacing before the heading */
+/* FAQ: Headings that begin `o-section` already have spacing from `o-section` */
+.s-style-guide section:not(.o-section) > h1:first-child,
+.s-style-guide section:not(.o-section) > h2:first-child,
+.s-style-guide section:not(.o-section) > h3:first-child,
+.s-style-guide section:not(.o-section) > h4:first-child,
+.s-style-guide section:not(.o-section) > h5:first-child,
+.s-style-guide section:not(.o-section) > h6:first-child,
+/* FAQ: Headings after non-headings need spacing before the heading */
+/* FAQ: Headings after headings already have spacing from prior heading */
+.s-style-guide section > :not(h1, h2, h3, h4, h5, h6) + h1,
+.s-style-guide section > :not(h1, h2, h3, h4, h5, h6) + h2,
+.s-style-guide section > :not(h1, h2, h3, h4, h5, h6) + h3,
+.s-style-guide section > :not(h1, h2, h3, h4, h5, h6) + h4,
+.s-style-guide section > :not(h1, h2, h3, h4, h5, h6) + h5,
+.s-style-guide section > :not(h1, h2, h3, h4, h5, h6) + h6 {
   margin-top: var(--global-space--x-large);
 }
-.s-style-guide section section {
-  border-top: var(--global-border--normal);
-  padding-top: var(--global-space--normal);
-  margin-top: var(--global-space--normal);
+
+/* To give much margin below all headings for sections */
+.s-style-guide section > h1,
+.s-style-guide section > h2,
+.s-style-guide section > h3,
+.s-style-guide section > h4,
+.s-style-guide section > h5,
+.s-style-guide section > h6 {
+  margin-bottom: var(--global-space--normal);
 }
diff --git a/taccsite_cms/templates/style_guide.html b/taccsite_cms/templates/style_guide.html
@@ -1,4 +1,4 @@
-{% extends "fullwidth.html" %}
+{% extends "standard.html" %}
 {% load cms_tags staticfiles %}
 
 {% block assets_custom %}
@@ -13,6 +13,7 @@
 {% block content %}
 <div class="container  s-document  s-style-guide">
   {% block guide %}
+    {% include "nav_cms_breadcrumbs.html" %}
     {% placeholder "content" %}
   {% endblock guide %}
 </div>