zepp/emmas.place
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

testing night mode

Browse Source 
add local styling for status.lol widget
add prefers-color-scheme: dark local styling
for status widget
test that global dark mode and local dark mode
styles are working
This commit is contained in:
emma 2025-02-19 19:40:02 -05:00
parent b5a5a141a6
commit 36d6c2b6ed
2 changed files with 24 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/index.astro
View File

@ -1,5 +1,10 @@
--- ---
import "../styles/global.css"; import "../styles/global.css";
const pageTitle = "emma's place";
const backgroundColor = "#ffd4de";
const backgroundColorNightMode = "#240046";
const textColor = "#f1dac4";
const linkColor = "#4cc9f0";
--- ---
<html lang="en"> <html lang="en">
@ -8,12 +13,29 @@ import "../styles/global.css";
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>Astro</title> <title>{pageTitle}</title>
<style is:global define:vars={{backgroundColor, backgroundColorNightMode, textColor, linkColor}}>
.status .statuslol_container .statuslol {
background: var(--backgroundColor) !important;
}
@media (prefers-color-scheme: dark) {
.status .statuslol_content p {
color: var(--textColor);
}
.status .statuslol_container .statuslol {
background: var(--backgroundColorNightMode) !important;
}
.status .statuslol_content .statuslol_time a {
color: var(--linkColor) !important;
}
}
</style>
</head> </head>
<body> <body>
<main> <main>
<section> <section>
<h1>welcome to emma's place</h1> <h1>welcome to {pageTitle}</h1>
<p> <p>
you're at emma's place. coffee or tea of your choice are waiting for you. my cat baxter loves pets if you'd like to say hello. there's a little bit of eveything that is me here. there's no rush, you can be here for as little or as long as you'd like. you can just take it easy here. if all of this somehow brings you some happiness or makes you feel like maybe there's another human on the other side of your screen then i've done my job. have a look around, don't forget to grab a beverage you're at emma's place. coffee or tea of your choice are waiting for you. my cat baxter loves pets if you'd like to say hello. there's a little bit of eveything that is me here. there's no rush, you can be here for as little or as long as you'd like. you can just take it easy here. if all of this somehow brings you some happiness or makes you feel like maybe there's another human on the other side of your screen then i've done my job. have a look around, don't forget to grab a beverage
</p> </p>

4
src/styles/global.css
View File

@ -321,10 +321,6 @@ main section ul li {
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
} }
.status .statuslol_container .statuslol {
background: var(--background-color) !important;
}
.picrew-gallery { .picrew-gallery {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;