From b2dc1735baac81941a3d489dfa80205493cc6ef8 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Mon, 29 Mar 2021 21:03:59 -0500 Subject: [PATCH] GH-157: Support Frontera Homepage Banner CSS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 | 1 + .../css/src/_imports/objects/o-section.css | 80 +++++++++++++++---- .../css/src/_imports/settings/color.css | 7 +- .../css/src/_imports/tools/x-center.css | 55 +++++++++++++ taccsite_custom | 2 +- 5 files changed, 125 insertions(+), 20 deletions(-) create mode 100644 taccsite_cms/static/site_shared/css/src/_imports/tools/x-center.css diff --git a/conf/css/postcss.config.js b/conf/css/postcss.config.js index 03fd54a08..397a8c1b0 100644 --- a/conf/css/postcss.config.js +++ b/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` ], 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 index 0fdb0691b..a84ce947a 100644 --- 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 @@ -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); } diff --git a/taccsite_cms/static/site_shared/css/src/_imports/settings/color.css b/taccsite_cms/static/site_shared/css/src/_imports/settings/color.css index 4e5f0764d..3132950fb 100644 --- a/taccsite_cms/static/site_shared/css/src/_imports/settings/color.css +++ b/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; diff --git a/taccsite_cms/static/site_shared/css/src/_imports/tools/x-center.css b/taccsite_cms/static/site_shared/css/src/_imports/tools/x-center.css new file mode 100644 index 000000000..febedcb6a --- /dev/null +++ b/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; +} diff --git a/taccsite_custom b/taccsite_custom index 767c3dd40..faeebeea0 160000 --- a/taccsite_custom +++ b/taccsite_custom @@ -1 +1 @@ -Subproject commit 767c3dd40fcc56aa9d416d8936bdac4f1a12ce8a +Subproject commit faeebeea09a708884151276f6d4284e591bce646