mirror of
https://codeberg.org/vlw/vlw.se.git
synced 2025-09-14 05:13:46 +02:00
101 lines
No EOL
2 KiB
CSS
101 lines
No EOL
2 KiB
CSS
:root {
|
|
--primer-color-accent: 255, 255, 255;
|
|
--color-accent: rgb(var(--primer-color-accent));
|
|
}
|
|
|
|
body {
|
|
background-color: #06c;
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,0.2) 2px, transparent 2px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.2) 2px, transparent 1px),
|
|
linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px)
|
|
;
|
|
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
|
|
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
|
|
}
|
|
|
|
header {
|
|
background-color: transparent;
|
|
}
|
|
|
|
img {
|
|
user-select: none;
|
|
pointer-events: none;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
/* # Sections */
|
|
|
|
/* ## Title */
|
|
|
|
section.title {
|
|
display: grid;
|
|
align-items: center;
|
|
justify-items: center;
|
|
min-height: 50vw;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
padding-bottom: var(--padding);
|
|
}
|
|
|
|
section.title img {
|
|
--outline-width: 5px;
|
|
--outline-color: black;
|
|
|
|
width: 10vw;
|
|
transform: translateY(-1vw);
|
|
animation: bouncy 1s infinite alternate ease-in-out;
|
|
filter:
|
|
drop-shadow(0 10px 0 blue)
|
|
drop-shadow(0 vaR(--outline-width) 0 var(--outline-color))
|
|
drop-shadow(0 calc(var(--outline-width) * -1) 0 var(--outline-color))
|
|
drop-shadow(vaR(--outline-width) 0 0 var(--outline-color))
|
|
drop-shadow(calc(var(--outline-width) * -1) 0 0 var(--outline-color))
|
|
;
|
|
}
|
|
|
|
@keyframes bouncy {
|
|
25% { transform: translateY(0); }
|
|
100% { transform: translateY(0); }
|
|
}
|
|
|
|
/* ### Super Secret Settings */
|
|
|
|
section.sss {
|
|
border-radius: 6px;
|
|
padding: var(--padding);
|
|
margin: var(--padding) 0;
|
|
background-color: rgba(255, 255, 255, .1);
|
|
}
|
|
|
|
section.sss button {
|
|
margin-top: var(--padding);
|
|
}
|
|
|
|
/* ## Coffee */
|
|
|
|
section.coffee {
|
|
display: grid;
|
|
gap: var(--padding);
|
|
grid-template-columns: 100px 1fr;
|
|
}
|
|
|
|
section.coffee img {
|
|
width: 100%;
|
|
}
|
|
|
|
/* # Size queries */
|
|
|
|
@media (min-width: 700px) {
|
|
section.title {
|
|
gap: var(--padding);
|
|
margin: 50px 0;
|
|
min-height: unset;
|
|
grid-template-columns: repeat(10, 1fr);
|
|
}
|
|
|
|
section.title img {
|
|
width: 100%;
|
|
transform: translateY(-10px);
|
|
}
|
|
} |