diff --git a/css/style.css b/css/style.css index 7d9da7a..0796d6e 100644 --- a/css/style.css +++ b/css/style.css @@ -208,6 +208,7 @@ html, body { margin: 0; background: var(--color-background); + scroll-padding-top: 8rem; /* https://tetralogical.com/blog/2023/06/08/focus-in-view/ */ } html { @@ -235,7 +236,6 @@ h4, h5, h6, p { - scroll-margin-top: 132px; width: clamp(min(100%, 40ch), 50ch, min(100%, 60ch)); } @@ -425,6 +425,7 @@ button, .button-primary, .logo { fill: currentColor; } +@media (hover: hover) { button:hover, .button-primary:hover, .button-secondary:hover, .logo:hover { text-decoration: none; transform: scale(1.05); @@ -439,11 +440,12 @@ button:hover, .button-primary:hover, .logo:hover { background: var(--color-button-secondary-hover); color: var(--color-text-button-secondary-hover); } +} button:active, .button-primary:active, .button-secondary:active, .logo:active { box-shadow: var(--shadow-button-active); text-decoration: none; - transform: scale(1.05); + transform: scale(1.00); } button:active, .button-primary:active, .logo:active { @@ -496,6 +498,9 @@ button:active, .button-primary:active, .logo:active { 76%, light-dark(var(--gradient-stop-4-light), var(--gradient-stop-4-dark)) 100% ); + /* background: rgb(255 255 255 / 0.88); */ + /* backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); */ } .menu-bar {