Merge pull request #225 from TACC/task/GH-101-header-redesign--naviga…

…tion-bar

conf/css/.postcssrc.yml

@@ -16,6 +16,9 @@ plugins:
     features:
       custom-media-queries: true
       media-query-ranges: true
+      # RFE: Fix bug on the Internet so we can use these reliably
+      # SEE: https://github.com/postcss/postcss-custom-selectors/issues/40
+      custom-selectors: true
   cssnano:
     preset:
       - 'default'

conf/css/freeze_variables/.postcssrc.yml

@@ -2,6 +2,9 @@ plugins:
   postcss-import:
     path:
       - './taccsite_cms/static/site_cms/css/src'
+  postcss-env-function:
+    importFrom:
+      - './taccsite_cms/static/site_cms/css/src/_themes/export.js'
   postcss-css-variables:
     preserve: 'computed'
     preserveAtRulesOrder: true

package.json

@@ -22,6 +22,7 @@
         "async": "^3.2.0",
         "cssnano": "^4.1.10",
         "dotenv": "^8.2.0",
+        "merge-lite": "^1.0.2",
         "npm-watch": "^0.7.0",
         "postcss-cli": "^7.1.2",
         "postcss-css-variables": "^0.17.0",

taccsite_cms/static/site_cms/css/src/_imports/_tests/postcss-preset-env.css

@@ -56,3 +56,33 @@ Styleguide _Test
 @media (--wide-window) {
   ._test{ background-color:red; }
 }
+
+
+/*! Custom Selectors */
+/* SEE: https://preset-env.cssdb.org/features#custom-selectors */
+
+/*! Goal: */
+article h1+p,article h2+p,article h3+p{color: #000;}
+
+/*! Test: */
+@custom-selector :--heading h1, h2, h3;
+
+article :--heading + p {
+  color: #000;
+}
+
+/*! Goal: */
+.nav-link:hover,.nav-link:focus,.nav-link:active{color:red;}
+
+/*! See: https://github.com/postcss/postcss-custom-selectors/issues/40 */
+
+/*! Test: */
+@custom-selector :--nav-link-hover  .nav-link:hover;
+@custom-selector :--nav-link-focus  .nav-link:focus;
+@custom-selector :--nav-link-active .nav-link:active;
+
+:--nav-link-hover,
+:--nav-link-focus,
+:--nav-link-active {
+  color: red;
+}

taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css

@@ -7,6 +7,7 @@ Markup: c-branding.twig.html
 
 Styleguide Components.Branding
 */
+@import url("_imports/tools/selectors.css");
 @import url("_imports/tools/media-queries.css");
 
 /* IDEA: Use multi-column (`column-*`) to simplify border, margin, separator */
@@ -23,17 +24,9 @@ Styleguide Components.Branding
   flex-direction: row;
   justify-content: center;
   align-items: center;
-
-  /* This prevents header bar resize when branding is dynamically added */
-  /* CAVEAT: This is only for Portal and Docs which dynamically load content */
-  /* FAQ: Do not use `48.78px`, because Safari only accepts whole numbers */
-  height: 40px;
-
-  background-color: var(--global-color-primary--xx-dark);
-  color: var(--global-color-primary--xx-light);
-  border-bottom: 1px solid var(--global-color-primary--normal);
 }
 
+
 /* A responsive column gap */
 .c-branding__link:first-child .c-branding__image {
   margin-right: var(--column-gap--side);
@@ -57,9 +50,7 @@ Styleguide Components.Branding
 /* Elements */
 
 .c-branding__link {
-  --height: 90%;
-
-  height: var(--height);
+  height: var(--height, 90%);
 }
 .c-branding__separator {
   /* To add border */

taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css

@@ -23,5 +23,8 @@ Styleguide Components.Logo
 /* Elements  */
 
 .c-logo__image {
-  /* … */
+  /* To delegate height control to base/container */
+  height: 100%;
+  /* To prevent length wider than (but allow narrower than) base/container */
+  max-width: 100%;
 }

taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css

@@ -18,6 +18,7 @@ Styleguide Elements.MainSectioningRoots
 html {
   /* Set base font but support user-defined browser font size */
   /* SEE: https://snook.ca/archives/html_and_css/font-size-with-rem */
+  /* TODO: Use 62.5% (requires recalculating NON-Frontera instances of `rem`) */
   font-size: 100%; /* 16px */
 }
 

taccsite_cms/static/site_cms/css/src/_imports/settings/border.css

@@ -7,13 +7,17 @@
 /* Usage: `var(--global-border-width--normal)` */
 /* SEE: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties */
 
+/* TODO: Replace use of `var(--global-border…)` with `env(--border…)` */
 :root {
-    --global-border-width--normal: 1px;
+    --global-border-width--normal: env(--border-width--normal);
     --global-border--normal: var(--global-border-width--normal) solid var(--global-color-primary--normal);
 
-    --global-border-width--thick: 2px;
+    --global-border-width--thick: env(--border-width--thick);
     --global-border--thick: var(--global-border-width--thick) solid var(--global-color-primary--normal);
 
-    --global-border-width--x-thick: 3px;
+    --global-border-width--x-thick: env(--border-width--x-thick);
     --global-border--x-thick: var(--global-border-width--x-thick) solid var(--global-color-primary--normal);
+
+    --global-border-width--xx-thick: env(--border-width--xx-thick);
+    --global-border--xx-thick: var(--global-border-width--xx-thick) solid var(--global-color-primary--normal);
 }

taccsite_cms/static/site_cms/css/src/_imports/settings/font.css

@@ -55,14 +55,8 @@ Styleguide Settings.CustomProperties.Font
 
 
   /* Weight */
-  /* SEE: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */
-
-  /* NOTE: Long names to be consistent (opinions welcome) */
-  --global-font-weight--regular: 400;
-  --global-font-weight--medium: 500;
-  --global-font-weight--bold: 700;
-
-  /* NOTE: Short names to increase adoption (opinions welcome) */
+  /* TODO: Replace use of `var(--…)` with `env(--…)` for font weights */
+  /* WARNING: Deprecated! Do NOT use. Use `env(--…)` instead for font weights */
   --regular: 400;
   --medium: 500;
   --bold: 700;

taccsite_cms/static/site_cms/css/src/_imports/tools/selectors.css

@@ -0,0 +1,19 @@
+/* DO NOT ADD STYLES HERE; ADD CUSTOM SELECTORS TO USE IN OTHER STYLESHEETS */
+
+/*
+For Other Sites
+
+These are global selectors to target known subsites.
+
+Usage: `:--for-subsite .some-class { … }`
+
+Notice: These must be Tools (imported as needed) until native browser support, at which time they can become Settings (imported globally).
+
+Reference:
+- https://drafts.csswg.org/css-extensions/#custom-selectors
+
+Styleguide Tools.CustomSelectors.ForOtherSites
+*/
+@custom-selector :--for-cms    body > .o-site__body;
+@custom-selector :--for-portal body > .content;
+@custom-selector :--for-docs   .wy-body-for-nav;

taccsite_cms/static/site_cms/css/src/_imports/tools/x-arrow.css

@@ -0,0 +1,35 @@
+/*
+Arrow
+
+An arrow generator. Set variables for specific use cases.
+
+.x-arrow--right - Rightward (>)
+.x-arrow--left  - Leftward  (<)
+.x-arrow--up    - Upward    (^)
+.x-arrow--down  - Downward  (v)
+
+Styleguide Components.Branding
+*/
+
+/* SEE: https://www.w3schools.com/howto/howto_css_arrows.asp */
+%x-arrow {
+  --size: 5px;
+  --line: 2px;
+  --color: black;
+
+  display: inline-block;
+  vertical-align: middle;
+
+  /* arrow size */
+  padding: var(--size);
+
+  /* line width */
+  border-width: 0 var(--line) var(--line) 0;
+  border-style: solid;
+  border-color: var(--color);
+}
+
+%x-arrow--right { transform: rotate(-45deg); }
+%x-arrow--left  { transform: rotate(135deg); }
+%x-arrow--up    { transform: rotate(-135deg); }
+%x-arrow--down  { transform: rotate(45deg); }

taccsite_cms/static/site_cms/css/src/_imports/trumps/README.css

@@ -45,6 +45,47 @@ Rules:
 Styleguide Trumps.Scopes
 */
 
+/*
+For (Other Sites)
+
+For (Other Sites) styles are functional overrides and styles that are scoped to a specific subsite that shares elements with sibling subsites. These are meant to be used sparingly. The for-other-site styles are specifically intended for needs specific to Docs, CMS, or Portal.
+
+Guidelines:
+
+- For (Other Site) styles are especially rare, evaluate before creating.
+- For reliable results, use a consistent selector for each subsite.
+
+Rules:
+
+- The `!important` may be used.
+- All styles **must** have a comment.
+
+Styleguide Trumps.ForOtherSites
+*/
+
+/*
+Scopes
+
+Scope styles are functional overrides and styles that are scoped to a specific area. These are meant to be used sparingly. Examples of scopes are functional styles for third-party markup, WYSIWIG editor tags, form elements, components with a forced relationship.
+
+Reference:
+
+- [BEM with Namespaces: Scope Namespaces](https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/#scope-namespaces-s-)
+
+Guidelines:
+
+- Scopes are pretty rare, evaluate before creating.
+- A consistent way to author these in nested inside `.s-* {}`.
+
+Rules:
+
+- The `!important` may be used.
+- All overrides **must** have a comment.
+- Scope styles should have a comment.
+
+Styleguide Trumps.Scopes
+*/
+
 /*
 Utility
 

taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css

@@ -0,0 +1,46 @@
+/*
+Docs
+
+The [Core Docs](https://github.com/TACC/Core-Docs).
+
+Styleguide Trumps.ForOtherSites.Docs
+*/
+@import url("_imports/tools/selectors.css");
+
+
+
+/* Initialize Sidebar Position (for Dependency on Header Height) */
+
+/* To position Docs' sidebar nav at expected initial vertical location ASAP */
+:--for-docs nav.stickynav {
+  /* To override `top: 0` (in `theme.css`) */
+  /* FAQ: This is an initial value that is re-calculated by a Docs script */
+  /* SEE: https://bitbucket.org/taccaci/frontera-tech-docs/src/429f05f/frontera_theme/base.html#lines-69 */
+  top: calc(env(--header-brandbar-height) + env(--header-navbar-height));
+}
+
+
+
+/* Overwrite Bootstrap (for Search Form in Header) */
+
+/* To compensate for Docs not having `.form-inline` in _its_ Bootstrap 4.3.1 */
+:--for-docs .form-inline {
+  /* The search bar expects these styles to be available */
+  /* SEE: CMS //maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap… */
+  /* SEE: Portal //stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap… */
+  /* SEE: Docs /src/5b223a5/docs/css/cms.bootstrap.4.3.1.css */
+  display: flex;
+  /* NOTE: These are perceptibly ineffectual but consistent with Portal & CMS */
+  flex-flow: row wrap;
+  align-items: center;
+}
+
+
+
+/* Overwrite ReadTheDocs (for Images in Header) */
+
+/* To overwrite `img { max-width: 100% }` */
+:--for-docs .s-header img,
+:--for-docs .c-branding img {
+  max-width: unset;
+}