From b31c32fd61178d54c1550cd247e260d6021e8e9b Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 9 Jun 2022 22:25:23 +0200 Subject: [Glitch] Change brand color and logotypes Port SCSS changes from 45aa5781ce611ea411e34e3b18358a9fe15f67ce to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/styles/about.scss | 2 +- app/javascript/flavours/glitch/styles/branding.scss | 3 +++ app/javascript/flavours/glitch/styles/components/columns.scss | 1 - app/javascript/flavours/glitch/styles/containers.scss | 5 ++--- app/javascript/flavours/glitch/styles/footer.scss | 8 ++++---- app/javascript/flavours/glitch/styles/index.scss | 1 + app/javascript/flavours/glitch/styles/variables.scss | 2 +- 7 files changed, 12 insertions(+), 10 deletions(-) create mode 100644 app/javascript/flavours/glitch/styles/branding.scss (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index 2cc43afec..1843129a0 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/about.scss @@ -690,7 +690,7 @@ $small-breakpoint: 960px; align-items: center; padding: 50px; - svg { + .logo { fill: $primary-text-color; height: 52px; } diff --git a/app/javascript/flavours/glitch/styles/branding.scss b/app/javascript/flavours/glitch/styles/branding.scss new file mode 100644 index 000000000..d1bddc68b --- /dev/null +++ b/app/javascript/flavours/glitch/styles/branding.scss @@ -0,0 +1,3 @@ +.logo { + color: $primary-text-color; +} diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index d52ecf02c..8d51ef816 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -822,7 +822,6 @@ padding: 40px; .logo { - fill: $primary-text-color; width: 50px; margin: 0 auto; margin-bottom: 40px; diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index 98a1288eb..2bc55a1d7 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -20,8 +20,7 @@ justify-content: center; align-items: center; - svg { - fill: $primary-text-color; + .logo { height: 42px; margin-right: 10px; } @@ -322,7 +321,7 @@ display: block; padding: 15px; - svg { + .logo { display: block; height: 18px; width: auto; diff --git a/app/javascript/flavours/glitch/styles/footer.scss b/app/javascript/flavours/glitch/styles/footer.scss index 073ebda7e..0c3e42033 100644 --- a/app/javascript/flavours/glitch/styles/footer.scss +++ b/app/javascript/flavours/glitch/styles/footer.scss @@ -132,19 +132,19 @@ } .brand { - svg { + .logo { display: block; height: 36px; width: auto; margin: 0 auto; - fill: lighten($ui-base-color, 34%); + color: lighten($ui-base-color, 34%); } &:hover, &:focus, &:active { - svg { - fill: lighten($ui-base-color, 38%); + .logo { + color: lighten($ui-base-color, 38%); } } } diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss index af73feb89..f808773f3 100644 --- a/app/javascript/flavours/glitch/styles/index.scss +++ b/app/javascript/flavours/glitch/styles/index.scss @@ -6,6 +6,7 @@ @import 'reset'; @import 'basics'; +@import 'branding'; @import 'containers'; @import 'lists'; @import 'modal'; diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index 6e242281b..c2da24184 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -12,7 +12,7 @@ $red-bookmark: $warning-red; $classic-base-color: #282c37; // Midnight Express $classic-primary-color: #9baec8; // Echo Blue $classic-secondary-color: #d9e1e8; // Pattens Blue -$classic-highlight-color: #2b90d9; // Summer Sky +$classic-highlight-color: #6364ff; // Brand purple // Variables for defaults in UI $base-shadow-color: $black !default; -- cgit From f938afee7229d7218559069c3dd968f131b6219c Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 10 Jun 2022 17:34:59 +0200 Subject: [Glitch] Fix logo gradient not working on some Safari and Blink-based browsers Port 37cd984acfdd206e85c50a851c4daedc2c87deb3 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/styles/basics.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss index be0e1b860..a00b2936f 100644 --- a/app/javascript/flavours/glitch/styles/basics.scss +++ b/app/javascript/flavours/glitch/styles/basics.scss @@ -181,7 +181,17 @@ button { } .logo-resources { - display: none; + // Not using display: none because of https://bugs.chromium.org/p/chromium/issues/detail?id=258029 + visibility: hidden; + user-select: none; + pointer-events: none; + width: 0; + height: 0; + overflow: hidden; + position: absolute; + top: 0; + left: 0; + z-index: -1000; } // NoScript adds a __ns__pop2top class to the full ancestry of blocked elements, -- cgit