sundae/website
sundae/website
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

yay website

Browse source
This commit is contained in:
sundae 2025-06-11 09:36:54 +03:00
parent 623e26a808
commit 4d44fd94a2
No known key found for this signature in database
585 changed files with 5066 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

179
_src/assets/css/home.css Normal file
View file

@ -0,0 +1,179 @@
@keyframes jump {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-4px);
}
}
@media (prefers-color-scheme: light) {
#intro span[id]::before {
text-shadow: 0 0 1rem var(--primary-dark-500);
}
#collection {
& a:is(:hover, :focus) {
box-shadow: 0 0 0 1px currentColor;
background-color: var(--primary-500);
}
& img {
box-shadow: 0 0 0 1px
color-mix(in lch, transparent, var(--primary-dark-500) 30%);
}
}
}
@media (prefers-color-scheme: dark) {
#intro span[id]::before {
text-shadow: 0 0 1rem var(--secondary-900);
}
#collection {
& a:is(:hover, :focus) {
box-shadow: 0 0 0 1px currentColor;
background-color: var(--secondary-500);
}
& img {
box-shadow: 0 0 0 1px
color-mix(in lch, transparent, var(--secondary-500) 70%);
}
}
}
#pkmn {
display: flex;
flex-wrap: wrap;
background-image: url("/assets/img/pkmn/bg/box.png");
border-radius: 5px;
width: max-content;
border-bottom-color: #78a068;
border-left-color: #c8f8c0;
border-right-color: #78a068;
border-top-color: #c8f8c0;
border-width: 3px;
border-style: solid;
& img:hover {
filter: drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff)
drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
drop-shadow(0 2px 3px #0006);
animation: jump 200ms infinite alternate;
}
}
body [id]:not(:nth-child(1)) ul {
display: flex;
flex-wrap: wrap;
}
#agender {
background-image: linear-gradient(
black 0 14.28%,
silver 0 28.57%,
white 0 42.85%,
#a3fa73 0 57.14%,
white 0 71.42%,
silver 0 85.71%,
black 0
);
}
#aromantic {
background-image: linear-gradient(
#0a2 20%,
#7d6 0 40%,
white 0 60%,
darkgray 0 80%,
black 0
);
}
#pansexual {
background-image: linear-gradient(#f09 33.33%, gold 0 66.66%, deepskyblue 0);
}
#agender::before {
content: "agender";
}
#aromantic::before {
content: "aromantic";
}
#pansexual::before {
content: "pansexual";
}
#intro span[id]::before {
width: inherit;
height: inherit;
position: absolute;
z-index: -1;
}
#intro span[id] {
font-size: 2rem;
color: transparent;
background-clip: text;
background-size: 2rem;
background-position: center;
background-repeat: repeat-x;
}
#intro {
& p {
font-family: "Urbanist", sans-serif;
font-size: 1.8rem;
}
}
#collection {
display: inherit;
gap: 1rem;
& ul {
margin: 0;
padding: 0;
justify-content: center;
}
& li {
display: flex;
& a {
padding: 8px;
transition: background-color var(--trans);
text-decoration: none;
}
& span {
display: flex;
width: 14ch;
text-align: center;
justify-content: center;
}
}
& div:has(img) {
margin: 0 auto;
width: fit-content;
}
.music img {
height: 48px;
}
}
#badges {
& ul {
gap: 1rem;
padding: 0;
list-style-type: none;
}
& a {
display: flex;
padding: inherit;
margin: 0;
}
& a:is(:hover, :focus) img {
filter: drop-shadow(4px 6px 0 #0006);
transform: translateY(-4px);
transition: 0.3s;
}
}
#collection div:has(img)::after {
content: url("/assets/img/icon/shortcut.png");
display: flex;
z-index: 1;
position: absolute;
width: 24px;
height: 24px;
margin: -1.5rem 0 0 -0.5rem;
pointer-events: none;
}
@media screen and (max-width: 920px) {
#collection {
display: flex;
flex-direction: column;
}
}