Skip to content

Commit e0e420d

Browse files
wesleyboarwesleyboar
authored
Merge pull request #312 from TACC/task/GH-98-typography
2 parents ec58480 + d11e577 commit e0e420d

9 files changed

Lines changed: 218 additions & 66 deletions

File tree

‎taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
/* TODO: Convert to a component */
33

44
/* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)…
5-
No `em` nor `rem` allowed, because they aren't consitently reliable.
6-
- On Frontera CMS, `1rem` = `10px` and `body { font-size: 15px }`
7-
- On any other CMS, `1rem` = `16px` (browser default). */
5+
`em` nor `rem` was not allowed because results were not consistent.
6+
UPDATE: As of PR #312, this has likely changed (untested). */
87

98
/* Shared by All Templates */
109

‎taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css‎

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Styleguide Elements.MainSectioningRoots
1818
html {
1919
/* Set base font but support user-defined browser font size */
2020
/* SEE: https://snook.ca/archives/html_and_css/font-size-with-rem */
21-
font-size: 100%; /* 16px */
21+
font-size: 62.5%; /* 16px */
2222
}
2323

2424
/* The webpage must be at least as tall as the viewport */
@@ -31,9 +31,11 @@ body {
3131
/* To avoid negative whitespace at right on horz scroll on tiny screen */
3232
min-width: 290px; /* developer-decided value */
3333

34+
/* To overwrite Bootstrap */
35+
color: var(--global-color-primary--dark);
3436
font-family: var(--global-font-family);
35-
36-
line-height: 1.4; /* overwrite Bootstrap */
37+
font-size: var(--global-font-size--medium);
38+
line-height: 1.4;
3739
}
3840

3941

@@ -60,6 +62,27 @@ main {
6062
padding-bottom: var(--global-space-beneath-main-content);
6163
}
6264

65+
h1, h2, h3, h4, h5, h6 {
66+
font-weight: var(--bold);
67+
color: var(--global-color-primary--xx-dark);
68+
}
69+
h1 {
70+
font-size: var(--global-font-size--xxx-large);
71+
}
72+
h2 {
73+
font-size: var(--global-font-size--xx-large);
74+
}
75+
h3 {
76+
font-size: var(--global-font-size--x-large);
77+
margin-bottom: 15px; /* overwrite Bootstrap */
78+
}
79+
h4, h5, h6 {
80+
font-size: var(--global-font-size--small);
81+
margin-bottom: 7px; /* overwrite Bootstrap */
82+
83+
text-transform: uppercase;
84+
}
85+
6386

6487

6588

@@ -89,7 +112,8 @@ ol ol, ol ul, ul ol, ul ul {
89112
}
90113
/* Add space between `dt` and `dd` */
91114
dt {
92-
margin-bottom: .5rem; /* Mirror's Bootstrap `margin-bottom` */
115+
margin-bottom: .5rem; /* overwrite Bootstrap */
116+
font-weight: initial; /* overwrite Bootstrap */
93117
}
94118

95119

@@ -112,6 +136,21 @@ Reference:
112136
Styleguide Elements.InlineTextSemantics
113137
*/
114138

139+
/* Links */
140+
141+
a,
142+
a:hover { color: var(--global-color-link-on-light--normal); /* overwrite Bootstrap */ }
143+
a:focus { text-decoration: underline dotted; }
144+
a:active { position: relative; top: 0.1em; /* to simulate "depress" of link */ }
145+
146+
/* FAQ: Bootstrap already provides basic text-decoration */
147+
/*
148+
a { text-decoration: none; }
149+
a:hover { text-decoration: underline; }
150+
*/
151+
152+
/* Monospace */
153+
115154
var,
116155
/* Overwrite Bootstrap (which does not use its `--font-family-monospace`) */
117156
code, kbd, pre, samp {

‎taccsite_cms/static/site_cms/css/src/_imports/objects/o-section.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,9 @@ Styleguide Objects.Section
9797
color: var(--global-color-primary--xx-light);
9898
background-color: var(--global-color-primary--xx-dark);
9999
}
100+
.o-section--style-dark a {
101+
color: var(--global-color-link-on-dark--normal);
102+
}
100103
/* FAQ: Banners should not touch a border of the following section */
101104
.o-section--style-dark:not(.o-section--banner)
102105
+ .o-section--style-dark:not(.o-section--banner) {
@@ -108,6 +111,9 @@ Styleguide Objects.Section
108111
color: var(--global-color-primary--dark);
109112
background-color: var(--global-color-primary--xx-light);
110113
}
114+
.o-section--style-light a {
115+
color: var(--global-color-link-on-light--normal);
116+
}
111117
/* FAQ: Banners should not touch a border of the following section */
112118
.o-section--style-light:not(.o-section--banner)
113119
+ .o-section--style-light:not(.o-section--banner) {

‎taccsite_cms/static/site_cms/css/src/_imports/settings/color.css‎

Lines changed: 21 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -17,42 +17,25 @@
1717
*/
1818

1919
:root {
20-
/* Primary (Text, Layout) */
21-
/* WARNING: Do not use `-alt-` hues; "round up" to nearest color, instead */
22-
--global-color-primary--xx-light: #FFFFFF;
23-
--global-color-primary--x-light: #F4F4F4;
24-
--global-color-primary--x-light-rgb: 244, 244, 244;
25-
--global-color-primary--light: #C6C6C6;/*
26-
--global-color-primary--light-alt-2: #DBDBDB;
27-
--global-color-primary--light-alt-2: #D8D8D8; */
28-
--global-color-primary--normal: #AFAFAF;/*
29-
--global-color-primary--normal-alt-2: #B7B7B7;
30-
--global-color-primary--normal-alt-1: #9B9B9B; */
31-
--global-color-primary--dark: #707070;/*
32-
--global-color-primary--dark-alt-1: #696666;
33-
--global-color-primary--dark-alt-2: #5F5C5C; */
34-
--global-color-primary--x-dark: #484848;
35-
--global-color-primary--x-dark-rgb: 72, 72, 72;/*
36-
--global-color-primary--x-dark-alt-1: #464646; */
37-
--global-color-primary--xx-dark: #222222; /*
38-
--global-color-primary--xx-dark-alt-1: #2C2C2B;
39-
--global-color-primary--xx-dark-alt-2: #1C1B1B; */
40-
41-
/* Distinct Hues */
42-
--global-color-accent--normal: #9D85EF;
43-
--global-color-accent--weak: #9D85EF20;
44-
--global-color-accent--light: #dfdaf5;
45-
--global-color-accent--x-light: #D2CCE7;
46-
--global-color-info--normal: var(--global-color-primary--x-dark);
47-
--global-color-info--weak: var(--global-color-primary--x-light);
48-
--global-color-warning--normal: #C7CE1D;
49-
--global-color-warning--weak: #C7CE1D20;
50-
--global-color-warning--alt: var(--global-color-accent--normal);
51-
--global-color-warning--alt-weak: var(--global-color-accent--weak);
52-
--global-color-danger--normal: #EB6E6E;
53-
--global-color-danger--weak: #EB6E6E20;
54-
--global-color-success--normal: #43D130;
55-
--global-color-success--weak: #43D13020;
56-
--global-color-success--alt: var(--global-color-warning--normal);
57-
--global-color-success--alt-weak: var(--global-color-warning--weak);
20+
/* Primary (Text, Layout) */
21+
22+
--global-color-primary--xx-light: #FFFFFF;
23+
--global-color-primary--x-light: #F4F4F4;
24+
--global-color-primary--light: #C6C6C6;
25+
--global-color-primary--normal: #AFAFAF;
26+
--global-color-primary--dark: #707070;
27+
--global-color-primary--x-dark: #484848;
28+
--global-color-primary--xx-dark: #222222;
29+
30+
/* Distinct Hues */
31+
32+
/* FAQ: This placeholder accent color came from Portal */
33+
/* CAVEAT: A standard accent color definition is pending more designs */
34+
/* NOTE: The new Frontera and TACC designs both have brown and blue accents */
35+
--global-color-accent--normal: #877453;
36+
37+
/* CAVEAT: Not accessible within paragraph text (edge case as of 2021-08) */
38+
--global-color-link-on-light--normal: #003399;
39+
/* WARNING: This color is from Dev not Design (not rendered as of 2021-08) */
40+
--global-color-link-on-dark--normal: #0088FF;
5841
}

‎taccsite_cms/static/site_cms/css/src/_imports/settings/font.css‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -40,17 +40,16 @@ Styleguide Settings.CustomProperties.Font
4040

4141

4242
/* Size */
43-
/* NOTE: Defined with Design in 2020, but not yet used for 2021 UI work */
44-
/*
45-
--global-font-size--xx-small: 0.625rem; /* 10px (if base is 16px) *\/
46-
--global-font-size--x-small: 0.8125rem; /* 13px (if base is 16px) *\/
47-
--global-font-size--small: 1.0rem; /* 16px (if base is 16px) *\/
48-
--global-font-size--normal: 1.25rem; /* 20px (if base is 16px) *\/
49-
--global-font-size--large: 1.5rem; /* 24px (if base is 16px) *\/
50-
--global-font-size--x-large: 2.0rem; /* 32px (if base is 16px) *\/
51-
--global-font-size--xx-large: 2.5rem; /* 40px (if base is 16px) *\/
52-
--global-font-size--xxx-large: 3.0rem; /* 48px (if base is 16px) *\/
53-
*/
43+
/* SEE: https://confluence.tacc.utexas.edu/x/nh4FDg */
44+
/* CAVEAT: These font sizes assume root font is 10px or an equivalent value */
45+
46+
--global-font-size--x-small: 1.1rem;
47+
--global-font-size--small: 1.4rem;
48+
--global-font-size--medium: 1.6rem;
49+
--global-font-size--large: 2.0rem;
50+
--global-font-size--x-large: 2.4rem;
51+
--global-font-size--xx-large: 3.2rem;
52+
--global-font-size--xxx-large: 4.1rem;
5453

5554

5655

‎taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,8 @@ Styleguide Trumps.Scopes.Header
1717
*/
1818

1919
/* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)…
20-
No `em` nor `rem` allowed, because they aren't consitently reliable.
21-
- On Frontera CMS, `1rem` = `10px` and `body { font-size: 15px }`
22-
- On any other CMS, `1rem` = `16px` (browser default). */
20+
`em` nor `rem` was not allowed because results were not consistent.
21+
UPDATE: As of PR #312, this has likely changed (untested). */
2322

2423
.s-header {
2524
--text-color: var(--global-color-primary--xx-light);
@@ -160,3 +159,11 @@ Styleguide Trumps.Scopes.Header
160159
width: 27px; /* NO-R/EM: 1.25em (from Portal `.fa`—FP-228 will deprecate it) */
161160
text-align: center;
162161
}
162+
163+
164+
165+
/* Dropdown */
166+
167+
.dropdown-menu {
168+
font-size: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.dropdown-menu`) */
169+
}

‎taccsite_cms/static/site_cms/css/src/_imports/trumps/s-portal-nav.css‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,10 @@ Styleguide Trumps.Scopes.PortalNav
1111
*/
1212

1313
/* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)…
14-
No `em` nor `rem` allowed, because they aren't consitently reliable.
15-
- On Frontera CMS, `1rem` = `10px` and `body { font-size: 15px }`
16-
- On any other CMS, `1rem` = `16px` (browser default). */
14+
`em` nor `rem` was not allowed because results were not consistent.
15+
UPDATE: As of PR #312, this has likely changed (untested). */
1716

1817
.s-portal-nav {
1918
/* Override `.navbar` */
2019
text-transform: none;
2120
}
22-
.s-portal-nav .dropdown-menu {
23-
font-size: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.dropdown-menu`) */
24-
}

‎taccsite_cms/static/site_cms/css/src/site.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
/* SETTINGS */
77
/* Shared with Portal */
88
@import url("_imports/settings/border.css");
9-
@import url("_imports/settings/color.css");
109
/* Unique to CMS */
10+
@import url("_imports/settings/color.css");
1111
@import url("_imports/settings/props.max-width.css");
1212
@import url("_imports/settings/props.space.css");
1313
@import url("_imports/settings/font.css");

‎taccsite_cms/templates/snippets/typography-guide.html‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<h1>Typography</h1>
2+
3+
<hr />
4+
5+
<section>
6+
7+
<h2>Typefaces</h2>
8+
<style>
9+
.c-family { letter-spacing: 0.5em; }
10+
11+
.c-family--mono { font-family: var(--global-font-family--mono); }
12+
.c-family--serif { font-family: var(--global-font-family--serif); }
13+
.c-family--sans { font-family: var(--global-font-family--sans); }
14+
</style>
15+
16+
<section>
17+
<h3>Sans</h3>
18+
<p class="c-family--sans">
19+
The quick brown fox jumps over the lazy dog.</p>
20+
<div class="c-family c-family--sans">
21+
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
22+
<p>abcdefghijklmnopqrstuvwxyz</p>
23+
<p>0123456789</p>
24+
</div>
25+
</section>
26+
<section>
27+
<h3>Mono</h3>
28+
<p class="c-family--mono">
29+
The quick brown fox jumps over the lazy dog.</p>
30+
<div class="c-family c-family--mono">
31+
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
32+
<p>abcdefghijklmnopqrstuvwxyz</p>
33+
<p>0123456789</p>
34+
</div>
35+
</section>
36+
37+
</section>
38+
<section>
39+
40+
<h2>Font Sizes</h2>
41+
42+
<section>
43+
<h3>All Sizes</h3>
44+
<div>
45+
<p style="font-size: var(--global-font-size--xxx-large);">
46+
XXX Large</p>
47+
<p style="font-size: var(--global-font-size--xx-large);">
48+
XX Large</p>
49+
<p style="font-size: var(--global-font-size--x-large);">
50+
Extra Large</p>
51+
<p style="font-size: var(--global-font-size--large);">
52+
Large</p>
53+
<p style="font-size: var(--global-font-size--medium);">
54+
Medium</p>
55+
<p style="font-size: var(--global-font-size--small);">
56+
Small</p>
57+
<p style="font-size: var(--global-font-size--x-small);">
58+
Extra Small</p>
59+
</div>
60+
</section>
61+
<section>
62+
<h3>Headings</h3>
63+
<div>
64+
<h1>Heading One</h1>
65+
<h2>Heading Two</h2>
66+
<h3>Heading Three</h3>
67+
<h4>Heading Four</h4>
68+
<h5>Heading Five</h5>
69+
<h6>Heading Six</h6>
70+
</div>
71+
</section>
72+
73+
</section>
74+
<section>
75+
76+
<h2>Font Weights</h2>
77+
<style>
78+
.c-weight {
79+
border: var(--global-border--normal);
80+
padding: 1em;
81+
text-align: center;
82+
display: inline-block;
83+
}
84+
.c-weight + .c-weight {
85+
margin-left: 1em;
86+
}
87+
88+
.c-weight__sample { font-size: var(--global-font-size--xxx-large); }
89+
90+
.c-weight--regular .c-weight__sample { font-weight: var(--regular); }
91+
.c-weight--medium .c-weight__sample { font-weight: var(--medium); }
92+
.c-weight--bold .c-weight__sample { font-weight: var(--bold); }
93+
</style>
94+
95+
<section class="c-weight-list">
96+
<h3>Sans</h3>
97+
<figure class="c-weight c-weight--regular">
98+
<p class="c-weight__sample c-family--sans">Aa</p>
99+
<figcaption>Sans Regular</figcaption>
100+
</figure>
101+
<figure class="c-weight c-weight--medium">
102+
<p class="c-weight__sample c-family--sans">Aa</p>
103+
<figcaption>Sans Medium</figcaption>
104+
</figure>
105+
<figure class="c-weight c-weight--bold">
106+
<p class="c-weight__sample c-family--sans">Aa</p>
107+
<figcaption>Sans Bold</figcaption>
108+
</figure>
109+
</section>
110+
111+
<section class="c-weight-list">
112+
<h3>Mono</h3>
113+
<figure class="c-weight c-weight--regular">
114+
<p class="c-weight__sample c-family--mono">Aa</p>
115+
<figcaption>Mono Regular</figcaption>
116+
</figure>
117+
<figure class="c-weight c-weight--bold">
118+
<p class="c-weight__sample c-family--mono">Aa</p>
119+
<figcaption>Mono Bold</figcaption>
120+
</figure>
121+
</section>
122+
123+
</section>

0 commit comments

Comments
 (0)