diff --git a/utrc-cms/settings_custom.py b/utrc-cms/settings_custom.py index 80ee8277..aff9059d 100644 --- a/utrc-cms/settings_custom.py +++ b/utrc-cms/settings_custom.py @@ -10,6 +10,8 @@ CMS_TEMPLATES = ( ('utrc-cms/templates/standard.html', 'Standard'), ('utrc-cms/templates/fullwidth.html', 'Full Width'), + ('utrc-cms/templates/home.html', 'Home'), + ('guide.html', 'Guide'), ('guides/getting_started.html', 'Guide: Getting Started'), ('guides/data_transfer.html', 'Guide: Data Transfer'), diff --git a/utrc-cms/static/utrc-cms/css/src/_imports/trumps/s-focus-list.css b/utrc-cms/static/utrc-cms/css/src/_imports/trumps/s-focus-list.css new file mode 100644 index 00000000..2adba4ed --- /dev/null +++ b/utrc-cms/static/utrc-cms/css/src/_imports/trumps/s-focus-list.css @@ -0,0 +1,25 @@ +/* +Focus List + +A list with text that should allow a user to focus on each line. + +Markup: +

UTRC works with researchers to:

+ + +Styleguide Trumps.Scopes.FocusList +*/ + +.s-focus-list { + margin-block: 1.0em 1.5em; + padding-inline: 1.5em; + + font-size: larger; + line-height: 1.75; + + list-style: none; +} diff --git a/utrc-cms/static/utrc-cms/css/src/_imports/trumps/s-home.css b/utrc-cms/static/utrc-cms/css/src/_imports/trumps/s-home.css new file mode 100644 index 00000000..defae918 --- /dev/null +++ b/utrc-cms/static/utrc-cms/css/src/_imports/trumps/s-home.css @@ -0,0 +1,185 @@ +/* TACC TRUMPS: Home (Page) */ +@import url("../../../../../../../../taccsite_cms/static/site_cms/css/src/_imports/tools/x-overlay.css"); +@import url("../../../../../../../../taccsite_cms/static/site_cms/css/src/_imports/tools/media-queries.css"); +@import url("../../../../../../../../taccsite_cms/static/site_cms/css/src/_imports/settings/border.css"); + + + + + +/* Banner */ +/* Content */ + +@media (--narrow-and-above) { + /* FAQ: Extra specificty to overwrite Core `site.css` */ + .s-home__banner.o-section.container, + .s-home__content.o-section.container { + --horz-space: 116px; + } +} + + + + + +/* Banner */ + + + +/* Banner: Container */ + +.s-home__banner { + position: relative; /* for `position: absolute` children */ +} +@media (--medium-and-below) { + .s-home__banner { + height: auto; + display: grid; + } +} +@media (--medium-and-above) { + .s-home__banner { + height: 55.5rem; + display: block; + } +} + + + +/* Banner: Overlay */ + +@media (--medium-and-above) { + .s-home__banner.o-section--banner .o-section__banner-overlay { + position: absolute; + height: auto; + width: 475px; + left: 0; + bottom: 50px; + } +} +.s-home__banner.o-section--banner .o-section__banner-overlay { + @extend .x-overlay--callout; + + --color-text: inherit; + --color-bkgd-rgb: var(--global-color-primary--normal); + + color: var(--color-text); + background-color: rgba(var(--color-bkgd-rgb), 0.9); +} +.s-home__banner.o-section--banner.o-section--style-dark .o-section__banner-overlay { + --color-text: var(--global-color-primary--xx-light); + --color-bkgd-rgb: var(--global-color-primary--xx-dark-rgb); +} +.s-home__banner.o-section--banner.o-section--style-light .o-section__banner-overlay { + --color-text: var(--global-color-primary--xx-dark); + --color-bkgd-rgb: var(--global-color-primary--xx-light-rgb); +} + + + + + +/* Introduction */ + +.s-home__intro { + --left-buffer: 48px; + + padding: 24px 84px 36px var(--left-buffer); + + font-weight: bold; +} +@media (--narrow-and-above) { + .s-home__intro { + margin-left: calc( + -1 * var(--left-buffer) + ); /* to align left side via text edge, not box edge */ + margin-right: calc( + -1 *var(--left-buffer) + ); /* (on narrow window) to offset right of box same as left */ + } +} + +.s-home__intro h1 { + margin-top: 0; + padding-bottom: 14px; + margin-bottom: 18px; + + font-size: 2.4rem; /* design deviates from standard to fit text on 2 lines */ + + border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--xx-dark); +} + + + + + +/* Content */ + + + +/* Content: Panels */ + +/* First panel */ +@media (--wide-and-above) { + /* To match design */ + .s-home__content > *:nth-child(1) { margin-right: 100px; } +} +@media (--medium-and-above) and (--wide-and-below) { + /* To prevent wrapping of `.s-focus-list` items */ + .s-home__content > *:nth-child(1) { margin-right: 25px; } +} + +/* Second panel */ +@media (--medium-and-above) { + .s-home__content > *:nth-child(2) { + /* To draw a border between grid items (that has existing gap) */ + border-left: + var(--global-border-width--normal) solid + var(--global-color-primary--xx-dark); + --border-color: var(--global-color-primary--xx-dark); + padding-left: var(--gap); + + /* To allow text to spill into right-hand margin of content */ + margin-right: -35px; /* anywhere between when text wraps: -10px and -43px */ + } +} + + + +/* Content: Elements */ + +.s-home__content h2 { + font-size: var(--global-font-size--large); +} +.s-home__content p { + font-weight: var(--medium); +} + + + +/* Content: Focus List */ + +.s-home__content .s-focus-list { + font--size: var(--global-font-size--large); +} + + + +/* Content: Icon List */ + +.s-home__content .s-icon-list { + padding-left: 0; + margin-block: 46px; + + /* line-height: 1.75; */ + + color: var(--global-color-primary--xx-dark); +} +.s-home__content .s-icon-list li + li { + margin-top: 40px; +} +@media (--wide-and-below) and (--medium-and-above) { + .s-home__content .s-icon-list { + --icon-size: 2em; + } +} diff --git a/utrc-cms/static/utrc-cms/css/src/_imports/trumps/s-icon-list.css b/utrc-cms/static/utrc-cms/css/src/_imports/trumps/s-icon-list.css new file mode 100644 index 00000000..6123753f --- /dev/null +++ b/utrc-cms/static/utrc-cms/css/src/_imports/trumps/s-icon-list.css @@ -0,0 +1,39 @@ +/* +Icon List + +A list with items that each has an icon. It should appear _more_ important than a regular list, but __not__ as important as a [Highlight List](https://confluence.tacc.utexas.edu/x/MYAjCQ). + +Markup: + + +Styleguide Trumps.Scopes.IconList +*/ +@import url("../../../../../../../../taccsite_cms/static/site_cms/css/src/_imports/tools/x-truncate.css"); + + + +.s-icon-list { + --icon-size: 3.5em; + + font-weight: var(--bold); + text-transform: uppercase; + + list-style: none; +} +.s-icon-list li { + @extend %x-truncate--one-line; +} +.s-icon-list .icon { + vertical-align: middle; + + font-size: var(--icon-size); +} diff --git a/utrc-cms/static/utrc-cms/css/src/template.home.css b/utrc-cms/static/utrc-cms/css/src/template.home.css new file mode 100644 index 00000000..951a390f --- /dev/null +++ b/utrc-cms/static/utrc-cms/css/src/template.home.css @@ -0,0 +1,9 @@ +/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */ + +/* Organize via ITCSS */ +/* SEE: https://confluence.tacc.utexas.edu/x/IAA9Cw */ + +/* TRUMPS */ +@import url("_imports/trumps/s-home.css"); +@import url("_imports/trumps/s-focus-list.css"); +@import url("_imports/trumps/s-icon-list.css"); diff --git a/utrc-cms/templates/home.html b/utrc-cms/templates/home.html new file mode 100644 index 00000000..e5d3787b --- /dev/null +++ b/utrc-cms/templates/home.html @@ -0,0 +1,10 @@ +{% extends "fullwidth.html" %} +{% load cms_tags staticfiles %} + +{% block assets_custom %} + {{ block.super }} + + +{% endblock assets_custom %} + +{% block page_type_class %}s-home{% endblock page_type_class %}