aboutsummaryrefslogtreecommitdiffstats
path: root/pydis_site/static/css
diff options
context:
space:
mode:
Diffstat (limited to 'pydis_site/static/css')
-rw-r--r--pydis_site/static/css/base/themes.css69
-rw-r--r--pydis_site/static/css/collapsibles.css16
-rw-r--r--pydis_site/static/css/content/color.css4
-rw-r--r--pydis_site/static/css/content/page.css22
-rw-r--r--pydis_site/static/css/content/tag.css4
-rw-r--r--pydis_site/static/css/error_pages.css4
-rw-r--r--pydis_site/static/css/events/base.css28
-rw-r--r--pydis_site/static/css/home/index.css94
-rw-r--r--pydis_site/static/css/home/timeline.css27
-rw-r--r--pydis_site/static/css/resources/resources.css26
10 files changed, 250 insertions, 44 deletions
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 9e244ed9..dc6183d7 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 e117a35b..c3975799 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;
@@ -153,10 +157,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 +185,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 +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 0a4dfbb6..d4e445f7 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
}
@@ -3552,8 +3558,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 +3575,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 +3603,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..582d96e4 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,
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-19 19:46:05 +0000