freyjagp/gdb.lgbtqi.app
1
0
Fork 0
forked from github.com/GenderDysphoria.fyi
Code Actions Packages Releases Activity

Dark Mode (#168)

Browse Source 
* 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:
Dex
2025-06-08 19:26:27 -07:00
committed by GitHub
parent 0936e3718c
commit 26aba42e2f
17 changed files with 372 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
scss/_card.scss
View File

@@ -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;