creations/profilePage
1
2
Fork 4
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add starts kv and background, fix some css
Some checks failed
Code quality checks / biome (push) Failing after 8s
Details

Browse source
This commit is contained in:
creations 2025-04-19 19:15:11 -04:00
parent 8b7bedbf0b
commit 83babb8c5c
Signed by: creations
GPG key ID: 8F553AA4320FC711
5 changed files with 137 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

68
public/css/index.css
View file

@ -1,3 +1,47 @@
.raindrop {
position: absolute;
background-color: white;
border-radius: 50%;
pointer-events: none;
z-index: 1;
}
.star,
.snowflake {
position: absolute;
background-color: white;
border-radius: 50%;
pointer-events: none;
z-index: 1;
}
.star {
animation: twinkle ease-in-out infinite alternate;
}
.shooting-star {
position: absolute;
background: linear-gradient(90deg, white, transparent);
width: 100px;
height: 2px;
opacity: 0.8;
border-radius: 2px;
transform-origin: left center;
}
@keyframes twinkle {
from {
opacity: 0.3;
transform: scale(1);
}
to {
opacity: 1;
transform: scale(1.2);
}
}
/* actual styles below */
body {
font-family: system-ui, sans-serif;
background-color: var(--background);
@ -9,22 +53,6 @@ body {
align-items: center;
}
.snowflake {
position: absolute;
background-color: white;
border-radius: 50%;
pointer-events: none;
z-index: 1;
}
.raindrop {
position: absolute;
background-color: white;
border-radius: 50%;
pointer-events: none;
z-index: 1;
}
.hidden {
display: none !important;
}
@ -38,7 +66,7 @@ body {
flex-direction: column;
align-items: center;
margin-bottom: 2rem;
max-width: 600px;
max-width: 700px;
width: 100%;
}
@ -65,6 +93,7 @@ body {
.badges {
max-width: 700px;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
@ -226,7 +255,7 @@ ul {
list-style: none;
padding: 0;
width: 100%;
max-width: 600px;
max-width: 700px;
}
.activities {
@ -234,7 +263,8 @@ ul {
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 600px;
max-width: 700px;
box-sizing: border-box;
padding: 0;
margin: 0;
}