From 245443a721e8a1e74c3aa60ba15e95992a5c43e0 Mon Sep 17 00:00:00 2001 From: jbb01 <32650546+jbb01@users.noreply.github.com> Date: Thu, 12 Sep 2024 21:15:23 +0200 Subject: [PATCH] initial commit --- index.css | 104 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 52 +++++++++++++++++++++++++++ 2 files changed, 156 insertions(+) create mode 100644 index.css create mode 100644 index.html diff --git a/index.css b/index.css new file mode 100644 index 0000000..16cc9ba --- /dev/null +++ b/index.css @@ -0,0 +1,104 @@ +@property --gradient-angle { syntax: ""; initial-value: 0deg; inherits: false; } +@property --gradient-color { syntax: ""; initial-value: white; inherits: true; } +@property --gradient-blur { syntax: ""; 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; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..a4d631d --- /dev/null +++ b/index.html @@ -0,0 +1,52 @@ + + + + + + + + jonahbauer.eu + + + + + +
+

jonahbauer.eu

+ +
+ + \ No newline at end of file