From b72f45765c829cacecfa26e2a2d5ecd8a3e50043 Mon Sep 17 00:00:00 2001 From: hedy Date: Fri, 22 Mar 2024 15:48:11 +0800 Subject: Use proper logos and better positioning in the footers - Switch from CSS filtering to actual logos with white text. - Adjust positioning to align all text in the logos with baseline and ensure they're center aligned with a uniform side spacing. --- pydis_site/static/css/base/base.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css index cc8d13cb..bb05d2c4 100644 --- a/pydis_site/static/css/base/base.css +++ b/pydis_site/static/css/base/base.css @@ -88,10 +88,10 @@ main.site-content { } #linode-logo { - padding-left: 15px; - background: url(https://www.linode.com/wp-content/uploads/2021/01/Linode-Logo-Black.svg) no-repeat center; - filter: invert(1) grayscale(1); - background-size: 60px; + padding-left: 5px; + background: url(/static/images/sponsors_dark/linode_text.png) no-repeat center; + background-size: 50px; + background-position: 2px -7px; color: #00000000; } @@ -99,16 +99,16 @@ main.site-content { padding-left: 15px; background: url(/static/images/sponsors/netcup-white.svg) no-repeat center; background-size: 60px; - background-position: 0px 3px; + background-position: 2px 2px; color: #00000000; } #django-logo { padding-bottom: 2px; - background: url(https://static.djangoproject.com/img/logos/django-logo-negative.svg) no-repeat center; - filter: grayscale(1) invert(0.09); - background-size: 52px 25.5px; - background-position: -2px -1px; + padding-left: 5px; + background: url(/static/images/events/logos_dark/django.png) no-repeat center; + background-size: 56px; + background-position: -1px -1px; color: #00000000; } -- cgit v1.2.3 From b4bb7a09bd1460b4b2dbcdcdf44f427556c6fac8 Mon Sep 17 00:00:00 2001 From: hedy Date: Tue, 26 Mar 2024 09:24:39 +0800 Subject: Footer: Adjust baseline positioning to prioritize windows There doesn't seem to be a way (say relative units, etc) to make it look good on both worlds. We'll prioritize windows for now since most of our users come from there. --- pydis_site/static/css/base/base.css | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css index 1f78b9eb..aed93db7 100644 --- a/pydis_site/static/css/base/base.css +++ b/pydis_site/static/css/base/base.css @@ -89,26 +89,27 @@ main.site-content { #linode-logo { padding-left: 5px; - background: url(/static/images/sponsors_dark/linode_text.png) no-repeat center; + background: url(/static/images/sponsors_dark/linode_text.png) no-repeat; background-size: 50px; - background-position: 2px -7px; + background-position: center -5px; color: #00000000; } #netcup-logo { padding-left: 15px; + padding-bottom: 3px; background: url(/static/images/sponsors/netcup-white.svg) no-repeat center; background-size: 60px; - background-position: 2px 2px; + background-position: 2px 4px; color: #00000000; } #django-logo { - padding-bottom: 2px; + padding-bottom: 4px; padding-left: 5px; background: url(/static/images/events/logos_dark/django.png) no-repeat center; background-size: 56px; - background-position: -1px -1px; + background-position: -1px 1px; color: #00000000; } @@ -117,7 +118,7 @@ main.site-content { height: 20px; background: url(https://bulma.io/assets/brand/Bulma%20Logo%20White.png) no-repeat center; background-size: 60px; - background-position: 0px 3px; + background-position: 2px 4px; color: #00000000; } -- cgit v1.2.3 From 9ea7c1bfa1bc86924d2520d57544fa2dd8b37ca1 Mon Sep 17 00:00:00 2001 From: hedy Date: Tue, 26 Mar 2024 09:44:29 +0800 Subject: Footer: Crop linode image to fit text and adjust horizontal padding This ensures no vertical positioning for this image is required because the image is cropped to fit the text. --- pydis_site/static/css/base/base.css | 6 +++--- .../static/images/sponsors_dark/linode_text.png | Bin 7479 -> 7407 bytes 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css index aed93db7..89a69cc7 100644 --- a/pydis_site/static/css/base/base.css +++ b/pydis_site/static/css/base/base.css @@ -89,9 +89,9 @@ main.site-content { #linode-logo { padding-left: 5px; - background: url(/static/images/sponsors_dark/linode_text.png) no-repeat; - background-size: 50px; - background-position: center -5px; + background: url(/static/images/sponsors_dark/linode_text.png) no-repeat center; + background-size: 49px; + background-position: 2px center; color: #00000000; } diff --git a/pydis_site/static/images/sponsors_dark/linode_text.png b/pydis_site/static/images/sponsors_dark/linode_text.png index 42775aa2..908891ec 100644 Binary files a/pydis_site/static/images/sponsors_dark/linode_text.png and b/pydis_site/static/images/sponsors_dark/linode_text.png differ -- cgit v1.2.3 From 88a0c2ebf178eced59bfdfc132ebc84785ecaf14 Mon Sep 17 00:00:00 2001 From: hedy Date: Tue, 26 Mar 2024 09:57:03 +0800 Subject: Footer: Use text-only Bulma logo for automatic baseline alignment Don't mind me, just being a little overly excited with this one as this is my most ingenius idea yet! --- pydis_site/static/css/base/base.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css index 89a69cc7..593c158b 100644 --- a/pydis_site/static/css/base/base.css +++ b/pydis_site/static/css/base/base.css @@ -114,11 +114,11 @@ main.site-content { } #bulma-logo { - padding-left: 18px; + padding-left: 8px; height: 20px; - background: url(https://bulma.io/assets/brand/Bulma%20Logo%20White.png) no-repeat center; - background-size: 60px; - background-position: 2px 4px; + background: url(https://bulma.io/assets/brand/Bulma%20Wordmark%20White.png) no-repeat center; + background-size: 47px; + background-position: center center; color: #00000000; } -- cgit v1.2.3