diff --git a/sass/_buttons.scss b/sass/_buttons.scss index cd413e1..13eea50 100644 --- a/sass/_buttons.scss +++ b/sass/_buttons.scss @@ -7,8 +7,11 @@ } .inline-button { + -webkit-backdrop-filter: var(--blur); + backdrop-filter: var(--blur); background-color: var(--fg-muted-1); border-radius: var(--rounded-corner); + box-shadow: var(--edge-highlight); color: var(--fg-color); display: inline-block; font-size: 0.9rem; @@ -26,11 +29,17 @@ } &.colored { - color: var(--primary-color); + -webkit-backdrop-filter: unset; + backdrop-filter: unset; background-color: transparent; + box-shadow: none; + color: var(--primary-color); &:hover { + -webkit-backdrop-filter: var(--blur); + backdrop-filter: var(--blur); background-color: var(--primary-color-alpha); + box-shadow: var(--edge-highlight); } } } diff --git a/sass/_comments.scss b/sass/_comments.scss index 1e6fdbd..d1abe8d 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -30,24 +30,26 @@ section#comments { width: 4rem; .avatar { + -webkit-backdrop-filter: var(--blur); all: unset; + backdrop-filter: var(--blur); background-color: var(--fg-muted-1); background-position: 50%; background-size: cover; border-radius: var(--rounded-corner); - box-shadow: var(--shadow); + box-shadow: var(--edge-highlight), var(--shadow); height: 100%; overflow: hidden; transition: var(--transition); width: 100%; &:hover { - box-shadow: var(--shadow-raised); + box-shadow: var(--edge-highlight), var(--shadow-raised); transform: rotate(10deg) scale(1.1); } &:active { - box-shadow: var(--shadow); + box-shadow: var(--edge-highlight), var(--shadow); transform: scale(var(--active)); } } @@ -61,8 +63,11 @@ section#comments { grid-area: name; .instance { + -webkit-backdrop-filter: var(--blur); + backdrop-filter: var(--blur); background-color: var(--fg-muted-1); border-radius: 999px; + box-shadow: var(--edge-highlight); color: var(--fg-color); font-size: 0.8rem; padding: 0.25rem 0.75rem; @@ -79,11 +84,17 @@ section#comments { } &.op { + -webkit-backdrop-filter: unset; + backdrop-filter: unset; background-color: transparent; + box-shadow: none; color: var(--primary-color); &:hover { + -webkit-backdrop-filter: var(--blur); + backdrop-filter: var(--blur); background-color: var(--primary-color-alpha); + box-shadow: var(--edge-highlight); } &::before { @@ -131,7 +142,10 @@ section#comments { transition: var(--transition); &:hover { + -webkit-backdrop-filter: var(--blur); + backdrop-filter: var(--blur); background-color: var(--red-bg); + box-shadow: var(--edge-highlight); text-decoration: none; } diff --git a/sass/_main.scss b/sass/_main.scss index 285b14d..87ade6c 100644 --- a/sass/_main.scss +++ b/sass/_main.scss @@ -182,13 +182,15 @@ abbr { } aside { + -webkit-backdrop-filter: var(--blur); + backdrop-filter: var(--blur); background-color: var(--primary-color-alpha); border-radius: var(--rounded-corner); box-shadow: var(--shadow); - width: 30%; - padding: 1rem; - margin-inline-start: 1rem; float: right; + margin-inline-start: 1rem; + padding: 1rem; + width: 30%; @media only screen and (max-width: 720px) { & { @@ -207,10 +209,12 @@ kbd { } code:not(pre code) { - padding: 0.125rem 0.375rem; - border-radius: var(--rounded-corner-small); + -webkit-backdrop-filter: var(--blur); + backdrop-filter: var(--blur); background-color: var(--fg-muted-2); + border-radius: var(--rounded-corner-small); color: var(--red-fg); + padding: 0.125rem 0.375rem; } pre { @@ -253,6 +257,8 @@ pre { } kbd { + -webkit-backdrop-filter: var(--blur); + backdrop-filter: var(--blur); background-color: var(--fg-muted-2); border-radius: var(--rounded-corner-small); box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3); @@ -262,6 +268,7 @@ kbd { line-height: normal; padding: 0.125rem 0.375rem; transition: var(--transition); + // Small nice thingy, keys can be pressed! &:active { background-color: var(--fg-muted-3); @@ -271,10 +278,12 @@ kbd { } mark { - padding: 0.125rem 0.375rem; - border-radius: var(--rounded-corner-small); + -webkit-backdrop-filter: var(--blur); + backdrop-filter: var(--blur); background-color: var(--primary-color-alpha); + border-radius: var(--rounded-corner-small); color: var(--primary-color); + padding: 0.125rem 0.375rem; } figcaption { @@ -285,6 +294,8 @@ figcaption { } details { + -webkit-backdrop-filter: var(--blur); + backdrop-filter: var(--blur); background-color: var(--fg-muted-1); border-radius: var(--rounded-corner); box-shadow: var(--shadow); @@ -314,10 +325,14 @@ table { tr { &:nth-child(even) { + -webkit-backdrop-filter: var(--blur); + backdrop-filter: var(--blur); background-color: var(--fg-muted-1); } th { + -webkit-backdrop-filter: var(--blur); + backdrop-filter: var(--blur); background-color: var(--fg-muted-2); } } diff --git a/sass/_nav.scss b/sass/_nav.scss index 66da05a..b778218 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -1,14 +1,13 @@ #site-nav { - -webkit-backdrop-filter: saturate(180%) blur(10px); - backdrop-filter: saturate(180%) blur(10px); + -webkit-backdrop-filter: var(--blur); + backdrop-filter: var(--blur); background-color: var(--nav-bg); border-radius: 26px; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), - 0px 12px 24px -16px rgba(0, 0, 0, 0.5); + box-shadow: var(--edge-highlight), 0px 12px 24px -16px rgba(0, 0, 0, 0.5); margin: 1rem auto; + max-width: min(calc(var(--content-width) + 10rem), 90%); position: sticky; top: 1rem; - max-width: min(calc(var(--content-width) + 10rem), 90%); z-index: 999; nav { diff --git a/sass/_statements.scss b/sass/_statements.scss index 38c86d5..f4804c2 100644 --- a/sass/_statements.scss +++ b/sass/_statements.scss @@ -2,6 +2,9 @@ margin: 1rem 0 1rem; padding: 1rem 1rem 0.5rem 1rem; border-radius: var(--rounded-corner); + -webkit-backdrop-filter: var(--blur); + backdrop-filter: var(--blur); + box-shadow: var(--edge-highlight), var(--shadow); * { margin: 0; diff --git a/sass/_tags.scss b/sass/_tags.scss index 825b33c..fa6882e 100644 --- a/sass/_tags.scss +++ b/sass/_tags.scss @@ -14,8 +14,11 @@ } .tag { + -webkit-backdrop-filter: var(--blur); + backdrop-filter: var(--blur); background-color: var(--fg-muted-1); border-radius: 999px; + box-shadow: var(--edge-highlight); color: var(--fg-color); padding: 0.25rem 0.75rem; text-decoration: none; diff --git a/sass/_variables.scss b/sass/_variables.scss index 2559ae2..33adea4 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -26,7 +26,9 @@ rgba(255, 255, 255, 0.8) ), var(--primary-color); + --blur: saturate(180%) blur(10px); --content-width: 720px; + --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1); --font-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; --font-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif",