138 lines
2.8 KiB
CSS
138 lines
2.8 KiB
CSS
|
:root {
|
||
|
|
--gay-erasure: 1
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-display: swap;
|
||
|
|
font-family: 'RubikBold';
|
||
|
|
font-style: bold;
|
||
|
|
font-weight: 600;
|
||
|
|
src: url('./fonts/rubik-v28-latin-600.woff2') format('woff2');
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-display: swap;
|
||
|
|
font-family: 'Rubik';
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 400;
|
||
|
|
src: url('./fonts/rubik-v28-latin-regular.woff2') format('woff2');
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: rgb(20, 20, 60);
|
||
|
|
/* background: linear-gradient(145deg, rgb(30, 30, 80), rgb(0, 0, 0)); */
|
||
|
|
|
||
|
|
padding: 5px calc(5px + 5%);
|
||
|
|
|
||
|
|
color: white;
|
||
|
|
text-align: center;
|
||
|
|
font-family: "Rubik", Verdana, Geneva, Tahoma, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
min-height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
#yaoiButton {
|
||
|
|
background: linear-gradient(
|
||
|
|
90deg,
|
||
|
|
rgba(255, 0, 0, var(--gay-erasure)) 0%,
|
||
|
|
rgba(255, 154, 0, var(--gay-erasure)) 10%,
|
||
|
|
rgba(208, 222, 33, var(--gay-erasure)) 20%,
|
||
|
|
rgba(79, 220, 74, var(--gay-erasure)) 30%,
|
||
|
|
rgba(63, 218, 216, var(--gay-erasure)) 40%,
|
||
|
|
rgba(47, 201, 226, var(--gay-erasure)) 50%,
|
||
|
|
rgba(28, 127, 238, var(--gay-erasure)) 60%,
|
||
|
|
rgba(95, 21, 242, var(--gay-erasure)) 70%,
|
||
|
|
rgba(186, 12, 248, var(--gay-erasure)) 80%,
|
||
|
|
rgba(251, 7, 217, var(--gay-erasure)) 90%,
|
||
|
|
rgba(255, 0, 0, var(--gay-erasure)) 100%
|
||
|
|
);
|
||
|
|
background-size: 300px auto;
|
||
|
|
background-position-x: 0px;
|
||
|
|
/* border: 2px white solid;
|
||
|
|
padding: 10px; */
|
||
|
|
display: inline-block;
|
||
|
|
-webkit-text-stroke: white 3px;
|
||
|
|
font-size: 5rem;
|
||
|
|
animation-name: slidebg;
|
||
|
|
animation-duration: 2.5s;
|
||
|
|
animation-timing-function: linear;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
font-weight: bold;
|
||
|
|
|
||
|
|
background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
transition: transform 2s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
#yaoiButton:hover {
|
||
|
|
transform: scale(1.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
#yaoiButton > div {
|
||
|
|
display: inline-block;
|
||
|
|
|
||
|
|
animation-name: float;
|
||
|
|
animation-duration: 1s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
animation-direction: alternate;
|
||
|
|
animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
||
|
|
animation-fill-mode: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
#yaoiButton > div:nth-child(2) {
|
||
|
|
animation-delay: 0.25s;
|
||
|
|
}
|
||
|
|
|
||
|
|
#yaoiButton > div:nth-child(3) {
|
||
|
|
animation-delay: 0.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
#yaoiButton > div:nth-child(4) {
|
||
|
|
animation-delay: 0.75s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post {
|
||
|
|
background-color: black;
|
||
|
|
border: 2px gray solid;
|
||
|
|
text-align: left;
|
||
|
|
padding: 5px 16px;
|
||
|
|
width: 600px;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
border-radius: 16px;
|
||
|
|
margin: 16px auto;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes float {
|
||
|
|
from {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
transform: translateY(5px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slidebg {
|
||
|
|
from {
|
||
|
|
background-position-x: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
background-position-x: 300px;
|
||
|
|
}
|
||
|
|
}
|