diff --git a/tup/README.md b/tup/README.md index 7868e16e..5276986c 100644 --- a/tup/README.md +++ b/tup/README.md @@ -7,4 +7,7 @@ Custom assets for [TUP](https://github.com/TACC/tup-ui), migrated out of tup-ui' Migration in progress, tracked across sub-PRs: - `html/` — djangocms-snippet reference copies (done) -- `css/`, `js/` — ad-hoc CSS/JS assets loaded by the ad-hoc snippets (in progress) +- `css/ad-hoc/`, `js/ad-hoc/` — ad-hoc CSS/JS assets loaded by the ad-hoc snippets (done) +- `css/cms.css` + `css/_imports/`, `img/logo-*.svg` — assets from tup-ui's `for-tup-cms/` (done) +- tup-ui's `for-core-cms/` and `for-core-styles/` remainders were dead/superseded, not migrated +- `s-breadcrumbs.css`/`breadcrumbs.js` were not migrated — Core-CMS already covers 2nd-crumb de-linking (`nav_cms_breadcrumbs.html`); tup-ui's copies are headed for deletion (tup-ui#535), not upstreaming diff --git a/tup/css/_imports/components/agenda-table.css b/tup/css/_imports/components/agenda-table.css new file mode 100644 index 00000000..05d64729 --- /dev/null +++ b/tup/css/_imports/components/agenda-table.css @@ -0,0 +1,40 @@ +/* FAQ: Used on https://www.tacc.utexas.edu/events/institutues/sample/ */ + +/* FAQ: To support as Black */ +/* TODO: If this is needed, add each to Core Styles as appropriate */ +/* SEE: src/lib/_imports/settings/font.css Roboto @import */ +@import url('https://fonts.googleapis.com/css?family=Roboto:900&display=swap'); +.agenda-table { --black: 900; } + +/* TODO: Implement in core-styles.cms.css as s-agenda-table aka agenda-table */ +.agenda-table time { + font-family: var(--global-font-family--mono); + display: block; /* so text-align is effectual */ + text-align: right; +} +.agenda-table p:not(:last-child) { + margin-bottom: 0.25em; +} +.agenda-table :is(td, th):first-child { + border-right: var(--global-border-width--normal) solid var(--global-color-primary--dark); +} +.agenda-table :is(td, th):nth-child(2) { + text-align: center; +} + +.agenda-table :is(td, th):not([class*="agenda-table__"]) { + background: transparent; +} +.agenda-table__neutral +/* FAQ: Phasing out "primary" misnomer by not propogating it */ { + background: var(--global-color-primary--x-light); +} +.agenda-table__accent { + background: var(--global-color-accent--xxx-light); +} +[class*="agenda-table__secondary"] { + background: var(--global-color-secondary--xx-light); +} +.agenda-table__tertiary { + background: var(--global-color-tertiary--xx-light); +} diff --git a/tup/css/_imports/components/banner.css b/tup/css/_imports/components/banner.css new file mode 100644 index 00000000..31f1cb6e --- /dev/null +++ b/tup/css/_imports/components/banner.css @@ -0,0 +1,190 @@ +/* TODO: Support .c-banner-cell */ + + + + +/* Banner Cell */ + +[class*="banner-cell--"] { + --tag-padding: 0.5rem; /* manually copied from .c-tag styles */ +} + +/* Elements */ + +[class*="banner-cell--"] :where(h1, h2, h3, h4) { + margin-bottom: 0; +} + +/* So image caption heights are equal (not an issue on narrow screen) */ +@media (width >= 576px) { + [class*="banner-cell--"] > a { + height: 100%; + display: block; + } +} + +/* FAQ: Using after so outline is on top of mix-blend-mode (see .o-colorize) */ +[class*="banner-cell--"] > a { position: relative; } +[class*="banner-cell--"] > a:hover::after { + --border-width: var(--global-border-width--thick); + + /* FAQ: Using `border` shrinks content while `outline` does not */ + outline-width: var(--border-width); + outline-style: solid; + outline-color: var(--global-color-primary--xxx-dark); + outline-offset: calc( -1 * var(--border-width) ); + + /* So ::after stretches to fill parent */ + content: ''; + display: block; + position: absolute; + left: 0; top: 0; bottom: 0; right: 0; +} +[class*="banner-cell--"] > a:active { + --border-width: var(--global-border-width--normal); +} + +[class*="banner-cell--"] figure { + margin-bottom: unset; /* undo core-cms.css and Bootstrap */ +} + +[class*="banner-cell--"] figcaption { + padding-inline: 3.0rem; +} + +/* To remove standard link text docoration */ +[class*="banner-cell--"] > a { + text-decoration: none; +} + +/* To cover a re-sized image box with the full-size image (like a bkgd image) */ +/* FAQ: If user sets dimension via style, we assume they want this feature */ +[class*="banner-cell--"] figure:where([style*="height"], [style*="width"]) img { + object-fit: cover; + height: 100%; + width: 100%; +} + +/* Components */ + +[class*="banner-cell--"] .c-tag, +[class*="banner-cell--"] [class*="tag--"] { + display: block; + margin-bottom: 2.0rem; +} + +[class*="banner-cell--"] .u-highlight { + padding-inline: var(--tag-padding); + + color: var(--global-color-primary--xx-light); + background-color: var(--global-color-primary--xxx-dark); + + line-height: 1; +} + + +/* Banner Cell (Major) */ + +/* To allow image to be underneath text */ +.banner-cell--major figure { + display: grid; + + /* To force % image height to match its container (i.e.
) */ + /* https://stackoverflow.com/a/52137966/11817077 */ + grid-template-rows: minmax( 0, 1fr ); +} + +.banner-cell--major h2 { + font-size: var(--global-font-size--xxx-large); + font-weight: var(--bold); + + text-transform: uppercase; +} + +/* To move text atop image */ +.banner-cell--major img, +.banner-cell--major figcaption { + grid-row: 1; + grid-column: 1; +} +.banner-cell--major figcaption { + align-self: end; /* to align text to bottom */ +} + +/* To showcase image more on mobile and not let tag be flush against header */ +@media (width < 576px) { + .banner-cell--major figcaption { + margin-top: 6rem; + margin-bottom: 8rem; + } +} +@media (width >= 576px) { + .banner-cell--major figcaption { + margin-top: 3.5rem; + margin-bottom: 5rem; + } +} + + + +/* Banner Cell (Minor) */ + +/* To space out cells */ +@media (width < 576px) { + .banner-cell--minor { + margin-top: calc( var(--global-space--bootstrap-gap) / 2 ); + } + .banner-cell--minor:last-child { + margin-bottom: calc( var(--global-space--bootstrap-gap) / 2 ); + } +} +@media (width >= 576px) { + .banner-cell--minor { + margin-block: var(--global-space--bootstrap-gap); + } +} + +/* To allow image to be underneath text */ +.banner-cell--minor figure { + display: grid; + + /* To make image and caption fill, but also fit within, grid */ + grid-template-rows: auto 1fr; + grid-template-columns: minmax( 0, 1fr ); +} + +/* To add space under caption text within container */ +.banner-cell--minor figcaption { + padding-bottom: 3.0rem; +} + +.banner-cell--minor h2 { + color: var(--global-color-primary--xxx-dark); /* undo core-styles.cms */ + font-weight: revert; +} + +/* To move text atop image */ +.banner-cell--minor figcaption { + /* To move by half the height of the .c-tag */ + /* FAQ: Not using `translateY(-50%)` because h2 must move same amount */ + --offset: calc( var(--tag-padding) + ( var(--global-font-size--small) / 2 ) ); + + /* FAQ: Using variable so styles that extend this can use the value */ + margin-top: calc( -1 * var(--offset) ); +} + + + + + +/* Conflicts with Core-CMS */ + +/* Overwrite Core-CMS core-cms.css */ +/* HELP: How can all CMS sites avoid this? */ +[class*="banner-cell--"] figcaption { + border-bottom: unset; + color: unset; + font-size: unset; + font-style: normal; + line-height: inherit; +} diff --git a/tup/css/_imports/components/banner.html b/tup/css/_imports/components/banner.html new file mode 100644 index 00000000..85b22353 --- /dev/null +++ b/tup/css/_imports/components/banner.html @@ -0,0 +1,56 @@ + + \ No newline at end of file diff --git a/tup/css/_imports/components/banner.md b/tup/css/_imports/components/banner.md new file mode 100644 index 00000000..92e7e10b --- /dev/null +++ b/tup/css/_imports/components/banner.md @@ -0,0 +1,3 @@ +A list of article previews. + +> **⚠️ Warning**: Styles are heavily dependent on the tags in the sample markup. diff --git a/tup/css/_imports/components/c-data-list.css b/tup/css/_imports/components/c-data-list.css new file mode 100644 index 00000000..d5926536 --- /dev/null +++ b/tup/css/_imports/components/c-data-list.css @@ -0,0 +1,15 @@ +/* SEE: https://dev.tup.tacc.utexas.edu/systems/frontera/ */ + +table[class*="data-list--"] { + /* TODO: Consider this for all tables */ + margin-bottom: 40px; +} +table[class*="data-list--"] :is(th, td) { + background: unset; +} +table[class*="data-list--"] th { + font-weight: var(--black); /* undo core-styles.base table */ +} +table[class*="data-list--"] td { + color: unset; /* undo core-styles.base table */ +} diff --git a/tup/css/_imports/components/c-footer.css b/tup/css/_imports/components/c-footer.css new file mode 100644 index 00000000..da810969 --- /dev/null +++ b/tup/css/_imports/components/c-footer.css @@ -0,0 +1,239 @@ +/* BUTTONS */ + +/* To style buttons differently than in body */ +.c-footer .c-button, +.c-footer [class*="button--"] { + & small { + font-size: var(--global-font-size--x-small); + } +} + + + + + +/* LOGOS */ + +/* To set baseline styles for footer logos */ +/* TODO: Evaluate for tup-ui or core-cms CSS */ +.c-footer svg { + fill: var(--global-color-primary--xx-light); +} +.c-footer [class*="logos--"] { + display: grid; + gap: var(--gap, 0); + grid-auto-flow: column; + justify-content: center; +} +.c-footer .logos--branding { + --gap: 2rem; + + /* NOTE: Test any changes on all browsers and screen sizes */ + grid-template-columns: repeat( 3, minmax(0, 1fr) ); +} +.c-footer .logos--branding a { + min-height: 60px; + max-height: 120px; +} + +.c-footer [class*="logos--"] a { + display: inline-flex; + align-items: center; + justify-content: center; /* horz align when image narrower than grid cell */ +} + +/* For independent logo sizes */ +.c-footer .logos--branding svg { + height: 55%; +} +.c-footer .logos__tacc svg { + /* To vertically align center as if small text was not present */ + transform: translateY(5%); +} +.c-footer .logos__ut svg { + /* To vertically align center as if small text was not present */ + transform: translateY(5%); +} + +/* To create fake border between logos */ +.c-footer [class*="logos--"] a { position: relative } +.c-footer .logos--branding a:not(:first-child)::before { + height: 75%; + + position: absolute; + left: calc( -1 * var(--gap)/2 ); + + content: ''; + display: block; + background-color: var(--global-color-primary--xx-light); + background-clip: content-box; + width: var(--global-border-width--normal); + box-sizing: content-box; + + cursor: default; +} + +/* To skin logo links */ +.c-footer [class*="logos--"] a { + &:hover { + color: inherit; + } + &:hover svg { + color: currentColor; + outline: var(--global-border-width--normal) solid currentColor; + outline-offset: 5px; + border-radius: var(--global-border-width--normal); + } + &:active svg { + outline-style: dotted; + } +} +.c-footer .logos--social a { + padding: 0.5em; +} +.c-footer .logos--social svg { + font-size: 2.5rem; +} + + +/* HACK: To undo tricky Instagram hover color */ +.c-footer .logos--social a.logos__instagram:hover { + mask: unset; + background: unset; +} +.c-footer .logos--social a.logos__instagram:hover svg { + visibility: visible; +} + + + + + +/* LAYOUT */ + + + +/* LAYOUT - All Screens */ + +.c-footer { + --pad-vert: 36px; + --pad-horz: 36px; +} + + +/* LAYOUT - Narrow Screen */ + +/* Move all panes to one column */ +@media (width < 380px) { + #cms-footer .col { + /* FAQ: I copied Bootstrap .col-6 styles and changed 50% to 100% */ + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; + } +} + + + + +/* LAYOUT - Wide Screen */ + +/* To draw a line between "Quick Links" and regular links */ +@media (width > 380px) { + #cms-footer .c-pane--aside { + border-left: var(--global-border-width--normal) solid var(--global-color-primary--xx-light); + } +} + +/* To draw a box behind common footer content */ +/* FAQ: The box stretches to cover the height and right side of the footer */ +@media (width >= 992px) { + #cms-footer .c-pane--common { + /* To move c-footer vertical padding into this pane */ + margin-block: calc( -1 * var(--pad-vert) ); + padding-block: var(--pad-vert); + + background-color: var(--global-color-primary--x-dark); + } + html:not(#page-portal) .c-footer { + padding-right: revert; /* undo core-styles.cms.css */ + } + #cms-footer .c-pane--common { + padding-inline: var(--pad-horz); + } + #cms-footer.row:not(.no-gutters) { + margin-right: 0; + } +} + + + + + +/* PER CLIENT */ + + +/* PER CLIENT - HIDE/SHOW */ + +/* To hide/show CMS/Portal footer */ +html#page-portal #cms-footer, /* new id */ +html:not(#page-portal) #portal-footer /* trans id */ { + display: none; +} + +/* PER CLIENT - PORTAL */ + +html:not(#page-portal) .c-footer { + /* To add a full-width border above CMS footer */ + /* TODO: Evaluate for tup-ui or Core-CMS CSS */ + border-width: var(--global-border-width--thick) 0 0 0; + border-style: solid; + border-color: var(--global-color-secondary--light); + + /* To remove padding-block on CMS footer */ + padding-block: unset; +} + +/* To reduce size of Portal footer */ +html#page-portal .c-footer { + --pad-vert: 0; + --pad-horz: 15px; /* WARNING: any less causes unexplained scrollbar */ +} +html#page-portal .c-footer p { + margin-bottom: revert; /* undo Bootstrap */ +} + +/* To vertically center text */ +#portal-footer p { + margin-block: revert; /* undo Bootstrap */ +} + + + +/* PER CLIENT - CMS */ + +/* To move footer padding into CMS footer */ +#cms-footer { + padding-block: var(--pad-vert); +} + +/* Add vertical space between panes, except for aside when it is below others */ +/* FAQ: Bootstrap 4 grid does not have a way to do so */ +#cms-footer .col.c-pane--nav { + margin-bottom: 2rem; +} + +/* To make text color match on regular text and hyperlinks */ +#cms-footer .c-pane--common, +#cms-footer .c-pane--common a { + color: var(--global-color-primary--xx-light); +} +#cms-footer .c-pane--common a { + text-decoration-line: underline; + text-decoration-color: var(--global-color-primary--dark); + + &:hover { + text-decoration-color: inherit; + } +} diff --git a/tup/css/_imports/components/c-news.css b/tup/css/_imports/components/c-news.css new file mode 100644 index 00000000..7a3a3cb3 --- /dev/null +++ b/tup/css/_imports/components/c-news.css @@ -0,0 +1,14 @@ +/* To adjust display of metadata (given what .c-update shows) */ +.c-news--read article.has-update .c-news__data { + display: none; +} +.c-news--read article.has-update .c-news__title { + /* Overwrites c-news--read.css */ + border-bottom: unset; + margin-bottom: 6.5rem; +} + +/* To hide byline on User Updates */ +.c-news__byline:not(.app-blog *) { + display: none; +} diff --git a/tup/css/_imports/components/c-tag.css b/tup/css/_imports/components/c-tag.css new file mode 100644 index 00000000..70a2b3e4 --- /dev/null +++ b/tup/css/_imports/components/c-tag.css @@ -0,0 +1,63 @@ +.c-tag, +[class*="tag--"] { + display: block; + margin-bottom: 2.0rem; + + color: var(--global-color-primary--xx-light); + + font-size: var(--global-font-size--small); +} + +/* Press Release */ +[class*="tag--pr"], +/* To overwrite core-cms django.cms.blog.app.css */ +.app-blog .categories a:is( + .blog-category-press-release +) { + background: #723B0C; +} + +/* Q&A, Human Interest */ +[class*="tag--qa"], +/* To overwrite core-cms django.cms.blog.app.css */ +.app-blog .categories a:is( + .blog-category-qa, + .blog-category-welcome-profile, + .blog-category-staff-highlight +) { + background: var(--global-color-accent--light); +} + +/* Has Video, Audio, or other media beyond statc image */ +[class*="tag--media"], +/* To overwrite core-cms django.cms.blog.app.css */ +.app-blog .categories a:is( + .blog-category-podcast, + .blog-category-multimedia +) { + background: var(--global-color-primary--dark); +} + +/* System Status Update */ +[class*="tag--system"] { + background: var(--global-color-tertiary--normal); +} + +/* Feature Story (different than a "featured" article) */ +[class*="tag--feature"], +/* To overwrite core-cms django.cms.blog.app.css */ +.app-blog .categories a:is( + .blog-category-feature-story +) { + background: var(--global-color-accent--normal); +} + +/* External Article */ +[class*="tag--external"] { + background: var(--global-color-secondary--normal); +} + +/* Event */ +[class*="tag--event"] { + background: var(--global-color-tertiary--dark); +} diff --git a/tup/css/_imports/components/c-update.css b/tup/css/_imports/components/c-update.css new file mode 100644 index 00000000..1bded943 --- /dev/null +++ b/tup/css/_imports/components/c-update.css @@ -0,0 +1,21 @@ +/* To style "Update" pill in title */ +.c-update__title .c-pill { + vertical-align: middle; + transform: translateY(-0.125em); +} +.c-update__title .c-pill:not([class*="c-pill--"]) { + background-color: var(--global-color-primary--light); +} + +/* To reduce space between "Original Update" and its content */ +.c-update__header + .c-news__content { + margin-top: unset; /* ovewrite c-news--read.css */ +} + +/* To tweak hr appearance and layout */ +.c-update + hr { + border-top-color: var(--global-color-priamry--dark); + + /* To make line between updates darker and have equal space above and below */ + margin-top: var(--global-space--hr-buffer-below); +} diff --git a/tup/css/_imports/components/c-widget.css b/tup/css/_imports/components/c-widget.css new file mode 100644 index 00000000..5016037f --- /dev/null +++ b/tup/css/_imports/components/c-widget.css @@ -0,0 +1,20 @@ +/* FAQ: Used on homepage to mimic `c-feed` style (User Updates) heading */ +/* SEE: https://dev.tup.tacc.utexas.edu/ */ + +/* TODO: Consider 1 pattern for styles shared between c-feed-list & c-widget */ + +/* !!!: Clones corresponding .c-feed-list syle */ +.c-widget > :is(h1, h2, h3, h4, h5, h6) { + margin-top: 0; + margin-bottom: 10px; + + /* TODO: When migrated to core-styles, use @extend instead */ + /* @extend .x-truncate--one-line; */ + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.c-widget > div { + border-top: var(--global-border-width--normal) solid var(--global-color-primary--dark); +} diff --git a/tup/css/_imports/components/content-block.css b/tup/css/_imports/components/content-block.css new file mode 100644 index 00000000..2e0ace37 --- /dev/null +++ b/tup/css/_imports/components/content-block.css @@ -0,0 +1,9 @@ +/* SEE https://dev.tup.tacc.utexas.edu/use-tacc/stem-evaluation-services/ */ +/* FAQ: This is specific to TACC, not for Core */ + +/* To remove some space between content blocks */ +/* FAQ: Short-term solution to excess space */ +/* FAQ: Long-term solution is redo spacing for Rows, Cols, Blocks, and Cards */ +:is(.c-content-block, .content-block) + :is(.c-content-block, .content-block) { + margin-top: calc( -1 * var(--global-space--bootstrap-gap) ); /* usurp `:is(.c-content-block, .content-block)` */ +} diff --git a/tup/css/_imports/components/django-cms-forms.css b/tup/css/_imports/components/django-cms-forms.css new file mode 100644 index 00000000..1a3b1856 --- /dev/null +++ b/tup/css/_imports/components/django-cms-forms.css @@ -0,0 +1,11 @@ +/* Used on a TACC CMS form that is in a card */ +/* SEE: https://dev.tup.tacc.utexas.edu/about/security-and-compliance/protected-data-service/ */ + +/* Add extra space to bottom of a form in a card */ +/* NOTE: We need this only cuz/if padding is removed from card bottom… */ +/* TODO: Review selector (does a form in ANY card need this?) */ +/* TODO: Review whether to support this edge case for `.c-form` also */ +/* TODO: After review of the selector, add to core-styles.cms.css */ +:is(.card, .c-card, [class*="card--"]) .forms { + margin-bottom: 20px; +} diff --git a/tup/css/_imports/components/django.cms.blog.app.page.css b/tup/css/_imports/components/django.cms.blog.app.page.css new file mode 100644 index 00000000..90475b5b --- /dev/null +++ b/tup/css/_imports/components/django.cms.blog.app.page.css @@ -0,0 +1,28 @@ +/* To add space beneath image whose

trapped inside it the text beneath */ +/* NOTE: W.B. does NOT know how the text gets trapped with image in one

*/ +/* HELP: Do not integrate into Core unless the use case is real and clarified */ +article.post-detail .blog-content > p:first-child > img:not(:only-child) { + margin-bottom: 2rem; /* mimic core-styles.cms

margin-bottom */ +} + +/* On article page, to hide automatic main image */ +/* TODO: Consider CMS setting to hide `.blog-visual` */ +article.post-detail .blog-visual { + display: none; +} +@media (width < 576px) { + /* To continue hiding news article image on mobile */ + /* TODO: Determine how best to hide on TUP, but not every site */ + /* FAQ: Core-CMS (in dev/tup-cms) sets .blog-visual to `display: grid` */ + /* SEE: https://github.com/TACC/Core-CMS/blob/v3.12.0-alpha.9/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css#L86-L93 */ + /* SEE: https://github.com/TACC/tup-ui/pull/218#issuecomment-1669960294 */ + article.post-detail .blog-visual { + display: none !important; /* HACK: heavy-handed override of core-cms */ + } +} + +/* On article page, to hide "RELATED POSTS:" */ +/* TODO: Style "RELATED POSTS:" output */ +article.post-detail .post-detail-list { + display: none; +} diff --git a/tup/css/_imports/components/layered-image--fix-raw-image-size.css b/tup/css/_imports/components/layered-image--fix-raw-image-size.css new file mode 100644 index 00000000..480cbee6 --- /dev/null +++ b/tup/css/_imports/components/layered-image--fix-raw-image-size.css @@ -0,0 +1,27 @@ +/* FIX RAW IMAGE SIZE */ +/* FAQ: This is specific to TACC, not for Core */ + +/* All images are uploaded at @2x */ +/* HELP: How can we use @2x and @4x to support retina displays */ +:is(.layered-image, [class*="layered-image--"]) +> :is(.align-left, .align-left--oversized, .align-right, .align-center) { + /* transform: scale(50%); *//* To fix image size */ + transform: scale(40%); /* To fix then tweak image size */ +} +/* FAQ: Some images are off by a different size than the others... */ +:is(.layered-image, [class*="layered-image--"]) > img[src*="/paperclip"], +:is(.layered-image, [class*="layered-image--"]) > img[src*="/spiral"] { + transform: scale(75%); +} +@media (min-width: 768px) and (max-width: 991px) { + :is(.layered-image, [class*="layered-image--"]) + > :is(.align-left, .align-left--oversized, .align-right, .align-center) { + transform: scale(31.25%); + } +} +@media (min-width: 992px) and (max-width: 1199px) { + :is(.layered-image, [class*="layered-image--"]) + > :is(.align-left, .align-left--oversized, .align-right, .align-center) { + transform: scale(37.5%); + } +} diff --git a/tup/css/_imports/components/layered-image--header-and-section-tweaks.css b/tup/css/_imports/components/layered-image--header-and-section-tweaks.css new file mode 100644 index 00000000..0e094a58 --- /dev/null +++ b/tup/css/_imports/components/layered-image--header-and-section-tweaks.css @@ -0,0 +1,23 @@ +/* HEADER & SECTION TWEAKS */ + +/* TODO: Integrate into Core-CMS */ + +/* So

content (e.g. `.c-layered-image`) does not appear atop header */ +/* So `nav.breadcrumbs` do not appear atop header CMS nav */ +body > header { + position: relative; + z-index: 2; +} + +/* So background image does NOT appear over ANY other section + (e.g. an `.align-center` "background image" of a layered image) */ +:is(.o-section, .section, [class*="section--"]) +/* FAQ: Only styled sections can use `position: relative` solution */ ++ [class*="section--"] { + position: relative; /* so previous section is z-index below next section */ +} +:is(.o-section, .section, [class*="section--"]) +/* FAQ: All sections can use `overflow-y` solution */ ++ :is(.o-section, .section, [class*="section--"]) { + overflow-y: clip; /* so successive section can not bleed into any section */ +} diff --git a/tup/css/_imports/components/layered-image.css b/tup/css/_imports/components/layered-image.css new file mode 100644 index 00000000..44af7555 --- /dev/null +++ b/tup/css/_imports/components/layered-image.css @@ -0,0 +1,200 @@ +@import url("./layered-image--header-and-section-tweaks.css"); +@import url("./layered-image--fix-raw-image-size.css"); + +/* TODO: Integrate into Core-CMS */ +/* TODO: Pull component to right LIKE DESIGN (or use o-offset-content) */ +/* CAVEAT: Does NOT yet support the offset of main image as shown in design */ +/* https://xd.adobe.com/view/dabaec5a-cc31-4c5c-876e-56d6d8cc359e-8fe9/screen/c0898d6b-2fd9-472a-bcd7-1ae9d4f9a015/specs/ */ + + + + +/* BASE */ + +/* So top of `.align-left` decal image aligns with top of

*/ +/* FAQ: To limit style to specific context, consider: `.col`, `:only-child` */ +.layered-image, [class*="layered-image--"] { + --h1-offset: 0; + + margin-top: var(--h1-offset); +} + +/* So child images can be positioned */ +.layered-image, [class*="layered-image--"] { + /* So children can `position: absolute` */ + position: relative; + + /* So background image is centered without `transform: translate(…)` */ + /* FAQ: The `transform` prop is already used to scale images (see @media) */ + /* FAQ: To combine conditional `transform` values with `var()` is complex */ + /* FAQ: To use `scale` prop would work... except on Samsung Internet */ + display: grid; + justify-items: center; +} + + + +/* ELEMENTS */ + +/* So images can be positioned */ +:is(.layered-image, [class*="layered-image--"]) +> :is(.align-left, .align-left--oversized, .align-right, .align-center) { + position: absolute; +} +:is(.layered-image, [class*="layered-image--"]) +> :is(.align-left, .align-right) { + float: unset; /* undo core-cms.css */ + max-width: unset; /* undo core-cms.css */ +} + +/* To position images at standard anchor points */ +:is(.layered-image, [class*="layered-image--"]) > .align-left, +:is(.layered-image, [class*="layered-image--"]) > .align-left--oversized { + left: calc(var(--global-space--grid-gap) / 2); +} +:is(.layered-image, [class*="layered-image--"]) > .align-right { + right: calc(var(--global-space--grid-gap) / 2); +} +:is(.layered-image, [class*="layered-image--"]) > .align-left--oversized { + top: -12%; + left: -7%; +} +:is(.layered-image, [class*="layered-image--"]) > .align-center { + /* User must set top inline, because designs are few and inconsistent */ + /* https://xd.adobe.com/view/dabaec5a-cc31-4c5c-876e-56d6d8cc359e-8fe9/screen/032918ef-38c1-4cd2-bd3b-c38a5af710da/specs/ */ + /* https://xd.adobe.com/view/dabaec5a-cc31-4c5c-876e-56d6d8cc359e-8fe9/screen/3f3faa5d-3bca-41ed-9c13-0f94a4caae93/specs/ */ + top: 0; +} +@media (max-width: 575px) /* ✅ 2023-01-27 16:00 */ { + /* To position images at standard anchor points */ + :is(.layered-image, [class*="layered-image--"]) > .align-left, + :is(.layered-image, [class*="layered-image--"]) > .align-left--oversized { + top: -8.8%; + left: calc(var(--global-space--grid-gap) / 2); + } + :is(.layered-image, [class*="layered-image--"]) > .align-right { + bottom: -9.25%; + right: calc(var(--global-space--grid-gap) / 2); + } +} +@media (min-width: 576px) and (max-width: 991px) /* ✅ 2023-01-27 16:00 */ { + :is(.layered-image, [class*="layered-image--"]) > .align-left { + top: -8.8%; + left: -3.4%; + } + :is(.layered-image, [class*="layered-image--"]) > .align-right { + bottom: -9.25%; + right: -5%; + } +} +@media (min-width: 992px) and (max-width: 1199px) /* ✅ 2023-01-27 16:00 */ { + :is(.layered-image, [class*="layered-image--"]) > .align-left { + top: -7.5%; + left: -3%; + } + :is(.layered-image, [class*="layered-image--"]) > .align-right { + bottom: -7.75%; + right: -4.35%; + } +} +@media (min-width: 1200px) and (max-width: 1679px) /* ✅ 2023-01-27 16:00 */ { + :is(.layered-image, [class*="layered-image--"]) > .align-left { + top: -8.8%; + left: -3.4%; + } + :is(.layered-image, [class*="layered-image--"]) > .align-right { + bottom: -9.25%; + right: -5%; + } +} +@media (min-width: 1680px) and (max-width: 1919px) /* ✅ 2023-01-27 16:00 */ { + :is(.layered-image, [class*="layered-image--"]) > .align-left { + top: -7.5%; + left: -3%; + } + :is(.layered-image, [class*="layered-image--"]) > .align-right { + bottom: -7.75%; + right: -4.35%; + } +} +@media (min-width: 1920px) /* ✅ 2023-01-27 16:00 */ { + :is(.layered-image, [class*="layered-image--"]) > .align-left { + top: -6.5%; + left: -3.6%; + } + :is(.layered-image, [class*="layered-image--"]) > .align-right { + bottom: -6.5%; + right: -4.9%; + } +} + +/* To reverse z-index of stacked images (so CMS user can layer intuitively) */ +/* CAVEAT: This works by accident, but designer loves it, so maintain this */ +:is(.layered-image, [class*="layered-image--"]) +> :not([class*="align-"], :only-child) { + position: relative; +} +:is(.layered-image, [class*="layered-image--"]) +> :is(.align-left, .align-left--oversized, .align-right, :not([class*="align-"], :only-child)) { + z-index: 1; +} +:is(.layered-image, [class*="layered-image--"]) +> :is(.align-left--oversized, .align-center) { + z-index: 0; +} + +/* Undo specific `core-styles.cms.css` .align-… margin */ +:is(.layered-image, [class*="layered-image--"]) > .align-left { + margin-right: unset; + margin-bottom: unset; +} +:is(.layered-image, [class*="layered-image--"]) > .align-right { + margin-left: unset; + margin-bottom: unset; +} +:is(.layered-image, [class*="layered-image--"]) > .align-center { + margin-inline: unset; +} + +/* To set origin for scaling decal and background images */ +:is(.layered-image, [class*="layered-image--"]) > .align-left { + transform-origin: top left; +} +:is(.layered-image, [class*="layered-image--"]) > .align-left--oversized { + transform-origin: top left; +} +:is(.layered-image, [class*="layered-image--"]) > .align-right { + transform-origin: bottom right; +} +:is(.layered-image, [class*="layered-image--"]) > .align-center { + transform-origin: top; +} + +/* TODO: Once in Core-CMS, use existing @custom-media */ +/* https://xd.adobe.com/view/dabaec5a-cc31-4c5c-876e-56d6d8cc359e-8fe9/screen/4906fef4-4665-473a-8ad3-459a4fab23c8/specs/ */ +@media (max-width: 575px) { + /* To pull pattern to edge of container when container has no max-width */ + :has(> .layered-image), .has-layered-image { + overflow-x: clip; + } + .layered-image, [class*="layered-image--"] { + margin-inline: calc( -1 * var(--global-space--bootstrap-gap) ); + } +} +@media (max-width: 767px) { + /* To hide background images when pattern flows vertical with content */ + :is(.layered-image, [class*="layered-image--"]) > .align-center { + display: none; + } +} + + + +/* EDGE CASES */ + +/* For a no-modifier, layered image with a single, un-aligned image */ +.layered-image :not([class*="align-"]):only-child { + /* To negate .layered-image`'s alignment with

via `margin-top` */ + /* FAQ: Can NOT just undo parent because Firefox does not support `:has` */ + margin-top: calc( -1 * var(--h1-offset) ); +} diff --git a/tup/css/_imports/elements/headings--cms.css b/tup/css/_imports/elements/headings--cms.css new file mode 100644 index 00000000..9933dd99 --- /dev/null +++ b/tup/css/_imports/elements/headings--cms.css @@ -0,0 +1,5 @@ +/* Structure */ + +table + :is(h1, h2, h3, h4, h5, h6) { + margin-top: 2em; +} diff --git a/tup/css/_imports/objects/o-section.css b/tup/css/_imports/objects/o-section.css new file mode 100644 index 00000000..4efba411 --- /dev/null +++ b/tup/css/_imports/objects/o-section.css @@ -0,0 +1,10 @@ +/* So any section touching breadcrumbs has reduced top space */ +/* TODO: Consider for Core-CMS, not Core-Styles */ +nav.s-breadcrumbs + :is(.o-section, .section):not([class*="o-section--style-"], [class*="section--"]), +nav.s-breadcrumbs + .container > :is(.o-section, .section):not([class*="o-section--style-"], [class*="section--"]):first-child { + margin-top: var(--global-space--under-breadcrumbs); +} +nav.s-breadcrumbs + :is([class*="o-section--style-"], [class*="section--"]), +nav.s-breadcrumbs + .container > :is([class*="o-section--style-"], [class*="section--"]):first-child { + padding-top: var(--global-space--under-breadcrumbs); +} diff --git a/tup/css/_imports/objects/people-grid.css b/tup/css/_imports/objects/people-grid.css new file mode 100644 index 00000000..f0191ff9 --- /dev/null +++ b/tup/css/_imports/objects/people-grid.css @@ -0,0 +1,10 @@ +/* An automatric grid layout intended for people headshots */ +/* FAQ: This pattern was nitially similar to `.o-grid--col-min-width` */ +/* TODO: Consider this pattern for Core-Styles */ +.people-grid { + --width: 192px; + + display: grid; + gap: var(--global-space--grid-gap); + grid-template-columns: repeat( auto-fill, minmax( var(--width), 1fr ) ); +} diff --git a/tup/css/_imports/trumps/s-abbr-list.css b/tup/css/_imports/trumps/s-abbr-list.css new file mode 100644 index 00000000..1fd3fe11 --- /dev/null +++ b/tup/css/_imports/trumps/s-abbr-list.css @@ -0,0 +1,19 @@ +/* ???: Where is this used?! */ + +.s-abbr-list ul, +.abbr-list ul { + padding-left: 0; /* overwrite browser */ + list-style-type: none; + font-weight: var(--medium); +} +.s-abbr-list li, +.abbr-list li { + margin-bottom: 2rem; +} +.s-abbr-list abbr, +.s-abbr-list span.abbr, +.abbr-list abbr, +.abbr-list span.abbr { + color: var(--global-color-secondary--normal); + font-weight: var(--bold); +} diff --git a/tup/css/cms.css b/tup/css/cms.css new file mode 100644 index 00000000..53b36035 --- /dev/null +++ b/tup/css/cms.css @@ -0,0 +1,32 @@ +/* Organize via ITCSS */ +/* SEE: https://confluence.tacc.utexas.edu/x/IAA9Cw */ + +/* SETTINGS */ +/* ... */ + +/* GENERICS */ +/* ... */ + +/* ELEMENTS */ +@import url("./_imports/elements/headings--cms.css") layer(project); + +/* OBJECTS */ +@import url("./_imports/objects/o-section.css") layer(project); +@import url("./_imports/objects/people-grid.css") layer(project); + +/* COMPONENTS */ +@import url("./_imports/components/agenda-table.css") layer(project); +@import url("./_imports/components/banner.css") layer(project); +@import url("./_imports/components/c-data-list.css") layer(project); +@import url("./_imports/components/c-footer.css") layer(project); +@import url("./_imports/components/c-news.css") layer(project); +@import url("./_imports/components/c-tag.css") layer(project); +@import url("./_imports/components/c-update.css") layer(project); +@import url("./_imports/components/c-widget.css") layer(project); +@import url("./_imports/components/content-block.css") layer(project); +@import url("./_imports/components/django-cms-forms.css") layer(project); +@import url("./_imports/components/django.cms.blog.app.page.css") layer(project); +@import url("./_imports/components/layered-image.css") layer(project); + +/* TRUMPS */ +@import url("./_imports/trumps/s-abbr-list.css") layer(project); diff --git a/tup/img/logo-color.svg b/tup/img/logo-color.svg new file mode 100644 index 00000000..702cecee --- /dev/null +++ b/tup/img/logo-color.svg @@ -0,0 +1,86 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tup/img/logo-white-25years--cropped.svg b/tup/img/logo-white-25years--cropped.svg new file mode 100644 index 00000000..7ef88570 --- /dev/null +++ b/tup/img/logo-white-25years--cropped.svg @@ -0,0 +1,774 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tup/img/logo-white-25years.svg b/tup/img/logo-white-25years.svg new file mode 100644 index 00000000..4ae88eae --- /dev/null +++ b/tup/img/logo-white-25years.svg @@ -0,0 +1,263 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tup/img/logo-white.svg b/tup/img/logo-white.svg new file mode 100644 index 00000000..ee96ecc5 --- /dev/null +++ b/tup/img/logo-white.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + +