mirror of
https://codeberg.org/vlw/vlw.se.git
synced 2025-09-13 21:13:40 +02:00
69 lines
No EOL
1.5 KiB
CSS
69 lines
No EOL
1.5 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 {
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
/* # Sections */
|
|
|
|
/* ## Title */
|
|
|
|
section.title {
|
|
gap: var(--padding);
|
|
display: grid;
|
|
align-items: center;
|
|
justify-items: center;
|
|
grid-template-columns: repeat(10, 1fr);
|
|
min-height: 30vh;
|
|
}
|
|
|
|
section.title img {
|
|
--outline-width: 5px;
|
|
--outline-color: black;
|
|
|
|
width: 100%;
|
|
transform: translateY(-10px);
|
|
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(10px); }
|
|
100% { transform: translateY(10px); }
|
|
}
|
|
|
|
/* ## Coffee */
|
|
|
|
section.coffee {
|
|
display: grid;
|
|
grid-template-columns: 100px 1fr;
|
|
}
|
|
|
|
section.coffee img {
|
|
height: 100%;
|
|
} |