diff --git a/css/button.css b/css/button.css index b4b884d..d235356 100644 --- a/css/button.css +++ b/css/button.css @@ -5,7 +5,7 @@ font-weight: 400; font-size: 15px; color: var(--text-color); - background: var(--primary-gradient); + background: var(--button-gradient); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); @@ -15,7 +15,7 @@ } .btn:hover { - background: linear-gradient(120deg, rgba(40, 20, 60, 0.6), rgba(30, 30, 80, 0.4)); + background: var(--button-hover-gradient); transform: translateY(-1px); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1); } \ No newline at end of file diff --git a/css/sections/homelab.css b/css/sections/homelab.css index 593e232..62233a5 100644 --- a/css/sections/homelab.css +++ b/css/sections/homelab.css @@ -2,16 +2,43 @@ margin-top: 18px; padding: 32px 24px; background: rgba(20, 20, 30, 0.10); - backdrop-filter: blur(24px) saturate(140%) brightness(1.08); - -webkit-backdrop-filter: blur(24px) saturate(140%) brightness(1.08); + backdrop-filter: blur(48px); + -webkit-backdrop-filter: blur(48px); border-radius: 24px; - box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10); + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.10); min-width: 26rem; max-width: 26rem; align-self: stretch; display: flex; flex-direction: column; gap: 18px; + position: relative; + overflow: hidden; +} + +.homelab-background { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + /* background: linear-gradient(45deg, #1a1a2e, #16213e, #0f3460, #000000, #53354a, #800080); */ + background: linear-gradient(45deg, #1a1a2e44, #0f346066, #000000, #3e085e66, #80008022); + background-size: 400% 400%; + animation: gradient-animation 50s ease infinite; +} + +@keyframes gradient-animation { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } } .homelab-title { @@ -31,54 +58,10 @@ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; - animation: homelab-gradient-move 24s linear infinite; + animation: gradient-animation 25s ease infinite; } -@keyframes homelab-gradient-move { - 0% { - background-position: 0% 50%; - } - 10% { - background-position: 15% 50%; - } - - 20% { - background-position: 30% 50%; - } - - 30% { - background-position: 45% 50%; - } - - 40% { - background-position: 60% 50%; - } - - 50% { - background-position: 75% 50%; - } - - 60% { - background-position: 100% 50%; - } - - 70% { - background-position: 75% 50%; - } - - 80% { - background-position: 45% 50%; - } - - 90% { - background-position: 15% 50%; - } - - 100% { - background-position: 0% 50%; - } -} .homelab-buttons { display: flex; diff --git a/css/variables.css b/css/variables.css index 3e59813..5295951 100644 --- a/css/variables.css +++ b/css/variables.css @@ -4,7 +4,9 @@ --primary-color-light: #81d4fa; --secondary-color: #667eea; --tertiary-color: #764ba2; - --primary-gradient: linear-gradient(120deg, rgba(30, 10, 50, 0.6), rgba(10, 10, 40, 0.4)); + + --button-gradient: linear-gradient(120deg, rgba(30, 10, 50, 0.5), rgba(10, 10, 40, 0.4)); + --button-hover-gradient: linear-gradient(120deg, rgba(30, 10, 50, 0.75), rgba(10, 10, 40, 0.4)); --background-color: #000000; --glass-background: rgba(20, 20, 20, 0.125); diff --git a/index.html b/index.html index ef1b03e..c51df74 100644 --- a/index.html +++ b/index.html @@ -72,6 +72,7 @@
+

Homelab

Diagram