1
0
mirror of https://github.com/GenderDysphoria/GenderDysphoria.fyi.git synced 2025-11-25 12:32:42 +00:00
Files
GenderDysphoria.fyi/scss/_global.scss
Dex 26aba42e2f 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
2025-06-09 02:26:27 +00:00

60 lines
966 B
SCSS

a {
@include dark-mode {
color: lighten($primary, 10%);
&:hover {
color: lighten($primary, 20%);
}
}
}
body {
font-family: $font-primary;
@include dark-mode {
color: $body-color-dark;
}
}
// Prevents the page header from blocking view of
// the element targeted by the fragment in the URL
[id] {
scroll-margin-top: 60px;
}
@media screen and (min-width: 500px) and (max-width: 800px) {
[id] {
scroll-margin-top: 100px;
}
}
h1:target, h2:target, h3:target, h4:target, h5:target, h6:target {
background-color: yellow !important;
@include dark-mode {
color: black;
}
}
span.svg-icon {
$size: 1.5em;
display: inline-block;
position: relative;
height: $size;
width: $size;
line-height: 1;
svg {
width: 100%;
height: 100%;
fill: currentColor;
vertical-align: baseline;
}
}
img.svg-icon {
height: 1.5em;
display: inline-block;
position: relative;
line-height: 1;
}