diff --git a/assets/bilder/background.png b/assets/bilder/background.png deleted file mode 100644 index a97f0d2..0000000 Binary files a/assets/bilder/background.png and /dev/null differ diff --git a/assets/design.css b/assets/design.css index 99f71de..d277140 100644 --- a/assets/design.css +++ b/assets/design.css @@ -1,3 +1,14 @@ +:root { + --clr-neon: hsl(317 100% 54%); +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + + *{ margin: 0; padding: 0; @@ -18,7 +29,10 @@ body{ position: fixed; top: 0; width: 100%; + height: 5rem; background-image: url(./bilder/bg2.jpg); + place-items: center; + padding-right: 10rem; } .menu a { @@ -31,6 +45,66 @@ body{ transition: ease 0.3s; } +.neon-button { + font-size: 1rem; + display: inline-block; + cursor: pointer; + text-decoration: none; + color: var(--clr-neon); + border: var(--clr-neon) 0.125em solid; + padding: 0.125em 0.5em; + margin-left: 0.85em; + border-radius: 0.25em; + text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor; + box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon); + position: relative; +} + +.neon-button::before { + pointer-events: none; + content: ""; + position: absolute; + background: var(--clr-neon); + top: 120%; + left: 0; + width: 100%; + height: 100%; + + transform: perspective(1em) rotateX(40deg) scale(1, 0.35); + filter: blur(1em); + opacity: 0.7; + +} + +.neon-button::after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + box-shadow: 0 0 2em 0.5em var(--clr-neon); + opacity: 0; + background-color: var(--clr-neon); + z-index: -1; + transition: opacity 100ms linear; +} + +.neon-button:hover, +.neon-button:focus { + color: var(--clr-bg); + text-shadow: none; +} + +.neon-button:hover::before, +.neon-button:focus::before { + opacity: 1; +} +.neon-button:hover::after, +.neon-button:focus::after { + opacity: 1; +} + .menu p{ position: fixed; top: 25px; @@ -38,9 +112,8 @@ body{ color: #f2f2f2; } -.menu a:hover { - background: #ddd; - color: black; +a .menu .spaceholder { + size: 0.125em; } .seite {