From 4817dd21eede517cb795fa01eecf3d7de490495d Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Tue, 13 Apr 2021 18:02:27 -0500 Subject: [PATCH 01/32] GH-191: Add `THEME` that supports light/dark --- taccsite_cms/default_secrets.py | 15 ++++++++++++++- taccsite_cms/settings.py | 2 ++ .../css/src/_imports/branding_logos.css | 19 +++++++++++++++---- .../css/src/_imports/components/c-footer.css | 13 +++++++++++-- .../css/src/_imports/trumps/s-footer.css | 9 ++++++++- .../css/src/_imports/trumps/s-header.css | 18 ++++++++++++++---- .../css/src/_imports/settings/color.css | 3 ++- taccsite_cms/templates/base.html | 5 +++-- taccsite_cms/templates/header.html | 3 ++- taccsite_cms/templates/header_branding.html | 2 +- 10 files changed, 72 insertions(+), 17 deletions(-) diff --git a/taccsite_cms/default_secrets.py b/taccsite_cms/default_secrets.py index 131a90510..b71cfeee2 100644 --- a/taccsite_cms/default_secrets.py +++ b/taccsite_cms/default_secrets.py @@ -156,10 +156,23 @@ } ######################## -# BRANDING & LOGOS & FAVICON +# BRANDING ######################## # TODO: GH-59: Use Dict Not Array for Branding Settings +# The theme of the CMS and the header + +""" +Optional theming of CMS (to support deviant branding or dark logos in a pinch) + +Options: + +- 'dark' (standard) +- 'light' (requires Design approval) +""" + +_THEME = 'dark' + # Branding settings for portal and navigation. """ diff --git a/taccsite_cms/settings.py b/taccsite_cms/settings.py index 417ae44a3..d8bc396cb 100644 --- a/taccsite_cms/settings.py +++ b/taccsite_cms/settings.py @@ -90,6 +90,7 @@ def getsecrets(): ALLOWED_HOSTS = current_secrets._ALLOWED_HOSTS # Custom Branding. +THEME = current_secrets._THEME BRANDING = current_secrets._BRANDING LOGO = current_secrets._LOGO FAVICON = current_secrets._FAVICON @@ -475,6 +476,7 @@ def get_subdirs_as_module_names(path): # Exported settings. SETTINGS_EXPORT = [ + 'THEME', 'DEBUG', 'BRANDING', 'LOGO', diff --git a/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css b/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css index 3024fdef0..f6ac5fceb 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css @@ -23,16 +23,27 @@ height: 49px; - background-color: rgb(51, 51, 51); - color: #fff; - border-bottom: 1px solid #aaa; + background-color: var(--bkgd-color); + color: var(--text-color); + border-bottom: 1px solid var(--line-color); +} +:root.t-dark .branding-header, +:root:not([class^="t-"]) .branding-header { + --text-color: var(--global-color-primary--xx-light); + --bkgd-color: var(--global-color-primary--xx-dark); + --line-color: var(--global-color-primary--normal); +} +:root.t-light .branding-header { + --text-color: var(--global-color-primary--x-dark); + --bkgd-color: var(--global-color-primary--x-light); + --line-color: var(--global-color-primary--normal); } .branding-seperator { width: 1px; height: 100%; max-height: var(--branding-logo-height); - border-left: solid 1px #fff; + border-left: solid 1px var(--line-color); margin: 0 15px; vertical-align: middle; } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-footer.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-footer.css index 276afe83e..7bd0d148e 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-footer.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-footer.css @@ -28,12 +28,21 @@ Styleguide Components.Footer padding-top: 20px; padding-bottom: 20px; - color: rgb(255, 255, 255); - background-color: rgb(51, 51, 51); + color: var(--text-color); + background-color: var(--bkgd-color); font-size: 12px; text-align: center; } +:root.t-dark .c-footer, +:root:not([class^="t-"]) .c-footer { + --text-color: var(--global-color-primary--xx-light); + --bkgd-color: var(--global-color-primary--xx-dark); +} +:root.t-light .c-footer { + --text-color: var(--global-color-primary--x-dark); + --bkgd-color: var(--global-color-primary--x-light); +} /* TODO: Use "custom media query" for each standard Bootstrap media query */ @media only screen and (max-width: 640px) { .c-footer { diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-footer.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-footer.css index 9ad842679..4fab35885 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-footer.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-footer.css @@ -11,6 +11,13 @@ Styleguide Scope.Footer .s-footer > p:last-of-type { margin: 0; } +:root.t-dark .s-footer, +:root:not([class^="t-"]) .s-footer { + --link-color: var(--global-color-primary--light); +} +:root.t-light .s-footer { + --link-color: var(--global-color-primary--xxx-dark); +} .s-footer a { - color: #cccccc; + color: var(--link-color); } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css index 590cd03c6..8bd0dfbb7 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css @@ -22,8 +22,6 @@ Styleguide Trumps.Scopes.Header - On any other CMS, `1rem` = `16px` (browser default). */ .s-header { - --text-color: rgb(255, 255, 255); - font-size: 16px; /* NO-R/EM: Overwrite `bootstrap.3.3.7.css` */ /* FAQ: Asssigning this font is only necessary for the User Guide, @@ -36,6 +34,18 @@ Styleguide Trumps.Scopes.Header -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } +:root.t-dark .s-header, +:root:not([class^="t-"]) .s-header { + --text-color: var(--global-color-primary--xx-light); + --bkgd-color: var(--global-color-primary--xx-dark); +} +:root.t-light .s-header { + --text-color: var(--global-color-primary--x-dark); + --bkgd-color: var(--global-color-primary--x-light); + + /* FAQ: Only the light theme gets a border */ + border-bottom: 1px solid var(--global-color-primary--normal); +} @@ -78,7 +88,7 @@ Styleguide Trumps.Scopes.Header --nav-padding-vert: 5px; --nav-padding-horz: calc(16px + 20px); - background-color: rgb(51, 51, 51); + background-color: var(--bkgd-color); padding: var(--nav-padding-vert) var(--nav-padding-horz); } @@ -140,7 +150,7 @@ Styleguide Trumps.Scopes.Header /* FAQ: Not `height`, cuz `.s-search-bar` (via `.form-inline`) is flexbox */ align-self: stretch; - background-color: rgb(255,255,255); + background-color: var(--bkgd-color); margin-left: 12px; } diff --git a/taccsite_cms/static/site_shared/css/src/_imports/settings/color.css b/taccsite_cms/static/site_shared/css/src/_imports/settings/color.css index ea98b62b4..cb1e06cf3 100644 --- a/taccsite_cms/static/site_shared/css/src/_imports/settings/color.css +++ b/taccsite_cms/static/site_shared/css/src/_imports/settings/color.css @@ -23,7 +23,8 @@ --global-color-primary--normal: #AFAFAF; --global-color-primary--dark: #707070; --global-color-primary--x-dark: #484848; - --global-color-primary--xx-dark: #222222; /* Unused. For header background, which is styled by CMS styles */ + --global-color-primary--xx-dark: #222222; + --global-color-primary--xxx-dark: #000000; /* Distinct Hues */ --global-color-accent--normal: #9D85EF; diff --git a/taccsite_cms/templates/base.html b/taccsite_cms/templates/base.html index 0bf5a26b0..6f4b11f10 100755 --- a/taccsite_cms/templates/base.html +++ b/taccsite_cms/templates/base.html @@ -1,10 +1,11 @@ -{% load cms_tags staticfiles sekizai_tags cache i18n %} +{% load cms_tags staticfiles sekizai_tags cache i18n custom_portal_settings %} + {# CAVEAT: Theme class MUST be first (to avoid verbose class and CSS) #} + class="t-{{settings.THEME}} {% block template_class %}{% endblock template_class %}"> {% if settings.FEATURES.blog %} {# FAQ: Conditional includes are intentionally verbose #} diff --git a/taccsite_cms/templates/header.html b/taccsite_cms/templates/header.html index d02a41c53..b14da172f 100644 --- a/taccsite_cms/templates/header.html +++ b/taccsite_cms/templates/header.html @@ -1,12 +1,13 @@ {# WARNING: Some markup is duplicated in other repositories #} {# SEE: https://confluence.tacc.utexas.edu/x/LoCnCQ #} {# FAQ: Extra lines exist to ease CMS/Portal/Guide template comparison #} +{% load custom_portal_settings %} {% include "header_branding.html" %} -