vampysite/source/css/index.css

188 lines
2.6 KiB
CSS

.centered {
position: absolute;
display: flex;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.text {
margin-top: 5em;
width: 400px;
}
h1 {
font-family: "Cinzel Decorative";
color: var(--accent);
width: min-content;
font-size: 55px;
font-weight: normal;
line-height: 1;
margin-bottom: 0;
}
h1 span {
font-size: 75px;
}
h3,
p {
font-family: "Crimson";
font-weight: normal;
}
h3 {
color: var(--accent-dark);
font-size: 30px;
margin-top: 0.2em;
}
p {
margin-top: 2em;
font-size: 25px;
line-height: 1.1;
color: var(--text);
}
abbr {
text-decoration: none;
font-style: italic;
animation: blink 5s linear infinite;
}
picture img {
height: 700px;
}
/* Links menu */
details {
margin-top: 1.5em;
width: max-content;
}
details a {
opacity: 0;
margin: 0 8px;
}
details * {
display: inline-block;
}
details[open] a {
opacity: 100;
transition: opacity 0.2s ease-in-out;
}
details,
details * {
font-family: "Crimson";
font-weight: normal;
font-size: 26px;
text-decoration: none;
color: var(--url);
height: min-content;
cursor: pointer;
user-select: none;
}
details summary::before {
content: "⦿ ";
filter: drop-shadow(0 0 5px);
}
details[open] > summary {
visibility: hidden;
font-size: 0;
}
details[open] > summary::after {
content: "←";
visibility: visible;
font-size: 26px;
position: relative;
top: -2px;
}
details *:hover {
animation: glow 0.2s ease-in-out both;
}
/* animations */
@keyframes glow {
from {
font-weight: normal;
}
to {
filter: drop-shadow(0.5px 0.5px 2px);
}
}
@keyframes blink {
80% {
filter: drop-shadow(0 0 1px) opacity(80%);
}
}
/* mobile screens */
@media (max-width: 880px) {
.centered {
display: block;
top: -20px;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.text {
margin-top: unset;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, -60%);
transform: translate(-50%, -60%);
width: 320px;
padding-bottom: 4em;
}
h1 {
filter: drop-shadow(5px 5px 5px var(--bg));
}
}
@media (max-width: 500px) {
picture img {
max-width: 100vw;
height: auto;
}
}
@media (max-width: 360px) {
.text {
position: unset;
left: unset;
-webkit-transform: translate(0, -60%);
transform: translate(0, -60%);
width: fit-content;
margin-left: 2em;
}
h1 {
font-size: 40px;
}
h1 span {
font-size: 60px;
}
details {
width: fit-content;
}
}