zepp/emmas.place
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add widget bar component and correct bugs

Browse Source 
accidentally removed baxter image from v-day
event. needed to re-add and style image map
appropriately
This commit is contained in:
emma 2025-02-27 23:39:52 -05:00
parent e41979a67b
commit 771c8beeec
5 changed files with 241 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
baxter.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

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

@ -1,320 +1,321 @@
:root { :root {
--header-footer-color: #BFD9C6CC; --header-footer-color: #bfd9c6cc;
--text-color-light-red: #E94E77; --text-color-light-red: #e94e77;
--link-color: #E94E77; --link-color: #e94e77;
--link-hover-color: #664625; --link-hover-color: #664625;
} }
@font-face { @font-face {
font-family: alwaysinmyheart; font-family: alwaysinmyheart;
src: url("../site/resources/fonts/alwaysinmyheart.woff2"); src: url("../site/resources/fonts/alwaysinmyheart.woff2");
} }
@font-face { @font-face {
font-family: learning-curve-regular; font-family: learning-curve-regular;
src: url("../site/resources/fonts/learning-curve-regular.woff2"); src: url("../site/resources/fonts/learning-curve-regular.woff2");
} }
*, *::before, *::after { *,
margin: 0; *::before,
padding: 0; *::after {
box-sizing: border-box; margin: 0;
padding: 0;
box-sizing: border-box;
} }
html { html {
font-size: 16px; font-size: 16px;
} }
body { body {
height: 100vh; height: 100vh;
width: auto; width: auto;
background-image: url("../img/background.webp"); background-image: url("../img/background.webp");
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.container { .container {
height: 80vh; height: 80vh;
width: auto; width: auto;
position: relative; position: relative;
z-index: 0; z-index: 0;
} }
img { img {
max-height: 100%; max-height: 100%;
width: auto; width: auto;
object-fit: contain; object-fit: contain;
} }
header { header {
width: 100vw; width: 100vw;
height: 8vh; height: 8vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: var(--header-footer-color); background: var(--header-footer-color);
} }
footer { footer {
width: 100vw; width: 100vw;
height: 8vh; height: 8vh;
background: var(--header-footer-color); background: var(--header-footer-color);
padding: 0 2rem; padding: 0 2rem;
} }
section { section {
display: flex; display: flex;
width: 100vw; width: 100vw;
height: auto; height: auto;
} }
a { a {
text-decoration: none; text-decoration: none;
color: var(--link-color); color: var(--link-color);
} }
a:hover { a:hover {
color: var(--link-hover-color); color: var(--link-hover-color);
} }
ul { ul {
list-style-type: none; list-style-type: none;
} }
li { li {
padding: 0.25rem; padding: 0.25rem;
} }
.footer-container { .footer-container {
display: flex; display: flex;
width: 100%; width: 100%;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.cafe { .cafe {
font-size: 1.25rem; font-size: 1.25rem;
} }
.message { .message {
margin-left: -15vw; margin-left: -15vw;
font-size: 3rem; font-size: 3rem;
font-family: alwaysinmyheart; font-family: alwaysinmyheart;
color: var(--text-color-light-red); color: var(--text-color-light-red);
} }
.credits { .credits {
font-size: 1.25rem; font-size: 1.25rem;
} }
.header-text { .header-text {
font-family: alwaysinmyheart; font-family: alwaysinmyheart;
font-size: 3.25rem; font-size: 3.25rem;
color: var(--text-color-light-red); color: var(--text-color-light-red);
} }
.fa-solid.fa-heart { .fa-solid.fa-heart {
color: var(--text-color-light-red); color: var(--text-color-light-red);
} }
.tileOne { .tileOne {
position: absolute; position: absolute;
left: 26.61%; left: 26.61%;
top: 25.78%; top: 25.78%;
width: 10.05%; width: 10.05%;
height: 16.25%; height: 16.25%;
z-index: 2; z-index: 2;
} }
.tileTwo { .tileTwo {
position: absolute; position: absolute;
left: 38.39%; left: 38.39%;
top: 25.94%; top: 25.94%;
width: 11.2%; width: 11.2%;
height: 16.64%; height: 16.64%;
z-index: 2; z-index: 2;
} }
.tileThree { .tileThree {
position: absolute; position: absolute;
left: 50.52%; left: 50.52%;
top: 25.78%; top: 25.78%;
width: 11.88%; width: 11.88%;
height: 17.34%; height: 17.34%;
z-index: 2; z-index: 2;
} }
.tileFour { .tileFour {
position: absolute; position: absolute;
left: 63.44%; left: 63.44%;
top: 25.94%; top: 25.94%;
width: 10.89%; width: 10.89%;
height: 17.27%; height: 17.27%;
z-index: 2; z-index: 2;
} }
.tileFive { .tileFive {
position: absolute; position: absolute;
left: 25.68%; left: 25.68%;
top: 43.05%; top: 43.05%;
width: 10.94%; width: 10.94%;
height: 17.27%; height: 17.27%;
z-index: 2; z-index: 2;
} }
.tileSix { .tileSix {
position: absolute; position: absolute;
left: 37.81%; left: 37.81%;
top: 43.59%; top: 43.59%;
width: 11.41%; width: 11.41%;
height: 17.03%; height: 17.03%;
z-index: 2; z-index: 2;
} }
.tileSeven { .tileSeven {
position: absolute; position: absolute;
left: 49.74%; left: 49.74%;
top: 43.44%; top: 43.44%;
width: 12.5%; width: 12.5%;
height: 17.73%; height: 17.73%;
z-index: 2; z-index: 2;
} }
.tileEight { .tileEight {
position: absolute; position: absolute;
left: 62.76%; left: 62.76%;
top: 43.52%; top: 43.52%;
width: 12.4%; width: 12.4%;
height: 17.73%; height: 17.73%;
z-index: 2; z-index: 2;
} }
.tileNine { .tileNine {
position: absolute; position: absolute;
left: 24.74%; left: 24.74%;
top: 60.94%; top: 60.94%;
width: 10.57%; width: 10.57%;
height: 16.48%; height: 16.48%;
z-index: 2; z-index: 2;
} }
.tileTen { .tileTen {
position: absolute; position: absolute;
left: 37.03%; left: 37.03%;
top: 61.33%; top: 61.33%;
width: 11.77%; width: 11.77%;
height: 16.56%; height: 16.56%;
z-index: 2; z-index: 2;
} }
.tileEleven { .tileEleven {
position: absolute; position: absolute;
left: 49.64%; left: 49.64%;
top: 61.64%; top: 61.64%;
width: 12.03%; width: 12.03%;
height: 17.19%; height: 17.19%;
z-index: 2; z-index: 2;
} }
.tileTwelve { .tileTwelve {
position: absolute; position: absolute;
left: 62.55%; left: 62.55%;
top: 61.8%; top: 61.8%;
width: 13.07%; width: 13.07%;
height: 17.11%; height: 17.11%;
z-index: 2; z-index: 2;
} }
.visitor-note { .visitor-note {
margin: 0 2rem; margin: 0 2rem;
margin-top: 3rem; margin-top: 3rem;
} }
.read-this { .read-this {
cursor: pointer; cursor: pointer;
height: 250px; height: 250px;
width: auto; width: auto;
} }
.love-note { .love-note {
height: 80vh; height: 80vh;
width: 40vw; width: 40vw;
background-image: url(../img/pink-paper.webp); background-image: url(../img/pink-paper.webp);
padding: 3rem; padding: 3rem;
z-index: 3; z-index: 3;
position: absolute; position: absolute;
left: 25%; left: 25%;
display: none; display: none;
} }
.note { .note {
font-size: 1.75rem; font-size: 1.75rem;
line-height: 2rem; line-height: 2rem;
margin-bottom: 1rem; margin-bottom: 1rem;
font-family: learning-curve-regular; font-family: learning-curve-regular;
} }
.close-note { .close-note {
height: 2vh; height: 2vh;
width: 2vw; width: 2vw;
background-color: #00000000; background-color: #00000000;
border: none; border: none;
font-size: 2rem; font-size: 2rem;
display: none; display: none;
} }
.close-note::after { .close-note::after {
display: inline-block; display: inline-block;
content: "\00d7"; content: "\00d7";
} }
.items { .items {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.baxter { .baxter {
width: 300px; width: 300px;
height: auto; height: auto;
position: absolute; position: absolute;
top: 20%; top: 20%;
z-index: 1; z-index: 1;
} }
.headpats { .headpats {
position: absolute; position: absolute;
left: 86.12%; left: 84.12%;
top: 23.2%; top: 23.2%;
width: 3%; width: 3%;
height: 3.03%; height: 3.03%;
transform: rotate(17deg); transform: rotate(17deg);
z-index: 2; z-index: 2;
} }
.baxter-thought { .baxter-thought {
position: relative; position: relative;
top: -2%; top: -2%;
left: 85%; left: 85%;
width: 20%; width: 20%;
height: 20%; height: 20%;
width: 150px; width: 150px;
height: 125px; height: 125px;
} }
.trans-pride-heart { .trans-pride-heart {
width: 200px; width: 200px;
margin-left: 3rem; margin-left: 3rem;
aspect-ratio: 1; aspect-ratio: 1;
object-fit: cover; object-fit: cover;
mask: mask: radial-gradient(at 70% 31%, #000 29%, #0000 30%),
radial-gradient(at 70% 31%,#000 29%,#0000 30%), radial-gradient(at 30% 31%, #000 29%, #0000 30%),
radial-gradient(at 30% 31%,#000 29%,#0000 30%),
linear-gradient(#000 0 0) bottom/100% 50% no-repeat; linear-gradient(#000 0 0) bottom/100% 50% no-repeat;
clip-path: polygon(-41% 0,50% 91%, 141% 0); clip-path: polygon(-41% 0, 50% 91%, 141% 0);
position: relative; position: relative;
top: 40%; top: 40%;
left: 15%; left: 15%;
transform: rotate(-15deg); transform: rotate(-15deg);
} }

49
src/components/WidgetBar.astro Normal file
View File

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

BIN
src/images/baxter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

2
src/styles/global.css
View File

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