Merge branch 'main' into quick/support-plugins-unadulterated-by-boots…

…trap--for-main

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.

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 */

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;

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;
 

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,15 +25,24 @@ 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:
 
 - [BEM with Namespaces: Scope Namespaces](https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/#scope-namespaces-s-)
 
 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:

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:
+<!-- Major Navigation -->
+<!-- FAQ: Use this major navigation markup for global breadcrumbs -->
+<!-- SEE: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#usage_notes -->
+<nav class="s-breadcrumbs">
+  <ol>
+      <li><a href="/"><span>Home</span></a></li>
+      <li><a href="/"><span>Science</span></a></li>
+      <li><span>Publications</span></li>
+  </ol>
+</nav>
+<!-- Minor Navigation -->
+<ol class="s-breadcrumbs">
+    <li><a href="/"><span>Home</span></a></li>
+    <li><a href="/"><span>Science</span></a></li>
+    <li><span>Publications</span></li>
+</ol>
+
+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);
+}

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);
 }

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");

taccsite_cms/templates/base.html

@@ -67,6 +67,7 @@
       <!-- This block used regardless. -->
       {% block content %}
       <div class="container">
+        {% include "nav_cms_breadcrumbs.html" %}
         {% placeholder "content" %}
       </div>
       {% endblock content %}

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 #}
+  <li itemscope itemprop="itemListElement"
+      itemtype="https://schema.org/ListItem">
+
+  {% if not forloop.last %}
+
+    <a href="{{ ance.get_absolute_url }}" itemprop="item">
+      <span itemprop="name">{{ ance.get_menu_title }}</span>
+    </a>
+
+  {% else %}
+
+    <span itemprop="name">{{ ance.get_menu_title }}</span>
+
+  {% endif %}
+
+    <meta itemprop="position" content="{{ forloop.counter }}" />
+  </li>
+
+{% endfor %}

taccsite_cms/templates/nav_cms_breadcrumbs.html

@@ -0,0 +1,16 @@
+{# @var className #}
+{% load menu_tags %}
+
+<nav class="s-breadcrumbs  {{className}}">
+
+  {# To support structured data, item* attributes are used #}
+  {# SEE: https://confluence.tacc.utexas.edu/x/5yMFDg #}
+  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
+
+    {# To include pages marked to not show in menu, attributes are added #}
+    {# SEE: https://docs.django-cms.org/en/release-3.6.x/reference/navigation.html#show-breadcrumb #}
+    {% show_breadcrumb 0 "menu/breadcrumb.html" 0 %}
+
+  </ol>
+
+</nav>

taccsite_cms/templates/standard.html

@@ -0,0 +1,4 @@
+{% extends "base.html" %}
+{% load cms_tags %}
+
+{% block title %}{% page_attribute "page_title" %}{% endblock title %}

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 %}
 <div class="container  s-document  s-style-guide">
   {% block guide %}
+    {% include "nav_cms_breadcrumbs.html" %}
     {% placeholder "content" %}
   {% endblock guide %}
 </div>