From 9765e5eddc025f6c3005f10a114a7b1e5c73ed4d Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 13 Aug 2021 00:10:17 -0500 Subject: [PATCH 1/8] GH-98: Standardize Color & Font Size --- .../src/_imports/elements/html-elements.css | 45 +++++++++++++- .../css/src/_imports/objects/o-section.css | 6 ++ .../css/src/_imports/settings/color.css | 59 +++++++------------ .../css/src/_imports/settings/font.css | 21 ++++--- taccsite_cms/static/site_cms/css/src/site.css | 2 +- 5 files changed, 81 insertions(+), 52 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css b/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css index 221f27618..9c0693502 100755 --- a/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css @@ -18,7 +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 */ - font-size: 100%; /* 16px */ + font-size: 62.5%; /* 16px */ } /* The webpage must be at least as tall as the viewport */ @@ -31,7 +31,11 @@ body { /* To avoid negative whitespace at right on horz scroll on tiny screen */ min-width: 290px; /* developer-decided value */ + color: var(--global-color-primary--dark); + font-family: var(--global-font-family); + font-size: var(--global-font-size--small); + font-weight: var(--global-font-weight--medium); line-height: 1.4; /* overwrite Bootstrap */ } @@ -60,6 +64,27 @@ main { padding-bottom: var(--global-space-beneath-main-content); } +h1, h2, h3, h4, h5, h6 { + font-weight: var(--bold); + color: var(--global-color-primary--xx-dark); +} +h1 { + font-size: var(--global-font-size--xxx-large); +} +h2 { + font-size: var(--global-font-size--xx-large); +} +h3 { + font-size: var(--global-font-size--x-large); + margin-bottom: 15px; /* overwrite Bootstrap */ +} +h4 { + margin-bottom: 7px; /* overwrite Bootstrap */ +} +h4, h5, h6 { + text-transform: uppercase; +} + @@ -89,7 +114,8 @@ ol ol, ol ul, ul ol, ul ul { } /* Add space between `dt` and `dd` */ dt { - margin-bottom: .5rem; /* Mirror's Bootstrap `margin-bottom` */ + margin-bottom: .5rem; /* overwrite Bootstrap */ + font-weight: initial; /* overwrite Bootstrap */ } @@ -112,6 +138,21 @@ Reference: Styleguide Elements.InlineTextSemantics */ +/* Links */ + +a, +a:hover { color: var(--global-color-link-on-light--normal); /* overwrite Bootstrap */ } +a:focus { text-decoration: underline dotted; } +a:active { position: relative; top: 0.1em; /* to simulate "depress" of link */ } + +/* FAQ: Bootstrap already provides basic text-decoration */ +/* +a { text-decoration: none; } +a:hover { text-decoration: underline; } +*/ + +/* Monospace */ + var, /* Overwrite Bootstrap (which does not use its `--font-family-monospace`) */ code, kbd, pre, samp { 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 f96cf61af..adc89fb17 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 @@ -97,6 +97,9 @@ Styleguide Objects.Section color: var(--global-color-primary--xx-light); background-color: var(--global-color-primary--xx-dark); } +.o-section--style-dark a { + color: var(--global-color-link-on-dark--normal); +} /* FAQ: Banners should not touch a border of the following section */ .o-section--style-dark:not(.o-section--banner) + .o-section--style-dark:not(.o-section--banner) { @@ -108,6 +111,9 @@ Styleguide Objects.Section color: var(--global-color-primary--dark); background-color: var(--global-color-primary--xx-light); } +.o-section--style-light a { + color: var(--global-color-link-on-light--normal); +} /* FAQ: Banners should not touch a border of the following section */ .o-section--style-light:not(.o-section--banner) + .o-section--style-light:not(.o-section--banner) { diff --git a/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css b/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css index 8c889ede7..dea77b0b6 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css @@ -17,42 +17,25 @@ */ :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--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--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; - --global-color-accent--weak: #9D85EF20; - --global-color-accent--light: #dfdaf5; - --global-color-accent--x-light: #D2CCE7; - --global-color-info--normal: var(--global-color-primary--x-dark); - --global-color-info--weak: var(--global-color-primary--x-light); - --global-color-warning--normal: #C7CE1D; - --global-color-warning--weak: #C7CE1D20; - --global-color-warning--alt: var(--global-color-accent--normal); - --global-color-warning--alt-weak: var(--global-color-accent--weak); - --global-color-danger--normal: #EB6E6E; - --global-color-danger--weak: #EB6E6E20; - --global-color-success--normal: #43D130; - --global-color-success--weak: #43D13020; - --global-color-success--alt: var(--global-color-warning--normal); - --global-color-success--alt-weak: var(--global-color-warning--weak); + /* 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-dark: #484848; + --global-color-primary--xx-dark: #222222; + + /* Distinct Hues */ + /* FAQ: When Design color is not accessible, it is commented and replaced */ + + /* FAQ: This placeholder accent color came from Portal */ + /* CAVEAT: A standard accent color definition is pending more designs */ + /* NOTE: The new Frontera and TACC designs both have brown and blue accents */ + --global-color-accent--normal: #877453; + + --global-color-link-on-light--normal: #003399; + --global-color-link-on-dark--normal: #0088FF; /* from Developer */ } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/settings/font.css b/taccsite_cms/static/site_cms/css/src/_imports/settings/font.css index 0a5c43ff5..bb7ac65de 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/settings/font.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/settings/font.css @@ -40,17 +40,16 @@ Styleguide Settings.CustomProperties.Font /* 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) *\/ - */ + /* SEE: https://confluence.tacc.utexas.edu/x/nh4FDg */ + /* CAVEAT: These font sizes assume root font is 10px or an equivalent value */ + + --global-font-size--x-small: 1.1rem; + --global-font-size--small: 1.4rem; + --global-font-size--medium: 1.6rem; + --global-font-size--large: 2.0rem; + --global-font-size--x-large: 2.4rem; + --global-font-size--xx-large: 3.2rem; + --global-font-size--xxx-large: 4.1rem; diff --git a/taccsite_cms/static/site_cms/css/src/site.css b/taccsite_cms/static/site_cms/css/src/site.css index 7e83b17c7..3a99ab18f 100644 --- a/taccsite_cms/static/site_cms/css/src/site.css +++ b/taccsite_cms/static/site_cms/css/src/site.css @@ -6,8 +6,8 @@ /* SETTINGS */ /* Shared with Portal */ @import url("_imports/settings/border.css"); -@import url("_imports/settings/color.css"); /* Unique to CMS */ +@import url("_imports/settings/color.css"); @import url("_imports/settings/props.max-width.css"); @import url("_imports/settings/props.space.css"); @import url("_imports/settings/font.css"); From 7867a1be61dc7322eb8da6fa13b3c8d19e36a7f0 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 13 Aug 2021 01:34:13 -0500 Subject: [PATCH 2/8] =?UTF-8?q?GH-98:=20Fix=20h4=E2=80=94h6=20Heading=20Si?= =?UTF-8?q?zes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../site_cms/css/src/_imports/elements/html-elements.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css b/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css index 9c0693502..e576389b6 100755 --- a/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css @@ -78,10 +78,10 @@ h3 { font-size: var(--global-font-size--x-large); margin-bottom: 15px; /* overwrite Bootstrap */ } -h4 { - margin-bottom: 7px; /* overwrite Bootstrap */ -} h4, h5, h6 { + font-size: var(--global-font-size--small); + margin-bottom: 7px; /* overwrite Bootstrap */ + text-transform: uppercase; } From 1ea4ea6699e0131f958abe085306c03a5cd90629 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 13 Aug 2021 01:34:33 -0500 Subject: [PATCH 3/8] GH-98: Add Typography Guide Snippet --- .../templates/snippets/typography-guide.html | 123 ++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 taccsite_cms/templates/snippets/typography-guide.html diff --git a/taccsite_cms/templates/snippets/typography-guide.html b/taccsite_cms/templates/snippets/typography-guide.html new file mode 100644 index 000000000..69ca05e2a --- /dev/null +++ b/taccsite_cms/templates/snippets/typography-guide.html @@ -0,0 +1,123 @@ +

Typography

+ +
+ +
+ +

Typefaces

+ + +
+

Sans

+

+ The quick brown fox jumps over the lazy dog.

+
+

ABCDEFGHIJKLMNOPQRSTUVWXYZ

+

abcdefghijklmnopqrstuvwxyz

+

0123456789

+
+
+
+

Mono

+

+ The quick brown fox jumps over the lazy dog.

+
+

ABCDEFGHIJKLMNOPQRSTUVWXYZ

+

abcdefghijklmnopqrstuvwxyz

+

0123456789

+
+
+ +
+
+ +

Font Sizes

+ +
+

All Sizes

+
+

+ XXX Large

+

+ XX Large

+

+ Extra Large

+

+ Large

+

+ Medium

+

+ Small

+

+ Extra Small

+
+
+
+

Headings

+
+

Heading One

+

Heading Two

+

Heading Three

+

Heading Four

+
Heading Five
+
Heading Six
+
+
+ +
+
+ +

Font Weights

+ + +
+

Sans

+
+

Aa

+
Sans Regular
+
+
+

Aa

+
Sans Medium
+
+
+

Aa

+
Sans Bold
+
+
+ +
+

Mono

+
+

Aa

+
Mono Regular
+
+
+

Aa

+
Mono Bold
+
+
+ +
From bedc1893d884a8f69e1ea5ecbcf3f31163982062 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 13 Aug 2021 05:00:26 -0500 Subject: [PATCH 4/8] GH-98: Fix font sizes - Do not set font-weight medium on body. - Do not set font-size small on body. - Set font-size medium for body. - Set font-size medium for site header CMS menu dropdown. --- .../site_cms/css/src/_imports/elements/html-elements.css | 8 +++----- .../static/site_cms/css/src/_imports/trumps/s-header.css | 8 ++++++++ .../site_cms/css/src/_imports/trumps/s-portal-nav.css | 3 --- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css b/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css index e576389b6..cf77ece25 100755 --- a/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css @@ -31,13 +31,11 @@ body { /* To avoid negative whitespace at right on horz scroll on tiny screen */ min-width: 290px; /* developer-decided value */ + /* To overwrite Bootstrap */ color: var(--global-color-primary--dark); - font-family: var(--global-font-family); - font-size: var(--global-font-size--small); - font-weight: var(--global-font-weight--medium); - - line-height: 1.4; /* overwrite Bootstrap */ + font-size: var(--global-font-size--medium); + line-height: 1.4; } 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 b7c9533fa..4f24a2198 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 @@ -160,3 +160,11 @@ Styleguide Trumps.Scopes.Header width: 27px; /* NO-R/EM: 1.25em (from Portal `.fa`—FP-228 will deprecate it) */ text-align: center; } + + + +/* Dropdown */ + +.dropdown-menu { + font-size: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.dropdown-menu`) */ +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-portal-nav.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-portal-nav.css index 41b7b3894..f4a9e182f 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-portal-nav.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-portal-nav.css @@ -19,6 +19,3 @@ Styleguide Trumps.Scopes.PortalNav /* Override `.navbar` */ text-transform: none; } -.s-portal-nav .dropdown-menu { - font-size: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.dropdown-menu`) */ -} From c4a5257f1467d2b3aff993484f5b9a6b97b4a2b4 Mon Sep 17 00:00:00 2001 From: "W. Bomar" <62723358+tacc-wbomar@users.noreply.github.com> Date: Mon, 16 Aug 2021 12:15:30 -0500 Subject: [PATCH 5/8] Remove outdated comment in settings/color.css --- taccsite_cms/static/site_cms/css/src/_imports/settings/color.css | 1 - 1 file changed, 1 deletion(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css b/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css index dea77b0b6..77469305a 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css @@ -18,7 +18,6 @@ :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; From e186a88c0cdbabad0f6eeeaed46204b1b0f4507d Mon Sep 17 00:00:00 2001 From: "W. Bomar" <62723358+tacc-wbomar@users.noreply.github.com> Date: Mon, 16 Aug 2021 12:15:43 -0500 Subject: [PATCH 6/8] Remove outdated comment in settings/color.css --- taccsite_cms/static/site_cms/css/src/_imports/settings/color.css | 1 - 1 file changed, 1 deletion(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css b/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css index 77469305a..57c9b7523 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css @@ -28,7 +28,6 @@ --global-color-primary--xx-dark: #222222; /* Distinct Hues */ - /* FAQ: When Design color is not accessible, it is commented and replaced */ /* FAQ: This placeholder accent color came from Portal */ /* CAVEAT: A standard accent color definition is pending more designs */ From 3b1158a257562bf9ed75e221b0d36ad7d98af67a Mon Sep 17 00:00:00 2001 From: "W. Bomar" <62723358+tacc-wbomar@users.noreply.github.com> Date: Mon, 16 Aug 2021 12:16:06 -0500 Subject: [PATCH 7/8] Improve comments for link colors in settings/color.css --- .../static/site_cms/css/src/_imports/settings/color.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css b/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css index 57c9b7523..44d4757a4 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css @@ -34,6 +34,8 @@ /* NOTE: The new Frontera and TACC designs both have brown and blue accents */ --global-color-accent--normal: #877453; + /* CAVEAT: Not accessible within paragraph text (edge case as of 2021-08) */ --global-color-link-on-light--normal: #003399; - --global-color-link-on-dark--normal: #0088FF; /* from Developer */ + /* WARNING: This color is from Dev not Design (not rendered as of 2021-08) */ + --global-color-link-on-dark--normal: #0088FF; } From 21147f1cf905357690d2e24756fd1e91ef14377b Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Mon, 16 Aug 2021 12:13:49 -0500 Subject: [PATCH 8/8] GH-98: Update the "NO-R/EM" comments Since GH-98 sets 10px root font, the em/rem might be outdated. Update the relevant comments to express such. --- .../static/site_cms/css/src/_imports/branding_logos.css | 5 ++--- .../static/site_cms/css/src/_imports/trumps/s-header.css | 5 ++--- .../static/site_cms/css/src/_imports/trumps/s-portal-nav.css | 5 ++--- 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css b/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css index f4e71880e..ad6a93931 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css @@ -2,9 +2,8 @@ /* TODO: Convert to a component */ /* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)… - No `em` nor `rem` allowed, because they aren't consitently reliable. - - On Frontera CMS, `1rem` = `10px` and `body { font-size: 15px }` - - On any other CMS, `1rem` = `16px` (browser default). */ + `em` nor `rem` was not allowed because results were not consistent. + UPDATE: As of PR #312, this has likely changed (untested). */ /* Shared by All Templates */ 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 4f24a2198..39cdc6efa 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 @@ -17,9 +17,8 @@ Styleguide Trumps.Scopes.Header */ /* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)… - No `em` nor `rem` allowed, because they aren't consitently reliable. - - On Frontera CMS, `1rem` = `10px` and `body { font-size: 15px }` - - On any other CMS, `1rem` = `16px` (browser default). */ + `em` nor `rem` was not allowed because results were not consistent. + UPDATE: As of PR #312, this has likely changed (untested). */ .s-header { --text-color: var(--global-color-primary--xx-light); diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-portal-nav.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-portal-nav.css index f4a9e182f..8bb6483de 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-portal-nav.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-portal-nav.css @@ -11,9 +11,8 @@ Styleguide Trumps.Scopes.PortalNav */ /* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)… - No `em` nor `rem` allowed, because they aren't consitently reliable. - - On Frontera CMS, `1rem` = `10px` and `body { font-size: 15px }` - - On any other CMS, `1rem` = `16px` (browser default). */ + `em` nor `rem` was not allowed because results were not consistent. + UPDATE: As of PR #312, this has likely changed (untested). */ .s-portal-nav { /* Override `.navbar` */