add cat widget

src/components/WidgetBar.astro

@@ -1,49 +1,43 @@
 ---
 import { Image } from "astro:assets";
-import baxter from "../images/baxter.png";
+
+import catImg from "../images/widgets/cat.gif";
 
 const backgroundColor = "#ffd4de";
 const backgroundColorNightMode = "#240046";
 ---
 
 <div class="widget-box">
-    <div class="baxter-widget widget">
-        <p class="widget-text">give baxter a pet :3</p>
-        <Image src={baxter} alt="my cat baxter that can be clicked on to pet" />
+    <div class="cat-widget widget">
+        <p>a friend to browse my homepage with &lt;3</p>
+        <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 {
+    .cat-widget {
+        background-color: var(--backgroundColor);
+        height: 19vw;
+        width: 20vw;
+        border-radius: 25px;
         display: flex;
         flex-direction: column;
-        gap: 2rem;
-        border-radius: 25px;
-        height: 35vh;
-        width: 20vw;
+        align-items: center;
     }
 
+    @media (prefers-color-scheme: dark) {
         .widget {
-        background-color: var(--backgroundColor);
+            background-color: var(--backgroundColorNightMode);
         }
-
-    .widget-text {
-        padding: 0.5rem 0;
-        font-size: 1.25rem;
-        width: 19vw;
-        text-align: center;
-        border-bottom: 4px solid hotpink;
     }
 </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>