From d8580e196c20cc62a77d0ce9de3859f2dc1d3b34 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 20 Aug 2021 12:11:26 -0500 Subject: [PATCH 1/6] =?UTF-8?q?Quick:=20Fix=20wrong=20global=20font=20size?= =?UTF-8?q?=202.4=20=E2=86=92=202.6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- taccsite_cms/static/site_cms/css/src/_imports/settings/font.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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; From 6d9c771460422179b2c0ae3fbfa220bf9d55be45 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 20 Aug 2021 18:07:25 -0500 Subject: [PATCH 2/6] =?UTF-8?q?Quick:=20Add=20note=20and=20doc=20ref=20for?= =?UTF-8?q?=20`.o-section=E2=80=A6=20a`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../static/site_cms/css/src/_imports/objects/o-section.css | 2 ++ 1 file changed, 2 insertions(+) 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..02d7980cd 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 { From 7f32867aa2693aacca77629f94e5a479789983e9 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Mon, 23 Aug 2021 15:06:07 -0500 Subject: [PATCH 3/6] Quick: Make borders visible between light sections SEE: https://xd.adobe.com/view/90e6b252-0293-4243-7748-11d94a0763d0-e6d7/screen/ff0348ff-577d-450a-bef0-5326f3f7c705/specs/ --- .../static/site_cms/css/src/_imports/objects/o-section.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 02d7980cd..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 @@ -119,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 */ From 96e20cd37661a93a3d933c0205701cdebdd3fc9a Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Mon, 23 Aug 2021 15:10:01 -0500 Subject: [PATCH 4/6] Noop: Fix indentation on standard color --- .../static/site_cms/css/src/_imports/settings/color.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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; From 92e577cdaf86bc7473b72d1ef7409e0d71917571 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Mon, 23 Aug 2021 16:52:25 -0500 Subject: [PATCH 5/6] Quick: GH-253: Tweak Style Guide CSS - Do not rely on `
` tags. - Space content via heading tags (like `s-document`). - Include breadcrumbs (and extend standard). --- .../css/src/_imports/trumps/s-style-guide.css | 24 ++++++++++--------- taccsite_cms/templates/style_guide.html | 3 ++- 2 files changed, 15 insertions(+), 12 deletions(-) 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..192890be2 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 @@ -24,16 +24,18 @@ 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); - margin-top: var(--global-space--x-large); +/* Mirrors `s-document` "ELEMENTS: Content Sectioning" */ + +.s-style-guide h2 { + margin: var(--global-space--large) 0 var(--global-space--normal); } -.s-style-guide section section { - border-top: var(--global-border--normal); - padding-top: var(--global-space--normal); - margin-top: var(--global-space--normal); + +.s-style-guide h3 { + margin-bottom: var(--global-space--normal); } + +/* Extra space above lesser headings */ +.s-style-guide h3 { margin-top: 1em; } +.s-style-guide h4, +.s-style-guide h5, +.s-style-guide h6 { margin-top: 1.25em; } 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 %}
From 61f09681e8104ccfdc58d40554a2dedfaa9a12ba Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Mon, 23 Aug 2021 17:29:38 -0500 Subject: [PATCH 6/6] Quick: GH-253: Refine Style Guide CSS - Use complex, but consistent rules. - Avoid affecting headings within plugins. --- .../css/src/_imports/trumps/s-style-guide.css | 43 ++++++++++++------- 1 file changed, 27 insertions(+), 16 deletions(-) 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 192890be2..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,18 +19,34 @@ Styleguide Trumps.Scopes.StyleGuide /* ELEMENTS: Content Sectioning */ -/* Mirrors `s-document` "ELEMENTS: Content Sectioning" */ - -.s-style-guide h2 { - margin: var(--global-space--large) 0 var(--global-space--normal); +/* 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 h3 { +/* 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); } - -/* Extra space above lesser headings */ -.s-style-guide h3 { margin-top: 1em; } -.s-style-guide h4, -.s-style-guide h5, -.s-style-guide h6 { margin-top: 1.25em; }