diff options
Diffstat (limited to 'pydis_site')
20 files changed, 303 insertions, 106 deletions
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 b36c0afd..5dc6408c 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:/ <!-- Project cards --> <div class="columns is-multiline is-centered is-3 is-variable"> <div class="column is-one-third-desktop is-half-tablet"> - <div class="card github-card"> - <div class="card-header"> + <div class="card github-card has-background-white"> + <div class="card-header has-background-white"> <div class="card-header-title is-centered"> <a class="is-size-5" href="https://github.com/python-discord/sir-lancebot"> <i class="fab fa-github"></i> <strong >Sir Lancebot</strong> @@ -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! </div> </div> - <div class="card-footer"> + <div class="card-footer has-background-white"> <a href="https://github.com/python-discord/sir-lancebot/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc" class="card-footer-item"><i class="fas fa-exclamation-circle"></i> Issues</a> <a href="https://github.com/python-discord/sir-lancebot/pulls?q=is%3Apr+is%3Aopen+sort%3Aupdated-desc" class="card-footer-item"><i class="fas fa-code-merge"></i> PRs</a> </div> - <div class="card-footer"> + <div class="card-footer has-background-white"> <a href="/pages/guides/pydis-guides/contributing/sir-lancebot" class="card-footer-item"><i class="fas fa-cogs"></i> Setup and Configuration Guide</a> </div> </div> diff --git a/pydis_site/context_processors.py b/pydis_site/context_processors.py index 0e8b4a94..35854454 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 5a6edfdf..b5677029 100644 --- a/pydis_site/settings.py +++ b/pydis_site/settings.py @@ -315,6 +315,31 @@ BULMA_SETTINGS = { "footer-padding": "1rem 1.5rem 1rem", "tooltip-max-width": "30rem", }, + "dark_variables": { + "primary": "#7289DA", + + "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": "$primary", + + # 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/navbar.css b/pydis_site/static/css/base/navbar.css new file mode 100644 index 00000000..bf8913ab --- /dev/null +++ b/pydis_site/static/css/base/navbar.css @@ -0,0 +1,65 @@ +.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; +}
\ No newline at end of file diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 0a4dfbb6..f9963d00 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; } diff --git a/pydis_site/static/images/waves/wave_white.svg b/pydis_site/static/images/waves/wave_white.svg index 441dacff..899fe2f9 100644 --- a/pydis_site/static/images/waves/wave_white.svg +++ b/pydis_site/static/images/waves/wave_white.svg @@ -73,5 +73,5 @@ fill-rule="evenodd" d="M 1599.995,17.566918 C 1289,17.566918 1190.102,-0.03623696 789,5.6042811e-5 389,5.6042811e-5 289,17.566918 0,17.566918 v 11.178914 h 1600 c 0,0 -0.01,-6.968673 -0.01,-11.178914 z" id="path9" - style="fill:#ffffff;fill-opacity:1;stroke-width:0.381026" /> + style="fill:#2C2F33;fill-opacity:1;stroke-width:0.381026" /> </svg> diff --git a/pydis_site/static/js/base/navbar.js b/pydis_site/static/js/base/navbar.js new file mode 100644 index 00000000..b49c86b1 --- /dev/null +++ b/pydis_site/static/js/base/navbar.js @@ -0,0 +1,94 @@ +"use strict"; + +const defaultCssElement = $("#bulma-css")[0]; +const darkCssElement = $("#bulma-css-dark")[0]; + +function getCurrentTheme() { + if (document.cookie === "") + return "default"; + + 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; + } +} + +function toggleThemeSwitch() { + 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); + } +} + +// Executed when the page has finished loading. +document.addEventListener("DOMContentLoaded", () => { + + setStyleSheets(); + displayThemedElements(); + + if (getCurrentTheme() === "default") + toggleThemeSwitch(); + + $('#theme-switch').on("click", () => { + + // Update cookie + if (getCurrentTheme() === "dark") { + document.cookie = "theme=default"; + } else { + document.cookie = "theme=dark"; + } + + setStyleSheets(); + displayThemedElements(); + toggleThemeSwitch(); + }); +});
\ No newline at end of file diff --git a/pydis_site/templates/base/base.html b/pydis_site/templates/base/base.html index b7322f12..f7dce8b0 100644 --- a/pydis_site/templates/base/base.html +++ b/pydis_site/templates/base/base.html @@ -24,6 +24,8 @@ <title>Python Discord | {% block title %}Website{% endblock %}</title> {% bulma %} + {% bulma 'dark' %} + {% font_awesome %} <link rel="stylesheet" href="{% static "css/base/base.css" %}"> {% block head %}{% endblock %} diff --git a/pydis_site/templates/base/footer.html b/pydis_site/templates/base/footer.html index 0bc93578..9beb284f 100644 --- a/pydis_site/templates/base/footer.html +++ b/pydis_site/templates/base/footer.html @@ -1,5 +1,5 @@ -<footer class="footer has-background-dark has-text-light"> - <div class="content has-text-centered"> +<footer class="footer has-background-grey-darker"> + <div class="content has-text-centered has-text-grey-lighter"> <p> Powered by <a href="https://www.linode.com/?r=3bc18ce876ff43ea31f201b91e8e119c9753f085"><span id="linode-logo">Linode</span></a> and <a href="https://www.netcup.eu/"><span id="netcup-logo">netcup</span></a><br>Built with <a href="https://www.djangoproject.com/"><span id="django-logo">django</span></a> and <a href="https://bulma.io"><span id="bulma-logo">Bulma</span></a> <br/> © {% now "Y" %} <span id="pydis-text">Python Discord</span> </p> diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index 931693c8..f6a1bc26 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"> @@ -39,7 +46,7 @@ {# YouTube #} <a class="navbar-item" href="https://youtube.com/pythondiscord"> - <span class="icon is-size-4 is-medium"><i class="fab fa-youtube"></i></span> + <span class="icon is-size-4 is-medium is-dark"><i class="fab fa-youtube"></i></span> <span> YouTube</span> </a> @@ -64,7 +71,7 @@ More </span> <div class="navbar-dropdown"> - <a class="navbar-item" href="{% url "resources:index" %}"> + <a class="navbar-item" href="{% url "resources:index" %}" > Resources </a> <a class="navbar-item" href="{% url "content:pages" %}"> @@ -97,12 +104,21 @@ </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"> + <div id="discord-btn" class="buttons is-hidden-touch is-white"> <a href="https://discord.gg/python" class="button is-large is-primary">Discord</a> </div> </div> - </div> </nav> diff --git a/pydis_site/templates/content/listing.html b/pydis_site/templates/content/listing.html index bbdd54b0..c21cea74 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 %} - <div class="box" style="max-width: 800px;"> + <div class="box has-background-white-bis" style="max-width: 800px;"> <span class="icon is-size-4 is-medium"> <i class="{{ data.icon|default:"fas fa-folder" }} is-size-3 is-black has-icon-padding" aria-hidden="true"></i> </span> @@ -32,7 +32,7 @@ {# Single Pages #} {% for page, data in pages.items %} - <div class="box" style="max-width: 800px;"> + <div class="box has-background-white-bis" style="max-width: 800px;"> <span class="icon is-size-4 is-medium"> <i class="{{ data.icon|default:"fab fa-python" }} is-size-3 is-black has-icon-padding" aria-hidden="true"></i> </span> diff --git a/pydis_site/templates/content/page.html b/pydis_site/templates/content/page.html index 679ecec6..0d7087dd 100644 --- a/pydis_site/templates/content/page.html +++ b/pydis_site/templates/content/page.html @@ -8,7 +8,7 @@ </div> <div class="column"> {% if toc %} - <div class="box"> + <div class="box has-background-white-bis"> <p class="menu-label">Table of Contents</p> <ul class="menu-list toc"> {{ toc|safe }} diff --git a/pydis_site/templates/events/base_sidebar.html b/pydis_site/templates/events/base_sidebar.html index 8ce6ad65..cf2f4ed3 100644 --- a/pydis_site/templates/events/base_sidebar.html +++ b/pydis_site/templates/events/base_sidebar.html @@ -2,7 +2,7 @@ {% block event_base_content %} <div class="columns is-variable is-8"> - <div class="column is-two-thirds"> + <div class="column is-two-thirds "> {% block event_content %}{% endblock %} </div> <div class="column"> diff --git a/pydis_site/templates/events/index.html b/pydis_site/templates/events/index.html index 071feb35..2fbf0b85 100644 --- a/pydis_site/templates/events/index.html +++ b/pydis_site/templates/events/index.html @@ -7,7 +7,7 @@ {% endblock %} {% block event_content %} - <div class="box"> + <div class="box has-background-white-bis"> <h2 class="title is-4"><a href="{% url "events:page" path="code-jams" %}">Code Jams</a></h2> <p>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.</p> <p>To help fuel the creative process, we provide a specific theme, like <strong>Think Inside the Box</strong> or <strong>Early Internet</strong>. 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.</p> @@ -15,7 +15,7 @@ <iframe style="max-width: 100%;" width="560" height="315" src="https://www.youtube.com/embed/8fbZsGrqBzo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe> </div> - <div class="box"> + <div class="box has-background-white-bis"> <h2 class="title is-4">PyWeek</h2> <div class="columns is-3" style="--columnGap: 0.75rem;"> <div class="column"> @@ -41,7 +41,7 @@ </div> </div> - <div class="box"> + <div class="box has-background-white-bis"> <h2 class="title is-4">Advent of Code</h2> <div class="columns is-3" style="--columnGap: 0.75rem;"> <div class="column"> @@ -69,7 +69,7 @@ </div> </div> - <div class="box"> + <div class="box has-background-white-bis"> <h2 class="title is-4">Game Jam</h2> <div class="columns is-3" style="--columnGap: 0.75rem;"> <div class="column"> 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 74e0ad4a..0d613e2c 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. </p> <!-- This is going to be the sponsor section --> - <div class="card mb-4"> + <div class="card mb-4 has-background-white-bis"> <div class="card-content"> <div class="media"> <div class="media-left" style="max-width:150px"> @@ -127,7 +127,7 @@ </div> </div> - <div class="card mb-4"> + <div class="card mb-4 has-background-white-bis"> <div class="card-content"> <div class="media"> <div class="media-left" style="max-width:150px"> @@ -146,7 +146,7 @@ </div> </div> </div> - <div class="card mb"> + <div class="card mb has-background-white-bis"> <div class="card-content"> <div class="media"> <div class="media-left" style="max-width:150px"> diff --git a/pydis_site/templates/events/sidebar/code-jams/8.html b/pydis_site/templates/events/sidebar/code-jams/8.html index 36fad680..f7363aeb 100644 --- a/pydis_site/templates/events/sidebar/code-jams/8.html +++ b/pydis_site/templates/events/sidebar/code-jams/8.html @@ -1,5 +1,5 @@ {% load static %} -<div class="panel"> +<div class="panel is-primary has-background-white-bis"> <p class="panel-heading">Important Links</p> <a class="panel-block has-text-link" href="{% url "events:page" path="code-jams/8/rules" %}">Rules</a> <a class="panel-block has-text-link" href="{% url "events:page" path="code-jams/8/frameworks" %}">Approved Frameworks</a> @@ -8,9 +8,9 @@ <a class="panel-block has-text-link" href="{% url "events:page" path="code-jams/code-style-guide" %}">The Code Style Guide</a> </ul> </div> -<div class="box"> +<div class="box has-background-white-bis"> <img src="{% static "images/events/summer_code_jam_2021/banner.png" %}" alt="Summer Code Jam 2021"> - <h4 class="menu-label">Our Sponsors</h4> + <h4 class="menu-label ">Our Sponsors</h4> <a href="https://www.digitalocean.com/" target="_blank"> <img src="{% static "images/events/DO_Logo_Vertical_Blue.png" %}" alt="Digital Ocean"> </a> diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html index d246190b..0e592f72 100644 --- a/pydis_site/templates/home/index.html +++ b/pydis_site/templates/home/index.html @@ -92,7 +92,7 @@ {# Showcase box #} <section id="showcase" class="column is-half-desktop has-text-centered"> - <article class="box"> + <article class="box has-background-white-bis"> <header class="title">Interactive timeline</header> @@ -138,9 +138,9 @@ <div class="column is-one-third-desktop is-half-tablet"> <a href="https://github.com/{{ repo.repo_name }}"> - <article class="card"> + <article class="card has-background-white-bis"> - <header class="card-header"> + <header class="card-header is-white"> <span class="card-header-icon"> <span class="icon"><i class="fab fa-github"></i></span> </span> @@ -181,7 +181,7 @@ {% endif %} <!-- Sponsors --> - <section id="sponsors" class="hero is-light"> + <section id="sponsors" class="hero has-background-white-ter"> <div class="hero-body"> <div class="container"> <h1 class="title is-6 has-text-grey"> diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index 7fc6f325..10c91007 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -18,7 +18,7 @@ <i class="fa fa-comments"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Switch to new paste service</h2> <p class="color-contrast-medium"> We migrate over to <a href="https://github.com/supakeen/pinnwand">pinnwand</a> @@ -39,7 +39,7 @@ <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Retirement of Joe and Sebastiaan</h2> <p class="color-contrast-medium"> Having been at the helm of Python Discord for over 5 and 3 years respectively, Joe and @@ -59,7 +59,7 @@ <i class="fa fa-comments"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Switch to forum-based help system</h2> <p class="color-contrast-medium"> We migrate our help system to use a forum channel, retiring our home-grown rotating help @@ -77,7 +77,7 @@ <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Python 3.11 Release Stream</h2> <p class="color-contrast-medium"> With the Python 3.10 Release Stream being such a success, we brought it back for the @@ -103,7 +103,7 @@ <i class="fa fa-dice"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Summer Code Jam 2022 (CJ9)</h2> <p class="color-contrast-medium"> We host the 9th Code Jam. This year, teams had to use <b>websockets</b> to create a @@ -129,7 +129,7 @@ <i class="fa fa-handshake"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Partnership with pyqtgraph</h2> <p class="color-contrast-medium"> The <code>#pyqtgraph</code> channel is created for the Scientific Graphics and GUI @@ -146,7 +146,7 @@ <i class="fa fa-robot"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Addition of @Sir Robin</h2> <p class="color-contrast-medium"> Our arsenal of bots grows! We add @Sir Robin to power and manage all of our future @@ -163,7 +163,7 @@ <i class="fa fa-question"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Trivia Night</h2> <p class="color-contrast-medium"> How well do you know Python inside out? Members got to find out in a Trivia Night event. @@ -181,7 +181,7 @@ <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Creation of Events Team</h2> <p class="color-contrast-medium"> We form the Events Team to organise and run future events. Led by Kat and comprised by @@ -200,7 +200,7 @@ <i class="fa fa-code"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Deployment of Smarter Resources</h2> <p class="color-contrast-medium"> We gave our resources pages some much needed love and @@ -220,7 +220,7 @@ <i class="fa fa-users"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>We hit 300 000 members!</h2> <p class="color-contrast-medium"> Thanks to an increasing growth rate, Python Discord's membership count doubled from @@ -237,7 +237,7 @@ <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>We host the Python 3.10 Release Stream</h2> <p class="color-contrast-medium"> Leon and Pablo Galindo, CPython Core Developer and Release Manager, host the Python 3.10 @@ -263,7 +263,7 @@ <i class="fa fa-handshake"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Partnership with Black</h2> <p class="color-contrast-medium"> We partner with the uncompromising code formatter project, Black, who were looking for a @@ -281,7 +281,7 @@ <i class="fa fa-dice"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Summer Code Jam 2021 (CJ8)</h2> <p class="color-contrast-medium"> We host the 8th now-annual Code Jam. Teams had to create a program with an text-based user @@ -303,7 +303,7 @@ <i class="fa fa-palette"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Inaugural run of Pixels</h2> <p class="color-contrast-medium"> Inspired by the subreddit, r/place, Pixels was our collaborative canvas event held @@ -326,7 +326,7 @@ <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Owners become PSF Fellows</h2> <p class="color-contrast-medium">Joe, Leon, and Sebastiaan <a href="https://pyfound.blogspot.com/2021/04/python-software-foundation-fellow.html"> @@ -347,7 +347,7 @@ <i class="fa fa-youtube-play"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Summer Code Jam 2020 Highlights</h2> <p class="color-contrast-medium"> We release a new video to our YouTube showing the best projects from the Summer Code Jam 2020. @@ -371,7 +371,7 @@ <i class="fa fa-comment"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>New feature: Weekly discussion channel</h2> <p class="color-contrast-medium">Every week (or two weeks), we'll be posting a new topic to discuss in a channel called <b>#weekly-topic-discussion</b>. Our inaugural topic is a PyCon talk by Anthony Shaw called @@ -395,7 +395,7 @@ <i class="fa fa-microphone"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>We're on the Teaching Python podcast!</h2> <p class="color-contrast-medium">Leon joins Sean and Kelly on the Teaching Python podcast to discuss how the pandemic has changed the way we learn, and what role communities like Python Discord can play in this new world. @@ -417,7 +417,7 @@ <i class="fa fa-microphone"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Leon Sandøy appears on Talk Python To Me</h2> <p class="color-contrast-medium">Leon goes on the Talk Python to Me podcast with Michael Kennedy to discuss the history of Python Discord, the critical importance of culture, and how to run a massive @@ -439,7 +439,7 @@ <i class="fa fa-users"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>We now have 150,000 members!</h2> <p class="color-contrast-medium">Our growth continues to accelerate.</p> @@ -454,7 +454,7 @@ <i class="fa fa-music"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>We release The PEP 8 song</h2> <p class="color-contrast-medium">We release the PEP 8 song on our YouTube channel, which finds tens of thousands of listeners!</p> @@ -476,7 +476,7 @@ <i class="fa fa-snowflake-o"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Advent of Code attracts hundreds of participants</h2> <p class="color-contrast-medium"> A total of 443 Python Discord members sign up to be part of @@ -497,7 +497,7 @@ <i class="fa fa-wrench"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>We migrate all our infrastructure to Kubernetes</h2> <p class="color-contrast-medium">As our tech stack grows, we decide to migrate all our services over to a container orchestration paradigm via Kubernetes. This gives us better control and scalability. @@ -515,7 +515,7 @@ <i class="fa fa-users"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Python Discord hits 100,000 members!</h2> <p class="color-contrast-medium">Only six months after hitting 40,000 users, we hit 100,000 users. A monumental milestone, @@ -532,7 +532,7 @@ <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Python Discord hosts the 2020 CPython Core Developer Q&A</h2> <div class="force-aspect-container"> <iframe class="force-aspect-content" src="https://www.youtube.com/embed/gXMdfBTcOfQ" frameborder="0" @@ -551,7 +551,7 @@ <i class="fa fa-handshake"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Python Discord is now the new home of the PyWeek event!</h2> <p class="color-contrast-medium">PyWeek, a game jam that has been running since 2005, joins Python Discord as one of our official events. Find more information about PyWeek on <a @@ -568,7 +568,7 @@ <i class="fa fa-dice"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>PyDis summer code jam 2020 with the theme “Early Internet” and Django as the technology</h2> <p class="color-contrast-medium">Sponsored by the Django Software Foundation and JetBrains, the Summer Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic @@ -591,7 +591,7 @@ <i class="fa fa-chart-bar"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Python Discord Public Statistics are now live</h2> <p class="color-contrast-medium">After getting numerous requests to publish beautiful data on member count and channel use, we create <a href="https://stats.pythondiscord.com/">stats.pythondiscord.com</a> for @@ -608,7 +608,7 @@ <i class="fa fa-handshake"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Python Discord is now listed on python.org/community</h2> <p class="color-contrast-medium">After working towards this goal for months, we finally work out an arrangement with the PSF that allows us to be listed on that most holiest of websites: @@ -625,7 +625,7 @@ <i class="fa fa-comments"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>ModMail is now live</h2> <p class="color-contrast-medium">Having originally planned to write our own ModMail bot from scratch, we come across an exceptionally good <a href="https://github.com/kyb3r/modmail">ModMail bot by @@ -642,7 +642,7 @@ <i class="fa fa-gamepad"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>PyDis Game Jam 2020 with the “Three of a Kind” theme and Arcade as the technology</h2> <p class="color-contrast-medium">The creator of Arcade, Paul Vincent Craven, joins us as a judge. Several of the Code Jam participants also end up getting involved contributing to the Arcade @@ -665,7 +665,7 @@ <i class="fa fa-users"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Python Discord hits 40,000 members, and is now bigger than Liechtenstein.</h2> <p class="color-contrast-medium"><img src="https://cdn.discordapp.com/attachments/354619224620138496/699666518476324954/unknown.png"> @@ -682,7 +682,7 @@ <i class="fa fa-comments"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>The new help channel system is live</h2> <p class="color-contrast-medium">We release our dynamic help-channel system, which allows you to claim your very own help channel instead of fighting over the static help channels. We release a <a @@ -700,7 +700,7 @@ <i class="fa fa-dice"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>PyDis sixth code jam with the theme “Ancient technology” and the technology Kivy</h2> <p class="color-contrast-medium">Our Code Jams are becoming an increasingly big deal, and the Kivy core developers join us to judge the event and help out our members during the event. One of them, @@ -723,7 +723,7 @@ <i class="fa fa-users"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>PyDis hits 30,000 members</h2> <p class="color-contrast-medium">More than tripling in size since the year before, the community hits 30000 users. At this point, we're probably the largest Python chat community on the planet.</p> @@ -739,7 +739,7 @@ <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture"> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Sebastiaan Zeef becomes an owner</h2> <p class="color-contrast-medium">After being a long time active contributor to our projects and the driving force behind many of our events, Sebastiaan Zeef joins the Owners Team alongside Joe & Leon.</p> @@ -755,7 +755,7 @@ <i class="fa fa-scroll"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>The code of conduct is created</h2> <p class="color-contrast-medium">Inspired by the Adafruit, Rust and Django communities, an essential community pillar is created; Our <a href="https://pythondiscord.com/pages/code-of-conduct/">Code of @@ -772,7 +772,7 @@ <i class="fa fa-code"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>The Django rewrite of pythondiscord.com is now live!</h2> <p class="color-contrast-medium">The site is getting more and more complex, and it's time for a rewrite. We decide to go for a different stack, and build a website based on Django, DRF, Bulma and @@ -789,7 +789,7 @@ <i class="fa fa-users"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>PyDis hits 15,000 members; the “hot ones special” video is released</h2> <div class="force-aspect-container"> <iframe class="force-aspect-content" src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0" @@ -808,7 +808,7 @@ <i class="fa fa-code"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>django-simple-bulma is released on PyPi</h2> <p class="color-contrast-medium">Our very first package on PyPI, <a href="https://pypi.org/project/django-simple-bulma/">django-simple-bulma</a> is a package that @@ -826,7 +826,7 @@ <i class="fa fa-users"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>PyDis hits 10,000 members</h2> <p class="color-contrast-medium">We partner with RLBot, move from GitLab to GitHub, and start putting together the first Advent of Code event.</p> @@ -842,7 +842,7 @@ <i class="fa fa-dice"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>First Hacktoberfest PyDis event; @Sir Lancebot is created</h2> <p class="color-contrast-medium">We create a second bot for our community and fill it up with simple, fun and relatively easy issues. The idea is to create an approachable arena for our members to cut @@ -860,7 +860,7 @@ <i class="fa fa-handshake"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>PyDis is now partnered with Discord; the vanity URL discord.gg/python is created</h2> <p class="color-contrast-medium">After being rejected for their Partner program several times, we finally get approved. The recent partnership with the r/Python subreddit plays a significant role in @@ -877,7 +877,7 @@ <i class="fa fa-users"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>PyDis hits 5,000 members and partners with r/Python</h2> <p class="color-contrast-medium">As we continue to grow, we approach the r/Python subreddit and ask to become their official Discord community. They agree, and we become listed in their sidebar, giving @@ -894,7 +894,7 @@ <i class="fa fa-handshake"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Do You Even Python and PyDis merger</h2> <p class="color-contrast-medium">At this point in time, there are only two serious Python communities on Discord - Ours, and one called Do You Even Python. We approach the owners of DYEP with a bold @@ -913,7 +913,7 @@ <i class="fa fa-scroll"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>The privacy policy is created</h2> <p class="color-contrast-medium">Since data privacy is quite important to us, we create a privacy page pretty much as soon as our new bot and site starts collecting some data. To this day, we keep <a @@ -932,7 +932,7 @@ <i class="fa fa-dice"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>First code jam with the theme “snakes”</h2> <p class="color-contrast-medium">Our very first Code Jam attracts a handful of users who work in random teams of 2. We ask our participants to write a snake-themed Discord bot. Most of the code written @@ -951,7 +951,7 @@ <i class="fa fa-users"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>PyDis hits 2,000 members; pythondiscord.com and @Python are live</h2> <p class="color-contrast-medium">The public moderation bot we're using at the time, Rowboat, announces it will be shutting down. We decide that we'll write our own bot to handle moderation, so that we @@ -969,7 +969,7 @@ <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture"> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Our logo is born. Thanks @Aperture!</h2> <p class="pydis-logo-banner"><img src="https://raw.githubusercontent.com/python-discord/branding/main/logos/logo_banner/logo_site_banner.svg"> @@ -986,7 +986,7 @@ <i class="fa fa-users"></i> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Python Discord hits 1,000 members</h2> <p class="color-contrast-medium">Our main source of new users at this point is a post on Reddit that happens to get very good SEO. We are one of the top 10 search engine hits for the search term @@ -1003,7 +1003,7 @@ <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> </div> - <div class="cd-timeline__content text-component"> + <div class="cd-timeline__content has-background-white-bis text-component"> <h2>Python Discord is created</h2> <p class="color-contrast-medium"><strong>Joe Banks</strong> becomes one of the owners around 3 days after it is created, and <strong>Leon Sandøy</strong> (lemon) joins the owner team later in the year, when the community diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html index 5ca46296..b082c460 100644 --- a/pydis_site/templates/resources/resource_box.html +++ b/pydis_site/templates/resources/resource_box.html @@ -2,7 +2,7 @@ {% load to_kebabcase %} {% load get_category_icon %} -<div class="box resource-box {{ resource.css_classes }}" data-resource-name="{{ resource.name }}"> +<div class="box resource-box has-background-white-bis {{ resource.css_classes }}" data-resource-name="{{ resource.name }}"> {% if 'title_url' in resource %} <a href="{{ resource.title_url }}"> {% include "resources/resource_box_header.html" %} @@ -13,7 +13,7 @@ <p>{{ resource.description|safe }}</p> - <div class="is-flex is-align-items-center"> + <div class="is-flex is-align-items-center "> {# Add primary link #} {% if "title_url" in resource %} <span class="icon is-size-4" style="margin: 5px;"> @@ -36,7 +36,7 @@ <div class="resource-tag-container is-flex ml-auto is-flex-wrap-wrap is-justify-content-end"> {% for tag in resource.tags.topics %} <span - class="tag resource-tag is-primary is-light ml-2 mt-2" + class="tag resource-tag is-primary is-light ml-2 mt-2 has-background-white-ter" data-filter-name="topics" data-filter-item="{{ tag|to_kebabcase }}" > @@ -46,7 +46,7 @@ {% endfor %} {% for tag in resource.tags.type %} <span - class="tag resource-tag has-background-success-light has-text-success-dark ml-2 mt-2" + class="tag resource-tag has-background-success-light has-text-success-dark ml-2 mt-2 has-background-white-ter" data-filter-name="type" data-filter-item="{{ tag|to_kebabcase }}" > @@ -56,7 +56,7 @@ {% endfor %} {% for tag in resource.tags.payment_tiers %} <span - class="tag resource-tag has-background-danger-light has-text-danger-dark ml-2 mt-2" + class="tag resource-tag has-background-danger-light has-text-danger-dark ml-2 mt-2 has-background-white-ter" data-filter-name="payment-tiers" data-filter-item="{{ tag|to_kebabcase }}" > @@ -66,7 +66,7 @@ {% endfor %} {% for tag in resource.tags.difficulty %} <span - class="tag resource-tag has-background-info-light has-text-info-dark ml-2 mt-2" + class="tag resource-tag has-background-info-light has-text-info-dark ml-2 mt-2 has-background-white-ter" data-filter-name="difficulty" data-filter-item="{{ tag|to_kebabcase }}" > diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 101f9965..c728b6b4 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -22,8 +22,8 @@ {% block content %} {% include "base/navbar.html" %} <input type="hidden" id="resource-type-input" value="{{ resource_type }}"> - <section class="section"> - <div class="columns is-variable is-6 is-centered"> + <section class="section has-text-danger"> + <div class="columns is-variable is-6 is-centered "> {# Filtering toolbox #} <div class="column filtering-column is-one-third"> <div class="content is-justify-content-center"> @@ -40,11 +40,11 @@ {# Filter box tags #} - <div class="card filter-tags"> + <div class="card filter-tags is-white has-background-white-bis"> <div class="is-flex ml-auto"> <div id="tag-pool"> {# A filter tag for when there are no filters active #} - <span class="tag no-tags-selected is-secondary ml-2 mt-2"> + <span class="tag no-tags-selected is-secondary ml-2 mt-2 has-background-white-ter"> <i class="fas fa-fw fa-ban mr-1"></i> No filters selected </span> @@ -59,7 +59,7 @@ {% for filter_item in filter_data.filters %} {% if filter_name == "Difficulty" %} <span - class="filter-box-tag tag has-background-info-light has-text-info-dark ml-2 mt-2" + class="filter-box-tag tag has-background-info-light has-text-info-dark ml-2 mt-2 has-background-white-ter" data-filter-name="{{ filter_name|to_kebabcase }}" data-filter-item="{{ filter_item|to_kebabcase }}" > @@ -70,29 +70,29 @@ {% endif %} {% if filter_name == "Type" %} <span - class="filter-box-tag tag has-background-success-light has-text-success-dark ml-2 mt-2" + class="filter-box-tag tag has-background-success-light has-text-success-dark ml-2 mt-2 has-background-white-ter" data-filter-name="{{ filter_name|to_kebabcase }}" data-filter-item="{{ filter_item|to_kebabcase }}" > <i class="{{ filter_item|title|get_category_icon }} mr-1"></i> {{ filter_item|title }} - <button class="delete is-small is-success has-background-success-light"></button> + <button class="delete is-small is-success has-background-success-light "></button> </span> {% endif %} {% if filter_name == "Payment tiers" %} <span - class="filter-box-tag tag has-background-danger-light has-text-danger-dark ml-2 mt-2" + class="filter-box-tag tag has-background-danger-light has-text-danger-dark ml-2 mt-2 has-background-white-ter" data-filter-name="{{ filter_name|to_kebabcase }}" data-filter-item="{{ filter_item|to_kebabcase }}" > - <i class="{{ filter_item|title|get_category_icon }} mr-1"></i> + <i class="{{ filter_item|title|get_category_icon }} mr-1 is-danger"></i> {{ filter_item|title }} <button class="delete is-small is-danger has-background-danger-light"></button> </span> {% endif %} {% if filter_name == "Topics" %} <span - class="filter-box-tag tag is-primary is-light ml-2 mt-2" + class="filter-box-tag tag is-primary is-light ml-2 mt-2 has-background-white-ter" data-filter-name="{{ filter_name|to_kebabcase }}" data-filter-item="{{ filter_item|to_kebabcase }}" > @@ -116,7 +116,7 @@ {# Filter checkboxes #} {% for filter_name, filter_data in filters.items %} - <div class="card filter-category-header"> + <div class="card filter-category-header has-background-white-bis"> <button type="button" class="card-header collapsible"> <span class="card-header-title subtitle is-6 my-2 ml-2"> <i class="fa-fw {{ filter_data.icon }} is-primary" aria-hidden="true"></i>  {{ filter_name }} @@ -138,7 +138,7 @@ {% endif %} <div class="card-content"> {% for filter_item in filter_data.filters %} - <a class="panel-block filter-panel"> + <a class="panel-block filter-panel panel-primary"> <label class="checkbox"> <input class="filter-checkbox" |
