diff --git a/taccsite_cms/default_secrets.py b/taccsite_cms/default_secrets.py index ef3fd6353..a8a26fca4 100644 --- a/taccsite_cms/default_secrets.py +++ b/taccsite_cms/default_secrets.py @@ -61,10 +61,15 @@ # FAQ: First template is default template # REF: http://docs.django-cms.org/en/latest/how_to/install.html#templates - # Default template with standard and custom (per-project) choices - # NOTE: To have per-project styles, the custom default template is required + # For standard pages (has Container and Breadcrumbs) + ('standard.html', 'Standard'), + # For content that spans full window width (no Container nor Breadcrumbs) ('fullwidth.html', 'Fullwidth'), - ('example-cms/templates/fullwidth.html', 'Fullwidth (Custom Example)'), + + # Any project that needs per-project styles must have a custom template + # FAQ: This is a tedious solution until a cleaner solution is devised + # TODO: Automate per-project asset load and update exisitng sites as needed + # ('name-of-project/templates/fullwidth.html', 'Fullwidth (Custom)'), # NOTE: If project later uses custom template, then for that project: # 1. Rename standard default template to "DEPRECATED […]". # 2. Update all pages to use the custom default template. 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 adc89fb17..6f575d35e 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 @@ -91,6 +91,8 @@ Styleguide Objects.Section } /* Modifers: Style: Dark & Light */ +/* HELP: How can we change style of `o-section` content without overlap? */ +/* SEE: https://confluence.tacc.utexas.edu/x/DyUFDg */ .o-section--style-dark, .o-section--style-dark::before { @@ -117,7 +119,7 @@ Styleguide Objects.Section /* 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) { - border-top: var(--hr-height) solid var(--global-color-primary--xx-light); + border-top: var(--hr-height) solid var(--global-color-primary--normal); } /* Modifers: Style: (Fake) Endless Background */ 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 629ae0609..c7a7c3bd5 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 @@ -21,7 +21,7 @@ --global-color-primary--xx-light: #FFFFFF; --global-color-primary--x-light: #F4F4F4; - --global-color-primary--x-light-rgb: 244, 244, 244; + --global-color-primary--x-light-rgb: 244, 244, 244; --global-color-primary--light: #C6C6C6; --global-color-primary--normal: #AFAFAF; --global-color-primary--dark: #707070; 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 bb7ac65de..e45477bc2 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 @@ -47,7 +47,7 @@ Styleguide Settings.CustomProperties.Font --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--x-large: 2.6rem; --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/README.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/README.css index 1f86153be..1068295b7 100755 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/README.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/README.css @@ -3,7 +3,7 @@ /* Trumps -Trump styles exist to overwrite other styles. They are added as necessary. Examples use cases are third-party styles, styles used only by JavaScript, modules that are not meant to extended as desired. +Trump styles exist to overwrite other styles. They are added as necessary. Examples use cases are third-party styles, styles used only by JavaScript, modules that are not meant to be extended. Reference: @@ -25,7 +25,16 @@ Styleguide Trumps /* Scopes -Scope styles are overrides and styles that are scoped to a specific area. These are meant to be used sparingly. Examples of scopes are styles for third-party markup, WYSIWIG editor tags, form elements, components with a forced relationship. +Scope styles are overrides and styles that are scoped to a specific area. These are meant to be used sparingly. Examples of scopes are styles for: +- third-party markup, e.g.: + - social media widget + - external authentication form + - internal Bootstrap-dependent markup +- enforcing internal markup (e.g. breadcrumbs, form elements, document pages) +- WYSIWIG editor tags (e.g. CMS WYSIWIG content entry) +- coupled components (i.e. components interwoven in unique situations), e.g.: + - Frontera homepage before all styling used plugins + - article previews within an article list Reference: @@ -33,7 +42,7 @@ Reference: Guidelines: -- Scopes are pretty rare, evaluate before creating. +- Scopes should be rare; evaluate before creating. - A consistent way to author these in nested inside `.s-* {}`. Rules: diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-breadcrumbs.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-breadcrumbs.css new file mode 100644 index 000000000..a85f0ac69 --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-breadcrumbs.css @@ -0,0 +1,69 @@ +/* +Breadcrumbs + +A list of links to ancestor navigation (pages or sections that are a parent, grandparent, et cetera of the current page or section) and the current page or section itself. + +Notice: A scope class is used to enforce appropriate semantic HTML. + +Markup: + + + + + +
    +
  1. Home
    2. +
  2. Science
    3. +
  3. Publications
    4. +
+ +Styleguide Trumps.Scopes.Breadcrumbs +*/ +@import url("_imports/tools/x-truncate.css"); + + + + + +/* Base i.e. Container */ + +nav.s-breadcrumbs { + padding-top: 15px; + + font-size: var(--global-font-size--x-small); + + text-transform: uppercase; +} + + + +/* Elements i.e. Content */ + +/* To undo default list styles ONLY for major breadcrumbs */ +/* FAQ: Minor breadcrumbs have not been designed, so we should not unstyle it */ +nav.s-breadcrumbs ol { + list-style: none; /* overwrite browser styles */ + padding-left: 0; /* overwrite html-elements.css */ + + font-weight: var(--global-font-weight--medium); +} + +ol.s-breadcrumbs li, +nav.s-breadcrumbs ol li { + display: inline-block; +} + +ol.s-breadcrumbs li + li::before, +nav.s-breadcrumbs ol li + li::before { + content: ' > '; +} + +nav.s-breadcrumbs ol li:last-child span { + font-weight: var(--bold); +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-style-guide.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-style-guide.css index df7838c98..7d251d678 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-style-guide.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-style-guide.css @@ -9,11 +9,6 @@ A style guide. This is intended for: Styleguide Trumps.Scopes.StyleGuide */ -.s-style-guide { - margin-top: var(--global-space--large); - margin-bottom: var(--global-space--x-large); -} - @@ -24,16 +19,34 @@ Styleguide Trumps.Scopes.StyleGuide /* ELEMENTS: Content Sectioning */ -.s-style-guide section { - clear: both; -} -.s-style-guide section:not(section section) { - border-top: var(--global-border--x-thick); - padding-top: var(--global-space--x-large); +/* NOTE: Similar to `s-document` "ELEMENTS: Content Sectioning" */ + +/* To give little margin above isolated headings for sections */ +/* FAQ: Headings with no prior sibling need spacing before the heading */ +/* FAQ: Headings that begin `o-section` already have spacing from `o-section` */ +.s-style-guide section:not(.o-section) > h1:first-child, +.s-style-guide section:not(.o-section) > h2:first-child, +.s-style-guide section:not(.o-section) > h3:first-child, +.s-style-guide section:not(.o-section) > h4:first-child, +.s-style-guide section:not(.o-section) > h5:first-child, +.s-style-guide section:not(.o-section) > h6:first-child, +/* FAQ: Headings after non-headings need spacing before the heading */ +/* FAQ: Headings after headings already have spacing from prior heading */ +.s-style-guide section > :not(h1, h2, h3, h4, h5, h6) + h1, +.s-style-guide section > :not(h1, h2, h3, h4, h5, h6) + h2, +.s-style-guide section > :not(h1, h2, h3, h4, h5, h6) + h3, +.s-style-guide section > :not(h1, h2, h3, h4, h5, h6) + h4, +.s-style-guide section > :not(h1, h2, h3, h4, h5, h6) + h5, +.s-style-guide section > :not(h1, h2, h3, h4, h5, h6) + h6 { margin-top: var(--global-space--x-large); } -.s-style-guide section section { - border-top: var(--global-border--normal); - padding-top: var(--global-space--normal); - margin-top: var(--global-space--normal); + +/* To give much margin below all headings for sections */ +.s-style-guide section > h1, +.s-style-guide section > h2, +.s-style-guide section > h3, +.s-style-guide section > h4, +.s-style-guide section > h5, +.s-style-guide section > h6 { + margin-bottom: var(--global-space--normal); } diff --git a/taccsite_cms/static/site_cms/css/src/site.css b/taccsite_cms/static/site_cms/css/src/site.css index 3a99ab18f..03103175e 100644 --- a/taccsite_cms/static/site_cms/css/src/site.css +++ b/taccsite_cms/static/site_cms/css/src/site.css @@ -36,5 +36,6 @@ @import url("_imports/components/bootstrap.container.css"); /* TRUMPS */ +@import url("_imports/trumps/s-breadcrumbs.css"); @import url("_imports/trumps/s-footer.css"); @import url("_imports/trumps/u-empty.css"); diff --git a/taccsite_cms/templates/base.html b/taccsite_cms/templates/base.html index 0bf5a26b0..012391934 100755 --- a/taccsite_cms/templates/base.html +++ b/taccsite_cms/templates/base.html @@ -67,6 +67,7 @@ {% block content %}
+ {% include "nav_cms_breadcrumbs.html" %} {% placeholder "content" %}
{% endblock content %} diff --git a/taccsite_cms/templates/menu/breadcrumb.html b/taccsite_cms/templates/menu/breadcrumb.html new file mode 100644 index 000000000..57ad95c6c --- /dev/null +++ b/taccsite_cms/templates/menu/breadcrumb.html @@ -0,0 +1,24 @@ +{# SEE: https://github.com/django-cms/django-cms/blob/release/3.6.x/menus/templates/menu/breadcrumb.html #} +{% for ance in ancestors %} + + {# To support structured data, item* attributes are used #} + {# SEE: https://confluence.tacc.utexas.edu/x/5yMFDg #} +
  • + + {% if not forloop.last %} + + + {{ ance.get_menu_title }} + + + {% else %} + + {{ ance.get_menu_title }} + + {% endif %} + + +
    • + +{% endfor %} diff --git a/taccsite_cms/templates/nav_cms_breadcrumbs.html b/taccsite_cms/templates/nav_cms_breadcrumbs.html new file mode 100644 index 000000000..9c6aa0470 --- /dev/null +++ b/taccsite_cms/templates/nav_cms_breadcrumbs.html @@ -0,0 +1,16 @@ +{# @var className #} +{% load menu_tags %} + + diff --git a/taccsite_cms/templates/standard.html b/taccsite_cms/templates/standard.html new file mode 100644 index 000000000..1498c1447 --- /dev/null +++ b/taccsite_cms/templates/standard.html @@ -0,0 +1,4 @@ +{% extends "base.html" %} +{% load cms_tags %} + +{% block title %}{% page_attribute "page_title" %}{% endblock title %} diff --git a/taccsite_cms/templates/style_guide.html b/taccsite_cms/templates/style_guide.html index 1f8c9b117..dbd3e559b 100644 --- a/taccsite_cms/templates/style_guide.html +++ b/taccsite_cms/templates/style_guide.html @@ -1,4 +1,4 @@ -{% extends "fullwidth.html" %} +{% extends "standard.html" %} {% load cms_tags staticfiles %} {% block assets_custom %} @@ -13,6 +13,7 @@ {% block content %}
    {% block guide %} + {% include "nav_cms_breadcrumbs.html" %} {% placeholder "content" %} {% endblock guide %}