From 7ce385c7caae6a12dfdc5a9cd29c9bd0b77bd55c Mon Sep 17 00:00:00 2001 From: hedy Date: Sat, 6 Jan 2024 15:48:36 +0800 Subject: Dark: Fix colors for bulma cards shadow & borders --- pydis_site/static/css/content/page.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'pydis_site/static/css/content') diff --git a/pydis_site/static/css/content/page.css b/pydis_site/static/css/content/page.css index 239f2809..7721bc98 100644 --- a/pydis_site/static/css/content/page.css +++ b/pydis_site/static/css/content/page.css @@ -22,6 +22,18 @@ 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; +} + +[data-theme="dark"] .card-footer-item:not(:last-child) { + border-right: solid 1px #4E4F51; +} + .card.github-card .card-content { flex: 1; } -- cgit v1.2.3 From 0487c5138be9ea982658f585a324609eb9fb3e07 Mon Sep 17 00:00:00 2001 From: sarzz <45039724+sarzz2@users.noreply.github.com> Date: Sun, 7 Jan 2024 05:18:08 +0530 Subject: Fixed truncated dropdown menu (#1138) * removing padding-right from discord button in nav * fixing dropdown menu on contributing page for sub-articles * Revert "fixing dropdown menu on contributing page for sub-articles" This reverts commit 2d158ddbb8f1d27dd7d8b0b9282554365cf042e3. * fixing dropdown menu on contributing page for sub-articles * Revert "removing padding-right from discord button in nav" This reverts commit e6642932611de307f5386928be0a1dd7e94cd134. * lint fix * fixing dropdown menu for mobile screen * Update pydis_site/static/css/content/page.css Co-authored-by: wookie184 --------- Co-authored-by: wookie184 --- pydis_site/static/css/content/page.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'pydis_site/static/css/content') diff --git a/pydis_site/static/css/content/page.css b/pydis_site/static/css/content/page.css index 239f2809..58fad0f8 100644 --- a/pydis_site/static/css/content/page.css +++ b/pydis_site/static/css/content/page.css @@ -10,6 +10,11 @@ #edit-on-github { display: none; } + + .dropdown-menu { + left: unset; + right: 0; + } } i.has-icon-padding { @@ -96,3 +101,12 @@ ul.menu-list.toc { li img { margin-top: 0.5em; } + +.dropdown-menu { + min-width: 15rem; +} + +a.dropdown-item { + white-space: normal; + padding-right: 0; +} -- 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/content') 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 93a457c735716c12214a149d71678cd9adee2cf9 Mon Sep 17 00:00:00 2001 From: hedy Date: Sat, 13 Jan 2024 20:17:32 +0800 Subject: Dark: Fix colors on content pages --- pydis_site/settings.py | 2 ++ pydis_site/static/css/collapsibles.css | 4 ++++ pydis_site/static/css/content/page.css | 4 ++++ 3 files changed, 10 insertions(+) (limited to 'pydis_site/static/css/content') diff --git a/pydis_site/settings.py b/pydis_site/settings.py index b3a4480f..c79b70f1 100644 --- a/pydis_site/settings.py +++ b/pydis_site/settings.py @@ -317,6 +317,8 @@ BULMA_SETTINGS = { }, "dark_variables": { "primary": "#7289DA", # PyDis blurple + "warning": "#4B4636", + "warning-invert": "#FFFFFF", "white": "#2C2F33", "white-bis": "#23272A ", diff --git a/pydis_site/static/css/collapsibles.css b/pydis_site/static/css/collapsibles.css index 1d73fa00..30a95df7 100644 --- a/pydis_site/static/css/collapsibles.css +++ b/pydis_site/static/css/collapsibles.css @@ -5,6 +5,10 @@ outline: none; } +[data-theme="dark"] .collapsible { + background-color: #403f45; +} + .collapsible-content { transition: max-height 0.3s ease-out; overflow: hidden; diff --git a/pydis_site/static/css/content/page.css b/pydis_site/static/css/content/page.css index 7721bc98..e9023a6b 100644 --- a/pydis_site/static/css/content/page.css +++ b/pydis_site/static/css/content/page.css @@ -108,3 +108,7 @@ ul.menu-list.toc { li img { margin-top: 0.5em; } + +[data-theme="dark"] hr { + background-color: #4c515a; +} -- cgit v1.2.3 From 848b7e1a459bb1d3a805056e04a6a1ca6b90470b Mon Sep 17 00:00:00 2001 From: ~hedy Date: Wed, 17 Jan 2024 09:41:07 +0800 Subject: Fix typo in page.css --- pydis_site/static/css/content/page.css | 1 + 1 file changed, 1 insertion(+) (limited to 'pydis_site/static/css/content') diff --git a/pydis_site/static/css/content/page.css b/pydis_site/static/css/content/page.css index 55fe6223..903b2134 100644 --- a/pydis_site/static/css/content/page.css +++ b/pydis_site/static/css/content/page.css @@ -116,6 +116,7 @@ li img { [data-theme="dark"] hr { background-color: #4c515a; +} .dropdown-menu { min-width: 15rem; -- cgit v1.2.3 From d425a0c9e5ee85ce3f8ba98bdd5fe96c14f976ba Mon Sep 17 00:00:00 2001 From: hedy Date: Wed, 17 Jan 2024 20:44:39 +0800 Subject: Dark: For content pages using transparent images... ...which are unreadable in dark mode, use `has-dark-mode-background` class. ![](/img.png){: class="has-dark-mode-background" } Like this. And it will be given a nice light gray background and a subtle padding & border. --- .../content/resources/guides/python-guides/mutability.md | 8 ++++---- pydis_site/static/css/content/page.css | 14 ++++++++++---- 2 files changed, 14 insertions(+), 8 deletions(-) (limited to 'pydis_site/static/css/content') diff --git a/pydis_site/apps/content/resources/guides/python-guides/mutability.md b/pydis_site/apps/content/resources/guides/python-guides/mutability.md index 185dc87c..e180fd16 100644 --- a/pydis_site/apps/content/resources/guides/python-guides/mutability.md +++ b/pydis_site/apps/content/resources/guides/python-guides/mutability.md @@ -30,11 +30,11 @@ It just returns a new one. Let's examine what's going on here. At first, the variable `s` refers to some object, the string `'hello'`. -![s refers to the string "hello"](/static/images/content/mutability/s_refers_hello.png) +![s refers to the string "hello"](/static/images/content/mutability/s_refers_hello.png){: class="has-dark-mode-background" } When you call `s.upper()`, a new string, which contains the characters `'HELLO'`, gets created. -![s.upper creates "HELLO"](/static/images/content/mutability/s_upper_creates_HELLO.png) +![s.upper creates "HELLO"](/static/images/content/mutability/s_upper_creates_HELLO.png){: class="has-dark-mode-background" } This happens even if you just call `s.upper()` without any assignment, on its own line: ```python @@ -44,12 +44,12 @@ In this case, a new object will be created and discarded right away. Then the assignment part comes in: the name `s` gets disconnected from `'hello'`, and gets connected to `'HELLO'`. -![s gets assigned to "HELLO"](/static/images/content/mutability/s_gets_assigned_to_HELLO.png) +![s gets assigned to "HELLO"](/static/images/content/mutability/s_gets_assigned_to_HELLO.png){: class="has-dark-mode-background" } Now we can say that `'HELLO'` is stored in the `s` variable. Then, because no variables refer to the _object_ `'hello'`, it gets eaten by the garbage collector. -!["hello" Gets Eaten](/static/images/content/mutability/hello_gets_eaten.png) +!["hello" Gets Eaten](/static/images/content/mutability/hello_gets_eaten.png){: class="has-dark-mode-background" } It means that the memory reserved for that object will be freed. If that didn't happen, the 'garbage' would accumulate over time and fill up all the RAM. diff --git a/pydis_site/static/css/content/page.css b/pydis_site/static/css/content/page.css index 903b2134..b174e8d7 100644 --- a/pydis_site/static/css/content/page.css +++ b/pydis_site/static/css/content/page.css @@ -114,10 +114,6 @@ li img { margin-top: 0.5em; } -[data-theme="dark"] hr { - background-color: #4c515a; -} - .dropdown-menu { min-width: 15rem; } @@ -126,3 +122,13 @@ a.dropdown-item { white-space: normal; padding-right: 0; } + +[data-theme="dark"] hr { + background-color: #4c515a; +} + +[data-theme="dark"] .has-dark-mode-background { + background-color: #EDEDED; + border-radius: .1rem; + padding: .3rem; +} -- 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/content') 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.

-
+
-
+
-
+