daudix-UFO
3b5ec95104
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
125 lines
2.4 KiB
SCSS
125 lines
2.4 KiB
SCSS
@use "sass:color";
|
|
|
|
$accent-color: #c061cb;
|
|
$accent-color-20: color.scale($accent-color, $alpha: -80%);
|
|
|
|
$crt-bg: radial-gradient(
|
|
color.scale($accent-color, $lightness: -80%),
|
|
color.scale($accent-color, $lightness: -90%)
|
|
);
|
|
|
|
$bg-l: color.mix($accent-color, rgb(250, 250, 250), 10%);
|
|
$bg-d: color.mix($accent-color, rgb(11, 11, 11), 5%);
|
|
|
|
$glow:
|
|
0 0 0 1px color.scale($accent-color, $alpha: -95%),
|
|
0 2px 6px 2px color.scale($accent-color, $alpha: -95%),
|
|
0 4px 24px 4px color.scale($accent-color, $alpha: -90%);
|
|
|
|
:root {
|
|
--accent-color-20: #{$accent-color-20};
|
|
--accent-color: #{$accent-color};
|
|
--background: #{$bg-l};
|
|
--crt-bg: #{$crt-bg};
|
|
--glow: #{$glow};
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: #{$bg-d};
|
|
}
|
|
}
|
|
|
|
.gradient-h1 {
|
|
display: inline-block;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
background-image: linear-gradient(
|
|
to bottom right,
|
|
var(--purple2),
|
|
var(--blue2)
|
|
);
|
|
font-size: 3rem;
|
|
font-weight: 900;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.media-grid {
|
|
display: grid;
|
|
gap: 2rem;
|
|
grid-auto-flow: row;
|
|
margin: 1rem 0 1rem;
|
|
padding: 0;
|
|
text-align: center;
|
|
justify-items: center;
|
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
|
|
img:hover,
|
|
img {
|
|
all: unset;
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
img:hover,
|
|
img {
|
|
display: block;
|
|
filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
|
|
drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
|
|
}
|
|
|
|
a {
|
|
padding: 0.75rem;
|
|
border-radius: var(--border-radius);
|
|
background-color: transparent;
|
|
transition: all 0.35s cubic-bezier(0.17, 0.89, 0.32, 1.28);
|
|
}
|
|
|
|
a:hover {
|
|
background-color: var(--fg-05);
|
|
box-shadow: 0 0 0 8px var(--fg-05);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
section#original-icons {
|
|
background-color: rgba(98, 160, 234, 0.2);
|
|
}
|
|
|
|
section#redrawn-icons {
|
|
background-color: rgba(87, 227, 137, 0.2);
|
|
}
|
|
|
|
section#wallpapers {
|
|
background-color: rgba(255, 163, 72, 0.2);
|
|
|
|
img {
|
|
border-radius: var(--border-radius);
|
|
}
|
|
}
|
|
|
|
details.blur ul li {
|
|
color: var(--accent-color);
|
|
filter: blur(6px);
|
|
transition: var(--transition-longer);
|
|
|
|
&:hover {
|
|
color: unset;
|
|
filter: blur(0);
|
|
}
|
|
}
|
|
|
|
.johnvertisement {
|
|
margin: 0 auto;
|
|
display: block;
|
|
width: min(728px, 100vw);
|
|
height: min(90px, 12.367vw);
|
|
border: none;
|
|
}
|
|
|
|
.site-footer {
|
|
details {
|
|
all: unset;
|
|
}
|
|
}
|