eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Let the photos section adapt to light/dark mode

Browse source
This commit is contained in:
Eryn Wells 2022-10-30 11:34:12 -07:00
parent 57947282ce
commit 16af88e08a
1 changed files with 15 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

35
content/photos/photos.css
View file

@ -1,25 +1,20 @@
:root { :root {
--body-code-background-color: rgb(var(--dk-gray)); --date-item-background-color: rgb(var(--lt-gray));
--box-shadow-color: rgba(var(--dk-gray), 0.8);
--heading-color: rgb(var(--white)); --photo-params-background-color: rgb(var(--lt-gray));
--photo-params-container-background-color: rgb(var(--super-lt-gray));
--photo-params-color: rgb(var(--sub-dk-gray));
--photo-params-border-color: rgb(var(--super-lt-gray));
}
@media (prefers-color-scheme: dark) {
:root {
--date-item-background-color: rgb(var(--dk-gray));
--html-color: rgb(var(--white)); --photo-params-background-color: rgb(var(--dk-gray));
--html-background-color: rgb(var(--black)); --photo-params-container-background-color: rgb(var(--sub-dk-gray));
--photo-params-color: rgb(var(--super-lt-gray));
--photo-params-background-color: rgb(var(--dk-gray)); --photo-params-border-color: rgb(var(--sub-dk-gray));
--photo-params-container-background-color: rgb(var(--sub-dk-gray)); }
--photo-params-color: rgb(var(--super-lt-gray));
--photo-params-border-color: rgb(var(--sub-dk-gray));
--platter-background-color: rgba(var(--black), var(--platter-background-opacity));
--separator-color: rgb(var(--dk-gray));
--twitter-icon: url(/icons/twitter-dark.svg);
--github-icon: url(/icons/github-dark.svg);
--instagram-icon: url(/icons/instagram-dark.svg);
--rss-icon: url(/icons/rss-dark.svg);
} }
.photos.list { .photos.list {
@ -50,7 +45,7 @@
} }
.photos.list > div { .photos.list > div {
background-color: #333; background-color: var(--date-item-background-color);
border-radius: 3px; border-radius: 3px;
width: 100%; width: 100%;
height: 100%; height: 100%;