mirror of
https://github.com/GenderDysphoria/GenderDysphoria.fyi.git
synced 2025-11-25 20:42:40 +00:00
Dark Mode (#168)
* Implement toggle button * Dark mode mixins * Dark mode color design * Disable dark mode for prints * Initial dark mode design * Fix light mode mixin * Disable dark mode on print style * Move dark mode color scheme below the default style to allow referencing * Fix dropdown * Fix device-based dark mode * Dark mode index page design * Responsive auxiliary nav with dark mode toggle * Remove box shadow when on smaller displays * Prevent default on toggle click * Move attribution/licensing to README.md * Fix header padding on index page * Background color transition animation * Remove margin on index when on mobile displays * Remove neon border when on mobile * Fix post-header margin on mobile * Lighten card headers in dark mode
This commit is contained in:
@@ -3,12 +3,30 @@
|
||||
text-decoration: none;
|
||||
background: white;
|
||||
|
||||
@include dark-mode {
|
||||
background: $content-bg-dark;
|
||||
border: 1px solid $primary;
|
||||
box-shadow: 0 0 5px 2px rgba($primary, 0.5);
|
||||
|
||||
.card-header {
|
||||
background: lighten($content-bg-dark, 5);
|
||||
}
|
||||
}
|
||||
|
||||
&.borderless {
|
||||
border: none;
|
||||
|
||||
@include dark-mode {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.card-img, .card-img-top {
|
||||
// width: unset;
|
||||
@include dark-mode {
|
||||
// Some card images don't work on dark backgrounds
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.card-img-top + .card-img-top {
|
||||
@@ -23,6 +41,10 @@
|
||||
font-size: 12px;
|
||||
font-family: $font-secondary;
|
||||
|
||||
@include dark-mode {
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
ul { padding-left: 1.2em; }
|
||||
}
|
||||
|
||||
@@ -70,6 +92,10 @@
|
||||
font-family: Roboto, Helvetica, Arial,sans-serif;
|
||||
text-decoration:none;
|
||||
|
||||
@include dark-mode {
|
||||
background: $content-bg-dark;
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
.ig-header {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user