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.
104 lines
2.2 KiB
CSS
104 lines
2.2 KiB
CSS
4 months ago
|
@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);
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
min-height: 100vh;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
body::before {
|
||
|
|
content: '';
|
||
|
|
flex-grow: 4;
|
||
|
|
}
|
||
|
|
|
||
|
|
body::after {
|
||
|
|
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;
|
||
|
|
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;
|
||
|
|
}
|