From 7b5435a9855111dd34422ff0067c1955c43875eb Mon Sep 17 00:00:00 2001 From: hedy Date: Fri, 5 Jan 2024 17:31:11 +0800 Subject: Dark: Fix hero colors on homepage We can now use `[data-theme="dark"]` selector in CSS to defined styles specifically for dark mode. This follows common web dev patterns and gives little overhead. - Hero - Added `wave_black` SVG which copies `wave_white` as is but uses the site's dark mode background color. --- pydis_site/static/css/home/index.css | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'pydis_site/static/css/home/index.css') diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index e117a35b..23e27be1 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -91,6 +91,11 @@ h1 { height: 26px; z-index: 3; } +[data-theme="dark"] { + #bottom-wave { + background: url(../../images/waves/wave_black.svg) repeat-x !important; + } +} @keyframes wave { 0% { @@ -176,6 +181,11 @@ h1 { #projects .card:hover .card-header-title { color: #363636; } +[data-theme="dark"] { + #projects .card:hover .card-header-title { + color: #CAD6FF; + } +} #projects .card-content { padding-top: 8px; -- cgit v1.2.3 From 9d606d4bba3422cc4ee31f53b2e51b6eef80fc07 Mon Sep 17 00:00:00 2001 From: hedy Date: Fri, 5 Jan 2024 19:53:08 +0800 Subject: Dark: Inline selectors for the hero bottom wave --- pydis_site/static/css/home/index.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'pydis_site/static/css/home/index.css') diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index 23e27be1..0214a762 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -91,10 +91,9 @@ h1 { height: 26px; z-index: 3; } -[data-theme="dark"] { - #bottom-wave { - background: url(../../images/waves/wave_black.svg) repeat-x !important; - } + +[data-theme="dark"] #bottom-wave { + background: url(../../images/waves/wave_black.svg) repeat-x !important; } @keyframes wave { -- cgit v1.2.3 From 7fd2412b4d21bbdbc8df2a73b23a647d91438f6f Mon Sep 17 00:00:00 2001 From: hedy Date: Fri, 5 Jan 2024 20:35:35 +0800 Subject: Dark: Fix shadows & borders colors on the homepage --- pydis_site/static/css/home/index.css | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) (limited to 'pydis_site/static/css/home/index.css') diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index 0214a762..b9d829f6 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -111,6 +111,10 @@ h1 { margin: 0 1em; } +[data-theme="dark"] #showcase .box { + box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 10%), 0 0px 0 1px rgb(10 10 10 / 2%); +} + #showcase .mini-timeline { height: 3px; position: relative; @@ -157,10 +161,18 @@ h1 { flex-direction: column; } +[data-theme="dark"] #projects .card { + border: #4E4F51 1px solid; +} + #projects .card:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } +[data-theme="dark"] #projects .card:hover { + box-shadow: 0 1px 3px rgb(10 10 10 / 65%), 0 1px 2px rgb(10 10 10 / 85%); +} + #projects .card-header { box-shadow: none; font-size: 1.25rem; @@ -174,16 +186,18 @@ h1 { #projects .card-header-title { padding: 0; + /* The primary blurple theme color */ color: #7289DA; } #projects .card:hover .card-header-title { color: #363636; } -[data-theme="dark"] { - #projects .card:hover .card-header-title { - color: #CAD6FF; - } + +[data-theme="dark"] #projects .card:hover .card-header-title { + /* The light blurple theme color, consistent hover behaviour with other + * parts of the site. */ + color: #CAD6FF; } #projects .card-content { -- cgit v1.2.3 From 1578e11008fbcd2d5de4514e214ffc36975166e0 Mon Sep 17 00:00:00 2001 From: hedy Date: Fri, 5 Jan 2024 21:38:09 +0800 Subject: Dark: Fix all link hover colors (hopefully) everywhere --- pydis_site/settings.py | 7 +++++-- pydis_site/static/css/home/index.css | 4 ++-- 2 files changed, 7 insertions(+), 4 deletions(-) (limited to 'pydis_site/static/css/home/index.css') diff --git a/pydis_site/settings.py b/pydis_site/settings.py index aa16a08c..178a157a 100644 --- a/pydis_site/settings.py +++ b/pydis_site/settings.py @@ -300,7 +300,7 @@ LOGGING = { # Custom settings for django-simple-bulma BULMA_SETTINGS = { "variables": { - "primary": "#7289DA", # Discord blurple + "primary": "#7289DA", # PyDis blurple "green": "#32ac66", # Colour picked after Discord discussion "turquoise": "#7289DA", # Blurple, because Bulma uses this regardless of `primary` above "blue": "#2482c1", # Colour picked after Discord discussion @@ -316,7 +316,7 @@ BULMA_SETTINGS = { "tooltip-max-width": "30rem", }, "dark_variables": { - "primary": "#7289DA", + "primary": "#7289DA", # PyDis blurple "white": "#2C2F33", "white-bis": "#23272A ", @@ -333,6 +333,9 @@ BULMA_SETTINGS = { "text-strong": "#FEFEFE", "link": "$primary", + "link-hover": "#CAD6FF", # PyDis light blurple + "link-focus": "$link-hover", + "link-active": "$link-hover", # Use the same sizes "dimensions": "16 24 32 48 64 96 128 256 512", diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index b9d829f6..64356a36 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -191,12 +191,12 @@ h1 { } #projects .card:hover .card-header-title { + /* Bulma link-hover setting */ color: #363636; } [data-theme="dark"] #projects .card:hover .card-header-title { - /* The light blurple theme color, consistent hover behaviour with other - * parts of the site. */ + /* Bulma link-hover setting */ color: #CAD6FF; } -- cgit v1.2.3 From f7ac6bd6c11bc1168e3f8942bb2d7ba411a10d41 Mon Sep 17 00:00:00 2001 From: hedy Date: Sat, 6 Jan 2024 22:25:47 +0800 Subject: Dark: Fix backgrounds on sponsors section on homepage See https://discord.com/channels/267624335836053506/635950537262759947/1193170173574774855 Idea from go.dev -- add background to each sponsor logo and put them in a grid. Also set the sponsor section background color to match that of footer's. Issue pointed out by @ChrisLovering on discord. This is an initial draft. As of now this works from my own testing: - Consistent & uniform spacing (gaps) - Supports mobile - No affect to light theme other than the arrangement - Logos do not get squashed, ever --- pydis_site/static/css/home/index.css | 61 +++++++++++++++++++++++++++++------- pydis_site/templates/home/index.html | 22 +++++++------ 2 files changed, 63 insertions(+), 20 deletions(-) (limited to 'pydis_site/static/css/home/index.css') diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index 64356a36..552961e7 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -241,21 +241,60 @@ h1 { text-align: center; } -#sponsors .columns { - display: block; - justify-content: center; - margin: auto; - max-width: 80%; +[data-theme="dark"] #sponsors { + background-color: #2C2F33 !important; +} + +#sponsors .container { + max-width: 70%; } #sponsors a { - margin: auto; - display: inline-block; + border-radius: .2rem; + margin-bottom: .8rem; +} + +[data-theme="dark"] #sponsors a { + background-color: #EDEDED; +} + +@media (min-width: 800px) { + #sponsors a.column.is-one-third:first-child { + margin-left: -.8rem; + margin-right: .8rem; + } + + #sponsors a.column.is-one-third:last-child { + margin-left: .8rem; + margin-right: -.8rem; + } + + #sponsors a.column.is-half { + width: calc(50% + .4rem); + } + + #sponsors a.column.is-half:first-child { + margin-left: -.8rem; + margin-right: .4rem; + } + + #sponsors a.column.is-half:last-child { + margin-left: .4rem; + margin-right: -.8rem; + } + + #sponsors img { + height: 4rem; + } } -#sponsors img { - width: auto; - height: auto; +@media (max-width: 800px) { + #sponsors .columns { + margin-bottom: 1.5rem; + } - max-height: 5rem; + #sponsors img { + max-height: 4rem; + max-width: 50%; + } } diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html index 0e592f72..ed5623dd 100644 --- a/pydis_site/templates/home/index.html +++ b/pydis_site/templates/home/index.html @@ -187,29 +187,33 @@

Sponsors

-
- +
+ netcup - + Linode - + JetBrains - +
+
+ Sentry - + Notion - + StreamYard - +
+
+ Netlify - + Cloudflare
-- cgit v1.2.3 From 4be2284f1ea65a7f6bb12d0eb4ee79cb11e80c47 Mon Sep 17 00:00:00 2001 From: hedy Date: Fri, 12 Jan 2024 14:30:13 +0800 Subject: Dark: Fix sizing of sponsors' logos Also works on mobile. I *love* CSS. --- pydis_site/static/css/home/index.css | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) (limited to 'pydis_site/static/css/home/index.css') diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index 552961e7..e0dd1ebc 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -252,6 +252,11 @@ h1 { #sponsors a { border-radius: .2rem; margin-bottom: .8rem; + position: relative; +} + +#sponsors img { + max-height: 4rem; } [data-theme="dark"] #sponsors a { @@ -283,18 +288,25 @@ h1 { margin-right: -.8rem; } + #sponsors a { + height: 5rem; + padding: .4rem; + } + #sponsors img { - height: 4rem; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + max-width: calc(100% - 0.8rem); } + } @media (max-width: 800px) { #sponsors .columns { margin-bottom: 1.5rem; } - - #sponsors img { - max-height: 4rem; - max-width: 50%; - } } -- cgit v1.2.3 From 0a35f6c84096d48866953c6c099f9b7d20b003eb Mon Sep 17 00:00:00 2001 From: hedy Date: Sat, 13 Jan 2024 19:46:17 +0800 Subject: Dark: Use link color of better contrast --- pydis_site/settings.py | 4 ++-- pydis_site/static/css/content/color.css | 4 ++++ pydis_site/static/css/content/tag.css | 4 ++++ pydis_site/static/css/error_pages.css | 4 ++++ pydis_site/static/css/home/index.css | 6 +++--- pydis_site/static/css/resources/resources.css | 6 +++++- 6 files changed, 22 insertions(+), 6 deletions(-) (limited to 'pydis_site/static/css/home/index.css') diff --git a/pydis_site/settings.py b/pydis_site/settings.py index 71aeb442..b3a4480f 100644 --- a/pydis_site/settings.py +++ b/pydis_site/settings.py @@ -332,8 +332,8 @@ BULMA_SETTINGS = { "text-light": "#F7F7F7", "text-strong": "#FEFEFE", - "link": "$primary", - "link-hover": "#CAD6FF", # PyDis light blurple + "link": "#99B0FF", # A brighter PyDis blurple + "link-hover": "#FFFFFF", "link-focus": "$link-hover", "link-active": "$link-hover", diff --git a/pydis_site/static/css/content/color.css b/pydis_site/static/css/content/color.css index f4801c28..75de31f1 100644 --- a/pydis_site/static/css/content/color.css +++ b/pydis_site/static/css/content/color.css @@ -2,6 +2,10 @@ color: black; } +[data-theme="dark"] .content .fa-github { + color: white; +} + .content .fa-github:hover { color: #7289DA; } diff --git a/pydis_site/static/css/content/tag.css b/pydis_site/static/css/content/tag.css index 79795f9e..b6c03ef3 100644 --- a/pydis_site/static/css/content/tag.css +++ b/pydis_site/static/css/content/tag.css @@ -4,6 +4,10 @@ color: #7289DA; } +[data-theme="dark"] .content a { + color: #99B0FF; +} + .content a *:hover { color: dimgray; } diff --git a/pydis_site/static/css/error_pages.css b/pydis_site/static/css/error_pages.css index 042a53a0..5c6fb661 100644 --- a/pydis_site/static/css/error_pages.css +++ b/pydis_site/static/css/error_pages.css @@ -36,6 +36,10 @@ a { color: #7289DA; } +[data-theme="dark"] a { + color: #99B0FF; +} + ul { margin-bottom: 0; } diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index e0dd1ebc..5ecf7cd7 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -186,8 +186,8 @@ h1 { #projects .card-header-title { padding: 0; - /* The primary blurple theme color */ - color: #7289DA; + /* Link color from settings.py */ + color: #99B0FF; } #projects .card:hover .card-header-title { @@ -197,7 +197,7 @@ h1 { [data-theme="dark"] #projects .card:hover .card-header-title { /* Bulma link-hover setting */ - color: #CAD6FF; + color: #FFFFFF; } #projects .card-content { diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index 96d06111..ee5954da 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -154,11 +154,15 @@ i.is-primary { } /* When hovering title anchors, just make the color a lighter primary, not black. */ -.resource-box a:hover { +[data-theme="light"] .resource-box a:hover { filter: brightness(120%); color: #7289DA; } +[data-theme="dark"] .resource-box a:hover { + color: white; +} + /* Set default display to inline-flex, for centering. */ span.filter-box-tag { display: none; -- cgit v1.2.3 From 6964fbe73a986d999439e861b00cd0225cccec6d Mon Sep 17 00:00:00 2001 From: hedy Date: Thu, 18 Jan 2024 12:20:35 +0800 Subject: Dark: Use original light theme colors everywhere Adjusted box-shadow for dark mode to be more readable, unfortunately this gave it a little neomorphism effect... --- pydis_site/settings.py | 2 +- pydis_site/static/css/content/page.css | 4 ---- pydis_site/static/css/home/index.css | 6 +++++- pydis_site/static/css/home/timeline.css | 4 ++++ pydis_site/templates/content/listing.html | 4 ++-- pydis_site/templates/events/index.html | 8 ++++---- pydis_site/templates/events/pages/code-jams/8/_index.html | 6 +++--- pydis_site/templates/events/sidebar/code-jams/8.html | 4 ++-- pydis_site/templates/home/index.html | 4 ++-- pydis_site/templates/home/timeline.html | 2 +- pydis_site/templates/resources/resource_box.html | 2 +- pydis_site/templates/resources/resources.html | 4 ++-- 12 files changed, 27 insertions(+), 23 deletions(-) (limited to 'pydis_site/static/css/home/index.css') diff --git a/pydis_site/settings.py b/pydis_site/settings.py index 3c4bbdb8..51ec8e27 100644 --- a/pydis_site/settings.py +++ b/pydis_site/settings.py @@ -351,7 +351,7 @@ BULMA_SETTINGS = { "code-background": "#464951", # A graduation lighter than the default for light theme # Same as bulma, adjusted for dark mode - "shadow": "0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02)", + "shadow": "0 0.5em 1em -0.125em rgba(10, 10, 10, 0.3), 0 0px 0 1px rgba(153, 153, 153, 0.2)", "border": "#4E4F51", "border-light": "#313233", diff --git a/pydis_site/static/css/content/page.css b/pydis_site/static/css/content/page.css index b174e8d7..d4739d12 100644 --- a/pydis_site/static/css/content/page.css +++ b/pydis_site/static/css/content/page.css @@ -27,10 +27,6 @@ i.has-icon-padding { flex-direction: column; } -[data-theme="dark"] .card.github-card { - border: solid 1px #4E4F51; -} - [data-theme="dark"] .card-footer { border-top: solid 1px #4E4F51; } diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index 5ecf7cd7..29111c32 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -112,7 +112,7 @@ h1 { } [data-theme="dark"] #showcase .box { - box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 10%), 0 0px 0 1px rgb(10 10 10 / 2%); + box-shadow: 0 0.5em 1em -0.125em rgb(0 0 0 / 30%), 0 0px 0 1px rgb(10 10 10 / 5%); } #showcase .mini-timeline { @@ -186,6 +186,10 @@ h1 { #projects .card-header-title { padding: 0; + color: #7289DA; +} + +[data-theme="dark"] #projects .card-header-title { /* Link color from settings.py */ color: #99B0FF; } diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 369d5c8f..d4e445f7 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -3426,6 +3426,10 @@ mark { background-color: hsl(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*1.05)); } +[data-theme="dark"] .cd-timeline { + background-color: #2C2F33; +} + .cd-timeline h2 { font-weight: 700 } diff --git a/pydis_site/templates/content/listing.html b/pydis_site/templates/content/listing.html index c21cea74..e2c27b17 100644 --- a/pydis_site/templates/content/listing.html +++ b/pydis_site/templates/content/listing.html @@ -18,7 +18,7 @@ {% block page_content %} {# Nested Categories #} {% for category, data in categories.items %} -
+
@@ -32,7 +32,7 @@ {# Single Pages #} {% for page, data in pages.items %} -
+
diff --git a/pydis_site/templates/events/index.html b/pydis_site/templates/events/index.html index 2fbf0b85..4b1ae2bd 100644 --- a/pydis_site/templates/events/index.html +++ b/pydis_site/templates/events/index.html @@ -7,7 +7,7 @@ {% endblock %} {% block event_content %} -
+

Code Jams

Every year we hold a community-wide Summer Code Jam. For this event, members of our community are assigned to teams to collaborate and create something amazing using a technology we picked for them. One such technology that was picked for the Summer 2021 Code Jam was text user interfaces (TUIs), where teams could pick from a pre-approved list of frameworks.

To help fuel the creative process, we provide a specific theme, like Think Inside the Box or Early Internet. At the end of the Code Jam, the projects are judged by Python Discord server staff members and guest judges from the larger Python community. The judges will consider creativity, code quality, teamwork, and adherence to the theme.

@@ -15,7 +15,7 @@
-
+

PyWeek

@@ -41,7 +41,7 @@
-
+

Advent of Code

@@ -69,7 +69,7 @@
-
+

Game Jam

diff --git a/pydis_site/templates/events/pages/code-jams/8/_index.html b/pydis_site/templates/events/pages/code-jams/8/_index.html index cc8de6b1..319d9ecb 100644 --- a/pydis_site/templates/events/pages/code-jams/8/_index.html +++ b/pydis_site/templates/events/pages/code-jams/8/_index.html @@ -108,7 +108,7 @@ to provide our prizes as well.

-
+
-
+
-
+