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/elements/html-elements.css b/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css index 221f27618..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 @@ -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,9 +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); - - line-height: 1.4; /* overwrite Bootstrap */ + font-size: var(--global-font-size--medium); + line-height: 1.4; } @@ -60,6 +62,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, h5, h6 { + font-size: var(--global-font-size--small); + margin-bottom: 7px; /* overwrite Bootstrap */ + + text-transform: uppercase; +} + @@ -89,7 +112,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 +136,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..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 @@ -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) */ + + --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: 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; + + /* CAVEAT: Not accessible within paragraph text (edge case as of 2021-08) */ + --global-color-link-on-light--normal: #003399; + /* WARNING: This color is from Dev not Design (not rendered as of 2021-08) */ + --global-color-link-on-dark--normal: #0088FF; } 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/_imports/trumps/s-header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css index b7c9533fa..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); @@ -160,3 +159,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..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,14 +11,10 @@ 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` */ text-transform: none; } -.s-portal-nav .dropdown-menu { - font-size: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.dropdown-menu`) */ -} 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"); 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
+
+
+ +