diff --git a/pydis_site/apps/content/resources/guides/pydis-guides/contributing.md b/pydis_site/apps/content/resources/guides/pydis-guides/contributing.md index b36c0afd9..5dc6408cd 100644 --- a/pydis_site/apps/content/resources/guides/pydis-guides/contributing.md +++ b/pydis_site/apps/content/resources/guides/pydis-guides/contributing.md @@ -9,8 +9,8 @@ Our projects on Python Discord are open source and [available on GitHub](https:/
-
-
+
+
 Sir Lancebot @@ -22,11 +22,11 @@ Our projects on Python Discord are open source and [available on GitHub](https:/ Sir Lancebot has a collection of self-contained, for-fun features. If you're new to Discord bots or contributing, this is a great place to start!
-
+
 Issues  PRs
-
+
 Setup and Configuration Guide
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 185dc87c1..e180fd167 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/apps/resources/resources/adafruit.yaml b/pydis_site/apps/resources/resources/adafruit.yaml index c687f5079..957223c9e 100644 --- a/pydis_site/apps/resources/resources/adafruit.yaml +++ b/pydis_site/apps/resources/resources/adafruit.yaml @@ -4,7 +4,7 @@ description: Adafruit is an open-source electronics manufacturer Their official community host regular show-and-tells, provide help with your projects, and the Adafruit devs do all the CircuitPython Development right out in the open. -title_image: https://www.mouser.com/images/suppliers/logos/adafruit.png +title_image: /static/images/resources/adafruit.png title_url: https://adafruit.com/ urls: - icon: branding/discord diff --git a/pydis_site/apps/resources/resources/automate_the_boring_stuff_book.yaml b/pydis_site/apps/resources/resources/automate_the_boring_stuff_book.yaml index 63f631935..f3b862d24 100644 --- a/pydis_site/apps/resources/resources/automate_the_boring_stuff_book.yaml +++ b/pydis_site/apps/resources/resources/automate_the_boring_stuff_book.yaml @@ -8,7 +8,7 @@ title_url: https://automatetheboringstuff.com/ urls: - icon: branding/goodreads url: https://www.goodreads.com/book/show/22514127-automate-the-boring-stuff-with-python - color: black + color: dark tags: topics: - general diff --git a/pydis_site/apps/resources/resources/awesome_programming_discord.yaml b/pydis_site/apps/resources/resources/awesome_programming_discord.yaml index 0ef7aefc1..7079062bb 100644 --- a/pydis_site/apps/resources/resources/awesome_programming_discord.yaml +++ b/pydis_site/apps/resources/resources/awesome_programming_discord.yaml @@ -3,7 +3,7 @@ description: We have listed our favourite communities, An awesome list collating the best programming related Discord servers is available on GitHub and has all sorts of topics from blockchain to virtual reality! title_icon: branding/github -title_icon_color: black +title_icon_color: dark title_url: https://github.com/mhxion/awesome-programming-discord name: awesome-programming-discord tags: diff --git a/pydis_site/apps/resources/resources/byte_of_python.yaml b/pydis_site/apps/resources/resources/byte_of_python.yaml index c2f6ab84f..e4d443693 100644 --- a/pydis_site/apps/resources/resources/byte_of_python.yaml +++ b/pydis_site/apps/resources/resources/byte_of_python.yaml @@ -6,10 +6,10 @@ title_url: https://python.swaroopch.com/ urls: - icon: regular/book url: https://www.lulu.com/shop/swaroop-c-h/a-byte-of-python/paperback/product-21142968.html - color: black + color: dark - icon: branding/goodreads url: https://www.goodreads.com/book/show/6762544-a-byte-of-python - color: black + color: dark tags: topics: - general diff --git a/pydis_site/apps/resources/resources/code_combat.yaml b/pydis_site/apps/resources/resources/code_combat.yaml index 84597c4d0..0e308ddc2 100644 --- a/pydis_site/apps/resources/resources/code_combat.yaml +++ b/pydis_site/apps/resources/resources/code_combat.yaml @@ -5,7 +5,7 @@ title_url: https://codecombat.com/ urls: - icon: branding/github url: https://github.com/codecombat/codecombat - color: black + color: dark tags: topics: - general diff --git a/pydis_site/apps/resources/resources/data_science_from_scratch.yaml b/pydis_site/apps/resources/resources/data_science_from_scratch.yaml index 86955fdb7..755e5867a 100644 --- a/pydis_site/apps/resources/resources/data_science_from_scratch.yaml +++ b/pydis_site/apps/resources/resources/data_science_from_scratch.yaml @@ -7,10 +7,10 @@ title_url: https://www.oreilly.com/library/view/data-science-from/9781492041122/ urls: - icon: branding/goodreads url: https://www.goodreads.com/en/book/show/52059715-data-science-from-scratch - color: black + color: dark - icon: branding/github url: https://github.com/joelgrus/data-science-from-scratch - color: black + color: dark tags: topics: - data science diff --git a/pydis_site/apps/resources/resources/effective_python.yaml b/pydis_site/apps/resources/resources/effective_python.yaml index b82fa0c35..2293ee846 100644 --- a/pydis_site/apps/resources/resources/effective_python.yaml +++ b/pydis_site/apps/resources/resources/effective_python.yaml @@ -5,10 +5,10 @@ title_url: https://effectivepython.com/ urls: - icon: branding/goodreads url: https://www.goodreads.com/book/show/48566725-effective-python - color: black + color: dark - icon: branding/github url: https://github.com/bslatkin/effectivepython - color: black + color: dark tags: topics: - general diff --git a/pydis_site/apps/resources/resources/exercism.yaml b/pydis_site/apps/resources/resources/exercism.yaml index c623db2dc..fba5bce47 100644 --- a/pydis_site/apps/resources/resources/exercism.yaml +++ b/pydis_site/apps/resources/resources/exercism.yaml @@ -7,7 +7,7 @@ title_url: https://exercism.org/ urls: - icon: branding/github url: https://github.com/exercism/python - color: black + color: dark tags: topics: - general diff --git a/pydis_site/apps/resources/resources/flask_web_development.yaml b/pydis_site/apps/resources/resources/flask_web_development.yaml index 6905b2b4f..9263efdd9 100644 --- a/pydis_site/apps/resources/resources/flask_web_development.yaml +++ b/pydis_site/apps/resources/resources/flask_web_development.yaml @@ -5,10 +5,10 @@ title_url: http://shop.oreilly.com/product/0636920031116.do urls: - icon: branding/goodreads url: https://www.goodreads.com/book/show/18774655-flask-web-development - color: black + color: dark - icon: branding/github url: https://github.com/miguelgrinberg/flasky - color: black + color: dark tags: topics: - web development diff --git a/pydis_site/apps/resources/resources/fluent_python.yaml b/pydis_site/apps/resources/resources/fluent_python.yaml index c22fd3883..0d9466e10 100644 --- a/pydis_site/apps/resources/resources/fluent_python.yaml +++ b/pydis_site/apps/resources/resources/fluent_python.yaml @@ -5,10 +5,10 @@ title_url: https://www.oreilly.com/library/view/fluent-python/9781491946237/ urls: - icon: branding/goodreads url: https://www.goodreads.com/book/show/22800567-fluent-python - color: black + color: dark - icon: branding/github url: https://github.com/fluentpython - color: black + color: dark tags: topics: - general diff --git a/pydis_site/apps/resources/resources/hitchhikers_guide_to_python.yaml b/pydis_site/apps/resources/resources/hitchhikers_guide_to_python.yaml index e48e57175..a96386d25 100644 --- a/pydis_site/apps/resources/resources/hitchhikers_guide_to_python.yaml +++ b/pydis_site/apps/resources/resources/hitchhikers_guide_to_python.yaml @@ -5,7 +5,7 @@ title_url: https://python-guide.org/ urls: - icon: branding/goodreads url: https://www.goodreads.com/book/show/28321007-the-hitchhiker-s-guide-to-python - color: black + color: dark tags: topics: - general diff --git a/pydis_site/apps/resources/resources/kivy.yaml b/pydis_site/apps/resources/resources/kivy.yaml index f49c33fba..dcced0228 100644 --- a/pydis_site/apps/resources/resources/kivy.yaml +++ b/pydis_site/apps/resources/resources/kivy.yaml @@ -2,9 +2,7 @@ name: Kivy description: The Kivy project, through the Kivy framework and its sister projects, aims to provide all the tools to create desktop and mobile applications in Python. Allowing rapid development of multitouch applications with custom and exciting user interfaces. -icon_image: https://raw.githubusercontent.com/kivy/kivy-website/master/content/logos/kivy-logo-black-256.png -icon_size: 50 -title_image: https://i.imgur.com/EVP3jZR.png +title_image: /static/images/resources/kivy.png title_url: https://kivy.org/ urls: - icon: branding/discord @@ -12,7 +10,7 @@ urls: color: blurple - icon: branding/github url: https://github.com/kivy - color: black + color: dark tags: topics: - user interface diff --git a/pydis_site/apps/resources/resources/mission_python.yaml b/pydis_site/apps/resources/resources/mission_python.yaml index 391a2983c..ca686952f 100644 --- a/pydis_site/apps/resources/resources/mission_python.yaml +++ b/pydis_site/apps/resources/resources/mission_python.yaml @@ -7,7 +7,7 @@ title_url: https://www.sean.co.uk/books/mission-python/index.shtm urls: - icon: branding/goodreads url: https://www.goodreads.com/book/show/35545850-mission-python - color: black + color: dark tags: topics: - general diff --git a/pydis_site/apps/resources/resources/neural_networks_from_scratch_in_python.yaml b/pydis_site/apps/resources/resources/neural_networks_from_scratch_in_python.yaml index 26e88cb92..5e7ee63f0 100644 --- a/pydis_site/apps/resources/resources/neural_networks_from_scratch_in_python.yaml +++ b/pydis_site/apps/resources/resources/neural_networks_from_scratch_in_python.yaml @@ -7,7 +7,7 @@ title_url: https://nnfs.io/ urls: - icon: branding/goodreads url: https://www.goodreads.com/book/show/55927899-neural-networks-from-scratch-in-python - color: black + color: dark tags: topics: - data science diff --git a/pydis_site/apps/resources/resources/python_cookbook.yaml b/pydis_site/apps/resources/resources/python_cookbook.yaml index bc05d743e..751edf092 100644 --- a/pydis_site/apps/resources/resources/python_cookbook.yaml +++ b/pydis_site/apps/resources/resources/python_cookbook.yaml @@ -5,10 +5,10 @@ title_url: http://shop.oreilly.com/product/0636920027072.do urls: - icon: branding/goodreads url: https://www.goodreads.com/book/show/17152735-python-cookbook - color: black + color: dark - icon: branding/github url: https://github.com/dabeaz/python-cookbook - color: black + color: dark tags: topics: - general diff --git a/pydis_site/apps/resources/resources/python_crash_course.yaml b/pydis_site/apps/resources/resources/python_crash_course.yaml index d916075e3..e83564911 100644 --- a/pydis_site/apps/resources/resources/python_crash_course.yaml +++ b/pydis_site/apps/resources/resources/python_crash_course.yaml @@ -11,10 +11,10 @@ title_url: https://nostarch.com/pythoncrashcourse2e urls: - icon: branding/goodreads url: https://www.goodreads.com/book/show/23241059-python-crash-course - color: black + color: dark - icon: branding/github url: https://ehmatthes.github.io/pcc/ - color: black + color: dark tags: topics: - general diff --git a/pydis_site/apps/resources/resources/python_graph_gallery.yaml b/pydis_site/apps/resources/resources/python_graph_gallery.yaml index b8aaeb4d4..59aebc129 100644 --- a/pydis_site/apps/resources/resources/python_graph_gallery.yaml +++ b/pydis_site/apps/resources/resources/python_graph_gallery.yaml @@ -4,7 +4,7 @@ title_url: https://www.python-graph-gallery.com/ urls: - icon: branding/github url: https://github.com/holtzy/The-Python-Graph-Gallery - color: black + color: dark tags: topics: - data science diff --git a/pydis_site/apps/resources/resources/python_tricks.yaml b/pydis_site/apps/resources/resources/python_tricks.yaml index aa1b2fcd3..17c711077 100644 --- a/pydis_site/apps/resources/resources/python_tricks.yaml +++ b/pydis_site/apps/resources/resources/python_tricks.yaml @@ -6,7 +6,7 @@ title_url: https://realpython.com/products/python-tricks-book/ urls: - icon: branding/goodreads url: https://www.goodreads.com/book/show/36990732-python-tricks - color: black + color: dark tags: topics: - general diff --git a/pydis_site/apps/resources/resources/simple_guide_to_git.yaml b/pydis_site/apps/resources/resources/simple_guide_to_git.yaml index 3bb46e6d6..bf461b0aa 100644 --- a/pydis_site/apps/resources/resources/simple_guide_to_git.yaml +++ b/pydis_site/apps/resources/resources/simple_guide_to_git.yaml @@ -2,7 +2,7 @@ description: A simple, no-nonsense guide to the basics of using Git. name: A Simple Guide to Git title_url: https://rogerdudler.github.io/git-guide/ title_icon: branding/github -title_icon_color: black +title_icon_color: dark tags: topics: - tooling diff --git a/pydis_site/apps/resources/resources/software_design_by_example.yaml b/pydis_site/apps/resources/resources/software_design_by_example.yaml index 8cdfd625e..82d1c6464 100644 --- a/pydis_site/apps/resources/resources/software_design_by_example.yaml +++ b/pydis_site/apps/resources/resources/software_design_by_example.yaml @@ -9,10 +9,10 @@ title_url: https://third-bit.com/sdxpy/ urls: - icon: branding/goodreads url: https://www.goodreads.com/book/show/199430059-software-design-by-example - color: black + color: dark - icon: branding/github url: https://github.com/gvwilson/sdxpy - color: black + color: dark tags: topics: - general diff --git a/pydis_site/apps/resources/resources/think_python.yaml b/pydis_site/apps/resources/resources/think_python.yaml index 7099afd84..f8b177611 100644 --- a/pydis_site/apps/resources/resources/think_python.yaml +++ b/pydis_site/apps/resources/resources/think_python.yaml @@ -8,10 +8,10 @@ title_url: https://greenteapress.com/wp/think-python-2e/ urls: - icon: branding/goodreads url: https://www.goodreads.com/book/show/14514306-think-python - color: black + color: dark - icon: branding/github url: https://github.com/AllenDowney/ThinkPython2 - color: black + color: dark tags: topics: - general diff --git a/pydis_site/apps/resources/resources/two_scoops_of_django.yaml b/pydis_site/apps/resources/resources/two_scoops_of_django.yaml index f372d35de..1ddb70e5f 100644 --- a/pydis_site/apps/resources/resources/two_scoops_of_django.yaml +++ b/pydis_site/apps/resources/resources/two_scoops_of_django.yaml @@ -5,10 +5,10 @@ title_url: https://www.feldroy.com/books/two-scoops-of-django-3-x urls: - icon: branding/goodreads url: https://www.goodreads.com/book/show/55822151-two-scoops-of-django-3-x - color: black + color: dark - icon: branding/github url: https://github.com/twoscoops/two-scoops-of-django-2.0-code-examples - color: black + color: dark tags: topics: - web development diff --git a/pydis_site/context_processors.py b/pydis_site/context_processors.py index 0e8b4a949..35854454c 100644 --- a/pydis_site/context_processors.py +++ b/pydis_site/context_processors.py @@ -1,7 +1,7 @@ from django.conf import settings -from django.template import RequestContext +from django.http import HttpRequest -def git_sha_processor(_: RequestContext) -> dict: +def git_sha_processor(_: HttpRequest) -> dict: """Expose the git SHA for this repo to all views.""" return {'git_sha': settings.GIT_SHA} diff --git a/pydis_site/settings.py b/pydis_site/settings.py index 5a6edfdf9..3c4bbdb8c 100644 --- a/pydis_site/settings.py +++ b/pydis_site/settings.py @@ -299,8 +299,8 @@ # Custom settings for django-simple-bulma BULMA_SETTINGS = { - "variables": { # If you update these colours, please update the notification.css file - "primary": "#7289DA", # Discord blurple + "variables": { + "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 @@ -315,6 +315,52 @@ "footer-padding": "1rem 1.5rem 1rem", "tooltip-max-width": "30rem", }, + "dark_variables": { + "primary": "#7289DA", # PyDis blurple + "warning": "#4B4636", + "warning-invert": "#FFFFFF", + "primary-dark": "#EFF1FB", # Bulma's primary-light + "primary-light": "#2B3660", + "success-dark": "#EFFAF5", # Bulma's success-light + "success-light": "#214133", + "danger-dark": "#FEECF0", # Bulma's danger-light + "danger-light": "#4C1822", + "info-dark": "#EFF5FB", # Bulma's info-light + "info-light": "#254056", + + "white": "#2C2F33", + "white-bis": "#23272A ", + "white-ter": "#36393F", + "light": "$white", + + "black": "#F7F7F7", + "black-bis": "#F2F2F2", + "black-ter": "#E6E6E6", + "dark": "$black", + + "text": "#F4F4F4", + "text-light": "#F7F7F7", + "text-strong": "#FEFEFE", + + "link": "#99B0FF", # A brighter PyDis blurple + "link-hover": "#FFFFFF", + "link-focus": "$link-hover", + "link-active": "$link-hover", + + "code": "#FF7990", # Adjusted to 4.5 contrast ratio per WCAG Level AA + "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)", + "border": "#4E4F51", + "border-light": "#313233", + + # Use the same sizes + "dimensions": "16 24 32 48 64 96 128 256 512", + "navbar-height": "4.75rem", + "footer-padding": "1rem 1.5rem 1rem", + "tooltip-max-width": "30rem", + }, "extensions": [ "bulma-dropdown", "bulma-navbar-burger", diff --git a/pydis_site/static/css/base/themes.css b/pydis_site/static/css/base/themes.css new file mode 100644 index 000000000..ab0c8b6b4 --- /dev/null +++ b/pydis_site/static/css/base/themes.css @@ -0,0 +1,67 @@ +/* Theme switch toggle */ + +.switch { + position: relative; + height: 2em; + width: 4em; + cursor: pointer; +} + +.switch-outer { + position: absolute; + height: 100%; + width: 100%; + border-radius: 2em; + transition: background-color 0.3s ease-out; +} + +.switch.dark .switch-outer { + background-color: #22272E; +} + +.switch.light .switch-outer { + background-color: #3f61d9; +} + +.knob { + position: absolute; + padding-top: 20%; + height: 70%; + width: 37.5%; + border-radius: 10em; + transition: all 0.5s ease-out; +} + +.knob.dark { + background-color: #586282; + margin: 7% auto auto 8%; +} + +.knob.light { + background-color: #364c94; + margin: 7% auto auto 56%; +} + +.theme-icon { + position: absolute !important; + --ggs: 0.75; + transition: opacity 0.3s ease-out; +} + +.theme-icon.light { + left: 10%; + top: 15% +} + +.theme-icon.dark { + right: 10%; + top: 20% +} + +.switch.dark .theme-icon.light { + opacity: 0; +} + +.switch.light .theme-icon.dark { + opacity: 0; +} diff --git a/pydis_site/static/css/collapsibles.css b/pydis_site/static/css/collapsibles.css index 1d73fa005..0214e0bcf 100644 --- a/pydis_site/static/css/collapsibles.css +++ b/pydis_site/static/css/collapsibles.css @@ -1,11 +1,15 @@ .collapsible { - cursor: pointer; - width: 100%; - border: none; - outline: none; + cursor: pointer; + width: 100%; + border: none; + outline: none; +} + +[data-theme="dark"] .collapsible { + background-color: #403f45; } .collapsible-content { - transition: max-height 0.3s ease-out; - overflow: hidden; + transition: max-height 0.3s ease-out; + overflow: hidden; } diff --git a/pydis_site/static/css/content/color.css b/pydis_site/static/css/content/color.css index f4801c280..75de31f10 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/page.css b/pydis_site/static/css/content/page.css index 58fad0f8b..b174e8d75 100644 --- a/pydis_site/static/css/content/page.css +++ b/pydis_site/static/css/content/page.css @@ -27,6 +27,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; } @@ -110,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; +} diff --git a/pydis_site/static/css/content/tag.css b/pydis_site/static/css/content/tag.css index 79795f9e6..b6c03ef36 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 042a53a08..5c6fb6618 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/events/base.css b/pydis_site/static/css/events/base.css index 9e244ed9f..dc6183d72 100644 --- a/pydis_site/static/css/events/base.css +++ b/pydis_site/static/css/events/base.css @@ -12,9 +12,27 @@ pre { } .panel .panel-heading { - /* - * Remove whitespace between the panel heading and the first item in a panel, - * since it makes the first panel item taller than the others. - */ - margin-bottom: 0 !important + /* + * Remove whitespace between the panel heading and the first item in a panel, + * since it makes the first panel item taller than the others. + */ + margin-bottom: 0 !important +} + +.sponsor { + border-radius: .1rem; + padding: .3rem; +} + +.sponsor img { + display: block; + margin: auto; +} + +.box .sponsor { + margin-bottom: 1rem; +} + +[data-theme="dark"] .sponsor { + background-color: #EDEDED; } diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index e117a35ba..5ecf7cd72 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -92,6 +92,10 @@ h1 { z-index: 3; } +[data-theme="dark"] #bottom-wave { + background: url(../../images/waves/wave_black.svg) repeat-x !important; +} + @keyframes wave { 0% { margin-left: 0; @@ -107,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; @@ -153,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; @@ -170,13 +186,20 @@ h1 { #projects .card-header-title { padding: 0; - color: #7289DA; + /* Link color from settings.py */ + color: #99B0FF; } #projects .card:hover .card-header-title { + /* Bulma link-hover setting */ color: #363636; } +[data-theme="dark"] #projects .card:hover .card-header-title { + /* Bulma link-hover setting */ + color: #FFFFFF; +} + #projects .card-content { padding-top: 8px; padding-bottom: 1rem; @@ -218,21 +241,72 @@ 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; + position: relative; } #sponsors img { - width: auto; - height: auto; + max-height: 4rem; +} + +[data-theme="dark"] #sponsors a { + background-color: #EDEDED; +} - max-height: 5rem; +@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 a { + height: 5rem; + padding: .4rem; + } + + #sponsors img { + 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; + } } diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 0a4dfbb68..369d5c8f4 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -1,8 +1,3 @@ -body { - background-color: hsl(0, 0%, 100%); - background-color: var(--color-bg, white) -} - h2 { font-size: 2em; } @@ -3391,6 +3386,13 @@ mark { --font-secondary: 'Open Sans', sans-serif } +[data-theme="dark"] { + --cd-color-2: hsl(0, 0%, 34%); + --cd-color-2-h: 0; + --cd-color-2-s: 0%; + --cd-color-2-l: 34%; +} + @supports (--css: variables) { @media (min-width: 64rem) { :root { @@ -3552,8 +3554,6 @@ mark { position: relative; margin-left: 1.25em; margin-left: var(--space-md); - background: hsl(0, 0%, 100%); - background: var(--color-white); border-radius: 0.25em; border-radius: var(--radius-md); padding: 1.25em; @@ -3571,7 +3571,7 @@ mark { height: 0; border: 7px solid transparent; border-right-color: hsl(0, 0%, 100%); - border-right-color: var(--color-white) + border-right-color: var(--cd-color-2) } .cd-timeline__content h2 { @@ -3599,15 +3599,10 @@ mark { height: 0; border: 7px solid transparent; border-left-color: hsl(0, 0%, 100%); - border-left-color: var(--color-white) + border-left-color: var(--cd-color-2) } } -.cd-timeline__date { - color: hsla(207, 10%, 55%, 0.7); - color: hsla(var(--cd-color-3-h), var(--cd-color-3-s), var(--cd-color-3-l), 0.7) -} - @media (min-width: 64rem) { .cd-timeline__date { position: absolute; diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index 96d061115..582d96e42 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; @@ -195,22 +199,26 @@ button.delete { } /* Colors for delete button x's */ -button.delete.is-primary::before, -button.delete.is-primary::after { +[data-theme="light"] button.delete.is-primary::before, +[data-theme="light"] button.delete.is-primary::after { background-color: #2a45a2; } -button.delete.is-success::before, -button.delete.is-success::after { +[data-theme="light"] button.delete.is-success::before, +[data-theme="light"] button.delete.is-success::after { background-color: #2c9659; } -button.delete.is-danger::before, -button.delete.is-danger::after { +[data-theme="light"] button.delete.is-danger::before, +[data-theme="light"] button.delete.is-danger::after { background-color: #c32841; } -button.delete.is-info::before, -button.delete.is-info::after { +[data-theme="light"] button.delete.is-info::before, +[data-theme="light"] button.delete.is-info::after { background-color: #237fbd; } +[data-theme="dark"] button.delete::before, +[data-theme="dark"] button.delete::after { + background-color: #FFFFFF; +} /* Give outlines to active tags */ span.filter-box-tag, diff --git a/pydis_site/static/images/resources/adafruit.png b/pydis_site/static/images/resources/adafruit.png new file mode 100644 index 000000000..82cd45ace Binary files /dev/null and b/pydis_site/static/images/resources/adafruit.png differ diff --git a/pydis_site/static/images/resources/kivy.png b/pydis_site/static/images/resources/kivy.png new file mode 100644 index 000000000..693b18344 Binary files /dev/null and b/pydis_site/static/images/resources/kivy.png differ diff --git a/pydis_site/static/images/waves/wave_black.svg b/pydis_site/static/images/waves/wave_black.svg new file mode 100644 index 000000000..899fe2f95 --- /dev/null +++ b/pydis_site/static/images/waves/wave_black.svg @@ -0,0 +1,77 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + diff --git a/pydis_site/static/js/base/themes.js b/pydis_site/static/js/base/themes.js new file mode 100644 index 000000000..2a57cad48 --- /dev/null +++ b/pydis_site/static/js/base/themes.js @@ -0,0 +1,91 @@ +"use strict"; + +const defaultTheme = "light"; +const lightStylesheet = document.getElementById("bulma-css"); +const darkStylesheet = document.getElementById("bulma-css-dark"); + +// Get saved preference for the site in local storage, optionally accounting +// for system preference used when a page loads. +function getCurrentTheme(systemPrefers) { + const theme = localStorage.getItem("theme"); + + if (theme !== null && theme !== "") + return theme; + + if (systemPrefers !== undefined) + return systemPrefers; + + return defaultTheme; +} + +// Disable & enable the correct CSS stylesheets based on chosen theme. +function setStyleSheets(newTheme) { + switch (newTheme) { + case "light": + lightStylesheet.disabled = false; + darkStylesheet.disabled = true; + break; + case "dark": + lightStylesheet.disabled = true; + darkStylesheet.disabled = false; + break; + } + + document.querySelector("html").setAttribute("data-theme", newTheme); +} + +// Reflect chosen theme on the switch toggle. +function toggleThemeSwitch(newTheme) { + const switchToggle = document.getElementById("theme-switch"); + const knob = document.getElementById("theme-knob"); + + switch (newTheme) { + case "light": + knob.classList.remove("dark"); + knob.classList.add("light"); + setTimeout(function() { + switchToggle.classList.remove("dark"); + switchToggle.classList.add("light"); + }, 100); + break; + case "dark": + knob.classList.remove("light"); + knob.classList.add("dark"); + setTimeout(function() { + switchToggle.classList.remove("light"); + switchToggle.classList.add("dark"); + }, 100); + break; + } +} + +// Executed when the page has finished loading. +document.addEventListener("DOMContentLoaded", () => { + let theme; + const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)"); + + if (systemPrefersDark.matches) + theme = getCurrentTheme("dark"); + else + theme = getCurrentTheme(); + + setStyleSheets(theme); + toggleThemeSwitch(theme); + + systemPrefersDark.addEventListener("change", ({matches: isDark}) => { + const newTheme = isDark ? "dark" : "light"; + // Let the new system preference take precedence over toggle preference + // on page reloads. + localStorage.removeItem("theme"); + setStyleSheets(newTheme); + toggleThemeSwitch(newTheme); + }) + + const switchToggle = document.getElementById("theme-switch"); + switchToggle.addEventListener("click", () => { + const newTheme = getCurrentTheme() === "light" ? "dark" : "light"; + localStorage.setItem("theme", newTheme); + setStyleSheets(newTheme); + toggleThemeSwitch(newTheme); + }); +}); diff --git a/pydis_site/templates/base/base.html b/pydis_site/templates/base/base.html index b7322f12e..e497298ab 100644 --- a/pydis_site/templates/base/base.html +++ b/pydis_site/templates/base/base.html @@ -24,6 +24,8 @@ Python Discord | {% block title %}Website{% endblock %} {% bulma %} + {% bulma 'dark' include_js=False %} + {% font_awesome %} {% block head %}{% endblock %} diff --git a/pydis_site/templates/base/footer.html b/pydis_site/templates/base/footer.html index 0bc93578a..9beb284f6 100644 --- a/pydis_site/templates/base/footer.html +++ b/pydis_site/templates/base/footer.html @@ -1,5 +1,5 @@ -