website/_src/assets/css/default/home.css

89 lines
1.6 KiB
CSS
Raw Normal View History

2025-06-11 09:36:54 +03:00
@keyframes jump {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-4px);
}
}
#bio .emoji {
display: inline-flex;
height: 20px;
vertical-align: middle;
width: 20px;
&::after,
img {
filter: drop-shadow(0 0 0.5px #000a);
2025-09-09 18:12:57 +03:00
}
2025-08-10 17:05:40 +03:00
}
#badges ul {
gap: var(--pad-s);
padding: 0;
2025-06-25 13:08:50 +03:00
}
#interests a {
align-items: center;
display: inline-flex;
flex-direction: column;
height: auto;
justify-content: center;
text-align: center;
width: 160px;
&:not(:hover, :focus) {
background: transparent;
2025-08-10 17:05:40 +03:00
}
}
#interests span:has(img)::after {
background-image: url("/assets/img/icon/shortcut.png");
background-size: 100%;
content: "";
display: block;
height: 24px;
margin: -1.5rem 0 0 -0.5rem;
pointer-events: none;
position: absolute;
width: 24px;
z-index: 1;
}
.games img {
height: 48px;
}
.manga img {
height: 128px;
}
2025-06-11 09:36:54 +03:00
#pkmn {
background-image: url("/assets/img/pkmn/bg/box.png");
border-bottom-color: #78a068;
border-left-color: #c8f8c0;
border-radius: 4px;
2025-06-11 09:36:54 +03:00
border-right-color: #78a068;
border-style: solid;
2025-06-11 09:36:54 +03:00
border-top-color: #c8f8c0;
border-width: 3px;
2025-08-10 17:05:40 +03:00
margin: var(--pad-l) 0 0 0;
width: fit-content;
2025-10-14 19:40:29 +03:00
& li {
2025-09-10 13:13:20 +03:00
display: flex;
2025-10-14 19:40:29 +03:00
margin-left: -12px;
margin-top: -8px;
2025-10-14 19:40:29 +03:00
& span: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 #000a);
2025-06-16 16:31:53 +03:00
animation: jump 200ms infinite alternate;
}
2025-06-11 09:36:54 +03:00
}
}
#agender {
2025-10-19 15:55:35 +03:00
background-image: var(--agender);
2025-06-11 09:36:54 +03:00
}
#aromantic {
2025-10-19 15:55:35 +03:00
background-image: var(--aromantic);
2025-06-11 09:36:54 +03:00
}
#pansexual {
2025-10-19 15:55:35 +03:00
background-image: var(--pansexual);
2025-06-11 09:36:54 +03:00
}
2025-10-14 19:40:29 +03:00
#badges img {
max-height: 31px;
width: 88px;
}