add starts kv and background, fix some css
Some checks failed
Code quality checks / biome (push) Failing after 8s
Some checks failed
Code quality checks / biome (push) Failing after 8s
This commit is contained in:
parent
8b7bedbf0b
commit
83babb8c5c
5 changed files with 137 additions and 31 deletions
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue