color/theming changes

astro.config.mjs

@@ -1,5 +1,14 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  image: {
+    // Used for all Markdown images; not configurable per-image
+    // Used for all `<Image />` and `<Picture />` components unless overridden with a prop
+    experimentalLayout: "responsive",
+  },
+  experimental: {
+    responsiveImages: true,
+  },
+});

src/components/Footer.astro

@@ -1,5 +1,5 @@
 ---
-const backgroundColor = "#ffd4de";
+const backgroundColor = "#E0D1ED";
 const backgroundColorNightMode = "#240046";
 ---
 

src/components/Header.astro

@@ -8,13 +8,13 @@ import disabilityPrideFlag from "../images/Visually_Safe_Disability_Pride_Flag.s
 const pageTitle = "Emma's place";
 const motto = "a celebration of self-expression through the personal web";
 
-const backgroundColor = "#ffd4de";
+const backgroundColor = "#E0D1ED";
 const backgroundColorNightMode = "#240046";
 ---
 
 <header id="top">
 	<span class="logo">
-		{pageTitle} <Image class="header-heart-svg" src={transPrideFlag} alt="the transgender pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={biPrideFlag} alt="the bisexual pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={disabilityPrideFlag} alt="the disability pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={redHeartFlat} alt="a red heart meant to symbolize love" />
+		{pageTitle} <Image class="header-heart-svg" src={transPrideFlag} alt="the transgender pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={biPrideFlag} alt="the bisexual pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={disabilityPrideFlag} alt="the disability pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={redHeartFlat} alt="a red heart meant to symbolize love" layout="none"/>
 	</span>
 	<span class="motto">
         {motto}

src/components/Navigation.astro

@@ -1,5 +1,5 @@
 ---
-const backgroundColor = "#ffd4de";
+const backgroundColor = "#E0D1ED";
 const backgroundColorNightMode = "#240046";
 ---
 

src/components/WidgetBar.astro

@@ -1,49 +1,47 @@
 ---
 import { Image } from "astro:assets";
-import baxter from "../images/baxter.png";
 
-const backgroundColor = "#ffd4de";
+import catImg from "../images/widgets/cat.webp";
+
+const backgroundColor = "#E0D1ED";
 const backgroundColorNightMode = "#240046";
 ---
 
 <div class="widget-box">
-    <div class="baxter-widget widget">
+    <div class="widget">
-        <p class="widget-text">give baxter a pet :3</p>
+        <p>a friend to browse my homepage with &lt;3</p>
-        <Image src={baxter} alt="my cat baxter that can be clicked on to pet" />
+        <Image src={catImg} alt="a cat sitting in a stained glass window"/>
     </div>
 </div>
-   
 
 <style define:vars={{backgroundColor, backgroundColorNightMode}}>
     .widget-box {
         height: 100%;
         width: 20vw;
         margin-left: 2.5rem;
-        border-radius: 25px;
         display: flex;
         flex-direction: column;
         grid-column: 3/4;
         grid-row: 2/3;
     }
 
-    .baxter-widget {
-        display: flex;
-        flex-direction: column;
-        gap: 2rem;
-        border-radius: 25px;
-        height: 35vh;
-        width: 20vw;
-    }
-
     .widget {
         background-color: var(--backgroundColor);
+        height: auto;
+        width: 20vw;
+        border-radius: 25px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
     }
 
-    .widget-text {
+    img {
-        padding: 0.5rem 0;
+        margin-bottom: 0.25rem;
-        font-size: 1.25rem;
+    }
-        width: 19vw;
+
-        text-align: center;
+    @media (prefers-color-scheme: dark) {
-        border-bottom: 4px solid hotpink;
+        .widget {
+            background-color: var(--backgroundColorNightMode);
+        }
     }
 </style>

src/layouts/BasicLayout.astro

@@ -2,6 +2,7 @@
 import "../styles/global.css";
 import Header from "../components/Header.astro";
 import Navigation from "../components/Navigation.astro";
+import WidgetBar from "../components/WidgetBar.astro";
 import Footer from "../components/Footer.astro";
 
 const { pageTitle } = Astro.props;
@@ -22,6 +23,7 @@ const { pageTitle } = Astro.props;
                 <slot />
             </section>
         </main>
+        <WidgetBar />
         <Footer />
     </body>
 </html>

src/pages/index.astro

@@ -3,7 +3,7 @@ import BasicLayout from "../layouts/BasicLayout.astro";
 
 const pageTitle = "emma's place";
 
-const backgroundColor = "#ffd4de";
+const backgroundColor = "#E0D1ED";
 const backgroundColorNightMode = "#240046";
 const textColorNightMode = "#f1dac4";
 const linkColorNightMode = "#4cc9f0";

src/styles/global.css

@@ -1,6 +1,6 @@
 :root {
   --text-color: #0c0c0c;
-  --background-color: #ffd4de;
+  --background-color: #e0d1ed;
   --body-background-color: #ffcccc;
   --scroll-gutter: #eb76ff88;
   --scroll-bar: #ffa8ec88;
@@ -25,7 +25,7 @@ html {
 
 body {
   background-color: var(--body-background-color);
-  background-image: url("/sakura.webp");
+  background-image: url("/flowers.png");
   display: grid;
   grid-template-columns: 25vw 50vw 25vw;
   grid-template-rows: 10vh 100% 10vh;