bucket/public/static/main.css

118 lines
2 KiB
CSS
Raw Normal View History

2023-07-09 03:30:33 +00:00
@font-face {
font-family: merriweather;
src: url("/static/merriweather.ttf");
}
:root {
--red: #ffcaca;
--orange: #ffedc1;
--yellow: #feffb8;
--green: #c4ffcb;
--blue: #add8ff;
--purple: #ccafe9;
--darkgreen: #3E885B;
--darkblue: #7fb4f5;
--background: #454545;
--rainbowright: linear-gradient(to right, var(--red) 0%, var(--orange) 20%, var(--yellow) 40%, var(--green) 60%, var(--blue) 80%, var(--purple) 100%);
}
* {
font-family: merriweather, Georgia, serif;
color: var(--purple);
}
html {
background-color: var(--background);
}
html, body {
height: 100%;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
padding: 0.5em;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: center;
}
a {
display: inline-block;
color: inherit;
position: relative;
text-decoration: none;
transition: linear 0.2s;
color: var(--purple);
}
a:before {
background: var(--rainbowright);
content: '';
height: 2px;
position: absolute;
bottom: -1.5px;
width: 100%;
left: 50%;
transform: translateX(-50%);
transition: width 0.2s ease-in-out;
}
a:hover{
color: var(--white);
}
a:hover:before{
width: 0;
}
#left { text-align: left; }
#mid { text-align: center; }
#right { text-align: right; }
#left, #right {
flex-grow: 1;
flex-basis: 0;
}
#header span {
animation-delay: var(--n);
animation: wave 1.5s linear var(--n) infinite forwards running, rainbow 3s linear var(--n) infinite forwards running;
position: relative;
display: inline-block;
}
@media screen and (prefers-reduced-motion: reduce) {
#header span {
animation: none;
}
}
@keyframes wave {
0% {top: 0px;}
25% {top: -1px;}
50% {top: 0px;}
75% {top: 1px;}
100% {top: 0px;}
}
@keyframes rainbow {
0% {color: var(--red);}
17% {color: var(--orange);}
33% {color: var(--yellow);}
50% {color: var(--green);}
67% {color: var(--blue);}
83% {color: var(--purple);}
100% {color: var(--red);}
}