diff options
| -rw-r--r-- | pydis_site/settings.py | 7 | ||||
| -rw-r--r-- | pydis_site/static/css/base/navbar.css | 83 | ||||
| -rw-r--r-- | pydis_site/static/js/base/navbar.js | 87 | ||||
| -rw-r--r-- | pydis_site/templates/base/navbar.html | 17 |
4 files changed, 193 insertions, 1 deletions
diff --git a/pydis_site/settings.py b/pydis_site/settings.py index 1ba81a5c..0d19dc10 100644 --- a/pydis_site/settings.py +++ b/pydis_site/settings.py @@ -269,7 +269,12 @@ BULMA_SETTINGS = { "tooltip-max-width": "30rem", }, "dark_variables": { - "primary": "#373737", + "primary": "#7289DA", + "white": "#22272E", + "text": "#F4F4F4", + + "link": "$primary", + # Use the same sizes "dimensions": "16 24 32 48 64 96 128 256 512", diff --git a/pydis_site/static/css/base/navbar.css b/pydis_site/static/css/base/navbar.css new file mode 100644 index 00000000..95ca36b8 --- /dev/null +++ b/pydis_site/static/css/base/navbar.css @@ -0,0 +1,83 @@ +.switch { + position: relative; + height: 3.25em; + width: 6.5em; + 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; +} + +.switch-inner { + width: 95%; + top: 50%; + border-radius: 2em; + transition: background-color 0.2s ease-out; +} + +.switch.light .switch-inner { + background-color: #7289da; +} +.switch.dark .switch-inner { + background-color: #1b2137; +} + +.knob { + position: absolute; + height: 75%; + width: 37.5%; + top: 50%; + transform: translate(0%, -65%); + border-radius: 10em; + transition: all 0.5s ease-out; +} + +.knob.dark { + background-color: #586282; + margin: 6% auto auto 8%; +} + +.knob.light { + background-color: #364c94; + margin: 6% auto auto 56%; +} + +.theme-icon { + position: absolute !important; + color: white; + --ggs: 1.25; + opacity: 100%; + transition: opacity 0.2s ease-out; + top: 33%; + bottom: auto; +} + +.theme-icon.light { + left: 18%; +} + +.theme-icon.dark { + right: 18%; + top: 35% +} + +.switch.dark .theme-icon.light { + opacity: 0; +} + +.switch.light .theme-icon.dark { + opacity: 0; +}
\ No newline at end of file diff --git a/pydis_site/static/js/base/navbar.js b/pydis_site/static/js/base/navbar.js new file mode 100644 index 00000000..f0bd94b9 --- /dev/null +++ b/pydis_site/static/js/base/navbar.js @@ -0,0 +1,87 @@ +"use strict"; + +const defaultCssElement = $("#bulma-css")[0]; +const darkCssElement = $("#bulma-css-dark")[0]; + +function getCurrentTheme() { + return document.cookie + .split('; ') + .find(row => row.startsWith('theme=')) + .split('=')[1]; +} + +function displayThemedElements() { + const defaultElements = Array.from($(".show-default-mode")); + const darkElements = Array.from($(".show-dark-mode")); + + switch (getCurrentTheme()) { + case "": + case "default": + defaultElements.forEach(e => e.style.display = null); + darkElements.forEach(e => e.style.display = 'none'); + break; + case "dark": + defaultElements.forEach(e => e.style.display = 'none'); + darkElements.forEach(e => e.style.display = null); + break; + } +} + +function setStyleSheets() { + switch (getCurrentTheme()) { + case "": + case "default": + defaultCssElement.disabled = false; + darkCssElement.disabled = true; + break; + case "dark": + defaultCssElement.disabled = true; + darkCssElement.disabled = false; + break; + } +} + + +// Executed when the page has finished loading. +document.addEventListener("DOMContentLoaded", () => { + + setStyleSheets(); + displayThemedElements(); + + $('#theme-switch').on("click", () => { + + // Update cookie + if (getCurrentTheme() === "dark") { + document.cookie = "theme=default"; + } else { + document.cookie = "theme=dark"; + } + + setStyleSheets(); + displayThemedElements(); + + // Animations + let switchToggle = $(".switch")[0]; + let knob = $(".knob")[0]; + + if (knob.classList.contains("dark")) { + knob.classList.remove("dark"); + knob.classList.add("light"); + + // After 500ms, switch the icons + setTimeout(function() { + switchToggle.classList.remove("dark"); + switchToggle.classList.add("light"); + }, 100); + } else { + knob.classList.remove("light"); + knob.classList.add("dark"); + + // After 500ms, switch the icons + setTimeout(function() { + switchToggle.classList.remove("light"); + switchToggle.classList.add("dark"); + }, 100); + } + }); +});
\ No newline at end of file diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index d7fb4f4c..41d6c778 100644 --- a/pydis_site/templates/base/navbar.html +++ b/pydis_site/templates/base/navbar.html @@ -1,5 +1,12 @@ {% load static %} +{% block head %} + <link rel="stylesheet" href="{% static "css/base/navbar.css" %}"> + <link href="https://css.gg/css?=|moon|sun" rel="stylesheet"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> + <script src="{% static "js/base/navbar.js" %}"></script> +{% endblock %} + <nav class="navbar is-primary" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> @@ -94,6 +101,16 @@ </div> </div> + <div class="navbar-item"> + <div id="theme-switch" class="switch dark"> + <div class="switch-outer"></div> + <div class="switch-inner"></div> + <i class="theme-icon light gg-sun"></i> + <div class="knob dark"></div> + <i class="theme-icon dark gg-moon"></i> + </div> + </div> + {# Desktop Nav Discord #} <div id="discord-btn" class="buttons is-hidden-touch"> <a href="https://discord.gg/python" class="button is-large is-primary">Discord</a> |