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 backgroundColor = "#ffd4de";
const backgroundColorNightMode = "#240046";
const disabilityPrideBlack = "#595959"; const disabilityPrideBlack = "#595959";
const disabilityPrideRed = "#cf7280"; const disabilityPrideRed = "#cf7280";
const disabilityPrideYellow = "#eede77"; const disabilityPrideYellow = "#eede77";
@ -14,7 +15,7 @@ const disabilityPrideGreen = "#3bb07d";
</span> </span>
</footer> </footer>
<style define:vars={{backgroundColor, disabilityPrideBlack, disabilityPrideRed, disabilityPrideYellow, disabilityPrideWhite, disabilityPrideBlue, disabilityPrideGreen}}> <style define:vars={{backgroundColor, backgroundColorNightMode, disabilityPrideBlack, disabilityPrideRed, disabilityPrideYellow, disabilityPrideWhite, disabilityPrideBlue, disabilityPrideGreen}}>
footer { footer {
background-color: var(--backgroundColor); background-color: var(--backgroundColor);
grid-row: 3/4; grid-row: 3/4;
@ -44,5 +45,10 @@ const disabilityPrideGreen = "#3bb07d";
font-family: system-ui; font-family: system-ui;
font-size: 1.3rem; font-size: 1.3rem;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
} }
@media (prefers-color-scheme: dark) {
footer {
background-color: var(--backgroundColorNightMode);
}
}
</style> </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 motto = "a celebration of self-expression through the personal web";
const backgroundColor = "#ffd4de"; const backgroundColor = "#ffd4de";
const backgroundColorNightMode = "#240046";
const biPridePink = "#d60270"; const biPridePink = "#d60270";
const biPridePurple = "#9b4f96"; const biPridePurple = "#9b4f96";
const biPrideBlue = "#0038a8"; const biPrideBlue = "#0038a8";
@ -20,7 +21,7 @@ const biPrideBlue = "#0038a8";
</span> </span>
</header> </header>
<style define:vars={{biPridePink, biPridePurple, biPrideBlue, backgroundColor}}> <style define:vars={{biPridePink, biPridePurple, biPrideBlue, backgroundColor, backgroundColorNightMode}}>
@font-face { @font-face {
font-family: lato-regular; font-family: lato-regular;
src: url("/lato-regular.woff2"); src: url("/lato-regular.woff2");
@ -67,4 +68,9 @@ const biPrideBlue = "#0038a8";
font-family: lato-regular; font-family: lato-regular;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
} }
@media (prefers-color-scheme: dark) {
header {
background-color: var(--backgroundColorNightMode);
}
</style> </style>

9
src/components/Navigation.astro
View File

@ -1,5 +1,6 @@
--- ---
const backgroundColor = "#ffd4de"; const backgroundColor = "#ffd4de";
const backgroundColorNightMode = "#240046";
const transPrideBlue = "#5bcefa"; const transPrideBlue = "#5bcefa";
const transPridePink = "#f5a9b8"; const transPridePink = "#f5a9b8";
const transPrideWhite = "#ffffff"; const transPrideWhite = "#ffffff";
@ -36,7 +37,7 @@ const transPrideWhite = "#ffffff";
</ul> </ul>
</nav> </nav>
<style define:vars={{backgroundColor, transPrideBlue, transPridePink, transPrideWhite}}> <style define:vars={{backgroundColor, backgroundColorNightMode, transPrideBlue, transPridePink, transPrideWhite}}>
nav { nav {
background-color: var(--backgroundColor); background-color: var(--backgroundColor);
grid-row: 2/3; grid-row: 2/3;
@ -70,4 +71,10 @@ const transPrideWhite = "#ffffff";
nav ul li a { nav ul li a {
font-size: 1rem; font-size: 1rem;
} }
@media (prefers-color-scheme: dark) {
nav {
background-color: var(--backgroundColorNightMode);
}
}
</style> </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"; import "../styles/global.css";
const pageTitle = "emma's place"; const pageTitle = "emma's place";
@ -39,6 +41,7 @@ const linkColorNightMode = "#4cc9f0";
</style> </style>
</head> </head>
<body> <body>
<BasicLayout>
<main> <main>
<section> <section>
<h1>welcome to {pageTitle}</h1> <h1>welcome to {pageTitle}</h1>
@ -65,5 +68,6 @@ const linkColorNightMode = "#4cc9f0";
</ul> </ul>
</section> </section>
</main> </main>
</BasicLayout>
</body> </body>
</html> </html>