From 03446caaa9308e49604a0b15fa38a85b76aea0af Mon Sep 17 00:00:00 2001 From: daudix Date: Thu, 27 Jun 2024 19:04:12 +0300 Subject: [PATCH] Replace ALL pixel values with REM --- sass/_comments.scss | 4 ++-- sass/_crt.scss | 10 +++++----- sass/_general.scss | 2 +- sass/_nav.scss | 6 +++--- sass/_typography.scss | 6 +++--- sass/_variables.scss | 6 +++--- 6 files changed, 17 insertions(+), 17 deletions(-) diff --git a/sass/_comments.scss b/sass/_comments.scss index 5a3b2c6..890c5f1 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -5,8 +5,8 @@ margin: 3rem 0 0 1rem; background-color: white; padding: 0.75rem; - width: 125px; - height: 125px; + width: 7.8125rem; + height: 7.8125rem; :root[dir="rtl"] & { float: left; diff --git a/sass/_crt.scss b/sass/_crt.scss index 1788f53..c2143a4 100644 --- a/sass/_crt.scss +++ b/sass/_crt.scss @@ -2,9 +2,9 @@ margin: 1rem 0 1rem; box-shadow: var(--edge-highlight), - 0 0 0 1px var(--primary-color-alpha), - 0 2px 6px 2px var(--primary-color-alpha), - 0 4px 24px 4px var(--primary-color-alpha); + 0 0 0 0.0625rem var(--primary-color-alpha), + 0 0.125rem 0.375rem 0.125rem var(--primary-color-alpha), + 0 0.25rem 1.5rem 0.25rem var(--primary-color-alpha); border-radius: var(--rounded-corner); background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), var(--primary-color); @@ -15,7 +15,7 @@ background-color: unset !important; padding: 1rem 1rem; color: var(--primary-color) !important; - text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px; + text-shadow: var(--primary-color-alpha) 0 0 0.25rem, var(--primary-color) 0 0 0.75rem; @keyframes flicker { from { @@ -56,7 +56,7 @@ left: 0; z-index: 1; animation: scanlines 0.25s linear infinite; - background: repeating-linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 1px, transparent 3px, transparent 4px); + background: repeating-linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 0.0625rem, transparent 0.1875rem, transparent 0.25rem); width: 100%; height: calc(100% + 0.5rem); pointer-events: none; diff --git a/sass/_general.scss b/sass/_general.scss index 36150bc..c604992 100644 --- a/sass/_general.scss +++ b/sass/_general.scss @@ -47,7 +47,7 @@ body { transition: all var(--transition-longer), scroll-margin-top 0s; scroll-margin-top: 20vh; color: var(--primary-color); - text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px; + text-shadow: var(--primary-color-alpha) 0 0 0.25rem, var(--primary-color) 0 0 0.75rem; @keyframes highlight-in-out { 50% { diff --git a/sass/_nav.scss b/sass/_nav.scss index cd43ba3..67f0a06 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -5,7 +5,7 @@ z-index: 999; backdrop-filter: var(--blur); margin: 1rem auto; - box-shadow: var(--edge-highlight), 0px 12px 24px -16px rgba(0, 0, 0, 0.5); + box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5); border-radius: 1.625rem; background-color: var(--nav-bg); max-width: min(var(--container-width), 90%); @@ -56,7 +56,7 @@ top: -0.125rem; right: -0.5rem; background-color: var(--fg-muted-2); - width: 1px; + width: 0.0625rem; height: calc(100% + 0.25rem); content: ""; @@ -199,7 +199,7 @@ transform: translate(-50%, 1rem); z-index: 1; backdrop-filter: var(--blur); - box-shadow: var(--edge-highlight), 0px 12px 24px -16px rgba(0, 0, 0, 0.5); + box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5); border-radius: calc(var(--rounded-corner) + 0.25rem); background-color: var(--nav-bg); padding: 0.25rem; diff --git a/sass/_typography.scss b/sass/_typography.scss index 5d31633..2b031df 100644 --- a/sass/_typography.scss +++ b/sass/_typography.scss @@ -67,7 +67,7 @@ kbd { display: inline-block; transition: var(--transition); cursor: pointer; - box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3); + box-shadow: inset 0 -0.125rem 0 var(--fg-muted-2), 0 -0.0625rem 0 var(--fg-muted-3); border-radius: var(--rounded-corner-small); background-color: var(--fg-muted-2); padding: 0.125rem 0.375rem; @@ -77,7 +77,7 @@ kbd { // Small nice thingy, keys can be pressed! &:active { transform: translateY(0.125rem); - box-shadow: inset 0 1px 0 var(--fg-muted-2); + box-shadow: inset 0 0.0625rem 0 var(--fg-muted-2); background-color: var(--fg-muted-3); } } @@ -95,7 +95,7 @@ a { hr { margin: 2rem auto; border: none; - border-top: 3px double var(--fg-muted-2); + border-top: 0.1875rem double var(--fg-muted-2); overflow: visible; color: var(--fg-muted-4); font-size: 1.5rem; diff --git a/sass/_variables.scss b/sass/_variables.scss index 3cef7a3..64c1c0c 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -24,11 +24,11 @@ --active: 0.9; --blur: saturate(180%) blur(0.75rem); --container-width: 720px; - --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1); + --edge-highlight: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.1); --rounded-corner-small: 0.5rem; --rounded-corner: 0.75rem; - --shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06); - --shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03); + --shadow-raised: 0 0 0 0.0625rem rgba(0, 0, 0, 0.06), 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.14), 0 0.25rem 0.75rem 0.25rem rgba(0, 0, 0, 0.06); + --shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.03), 0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.07), 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.03); --transition-long: 0.8s; --transition-longer: 0.4s; --transition: 0.2s;