hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace ALL pixel values with REM

Browse Source
This commit is contained in:
daudix
2024-06-27 19:04:12 +03:00
parent bcba7405ef
commit 03446caaa9
6 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
sass/_comments.scss
View File

@ -5,8 +5,8 @@
margin: 3rem 0 0 1rem; margin: 3rem 0 0 1rem;
background-color: white; background-color: white;
padding: 0.75rem; padding: 0.75rem;
width: 125px; width: 7.8125rem;
height: 125px; height: 7.8125rem;
:root[dir="rtl"] & { :root[dir="rtl"] & {
float: left; float: left;

10
sass/_crt.scss
View File

@ -2,9 +2,9 @@
margin: 1rem 0 1rem; margin: 1rem 0 1rem;
box-shadow: box-shadow:
var(--edge-highlight), var(--edge-highlight),
0 0 0 1px var(--primary-color-alpha), 0 0 0 0.0625rem var(--primary-color-alpha),
0 2px 6px 2px var(--primary-color-alpha), 0 0.125rem 0.375rem 0.125rem var(--primary-color-alpha),
0 4px 24px 4px var(--primary-color-alpha); 0 0.25rem 1.5rem 0.25rem var(--primary-color-alpha);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), var(--primary-color); 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; background-color: unset !important;
padding: 1rem 1rem; padding: 1rem 1rem;
color: var(--primary-color) !important; 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 { @keyframes flicker {
from { from {
@ -56,7 +56,7 @@
left: 0; left: 0;
z-index: 1; z-index: 1;
animation: scanlines 0.25s linear infinite; 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%; width: 100%;
height: calc(100% + 0.5rem); height: calc(100% + 0.5rem);
pointer-events: none; pointer-events: none;

2
sass/_general.scss
View File

@ -47,7 +47,7 @@ body {
transition: all var(--transition-longer), scroll-margin-top 0s; transition: all var(--transition-longer), scroll-margin-top 0s;
scroll-margin-top: 20vh; scroll-margin-top: 20vh;
color: var(--primary-color); 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 { @keyframes highlight-in-out {
50% { 50% {

6
sass/_nav.scss
View File

@ -5,7 +5,7 @@
z-index: 999; z-index: 999;
backdrop-filter: var(--blur); backdrop-filter: var(--blur);
margin: 1rem auto; 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; border-radius: 1.625rem;
background-color: var(--nav-bg); background-color: var(--nav-bg);
max-width: min(var(--container-width), 90%); max-width: min(var(--container-width), 90%);
@ -56,7 +56,7 @@
top: -0.125rem; top: -0.125rem;
right: -0.5rem; right: -0.5rem;
background-color: var(--fg-muted-2); background-color: var(--fg-muted-2);
width: 1px; width: 0.0625rem;
height: calc(100% + 0.25rem); height: calc(100% + 0.25rem);
content: ""; content: "";
@ -199,7 +199,7 @@
transform: translate(-50%, 1rem); transform: translate(-50%, 1rem);
z-index: 1; z-index: 1;
backdrop-filter: var(--blur); 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); border-radius: calc(var(--rounded-corner) + 0.25rem);
background-color: var(--nav-bg); background-color: var(--nav-bg);
padding: 0.25rem; padding: 0.25rem;

6
sass/_typography.scss
View File

@ -67,7 +67,7 @@ kbd {
display: inline-block; display: inline-block;
transition: var(--transition); transition: var(--transition);
cursor: pointer; 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); border-radius: var(--rounded-corner-small);
background-color: var(--fg-muted-2); background-color: var(--fg-muted-2);
padding: 0.125rem 0.375rem; padding: 0.125rem 0.375rem;
@ -77,7 +77,7 @@ kbd {
// Small nice thingy, keys can be pressed! // Small nice thingy, keys can be pressed!
&:active { &:active {
transform: translateY(0.125rem); 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); background-color: var(--fg-muted-3);
} }
} }
@ -95,7 +95,7 @@ a {
hr { hr {
margin: 2rem auto; margin: 2rem auto;
border: none; border: none;
border-top: 3px double var(--fg-muted-2); border-top: 0.1875rem double var(--fg-muted-2);
overflow: visible; overflow: visible;
color: var(--fg-muted-4); color: var(--fg-muted-4);
font-size: 1.5rem; font-size: 1.5rem;

6
sass/_variables.scss
View File

@ -24,11 +24,11 @@
--active: 0.9; --active: 0.9;
--blur: saturate(180%) blur(0.75rem); --blur: saturate(180%) blur(0.75rem);
--container-width: 720px; --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-small: 0.5rem;
--rounded-corner: 0.75rem; --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-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 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: 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-long: 0.8s;
--transition-longer: 0.4s; --transition-longer: 0.4s;
--transition: 0.2s; --transition: 0.2s;