, */
--font-family-monospace: var(--global-font-family--mono);
-}
-/* Modifers
- --normal: standard value
- --(…)small: smaller value
- --(…)large: larger value
-*/
-:root {
- --global-font-size--xx-small: 0.625rem; /* 10px (if base is 16px) */
- --global-font-size--x-small: 0.8125rem; /* 13px (if base is 16px) */
- --global-font-size--small: 1.0rem; /* 16px (if base is 16px) */
- --global-font-size--normal: 1.25rem; /* 20px (if base is 16px) */
- --global-font-size--large: 1.5rem; /* 24px (if base is 16px) */
- --global-font-size--x-large: 2.0rem; /* 32px (if base is 16px) */
- --global-font-size--xx-large: 2.5rem; /* 40px (if base is 16px) */
- --global-font-size--xxx-large: 3.0rem; /* 48px (if base is 16px) */
+
+
+ /* Size */
+ /* NOTE: Defined with Design in 2020, but not yet used for 2021 UI work */
+ /*
+ --global-font-size--xx-small: 0.625rem; /* 10px (if base is 16px) *\/
+ --global-font-size--x-small: 0.8125rem; /* 13px (if base is 16px) *\/
+ --global-font-size--small: 1.0rem; /* 16px (if base is 16px) *\/
+ --global-font-size--normal: 1.25rem; /* 20px (if base is 16px) *\/
+ --global-font-size--large: 1.5rem; /* 24px (if base is 16px) *\/
+ --global-font-size--x-large: 2.0rem; /* 32px (if base is 16px) *\/
+ --global-font-size--xx-large: 2.5rem; /* 40px (if base is 16px) *\/
+ --global-font-size--xxx-large: 3.0rem; /* 48px (if base is 16px) *\/
+ */
+
+
+
+ /* 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) */
+ --regular: 400;
+ --medium: 500;
+ --bold: 700;
}
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/settings/props.max-width.css b/taccsite_cms/static/site_cms/css/src/_imports/settings/props.max-width.css
new file mode 100644
index 000000000..61251780e
--- /dev/null
+++ b/taccsite_cms/static/site_cms/css/src/_imports/settings/props.max-width.css
@@ -0,0 +1,31 @@
+/*
+Max. Widths (Bootstrap)
+
+Define maximum widths for Bootstrap 5.0 containers and wider.
+
+Usage:
+ ```
+ @media (--x-wide-and-above) {
+ .container { max-width: var(--global-max-width--x-wide); }
+ }
+ ```
+
+Reference:
+- https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
+- https://getbootstrap.com/docs/5.0/layout/grid/#grid-options
+
+Styleguide Settings.CustomProperties.MaxWidth
+*/
+
+/* Usage: `var(--global-breakpoint--x-narrow)` */
+/* SEE: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties */
+
+:root {
+ --global-max-width--x-narrow: 540px;
+ --global-max-width--narrow: 720px;
+ --global-max-width--medium: 960px;
+ --global-max-width--wide: 1140px;
+ --global-max-width--x-wide: 1320px;
+ --global-max-width--xx-wide: 1580px;
+ --global-max-width--xxx-wide: 1800px;
+}
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-article-link.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-article-link.css
new file mode 100644
index 000000000..a3a204e2d
--- /dev/null
+++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-article-link.css
@@ -0,0 +1,37 @@
+/*
+Article Link
+
+Styles that allow visible link hover for article lists.
+
+.x-article-link-stretch - Stretch link to cover container
+.x-article-link-stretch--gapless - Make link box fix gapless layout
+.x-article-link-hover - Give link a hover state
+.x-article-link-hover--gapless - Make link hover state fix gapless layout
+
+Styleguide Tools.ExtendsAndMixins.ArticleLink
+*/
+
+/* WARNING: A link ancestor must have its `position` set (not to static) */
+
+/* Expand link to cover container */
+.x-article-link-stretch {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ /* An explicit position (in case container has top padding) */
+ top: 0;
+}
+.x-article-link-stretch--gapless {
+ width: calc(100% + 30px); /* GH-99: Use standard spacing value */
+ left: -15px;
+}
+
+/* Give link state (pseudo-class) feedback */
+.x-article-link-hover {
+ outline: 1px solid var(--global-color-accent--normal);
+
+ outline-offset: 1em;
+}
+.x-article-link-hover--gapless {
+ outline-offset: 0;
+}
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-layout.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-layout.css
new file mode 100644
index 000000000..8144791c8
--- /dev/null
+++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-layout.css
@@ -0,0 +1,71 @@
+/*
+Layout
+
+Styles that allow re-usable layouts.
+
+.x-layout--a - Widest: two even columns
+.x-layout--b - Widest: one wide column & one narrow column
+.x-layout--c - Widest: one narrow column & one wide column
+.x-layout--d - Widest: three even columns
+.x-layout--d - Always: multiple even rows
+
+Styleguide Tools.ExtendsAndMixins.Layout
+*/
+
+
+
+/* Column-Based */
+
+.x-layout--a,
+.x-layout--b,
+.x-layout--c,
+.x-layout--d {
+ display: grid;
+}
+
+/* A (two even columns) */
+
+@media (--medium-and-below) {
+ .x-layout--a { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+}
+@media (--medium-and-above) {
+ .x-layout--a { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+/* B (one wide column & one narrow column) */
+
+@media (--medium-and-below) {
+ .x-layout--b { grid-template-columns: 1fr; }
+}
+@media (--medium-and-above) {
+ .x-layout--b { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
+}
+
+/* C (one narrow column & one wide column) */
+
+@media (--medium-and-below) {
+ .x-layout--c { grid-template-columns: 1fr; }
+}
+@media (--medium-and-above) {
+ .x-layout--c { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
+}
+
+/* D (three equal columns) */
+
+@media (--x-narrow-and-below) {
+ .x-layout--d { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+}
+@media (--narrow-to-medium), (--x-narrow-to-narrow) {
+ .x-layout--d { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (--medium-and-above) {
+ .x-layout--d { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+
+
+/* Row-Based */
+
+.x-layout--e {
+ display: flex;
+ flex-direction: column;
+}
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-truncate.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-truncate.css
new file mode 100644
index 000000000..dc00a80f9
--- /dev/null
+++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-truncate.css
@@ -0,0 +1,43 @@
+/*
+Truncate
+
+Styles that allow truncating text.
+
+.x-truncate--one-line - Truncated text may only be one line tall.
+.x-untruncate--one-line - Remove one-line truncation after it's added.
+.x-truncate--many-lines - Truncated text may be many lines tall.
+.x-untruncate--many-lines - Remove many-lines truncation after it's added.
+
+Styleguide Tools.ExtendsAndMixins.Truncate
+*/
+
+/* Many Lines */
+/* WARNING: Relies on proprietary and undocumented rules (that work well) */
+
+.x-truncate--many-lines {
+ --lines: 2;
+
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+
+ overflow: hidden;
+ -webkit-line-clamp: var(--lines);
+}
+.x-untruncate--many-lines {
+ overflow: visible;
+ -webkit-line-clamp: inherit;
+}
+
+/* One Line */
+
+.x-truncate--one-line {
+ text-overflow: ellipsis;
+
+ overflow: hidden;
+ white-space: nowrap;
+}
+.x-untruncate--one-line {
+ overflow: visible;
+ white-space: normal;
+}
+
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-article-list.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-article-list.css
new file mode 100644
index 000000000..5267986a3
--- /dev/null
+++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-article-list.css
@@ -0,0 +1,240 @@
+/*
+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("_imports/tools/x-layout.css");
+@import url("_imports/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/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-article-list.html b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-article-list.html
new file mode 100644
index 000000000..50608ad90
--- /dev/null
+++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-article-list.html
@@ -0,0 +1,20 @@
+
+
+ Article Placeholder
+
+
+
+
+
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-article-preview.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-article-preview.css
new file mode 100644
index 000000000..5c4262d4d
--- /dev/null
+++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-article-preview.css
@@ -0,0 +1,247 @@
+/*
+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("_imports/tools/x-truncate.css");
+@import url("_imports/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;
+
+ @extend .x-truncate--one-line;
+}
+/* (List) Allocations */
+.s-article-list--allocations .s-article-preview h3 {
+ font-size: 1.6rem;
+ font-weight: var(--bold);
+}
+/* (List) Events */
+.s-article-list--events .s-article-preview h3 {
+ font-size: 1.4rem;
+ color: var(--global-color-primary--xx-dark);
+}
+
+
+
+/* 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;
+
+ @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: ';
+}
+/* (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: ';
+}
+
+/* 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/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-article-preview.html b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-article-preview.html
new file mode 100644
index 000000000..dcea7f35f
--- /dev/null
+++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-article-preview.html
@@ -0,0 +1,30 @@
+
+ 
+
+ 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.
+
+
+ - July 7
+ - Science News
+ - Wesley Bomar
+
+
+
+
+
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css
index 590cd03c6..e470e7da4 100644
--- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css
+++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css
@@ -22,7 +22,7 @@ Styleguide Trumps.Scopes.Header
- On any other CMS, `1rem` = `16px` (browser default). */
.s-header {
- --text-color: rgb(255, 255, 255);
+ --text-color: var(--global-color-primary--xx-light);
font-size: 16px; /* NO-R/EM: Overwrite `bootstrap.3.3.7.css` */
@@ -78,7 +78,7 @@ Styleguide Trumps.Scopes.Header
--nav-padding-vert: 5px;
--nav-padding-horz: calc(16px + 20px);
- background-color: rgb(51, 51, 51);
+ background-color: var(--global-color-primary--xx-dark);
padding: var(--nav-padding-vert) var(--nav-padding-horz);
}
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/u-empty.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/u-empty.css
new file mode 100644
index 000000000..c2e3a0991
--- /dev/null
+++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/u-empty.css
@@ -0,0 +1,24 @@
+/*
+Empty
+
+Any element that must be treated as `:empty` (even if it is not).
+
+Examples:
+- `o-section.css`:
+ ```
+ .o-section--layout-halfway-split > :not(:empty),
+ .o-section--layout-halfway-split > :not(.u-empty) {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 50%;
+ }
+ .o-section--layout-halfway-split > :empty,
+ .o-section--layout-halfway-split > .u-empty { display: none; }
+ ```
+
+Styleguide Utilities.Empty
+*/
+
+.u-empty {
+ /* FAQ: This class should NOT have any styles on its own. It is a unique class that allows non-empty content to appear empty to TACC stylesheets that recognize it. Any TACC stylesheet selector that recognizes `:empty` elements should also recognize `u-empty` elements. */
+}
diff --git a/taccsite_cms/static/site_cms/css/src/site.css b/taccsite_cms/static/site_cms/css/src/site.css
index 6f9fbe80d..0e54cad30 100644
--- a/taccsite_cms/static/site_cms/css/src/site.css
+++ b/taccsite_cms/static/site_cms/css/src/site.css
@@ -4,10 +4,13 @@
/* SEE: https://confluence.tacc.utexas.edu/x/IAA9Cw */
/* SETTINGS */
+/* Shared with Portal */
@import url("../../../site_shared/css/src/_imports/settings/border.css");
@import url("../../../site_shared/css/src/_imports/settings/color.css");
-@import url("../../../site_shared/css/src/_imports/settings/font.css");
+/* Unique to CMS */
+@import url("_imports/settings/props.max-width.css");
@import url("_imports/settings/props.space.css");
+@import url("_imports/settings/font.css");
/* GENERICS */
/* Bootstrap performs much of this */
@@ -19,12 +22,15 @@
/* OBJECTS */
@import url("_imports/objects/o-site.css");
+@import url("_imports/objects/o-section.css");
/* COMPONENTS */
@import url("_imports/components/c-footer.css");
@import url("_imports/components/django.cms.css");
@import url("_imports/components/django.cms.blog.css");
@import url("_imports/components/django.cms.post.css");
+@import url("_imports/components/bootstrap.container.css");
/* TRUMPS */
@import url("_imports/trumps/s-footer.css");
+@import url("_imports/trumps/u-empty.css");
diff --git a/taccsite_cms/static/site_cms/css/src/site.fonts.css b/taccsite_cms/static/site_cms/css/src/site.fonts.css
new file mode 100644
index 000000000..a36b917c3
--- /dev/null
+++ b/taccsite_cms/static/site_cms/css/src/site.fonts.css
@@ -0,0 +1,7 @@
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+/* Organize via ITCSS */
+/* SEE: https://confluence.tacc.utexas.edu/x/IAA9Cw */
+
+/* GENERICS */
+@import url("_imports/generics/fonts.css");
diff --git a/taccsite_cms/static/site_cms/css/src/site.header.css b/taccsite_cms/static/site_cms/css/src/site.header.css
index 58ddfb636..2c6c5c8d9 100644
--- a/taccsite_cms/static/site_cms/css/src/site.header.css
+++ b/taccsite_cms/static/site_cms/css/src/site.header.css
@@ -9,7 +9,7 @@
/* NOTE: This is already imported in `site.css` */
/* TODO: Find a way to be modular, but not redundant */
-@import url("../../../site_shared/css/src/_imports/settings/font.css");
+@import url("_imports/settings/font.css");
/* TRUMPS */
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 ea98b62b4..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,17 +13,30 @@
--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; "round up" to nearest color, instead */
--global-color-primary--xx-light: #FFFFFF;
--global-color-primary--x-light: #F4F4F4;
- --global-color-primary--light: #C6C6C6;
- --global-color-primary--normal: #AFAFAF;
- --global-color-primary--dark: #707070;
+ --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; */
+ --global-color-primary--normal: #AFAFAF;/*
+ --global-color-primary--normal-alt-2: #B7B7B7;
+ --global-color-primary--normal-alt-1: #9B9B9B; */
+ --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--xx-dark: #222222; /* Unused. For header background, which is styled by CMS styles */
+ --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;
+ --global-color-primary--xx-dark-alt-2: #1C1B1B; */
/* Distinct Hues */
--global-color-accent--normal: #9D85EF;
diff --git a/taccsite_cms/static/site_shared/css/src/_imports/tools/media-queries.css b/taccsite_cms/static/site_shared/css/src/_imports/tools/media-queries.css
new file mode 100644
index 000000000..2b2e4df19
--- /dev/null
+++ b/taccsite_cms/static/site_shared/css/src/_imports/tools/media-queries.css
@@ -0,0 +1,43 @@
+/* DO NOT ADD STYLES HERE; ADD CUSTOM MEDIA QUERIES TO USE IN OTHER STYLESHEETS */
+
+/*
+Breakpoints
+
+These are global breakpoints values for a website.
+
+Usage: `@media (--narrow-and above) { … }`
+
+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/mediaqueries-5/#at-ruledef-custom-media
+
+Styleguide Tools.CustomMediaQueries.Breakpoints
+*/
+@custom-media --x-narrow-and-below (width < 576px);
+@custom-media --x-narrow-and-above (width >= 576px);
+@custom-media --x-narrow-to-narrow (576px <= width < 768px);
+
+@custom-media --narrow-and-below (width < 768px);
+@custom-media --narrow-and-above (width >= 768px);
+@custom-media --narrow-to-medium (768px <= width < 992px);
+
+@custom-media --medium-and-below (width < 992px);
+@custom-media --medium-and-above (width >= 992px);
+@custom-media --medium-to-wide (992px <= width < 1200px);
+
+@custom-media --wide-and-below (width < 1200px);
+@custom-media --wide-and-above (width >= 1200px);
+@custom-media --wide-to-x-wide (1200px <= width < 1400px);
+
+@custom-media --x-wide-and-below (width < 1400px);
+@custom-media --x-wide-and-above (width >= 1400px);
+@custom-media --x-wide-to-xx-wide (1400px <= width < 1680px);
+
+@custom-media --xx-wide-and-below (width < 1680px);
+@custom-media --xx-wide-and-above (width >= 1680px);
+@custom-media --xx-wide-to-xxx-wide (1680px <= width < 1920px);
+
+@custom-media --xxx-wide-and-below (width < 1920px);
+@custom-media --xxx-wide-and-above (width >= 1920px);
+/* @custom-media --xxx-wide-to-omg-wide (... <= width < ...); */
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_cms/templates/assets_font.html b/taccsite_cms/templates/assets_font.html
index 638d35fc8..21bdfd7dd 100644
--- a/taccsite_cms/templates/assets_font.html
+++ b/taccsite_cms/templates/assets_font.html
@@ -1,9 +1,11 @@
{# Load web fonts early #}
{# SEE: https://confluence.tacc.utexas.edu/x/B4COCw #}
+{% load staticfiles %}
-
+
+
diff --git a/taccsite_custom b/taccsite_custom
index ce1061848..8abeb618c 160000
--- a/taccsite_custom
+++ b/taccsite_custom
@@ -1 +1 @@
-Subproject commit ce1061848ad6dbe8c18fa65412e04b446e530c75
+Subproject commit 8abeb618c67af165a9030932068d8bfdb2b9c8da