GH-101/FP-1458: Header Redesign

conf/css/.postcssrc.yml

@@ -17,6 +17,11 @@ plugins:
     features:
       custom-media-queries: true
       media-query-ranges: true
+      not-pseudo-class: true
+      nesting-rules: 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'
@@ -27,3 +32,7 @@ plugins:
           exclude: true
         mergeRules:
           exclude: true
+        # This breaks values like `clamp(0px, 15%, 48px)` by stripping 0's unit
+        # SEE: https://github.com/cssnano/cssnano/issues/286
+        convertValues:
+          exclude: true

package.json

@@ -20,6 +20,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",

postcss.js

@@ -35,20 +35,12 @@ function parallelCallback(err, results) {
 // SEE: https://www.npmjs.com/package/postcss#js-api
 /**
  * Build styles for the Core CMS
- * @param {boolean} [shouldFreezeVariables=false] - Whether to freeze values of custom properties
  */
-function buildStylesCore({shouldFreezeVariables = false} = {}) {
+function buildStylesCore() {
   let command;
-  let sourceDir;
-  let configDir;
 
-  if (shouldFreezeVariables === true) {
-    sourceDir = 'freeze_variables/';
-    configDir = 'conf/css/freeze_variables/';
-  } else {
-    sourceDir = '';
-    configDir = standardConfigDir;
-  }
+  const sourceDir = '';
+  const configDir = standardConfigDir;
 
   // Quote globbed paths to prevent OS from parsing them
   // SEE: https://github.com/postcss/postcss-cli/issues/142#issuecomment-310681302
@@ -69,20 +61,12 @@ function buildStylesCustom() {
   exec(command, execCallback);
 }
 
-// The confusing is worth explaining (and fixing if we know how)
-console.warn('The commands are run in parallel so the output may be out of order.' + "\n");
+// To explain why output is not sequiential
+console.warn('The output may be out of order because the commands are run in parallel.' + "\n");
 
 // Build process for styles may be run in parallel because they are independent
 // SEE: https://stackoverflow.com/a/10776939/11817077
 parallel([
-  // Always build Core assets
   buildStylesCore,
-
-  // Build custom assets, except for Core
-  () => { if (env.CUSTOM_ASSET_DIR !== 'core-cms') buildStylesCustom() },
-
-  // Temporarily build "frozen variables" from Core
-  // FAQ: This is an advanced solution to a problem that should not exist
-  () => { buildStylesCore({shouldFreezeVariables: true}) },
-  // NOTE: Do NOT support freezing variables for custom projects
+  buildStylesCustom
 ], parallelCallback);

taccsite_cms/static/site_cms/css/src/_imports/_tests/postcss-extend.css

@@ -54,7 +54,7 @@ Styleguide _Test.Extend
 /*! Class & Placeholder Selector, Use Placeholder Selector */
 
 /*! Goal: */
-._test_4{color:blue}
+._test_4,._test_mixin_4{color:blue}
 
 /*! Test: */
 %_test_mixin_4,
@@ -78,3 +78,21 @@ Styleguide _Test.Extend
 ._test_5 {
   @extend _test_mixin_5;
 }
+
+
+/*! Nested Extends */
+
+/*! Goal: */
+._test_6{color:#000}._test_6{background-color:#fff}
+
+/*! Test: */
+%_test_mixin_6a {
+  color: black;
+}
+%_test_mixin_6b {
+  @extend %_test_mixin_6a;
+  background-color: white;
+}
+._test_6 {
+  @extend %_test_mixin_6b;
+}

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

@@ -73,3 +73,82 @@ Styleguide _Test.PresetEnv
 @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;
+}
+
+/*! Goal: */
+h4,h5,h6{color: lime;}h4,h5,h6{color: magenta;}
+
+/*! Test: */
+@custom-selector :--test h1, h2, h3;
+
+:--test {
+  color: lime;
+}
+
+@custom-selector :--test h4, h5, h6;
+
+:--test {
+  color: magenta;
+}
+
+/*! `:not` Pseudo Class */
+/* SEE: https://preset-env.cssdb.org/features#not-pseudo-class */
+
+/*! Goal: */
+._test>:not(._test--x):not(._test--y){align-items:center}
+
+/*! Test: */
+._test > *:not(._test--x, ._test--y) {
+  align-items: center;
+}
+
+/*! Nesting Rules */
+/* SEE: https://preset-env.cssdb.org/features#nesting-rules */
+
+/*! Goal: */
+.foo { display: grid; }
+
+@media (orientation: landscape) {
+  .foo {
+    grid-auto-flow: column;
+  }
+}
+
+/*! Test: */
+.foo {
+  display: grid;
+
+  @media (orientation: landscape) {
+    & {
+      grid-auto-flow: column;
+    }
+  }
+}

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

@@ -0,0 +1,88 @@
+/*
+Branding
+
+A list of linked images for funders and affiliates. Project customization should be minimal.
+
+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 */
+
+
+
+/* Base */
+
+.c-branding {
+  --column-gap--side: 25px;
+  --column-gap--center: 35px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+
+/* A responsive column gap */
+.c-branding__link:first-child .c-branding__image {
+  margin-right: var(--column-gap--side);
+}
+.c-branding__link:not(:first-child, :last-child) .c-branding__image {
+  margin-left: var(--column-gap--center);
+  margin-right: var(--column-gap--center);
+}
+.c-branding__link:last-child .c-branding__image {
+  margin-left: var(--column-gap--side);
+}
+@media (--nav-compressed) {
+  .c-branding {
+    --column-gap--side: 10px;
+    --column-gap--center: 10px;
+  }
+}
+
+
+
+/* Elements */
+
+.c-branding__link {
+  /* To center image (in case other styles shrink the image) */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* FAQ: Percentage-based math adapts to container height */
+  height: var(--height, 90%);
+}
+.c-branding__separator {
+  /* To add border */
+  /* FAQ: Percentage-based math adapts to container height */
+  height: calc(100% - 35%);
+  border-left: env(--border-width--normal) solid var(--global-color-primary--xx-light);
+
+  /* To hide text */
+  width: 0;
+  overflow: hidden;
+}
+
+/* Specific brands */
+/* FAQ: Percentage-based math adapts to container height */
+
+.c-branding__nsf-link
+.c-branding__tall-link,  { --height: 87.5%; }
+.c-branding__tacc-link   { --height: 75%; }
+.c-branding__utexas-link { --height: 65%; }
+
+
+
+/* Modifiers */
+
+/* Compact */
+.c-branding--compact {
+  --column-gap--side: 10px;
+  --column-gap--center: 10px;
+}