diff --git a/sass/_buttons.scss b/sass/_buttons.scss index 9fda3b1..cd413e1 100644 --- a/sass/_buttons.scss +++ b/sass/_buttons.scss @@ -12,7 +12,7 @@ color: var(--fg-color); display: inline-block; font-size: 0.9rem; - padding: 0.4rem 1rem; + padding: 0.5rem 1rem; text-decoration: none; transition: var(--transition); diff --git a/sass/_comments.scss b/sass/_comments.scss index 30418d6..2999238 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -199,7 +199,7 @@ section#comments { footer { display: flex; - gap: 0.4rem; + gap: 0.5rem; grid-area: interactions; margin-top: 1rem; @@ -209,7 +209,7 @@ section#comments { font-size: 1rem; font-variant-numeric: tabular-nums; font-weight: 400; - padding: 0.4rem 1rem; + padding: 0.5rem 1rem; text-decoration: none; transition: var(--transition); diff --git a/sass/_crt.scss b/sass/_crt.scss index 66cf02a..4d8c01d 100644 --- a/sass/_crt.scss +++ b/sass/_crt.scss @@ -1,13 +1,11 @@ .crt { margin: 1rem 0 1rem; border-radius: var(--rounded-corner); - box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 5%, transparent), - 0 2px 6px 2px color-mix(in srgb, var(--primary-color) 5%, transparent), - 0 4px 24px 4px color-mix(in srgb, var(--primary-color) 10%, transparent); - background-image: radial-gradient( - color-mix(in srgb, var(--primary-color) 20%, black), - color-mix(in srgb, var(--primary-color) 10%, black) - ); + background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), + var(--primary-color); + box-shadow: 0 0 0 1px var(--primary-color-alpha), + 0 2px 6px 2px var(--primary-color-alpha), + 0 4px 24px 4px var(--primary-color-alpha); pre { color: var(--primary-color); diff --git a/sass/_main.scss b/sass/_main.scss index 077560f..c20ef5a 100644 --- a/sass/_main.scss +++ b/sass/_main.scss @@ -29,7 +29,7 @@ body { font-family: InterVariable, sans-serif; line-height: 1.6; color: var(--fg-color); - background-color: var(--bg-color); + background: var(--bg-color); // Put footer at the bottom for short pages, such as the 404 display: grid; min-height: 100vh; @@ -38,7 +38,7 @@ body { // Style text selection to use primary color ::selection { - color: var(--bg-color); + color: var(--fg-color); background-color: var(--primary-color); } @@ -183,7 +183,7 @@ kbd { } code:not(pre code) { - padding: 2px 6px; + padding: 0.125rem 0.375rem; border-radius: var(--rounded-corner-small); background-color: var(--fg-muted-2); color: var(--red-fg); @@ -236,7 +236,7 @@ kbd { display: inline-block; font-size: 0.8rem; line-height: normal; - padding: 2px 6px; + padding: 0.125rem 0.375rem; transition: var(--transition); // Small nice thingy, keys can be pressed! &:active { @@ -247,7 +247,7 @@ kbd { } mark { - padding: 2px 6px; + padding: 0.125rem 0.375rem; border-radius: var(--rounded-corner-small); background-color: var(--primary-color-alpha); color: var(--primary-color); diff --git a/sass/_nav.scss b/sass/_nav.scss index 89ef297..2e083a1 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -2,7 +2,7 @@ -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); background-color: var(--nav-bg); - border-radius: 28px; + 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); margin: 1rem auto; @@ -33,7 +33,7 @@ ul { display: flex; flex-wrap: wrap; - gap: 0.2rem; + gap: 0.25rem; justify-content: center; margin: 0; padding: 0; @@ -48,7 +48,7 @@ border-radius: 999px; color: var(--fg-muted-4); font-weight: 400; - padding: 0.45rem 1rem; + padding: 0.325rem 0.75rem; text-decoration: none; transition: var(--transition); diff --git a/sass/_tags.scss b/sass/_tags.scss index f77dd02..825b33c 100644 --- a/sass/_tags.scss +++ b/sass/_tags.scss @@ -5,7 +5,7 @@ li { display: inline-block; - margin: 0 0.2rem 0.4rem 0; + margin: 0 0.25rem 0.5rem 0; transition: var(--transition); &:active { diff --git a/sass/_variables.scss b/sass/_variables.scss index 5ed893a..202b455 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -19,8 +19,8 @@ // VARIABLES --active: 0.9; - --bg-color-l: color-mix(in srgb, var(--primary-color) 20%, white); - --bg-color-d: color-mix(in srgb, var(--primary-color) 10%, black); + --bg-color-l: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), var(--primary-color); + --bg-color-d: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), var(--primary-color); --content-width: 720px; --drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));