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

BasicLayout complete

Browse Source 
tested with index.astro in light and dark modes
This commit is contained in:
emma 2025-02-19 22:00:20 -05:00
parent db251790d1
commit 5bc025bd27
5 changed files with 61 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Footer.astro
View File

@ -1,5 +1,6 @@
---
const backgroundColor = "#ffd4de";
const backgroundColorNightMode = "#240046";
const disabilityPrideBlack = "#595959";
const disabilityPrideRed = "#cf7280";
const disabilityPrideYellow = "#eede77";
@ -14,7 +15,7 @@ const disabilityPrideGreen = "#3bb07d";
</span>
</footer>
<style define:vars={{backgroundColor, disabilityPrideBlack, disabilityPrideRed, disabilityPrideYellow, disabilityPrideWhite, disabilityPrideBlue, disabilityPrideGreen}}>
<style define:vars={{backgroundColor, backgroundColorNightMode, disabilityPrideBlack, disabilityPrideRed, disabilityPrideYellow, disabilityPrideWhite, disabilityPrideBlue, disabilityPrideGreen}}>
footer {
background-color: var(--backgroundColor);
grid-row: 3/4;
@ -44,5 +45,10 @@ const disabilityPrideGreen = "#3bb07d";
font-family: system-ui;
font-size: 1.3rem;
letter-spacing: 0.05rem;
}
}
@media (prefers-color-scheme: dark) {
footer {
background-color: var(--backgroundColorNightMode);
}
}
</style>

8
src/components/Header.astro
View File

@ -6,6 +6,7 @@ const pageTitle = "emma's place";
const motto = "a celebration of self-expression through the personal web";
const backgroundColor = "#ffd4de";
const backgroundColorNightMode = "#240046";
const biPridePink = "#d60270";
const biPridePurple = "#9b4f96";
const biPrideBlue = "#0038a8";
@ -20,7 +21,7 @@ const biPrideBlue = "#0038a8";
</span>
</header>
<style define:vars={{biPridePink, biPridePurple, biPrideBlue, backgroundColor}}>
<style define:vars={{biPridePink, biPridePurple, biPrideBlue, backgroundColor, backgroundColorNightMode}}>
@font-face {
font-family: lato-regular;
src: url("/lato-regular.woff2");
@ -67,4 +68,9 @@ const biPrideBlue = "#0038a8";
font-family: lato-regular;
letter-spacing: 0.05rem;
}
@media (prefers-color-scheme: dark) {
header {
background-color: var(--backgroundColorNightMode);
}
</style>

9
src/components/Navigation.astro
View File

@ -1,5 +1,6 @@
---
const backgroundColor = "#ffd4de";
const backgroundColorNightMode = "#240046";
const transPrideBlue = "#5bcefa";
const transPridePink = "#f5a9b8";
const transPrideWhite = "#ffffff";
@ -36,7 +37,7 @@ const transPrideWhite = "#ffffff";
</ul>
</nav>
<style define:vars={{backgroundColor, transPrideBlue, transPridePink, transPrideWhite}}>
<style define:vars={{backgroundColor, backgroundColorNightMode, transPrideBlue, transPridePink, transPrideWhite}}>
nav {
background-color: var(--backgroundColor);
grid-row: 2/3;
@ -70,4 +71,10 @@ const transPrideWhite = "#ffffff";
nav ul li a {
font-size: 1rem;
}
@media (prefers-color-scheme: dark) {
nav {
background-color: var(--backgroundColorNightMode);
}
}
</style>

10
src/layouts/BasicLayout.astro Normal file
View File

@ -0,0 +1,10 @@
---
import Header from "../components/Header.astro";
import Navigation from "../components/Navigation.astro";
import Footer from "../components/Footer.astro";
---
<Header />
<Navigation />
<slot />
<Footer />

4
src/pages/index.astro
View File

@ -1,4 +1,6 @@
---
import BasicLayout from "../layouts/BasicLayout.astro";
import "../styles/global.css";
const pageTitle = "emma's place";
@ -39,6 +41,7 @@ const linkColorNightMode = "#4cc9f0";
</style>
</head>
<body>
<BasicLayout>
<main>
<section>
<h1>welcome to {pageTitle}</h1>
@ -65,5 +68,6 @@ const linkColorNightMode = "#4cc9f0";
</ul>
</section>
</main>
</BasicLayout>
</body>
</html>