add widget bar component and correct bugs

accidentally removed baxter image from v-day
event. needed to re-add and style image map
appropriately

public/events/32bit-cafe/v-day-25/style/style.css

@@ -1,7 +1,7 @@
 :root {
-    --header-footer-color: #BFD9C6CC;
-    --text-color-light-red: #E94E77;
-    --link-color: #E94E77;
+  --header-footer-color: #bfd9c6cc;
+  --text-color-light-red: #e94e77;
+  --link-color: #e94e77;
   --link-hover-color: #664625;
 }
 
@@ -15,7 +15,9 @@
   src: url("../site/resources/fonts/learning-curve-regular.woff2");
 }
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -285,7 +287,7 @@ li {
 
 .headpats {
   position: absolute;
-    left: 86.12%;
+  left: 84.12%;
   top: 23.2%;
   width: 3%;
   height: 3.03%;
@@ -308,8 +310,7 @@ li {
   margin-left: 3rem;
   aspect-ratio: 1;
   object-fit: cover;
-    mask:
-    radial-gradient(at 70% 31%,#000 29%,#0000 30%),
+  mask: radial-gradient(at 70% 31%, #000 29%, #0000 30%),
     radial-gradient(at 30% 31%, #000 29%, #0000 30%),
     linear-gradient(#000 0 0) bottom/100% 50% no-repeat;
   clip-path: polygon(-41% 0, 50% 91%, 141% 0);

src/components/WidgetBar.astro

@@ -0,0 +1,49 @@
+---
+import { Image } from "astro:assets";
+import baxter from "../images/baxter.png";
+
+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>
+</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);
+    }
+
+    .widget-text {
+        padding: 0.5rem 0;
+        font-size: 1.25rem;
+        width: 19vw;
+        text-align: center;
+        border-bottom: 4px solid hotpink;
+    }
+</style>

src/styles/global.css

@@ -28,7 +28,7 @@ body {
   background-color: var(--body-background-color);
   background-image: url("/sakura.webp");
   display: grid;
-  grid-template-columns: 25vw 75vw;
+  grid-template-columns: 25vw 50vw 25vw;
   grid-template-rows: 10vh 100% 10vh;
   row-gap: 5vh;
   color: var(--text-color);