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 />

52
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,31 +41,33 @@ const linkColorNightMode = "#4cc9f0";
</style> </style>
</head> </head>
<body> <body>
<main> <BasicLayout>
<section> <main>
<h1>welcome to {pageTitle}</h1> <section>
<p> <h1>welcome to {pageTitle}</h1>
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> 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>
<h3>latest status</h3> <h3>latest status</h3>
<div class="status"> <div class="status">
<script src="https://status.lol/emma.js?time&link&fluent&pretty" defer></script> <script src="https://status.lol/emma.js?time&link&fluent&pretty" defer></script>
</div> </div>
<h3>news about emma</h3> <h3>news about emma</h3>
<ul> <ul>
<li> <li>
12-25-2024 - i'm going to try to get back into the swing of learning javascript. i had taken a little break due to life. but this wonderful home of mine on the web came out of that break so i'm happy about that too! 12-25-2024 - i'm going to try to get back into the swing of learning javascript. i had taken a little break due to life. but this wonderful home of mine on the web came out of that break so i'm happy about that too!
</li> </li>
<li> <li>
01-16-2025 - i'm focusing on studying and trying to get used to the idea of pursuing interests because i can. i wrote a blog post today about how hard the concept is to me 01-16-2025 - i'm focusing on studying and trying to get used to the idea of pursuing interests because i can. i wrote a blog post today about how hard the concept is to me
</li> </li>
<li> <li>
01-23-2025 - i'm working on moving my blog to <a href="https://blog.emmas.place" target="_blank">blog.emmas.place</a> it is hosted on weblog.lol, a part of the <a href="https://omg.lol" target="_blank">omg.lol</a> service 01-23-2025 - i'm working on moving my blog to <a href="https://blog.emmas.place" target="_blank">blog.emmas.place</a> it is hosted on weblog.lol, a part of the <a href="https://omg.lol" target="_blank">omg.lol</a> service
</li> </li>
</ul> </ul>
</section> </section>
</main> </main>
</BasicLayout>
</body> </body>
</html> </html>