From 73a10565ee33c24dc30aa9f961d33a7bb0fa4dc7 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 29 Jul 2022 15:49:37 -0500 Subject: [PATCH 1/2] feat: delete CSS used only by Frontera CMS Core-CMS 'task/TUP-250--frontera-cms-test': - moved to Core-CMS - loaded from there by Frontera --- src/lib/_imports/trumps/s-article-list.css | 240 ----------------- src/lib/_imports/trumps/s-article-list.html | 16 -- src/lib/_imports/trumps/s-article-preview.css | 253 ------------------ .../_imports/trumps/s-article-preview.html | 29 -- 4 files changed, 538 deletions(-) delete mode 100644 src/lib/_imports/trumps/s-article-list.css delete mode 100644 src/lib/_imports/trumps/s-article-list.html delete mode 100644 src/lib/_imports/trumps/s-article-preview.css delete mode 100644 src/lib/_imports/trumps/s-article-preview.html diff --git a/src/lib/_imports/trumps/s-article-list.css b/src/lib/_imports/trumps/s-article-list.css deleted file mode 100644 index b7140c3eb..000000000 --- a/src/lib/_imports/trumps/s-article-list.css +++ /dev/null @@ -1,240 +0,0 @@ -/* -Article List - -A list of article previews. Content __must__ use the tags defined by the example markup. - -Markup: s-article-list.html - -Styleguide Trumps.Scopes.ArticleList -*/ -@import url("../tools/x-truncate.css"); -@import url("../tools/x-layout.css"); -@import url("../tools/x-article-link.css"); - - - - - -/* Block */ - -[class*="s-article-list--"] { - /* … */ -} - - - - - -/* Children */ - - - -/* Children: All */ - -/* Not "Title" & Not "See More" */ -.s-article-list--layout-e > :not(h2):not(p:last-child) { - /* To shrink heading */ - flex-grow: 1; -} - - - -/* Children: Title */ - -.s-article-list--layout-a > h2, -.s-article-list--layout-b > h2, -.s-article-list--layout-c > h2, -.s-article-list--layout-d > h2 { - /* To span all columns */ - grid-column-start: 1; - grid-column-end: -1; -} - -[class*="s-article-list--"] > h2 { - margin-top: 0; /* overwrite Bootstrap */ - margin-bottom: 3.0rem; /* overwrite Bootstrap */ - - color: var(--global-color-accent--normal); - - font-size: 1.6rem; - font-weight: var(--bold); - text-transform: uppercase; - - @extend .x-truncate--one-line; -} -/* Add a fake short border above title */ -[class*="s-article-list--"] > h2 { - position: relative; - padding-top: 1em; -} -[class*="s-article-list--"] > h2::before { - content: ''; - display: block; - - position: absolute; - top: 0; - height: 0.5em; - width: 2.5em; - - background-color: var(--global-color-accent--normal); -} - - - -/* Children: "See More" */ - -/* Anchor */ - -.s-article-list--layout-a > p:last-child, -.s-article-list--layout-b > p:last-child, -.s-article-list--layout-c > p:last-child, -.s-article-list--layout-d > p:last-child { - /* To span all columns */ - grid-column-start: 1; - grid-column-end: -1; -} - -[class*="s-article-list--"] > p:last-child { - border-top-width: var(--global-border-width--thick); - border-top-style: solid; - - margin-top: 3.0rem; /* GH-99: Use standard spacing value */ - margin-bottom: -1.0rem; /* to "undo" space added from `padding-bottom` */ - - font-size: 1.2rem; - font-weight: var(--bold); -} -[class*="s-article-list--"] > p:last-child a { - display: inline-block; - - padding-top: 1.0rem; - padding-bottom: 1.0rem; - padding-right: 1.0rem; - - @extend .x-truncate--one-line; - max-width: 100%; /* SEE: https://stackoverflow.com/a/44521595 */ -} -/* Dark section */ -.o-section--style-dark[class*="s-article-list--"] > p:last-child, -.o-section--style-dark [class*="s-article-list--"] > p:last-child { - border-color: var(--global-color-primary--xx-light); -} -.o-section--style-dark[class*="s-article-list--"] > p:last-child a, -.o-section--style-dark [class*="s-article-list--"] > p:last-child a { - color: var(--global-color-primary--xx-light); -} -/* Light section */ -.o-section--style-light[class*="s-article-list--"] > p:last-child, -.o-section--style-light [class*="s-article-list--"] > p:last-child { - border-color: var(--global-color-primary--xx-dark); -} -.o-section--style-light[class*="s-article-list--"] > p:last-child a, -.o-section--style-light [class*="s-article-list--"] > p:last-child a { - color: var(--global-color-primary--xx-dark); -} - -/* Icon */ - -[class*="s-article-list--"] > p:last-child a::before { - font-family: "Font Awesome 5 Free"; - content: "\f35a"; - margin-right: 10px; - - font-size: 1.4rem; - vertical-align: middle; - - /* To hide the `text-decoration: underline` of the anchor */ - /* SEE: https://stackoverflow.com/a/15688237/11817077 */ - display: inline-block; -} - - - - - -/* Modifiers */ - - - -/* Modifiers: Links */ - -.s-article-list--links { - font-size: 1.4rem; - color: var(--global-color-primary--xx-dark); -} -.s-article-list--links p:not(:last-child) { - margin: 0; /* Overwrite Bootstrap and browser */ -} -.s-article-list--links p:not(:last-child) a { - font-weight: var(--bold); - color: var(--global-color-primary--xx-dark); -} - -/* Expand link to cover its container */ -.s-article-list--links p:not(:last-child) { position: relative; } -.s-article-list--links p:not(:last-child) a::before { - content: ''; - - @extend .x-article-link-stretch; -} -.s-article-list--layout-gapless.s-article-list--links p:not(:last-child) a::before { - @extend .x-article-link-stretch--gapless; -} -/* Give link state (pseudo-class) feedback */ -.s-article-list--links p:not(:last-child) a:hover::before { - @extend .x-article-link-hover; -} -.s-article-list--layout-gapless.s-article-list--links p:not(:last-child) a:hover::before { - @extend .x-article-link-hover--gapless; -} - - -/* Modifiers: Layout */ - -.s-article-list--layout-a { @extend .x-layout--a; } -.s-article-list--layout-b { @extend .x-layout--b; } -.s-article-list--layout-c { @extend .x-layout--c; } -.s-article-list--layout-d { @extend .x-layout--d; } -.s-article-list--layout-e { @extend .x-layout--e; } - -/* Modifiers: Layout: Column-Based */ - -.s-article-list--layout-a, -.s-article-list--layout-b, -.s-article-list--layout-c, -.s-article-list--layout-d { - column-gap: 3.0rem; /* GH-99: Use standard spacing value */ -} - -/* Modifiers: Layout: Row-Based */ - -.s-article-list--layout-e { - /* … */ -} - -/* Modifiers: Layout: Options */ - -.s-article-list--layout-gapless { - gap: 0; -} - -.s-article-list--layout-compact > p:last-child { - margin-top: 0; -} - -.s-article-list--layout-divided > :not(h2):not(p:last-child) { - padding-top: 0.8rem; - - border-width: var(--global-border-width--normal) 0 0; - border-style: solid; -} -/* Dark section */ -.o-section--style-dark.s-article-list--layout-divided > :not(h2):not(p:last-child), -.o-section--style-dark .s-article-list--layout-divided > :not(h2):not(p:last-child) { - border-color: var(--global-color-primary--light); -} -/* Light section */ -.o-section--style-light.s-article-list--layout-divided > :not(h2):not(p:last-child), -.o-section--style-light .s-article-list--layout-divided > :not(h2):not(p:last-child) { - border-color: var(--global-color-primary--dark); -} diff --git a/src/lib/_imports/trumps/s-article-list.html b/src/lib/_imports/trumps/s-article-list.html deleted file mode 100644 index 94c68a869..000000000 --- a/src/lib/_imports/trumps/s-article-list.html +++ /dev/null @@ -1,16 +0,0 @@ -
-

News & Stuff

-
Article Placeholder
-
- - - diff --git a/src/lib/_imports/trumps/s-article-preview.css b/src/lib/_imports/trumps/s-article-preview.css deleted file mode 100644 index 544fe436c..000000000 --- a/src/lib/_imports/trumps/s-article-preview.css +++ /dev/null @@ -1,253 +0,0 @@ -/* -Article Preview - -A preview of an article (to be used in a `s-article-list`). Content __must__ come in the order and use the tags defined by the example markup. - -Markup: s-article-preview.html - -Styleguide Trumps.Scopes.ArticlePreview -*/ -@import url("../tools/x-truncate.css"); -@import url("../tools/x-article-link.css"); - - - - - -/* Block */ - -.s-article-preview { - position: relative; /* for absolutely positioned "Children: Link" */ - - display: flex; - flex-direction: column; -} - - - - - -/* Children */ - - - -/* Children: Media */ - -.s-article-preview p:first-child { - order: 1; - - overflow: hidden; - - margin-bottom: 0.8rem; /* overwrite Bootstrap */ -} -.s-article-preview p:first-child > img { - /* To center image within container */ - position: relative; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} -.s-article-preview p:first-child > img.img-fluid { - /* To ensure super wide or tall image do not have negative space / gaps */ - width: 100%; - object-fit: cover; - height: 100%; /* overwrite `.img-fluid` *//* NOTE: Sould this be standard? */ -} -/* (List) News */ -.s-article-list--news .s-article-preview p:first-child { - height: 180px; -} -/* (List) Allocations */ -.s-article-list--allocations .s-article-preview p:first-child { - height: 10.0rem; -} -/* (List) Events */ -.s-article-list--events .s-article-preview p:first-child { - display: none; -} - - -/* Children: Title */ - -.s-article-preview h3 { - order: 3; - - margin-top: 0; /* overwrite Bootstrap and browser */ - margin-bottom: 0.8rem; /* overwrite Bootstrap and browser */ - - font-size: 1.8rem; - font-weight: var(--bold); - line-height: 2.4rem; -} -/* (List) */ -[class*="s-article-list--"] .s-article-preview h3 { - @extend %x-truncate--one-line; -} -/* (List) Allocations */ -.s-article-list--allocations .s-article-preview h3 { - font-size: 1.6rem; - font-weight: var(--bold); - color: inherit; -} -/* (List) Events */ -.s-article-list--events .s-article-preview h3 { - font-size: 1.4rem; -} - - - -/* Children: Abstract */ - -.s-article-preview p:not(:first-child):not(:last-child) { - order: 4; - - margin-bottom: 0; /* overwrite Bootstrap and browser */ - - font-size: 1.6rem; - line-height: 2.4rem; -} -/* (List) */ -[class*="s-article-list--"] .s-article-preview p:not(:first-child):not(:last-child) { - @extend %x-truncate--many-lines; - --lines: 3; -} -/* (List) Allocations */ -.s-article-list--allocations .s-article-preview p:not(:first-child):not(:last-child) { - display: none; -} -/* (List) Events */ -.s-article-list--events .s-article-preview p:not(:first-child):not(:last-child) { - font-size: 1.4rem; - color: var(--global-color-primary--xx-dark); -} - - - -/* Children: Metadata */ - -.s-article-preview ul { - order: 2; - - display: flex; - flex-direction: column; - - list-style: none; - padding-left: 0; /* overwrite `site.css` and browser */ - - margin-bottom: 0.8rem; /* overwrite Bootstrap */ -} -/* (List) Allocations */ -.s-article-list--allocations .s-article-preview ul { - order: 5; -} - -/* Children: Metadata: Date */ - -.s-article-preview ul > li:nth-child(1) { - order: 2; - - font-weight: var(--medium); - - display: flex; - flex-direction: row; - flex-wrap: wrap; -} -/* (List) News */ -.s-article-list--news .s-article-preview ul > li:nth-child(1) { - margin-bottom: 0.8rem; /* overwrite Bootstrap */ - font-size: 1.0rem; -} -.s-article-list--news .s-article-preview ul > li:nth-child(1)::before { - content: 'Published: '; - white-space: pre; -} -/* (List) Events */ -.s-article-list--events .s-article-preview ul > li:nth-child(1) { - font-size: 1.4rem; - color: var(--global-color-accent--normal); -} -/* (List) Allocations */ -.s-article-list--allocations .s-article-preview ul > li:nth-child(1) { - font-size: 1.6rem; -} -.s-article-list--allocations .s-article-preview ul > li:nth-child(1)::before { - content: 'Submission Deadlines: '; - white-space: pre; -} - -/* Children: Metadata: Type */ - -.s-article-preview ul > li:nth-child(2) { - order: 1; - - font-size: 1.2rem; - font-weight: var(--bold); - text-transform: uppercase; -} -/* (List) Events */ -.s-article-list--events .s-article-preview ul > li:nth-child(2), -/* (List) Allocations */ -.s-article-list--allocations .s-article-preview ul > li:nth-child(2) { - display: none; -} - -/* Children: Metadata: Author */ - -.s-article-preview ul > li:nth-child(3) { - order: 3; -} -/* (List) News */ -.s-article-list--news .s-article-preview ul > li:nth-child(3), -/* (List) Events */ -.s-article-list--events .s-article-preview ul > li:nth-child(3), -/* (List) Allocations */ -.s-article-list--allocations .s-article-preview ul > li:nth-child(3) { - display: none; -} - - - -/* Children: Link */ - -.s-article-preview p:last-child { - margin-bottom: 0; /* overwite Bootstrap and browser */ -} - -/* Expand link to cover its container */ -.s-article-preview p:last-child { - z-index: 1; /* ensure Link appears over Media */ -} -.s-article-preview p:last-child > a { - color: transparent; /* ensure Link _text_ is invisible (allow decoration) */ - - @extend .x-article-link-stretch; -} -.s-article-list--layout-gapless .s-article-preview p:last-child > a { - @extend .x-article-link-stretch--gapless; -} -/* Give link state (pseudo-class) feedback */ -.s-article-preview p:last-child > a:hover { - @extend .x-article-link-hover; -} -.s-article-list--layout-gapless .s-article-preview p:last-child > a:hover { - @extend .x-article-link-hover--gapless; -} - - - - - -/* Modifiers */ - - - -/* Modifiers: (List) News, Allocations, Evetns, etc. */ -/* SEE: All "Children" styles */ - - - -/* Modifiers: (List) Layout: Options */ - -.s-article-list--layout-compact .s-article-preview > * { - margin-bottom: 0; /* overwrite `.s-article-preview > …` */ -} diff --git a/src/lib/_imports/trumps/s-article-preview.html b/src/lib/_imports/trumps/s-article-preview.html deleted file mode 100644 index 382890a38..000000000 --- a/src/lib/_imports/trumps/s-article-preview.html +++ /dev/null @@ -1,29 +0,0 @@ -
-

…

-

A Long or Short Title of Article

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. -

- -
- - - From 731edfa343d4f73ead50c2fec3ccc904d8f7d015 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 29 Jul 2022 15:49:48 -0500 Subject: [PATCH 2/2] feat: deprecate x-overlay, add c-overlay Optional solution for loading overlay styles without CSS build chain. Looked good enough that it is worth adding. All Frontera and UTRC servers had the class added to their markup. If not used, no foul. If used, home pages are ready. --- src/lib/_imports/components/c-overlay.css | 40 +++++++++++++++++++++++ src/lib/_imports/tools/x-overlay.css | 8 ++--- 2 files changed, 44 insertions(+), 4 deletions(-) create mode 100644 src/lib/_imports/components/c-overlay.css diff --git a/src/lib/_imports/components/c-overlay.css b/src/lib/_imports/components/c-overlay.css new file mode 100644 index 000000000..48df65581 --- /dev/null +++ b/src/lib/_imports/components/c-overlay.css @@ -0,0 +1,40 @@ +/* +Overlay + +Colored boxes that appear atop a large image (like a banner). + +.c-overlay--blurry - A blurry and transluscent background +.c-overlay--semi-opaque - A clear and almost opaque background + +Styleguide Components.Overlay +*/ + +.c-overlay--blurry /* f.k.a. %x-overlay--curtain */ { + --color-text: inherit; + --color-bkgd-rgb: var(--global-color-primary--normal); + + color: var(--color-text); + background-color: rgba(var(--color-bkgd-rgb), 0.65); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); +} +.o-section--style-dark .c-overlay--curtain { + --color-bkgd-rgb: var(--global-color-primary--x-dark-rgb); +} +.o-section--style-light .c-overlay--curtain { + --color-bkgd-rgb: var(--global-color-primary--x-light-rgb); +} + +.c-overlay--semi-opaque /* f.k.a. %x-overlay--callout */ { + --color-text: inherit; + --color-bkgd-rgb: var(--global-color-primary--normal); + + color: var(--color-text); + background-color: rgba(var(--color-bkgd-rgb), 0.90); +} +.o-section--style-dark .c-overlay--callout { + --color-bkgd-rgb: var(--global-color-primary--xx-dark-rgb); +} +.o-section--style-light .c-overlay--callout { + --color-bkgd-rgb: var(--global-color-primary--xx-light-rgb); +} diff --git a/src/lib/_imports/tools/x-overlay.css b/src/lib/_imports/tools/x-overlay.css index 57209b900..c0ecd559a 100644 --- a/src/lib/_imports/tools/x-overlay.css +++ b/src/lib/_imports/tools/x-overlay.css @@ -1,15 +1,15 @@ /* -Overlay +(Deprecated) Overlay Colored boxes that appear atop a large image (like a banner). %x-overlay--curtain - A full size transluscent curtain over the background %x-overlay--callout - A transluscent box surrounding the content -Styleguide Tools.ExtendsAndMixins.Overlay +Styleguide Tools.Deprecated.ExtendsAndMixins.Overlay */ -%x-overlay--curtain { +%x-overlay--curtain /* DEPRECATED */ { --color-text: inherit; --color-bkgd-rgb: var(--global-color-primary--normal); @@ -19,7 +19,7 @@ Styleguide Tools.ExtendsAndMixins.Overlay -webkit-backdrop-filter: blur(6px); } -%x-overlay--callout { +%x-overlay--callout /* DEPRECATED */ { --color-text: inherit; --color-bkgd-rgb: var(--global-color-primary--normal);