You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
3.0 KiB
CSS
145 lines
3.0 KiB
CSS
@property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
|
|
@property --gradient-color { syntax: "<color>"; initial-value: white; inherits: true; }
|
|
@property --gradient-blur { syntax: "<length>"; initial-value: 0; inherits: true; }
|
|
@keyframes rotation { 0% { --gradient-angle: 0deg; } 100% { --gradient-angle: 360deg; } }
|
|
|
|
:root {
|
|
font-family: 'Ubuntu', 'sans-serif';
|
|
--background: black;
|
|
--foreground: white;
|
|
}
|
|
|
|
html {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
html::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100lvw;
|
|
height: 100lvh;
|
|
z-index: -1;
|
|
|
|
background: conic-gradient(from 0deg in hsl longer hue, hsl(0deg 100% 12.5%) 0 0);
|
|
-webkit-mask-image: url("pattern/penrose.svg");
|
|
-webkit-mask-size: max(100lvmax, 200rem);
|
|
-webkit-mask-position: center;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.spacer-top {
|
|
content: '';
|
|
flex-grow: 4;
|
|
}
|
|
|
|
.spacer-bottom {
|
|
content: '';
|
|
flex-grow: 5;
|
|
}
|
|
|
|
.content {
|
|
padding: 1rem;
|
|
width: calc(100% - 2rem);
|
|
max-width: 35rem;
|
|
}
|
|
|
|
.title {
|
|
font-size: 300%;
|
|
user-select: none;
|
|
margin: 0 0 2rem;
|
|
}
|
|
|
|
.links {
|
|
font-size: 150%;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.link {
|
|
--border-width: .25rem;
|
|
--border-radius: .5rem;
|
|
--gradient-color: var(--foreground);
|
|
|
|
display: block;
|
|
text-decoration: none;
|
|
user-select: none;
|
|
padding: var(--border-width);
|
|
}
|
|
|
|
.link:is(:hover, :active) {
|
|
--gradient-color: red;
|
|
--gradient-blur: .25rem;
|
|
}
|
|
|
|
.link-content {
|
|
padding: .75rem;
|
|
border-radius: var(--border-radius);
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.link-content::before, .link-content::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: calc(-1 * var(--border-width));
|
|
z-index: -1;
|
|
border-radius: calc(var(--border-width) + var(--border-radius));
|
|
animation: rotation 5s linear infinite;
|
|
background: conic-gradient(from var(--gradient-angle) in hsl longer hue, var(--gradient-color) 0 0);
|
|
transition: --gradient-color .125s linear, --gradient-blur .125s linear;
|
|
}
|
|
|
|
.link-content::after {
|
|
filter: blur(var(--gradient-blur));
|
|
}
|
|
|
|
.icon {
|
|
fill: var(--foreground);
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.impressum {
|
|
user-select: none;
|
|
}
|
|
|
|
.footer {
|
|
align-self: end;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.footer a {
|
|
color: var(--foreground);
|
|
text-decoration: none;
|
|
user-select: none;
|
|
}
|
|
|
|
@supports not (background: conic-gradient(from 0deg in hsl longer hue, red 0 0)) {
|
|
html::before {
|
|
background: linear-gradient(-45deg, #204000 0%, #404000 100%);
|
|
}
|
|
|
|
.link-content::before, .link-content::after {
|
|
background: white;
|
|
}
|
|
} |