Fix conflicts

11 files changed, 295 insertions, 41 deletions

diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css
index 79a8a92d..cc8d13cb 100644
--- a/pydis_site/static/css/base/base.css
+++ b/pydis_site/static/css/base/base.css
@@ -23,6 +23,20 @@ main.site-content {
     padding-right: 0.8em;
 }
 
+[data-theme="dark"] .navbar.is-primary {
+    background-color: #3B4774;
+}
+
+/* No good way other than this for now, because the item hover background setting
+ * applies only for a navbar without is-primary.
+ */
+@media screen and (min-width: 1024px) {
+    [data-theme="dark"] .navbar.is-primary .navbar-end > a.navbar-item:hover,
+    [data-theme="dark"] .navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link {
+        background-color: #455382;
+    }
+}
+
 .navbar-item .navbar-link {
     padding-left: 1.5em;
     padding-right: 2.5em;
@@ -58,6 +72,10 @@ main.site-content {
     overflow: hidden;
 }
 
+[data-theme="dark"] #discord-btn a {
+    background-color: #58689cff;
+}
+
 #discord-btn:hover a {
     box-shadow: 0 1px 4px rgba(0,0,0,0.16), 0 1px 6px rgba(0,0,0,0.23);
     /*transform: scale(1.03) translate3d(0,0,0);*/
@@ -167,3 +185,16 @@ button.is-size-navbar-menu, a.is-size-navbar-menu {
         scroll-behavior: auto;
     }
 }
+
+[data-theme="dark"] .button.is-primary:hover, .button.is-primary.is-hovered,
+[data-theme="dark"] .button.is-link:hover, .button.is-link.is-hovered {
+    background-color: #6276BC;
+}
+
+[data-theme="dark"] .light-image {
+    display: none;
+}
+
+[data-theme="light"] .dark-image {
+    display: none;
+}
diff --git a/pydis_site/static/css/base/themes.css b/pydis_site/static/css/base/themes.css
new file mode 100644
index 00000000..d22c6c58
--- /dev/null
+++ b/pydis_site/static/css/base/themes.css
@@ -0,0 +1,69 @@
+/* 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;
+    border: solid 1px #515151;
+}
+
+.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: white;
+    margin: 7% auto auto 56%;
+}
+
+.theme-icon {
+    position: absolute !important;
+    --ggs: 0.75;
+    transition: opacity 0.1s ease-out;
+}
+
+.theme-icon.light {
+    left: 10%;
+    top: 15%;
+    color: white;
+}
+
+.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 1d73fa00..034bf2fa 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: #34353A;
 }
 
 .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 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/page.css b/pydis_site/static/css/content/page.css
index 58fad0f8..e80fdc13 100644
--- a/pydis_site/static/css/content/page.css
+++ b/pydis_site/static/css/content/page.css
@@ -27,6 +27,14 @@ i.has-icon-padding {
     flex-direction: column;
 }
 
+[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 +118,17 @@ a.dropdown-item {
     white-space: normal;
     padding-right: 0;
 }
+
+[data-theme="dark"] .card.github-card {
+    border: solid 1px #4E4F51;
+}
+
+[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 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/events/base.css b/pydis_site/static/css/events/base.css
index 55725f75..ba3a7fc9 100644
--- a/pydis_site/static/css/events/base.css
+++ b/pydis_site/static/css/events/base.css
@@ -19,6 +19,20 @@ pre {
     margin-bottom: 0 !important
 }
 
+.sponsor {
+    border-radius: .1rem;
+    padding: .3rem;
+}
+
+.sponsor img {
+    display: block;
+    margin: auto;
+}
+
+.box .sponsor {
+    margin-bottom: 1rem;
+}
+
 .event-gallery .date-icon, #main-section .date-icon {
     margin-left: -.25rem;
 }
diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css
index e117a35b..f21263db 100644
--- a/pydis_site/static/css/home/index.css
+++ b/pydis_site/static/css/home/index.css
@@ -23,6 +23,10 @@ h1 {
     padding: 0;
 }
 
+[data-theme="dark"] #wave-hero {
+    background-color: #3B4774;
+}
+
 #wave-hero .container {
     z-index: 4;  /* keep hero contents above wave animations */
 }
@@ -57,6 +61,16 @@ h1 {
     transition: all 0.3s cubic-bezier(.25,.8,.25,1);
 }
 
+[data-theme="dark"] #wave-hero-right img {
+    -webkit-filter: brightness(0.9);
+    filter: brightness(0.9);
+}
+
+[data-theme="dark"] #wave-hero-right img:hover {
+    -webkit-filter: none;
+    filter: none;
+}
+
 #wave-hero-right img:hover {
     box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 }
@@ -72,13 +86,24 @@ h1 {
     transform: translate3d(0,0,0);  /* Trigger 3D acceleration for smoother animation */
 }
 
+[data-theme="dark"] #wave-hero .wave {
+    background: url(../../images/waves_dark/wave_dark.svg) repeat-x;
+}
+
 #front-wave {
     animation-duration: 60s;
     animation-delay: -50s;
-    opacity: 0.5;
     height: 178px;
 }
 
+[data-theme="light"] #front-wave {
+    opacity: 0.5;
+}
+
+[data-theme="dark"] #wave-hero #front-wave {
+    background: url(../../images/waves_dark/wave_darker.svg) repeat-x;
+}
+
 #back-wave {
     animation-duration: 65s;
     height: 198px;
@@ -92,6 +117,10 @@ h1 {
     z-index: 3;
 }
 
+[data-theme="dark"] #bottom-wave {
+    background: url(../../images/waves_dark/wave_black.svg) repeat-x !important;
+}
+
 @keyframes wave {
   0% {
     margin-left: 0;
@@ -153,10 +182,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 3px 3px rgba(0, 0, 0, 0.7);
+}
+
 #projects .card-header {
     box-shadow: none;
     font-size: 1.25rem;
@@ -173,10 +210,21 @@ h1 {
     color: #7289DA;
 }
 
+[data-theme="dark"] #projects .card-header-title {
+    /* 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 +266,64 @@ h1 {
     text-align: center;
 }
 
-#sponsors .columns {
-    display: block;
-    justify-content: center;
-    margin: auto;
-    max-width: 80%;
+#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;
+}
+
+@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);
+    }
 
-    max-height: 5rem;
+    #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 0a4dfbb6..d42bbfc0 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 {
@@ -3424,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
 }
@@ -3490,6 +3496,10 @@ mark {
     box-shadow: 0 0 0 4px var(--color-white), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05)
 }
 
+[data-theme="dark"] .cd-timeline__img {
+    box-shadow: 0 0 0 4px var(--cd-color-2), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05)
+}
+
 .cd-timeline__img i {
     font-size: 1.5em;
     color: white;
@@ -3552,8 +3562,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 +3579,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 +3607,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 96d06111..3bf5ade4 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -37,7 +37,7 @@ i.has-icon-padding {
     display: none;
 }
 #tab-content p.is-active {
-display: block;
+    display: block;
 }
 
 /* Disable highlighting for all text in the filters. */
@@ -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,