GH-157: Support Frontera Homepage Banner CSS

- submodule repo commit GH-35
- support short paths for loading `site_shared` css source files
- support endless width sections and banner sections
- add rgb color partials as needed
- add centering mixins/extends—the first "tools" stylesheet!

conf/css/postcss.config.js

@@ -10,6 +10,7 @@ module.exports = {
   plugins: [
     require('postcss-import')({
       path: [
+        './taccsite_cms/static/site_shared/css/src',
         './taccsite_cms/static/site_cms/css/src',
         `./taccsite_custom/${env.CUSTOM_ASSET_DIR}/static/${env.CUSTOM_ASSET_DIR}/css/src`
       ],

taccsite_cms/static/site_cms/css/src/_imports/objects/o-section.css

@@ -9,7 +9,6 @@ Styleguide Objects.Section
 */
 
 /* SEE: https://css-tricks.com/couple-takes-sticky-footer/#article-header-id-3 */
-.o-section,
 [class*="o-section"] {
   /* GH-99: Use standard spacing value */
   padding: 45px; /* the Design varies, but this is the approx. average */
@@ -19,48 +18,95 @@ Styleguide Objects.Section
   flex-wrap: wrap;
 }
 
+.o-section--is-banner {
+  /* GH-99: Use standard spacing value */
+  padding: 0 45px;
+}
+
+
+
 /* Style */
 
-.o-section--style-dark {
+[class*="o-section--style"] {
+  --hr-height: var(--global-border-width--normal);
+}
+
+.o-section--style-dark,
+.o-section--style-dark::before {
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-primary--xx-dark);
 }
-.o-section--style-dark + .o-section--style-dark {
-  border-top: 1px solid var(--global-color-primary--xx-light);
+/* FAQ: Banners should not touch a border of the following section */
+.o-section--style-dark:not(.o-section--is-banner) + .o-section--style-dark {
+  border-top: var(--hr-height) solid var(--global-color-primary--xx-light);
 }
-.o-section--style-light {
+
+.o-section--style-light,
+.o-section--style-light::before {
   color: var(--global-color-primary--dark);
   background-color: var(--global-color-primary--xx-light);
 }
-.o-section--style-light + .o-section--style-light {
-  border-top: 1px solid var(--global-color-primary--normal);
+/* FAQ: Banners should not touch a border of the following section */
+.o-section--style-light:not(.o-section--is-banner) + .o-section--style-light {
+  border-top: var(--hr-height) solid var(--global-color-primary--xx-light);
+}
+
+/* Style: (Fake) Endless Width */
+
+[class*="o-section--style"] { position: relative; }
+[class*="o-section--style"] > * { position: relative; z-index: 1; }
+[class*="o-section--style"]::before {
+  content: '';
+  z-index: 0;
+
+  --offset: -9999px; /* how much space beyond edges to extend */
+
+  position: absolute;
+  display: block;
+  left: var(--offset);
+  right: var(--offset);
+  top: 0;
+  /* FAQ: Covers space of following sibling's border without covering border */
+  bottom: calc(-1 * var(--hr-height));
 }
 
+
+
 /* Layout */
 
-[class*="o-section--layout-"] {
+[class*="o-section--layout"] {
   display: grid;
   gap: 30px; /* GH-99: Use standard spacing value */
 }
-[class*="o-section--layout-"] > :empty,
-[class*="o-section--layout-"] .u-empty {
+[class*="o-section--layout"] > :empty:not(img),
+[class*="o-section--layout"] .u-empty {
   display: none;
 }
 
+/* Layout: B (two 50% columns) */
+/* !!!: Support responsive design */
+
 .o-section--layout-a {
-  /* WARNING: Does not support responsive design */
-  /* TODO: Support responsive design */
   grid-template-columns: repeat(2, 1fr);
 }
 
+/* Layout: B (one 60% column, one 40% column) */
+/* !!!: Support responsive design */
+
 .o-section--layout-b {
-  /* WARNING: Does not support responsive design */
-  /* TODO: Support responsive design */
-  /* grid-template-columns: 3fr 2fr; *//* designer mentioned 3 column grid */
-  grid-template-columns: 55.25% 44.75%; /* approx. match design */
+  grid-template-columns: 2fr 1fr;
 }
 
+/* Layout: B (one 60% column, one 40% column) */
+/* !!!: Support responsive design */
+
+.o-section--layout-c {
+  grid-template-columns: 1fr 2fr;
+}
+
+/* Layout: C (three 33.3…% columns) */
+/* !!!: Support responsive design */
+
 .o-section--layout-c {
-  /* TODO: Support responsive design */
   grid-template-columns: repeat(3, 3fr);
 }

taccsite_cms/static/site_shared/css/src/_imports/settings/color.css

@@ -13,13 +13,15 @@
     --weak:     transparent instance
     --(…)light: lighter value
     --(…)dark:  darker value
+    --(…)rgb:   "R, G, B" value partial (ex. usage: `rgba(var(--...-rgb), 0.5)`)
 */
 
 :root {
     /* Primary (Text, Layout) */
-    /* WARNING: Do not use `-alt-` hues; instead, "round up" to nearest color */
+    /* WARNING: Do not use `-alt-` hues; "round up" to nearest color, instead */
     --global-color-primary--xx-light: #FFFFFF;
     --global-color-primary--x-light: #F4F4F4;
+    --global-color-primary--x-light-rgb: 244, 244, 244;
     --global-color-primary--light: #C6C6C6;/*
         --global-color-primary--light-alt-2: #DBDBDB;
         --global-color-primary--light-alt-2: #D8D8D8; */
@@ -29,7 +31,8 @@
     --global-color-primary--dark: #707070;/*
         --global-color-primary--dark-alt-1: #696666;
         --global-color-primary--dark-alt-2: #5F5C5C; */
-    --global-color-primary--x-dark: #484848;/*
+    --global-color-primary--x-dark: #484848;
+    --global-color-primary--x-dark-rgb: 72, 72, 72;/*
         --global-color-primary--x-dark-alt-1: #464646; */
     --global-color-primary--xx-dark: #222222; /*
         --global-color-primary--xx-dark-alt-1: #2C2C2B;

taccsite_cms/static/site_shared/css/src/_imports/tools/x-center.css

@@ -0,0 +1,55 @@
+/*
+Center
+
+Styles that allow centering for specific contexts.
+
+Caveat: Only generic solutions with limited side effects are supported. See "Reference" section for more solutions.
+
+Reference:
+- [Centering in CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/)
+
+.x-center--horz-inline                     - Horz. align any num of inline el's
+.x-center--horz-block                      - Horz. align any num of block el's
+.x-center--horz-block-multiple-children    - Horz. align multiple block el's
+.x-center--vert-inline-multiline--flex     - Vert. align multiple inline el's: Flex Method
+.x-center--both--flex                      - Vert. & Horz. align any el's
+
+Styleguide Tools.ExtendsAndMixins.Center
+*/
+
+/* Horizontal */
+
+/* Horizontal: Inline */
+.x-center--horz-inline {
+  text-align: center;
+}
+
+/* Horizontal: Block */
+.x-center--horz-block {
+  margin: 0 auto;
+}
+
+/* Horizontal: Block: Multiple Children */
+.x-center--horz-block-multiple-children {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+/* Vertical */
+
+/* Vertical: Inline: Multiple Lines - via Flexbox */
+.x-center--vert-inline-multiline--flex {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* Both */
+
+/* Both: Any - via Flexbox */
+.x-center--both--flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}