From fac8a15236a258be140b6624876ad0ba56e210ba Mon Sep 17 00:00:00 2001 From: Tobias Bengfort Date: Tue, 11 Oct 2022 20:39:20 +0200 Subject: [PATCH 1/2] define color for header/footer together with background --- djangoproject/scss/_dark-mode.scss | 28 ++-------------------------- djangoproject/scss/_style.scss | 26 +++++++++++--------------- 2 files changed, 13 insertions(+), 41 deletions(-) diff --git a/djangoproject/scss/_dark-mode.scss b/djangoproject/scss/_dark-mode.scss index e5f49a950..cf1a234fd 100644 --- a/djangoproject/scss/_dark-mode.scss +++ b/djangoproject/scss/_dark-mode.scss @@ -100,19 +100,7 @@ html[data-theme="light"], body .copy-banner { background: darken($green, 10%); - - p, - h1 { - color: $green-very-light; - - @include respond-min(768px) { - color: $green-very-light; - } - - a { - color: $green-very-light; - } - } + color: $green-very-light; } body table.django-supported-versions, @@ -200,19 +188,7 @@ html[data-theme="dark"] { .copy-banner { background: darken($green, 10%); - - p, - h1 { - color: $green-very-light; - - @include respond-min(768px) { - color: $green-very-light; - } - - a { - color: $green-very-light; - } - } + color: $green-very-light; } table.django-supported-versions, diff --git a/djangoproject/scss/_style.scss b/djangoproject/scss/_style.scss index 16f17c79b..57f78a446 100644 --- a/djangoproject/scss/_style.scss +++ b/djangoproject/scss/_style.scss @@ -434,6 +434,7 @@ blockquote { // Includes global navigation, logo, and tagline at top of document @include clearfix; background: $green-dark; + color: var(--menu); overflow: hidden; margin: 0; padding: 10px 0 6px; @@ -491,7 +492,6 @@ blockquote { .menu-button { @include font-size(20); - background: $green-dark; border-radius: 23px; color: var(--menu); cursor: pointer; @@ -542,8 +542,6 @@ blockquote { } [role="navigation"] { - background: $green-dark; - width: 100%; @include respond-min(768px) { @@ -584,7 +582,7 @@ blockquote { } a { - color: var(--menu); + color: inherit; display: block; padding: 20px 0px; text-decoration: none; @@ -652,6 +650,7 @@ blockquote { .copy-banner { // Large green callout at the top of the page background: var(--primary); + color: var(--secondary-accent); padding: 1px 10px; @include respond-min(768px) { @@ -662,7 +661,7 @@ blockquote { h1 { @include sans-serif; @include font-size(24); - color: var(--secondary-accent); + color: inherit; font-weight: 300; line-height: 1.3; padding: 1px 0 6px; @@ -677,14 +676,13 @@ blockquote { @include font-size(32); margin: .35em 0 .35em; - color: var(--secondary-accent); padding: 1px 0 6px; } a { font-weight: 300; - color: var(--secondary-accent); + color: inherit; } a.cta, .cta { @@ -861,6 +859,7 @@ blockquote { @include sans-serif; position: relative; background: var(--primary); + color: var(--menu); clear: both; margin-top: 0px; @@ -904,7 +903,6 @@ blockquote { h2 { @include font-size(16); border-top: 1px solid var(--hairline-color); - color: var(--menu); font-weight: 700; margin-top: 20px; padding: 30px 0 10px; @@ -927,7 +925,7 @@ blockquote { } a { - color: var(--menu); + color: inherit; text-decoration: none; &:hover, @@ -958,6 +956,10 @@ blockquote { margin-top: 20px; } } + + a { + color: inherit; + } } .logo { @@ -987,7 +989,6 @@ blockquote { .thanks { @include font-size(12); - color: var(--primary-accent); margin: 0; padding: 0; @include respond-min(768px) { @@ -1041,7 +1042,6 @@ blockquote { a.in-kind-donors { @include font-size(20); - color: var(--primary-accent); } a.threespot, a.andrevv { @@ -1080,10 +1080,6 @@ blockquote { padding-top: 30px; margin: 0; } - - a { - color: var(--primary-accent); - } } } From a2e4f8d7b07f0bd100ca0433b50d1d0f9291dd64 Mon Sep 17 00:00:00 2001 From: Tobias Bengfort Date: Tue, 11 Oct 2022 21:11:18 +0200 Subject: [PATCH 2/2] use the same colors for header and footer in light and dark theme --- djangoproject/scss/_dark-mode.scss | 30 ------------------------------ djangoproject/scss/_style.scss | 23 +++++++++++------------ 2 files changed, 11 insertions(+), 42 deletions(-) diff --git a/djangoproject/scss/_dark-mode.scss b/djangoproject/scss/_dark-mode.scss index cf1a234fd..e2da42297 100644 --- a/djangoproject/scss/_dark-mode.scss +++ b/djangoproject/scss/_dark-mode.scss @@ -92,17 +92,6 @@ html[data-theme="light"], --white-color: #{$black}; } - body .homepage { - .copy-banner { - background: var(--white-color); - } - } - - body .copy-banner { - background: darken($green, 10%); - color: $green-very-light; - } - body table.django-supported-versions, body table.django-unsupported-versions { a { @@ -135,10 +124,6 @@ html[data-theme="light"], /* Firefox 18- */ color: $gray-medium-l10; } - - body [role="contentinfo"] { - background: darken($green, 10%); - } } html[data-theme="dark"] { @@ -180,17 +165,6 @@ html[data-theme="dark"] { filter: invert(1); } - .homepage { - .copy-banner { - background: var(--white-color); - } - } - - .copy-banner { - background: darken($green, 10%); - color: $green-very-light; - } - table.django-supported-versions, table.django-unsupported-versions { a { @@ -223,10 +197,6 @@ html[data-theme="dark"] { /* Firefox 18- */ color: $gray-medium-l10; } - - [role="contentinfo"] { - background: darken($green, 10%); - } } .img-release { diff --git a/djangoproject/scss/_style.scss b/djangoproject/scss/_style.scss index 57f78a446..55d9258ea 100644 --- a/djangoproject/scss/_style.scss +++ b/djangoproject/scss/_style.scss @@ -434,7 +434,7 @@ blockquote { // Includes global navigation, logo, and tagline at top of document @include clearfix; background: $green-dark; - color: var(--menu); + color: $white; overflow: hidden; margin: 0; padding: 10px 0 6px; @@ -449,7 +449,7 @@ blockquote { .meta { @include font-size(13); - color: var(--primary); + color: $green-medium; font-weight: 700; width: auto; float: left; @@ -493,7 +493,6 @@ blockquote { .menu-button { @include font-size(20); border-radius: 23px; - color: var(--menu); cursor: pointer; display: block; float: right; @@ -509,7 +508,7 @@ blockquote { } &:active { - color: var(--primary); + color: $green-medium; } span { @@ -577,7 +576,7 @@ blockquote { } &.active a { - color: var(--primary); + color: $green-medium; } } @@ -588,7 +587,7 @@ blockquote { text-decoration: none; &:active, &:hover { - color: var(--secondary-accent); + color: $green-medium; } @include respond-min(768px) { @@ -602,7 +601,7 @@ blockquote { color: var(--white-color); &:active, &:hover { - color: var(--secondary-accent); + color: $green-medium; } @include respond-min(768px) { @@ -649,8 +648,8 @@ blockquote { } .copy-banner { // Large green callout at the top of the page - background: var(--primary); - color: var(--secondary-accent); + background: darken($green, 10%); + color: $white; padding: 1px 10px; @include respond-min(768px) { @@ -858,8 +857,8 @@ blockquote { @include clearfix; @include sans-serif; position: relative; - background: var(--primary); - color: var(--menu); + background: darken($green, 10%); + color: $white; clear: both; margin-top: 0px; @@ -938,9 +937,9 @@ blockquote { .footer { background: $green-dark; + color: $green-light; margin-top: 20px; padding: 10px 0 30px; - color: var(--primary-accent); .footer-logo { float: left;