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;
background-color: white;
padding: 0.75rem;
width: 125px;
height: 125px;
width: 7.8125rem;
height: 7.8125rem;
:root[dir="rtl"] & {
float: left;

10
sass/_crt.scss
View File

@ -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;

2
sass/_general.scss
View File

@ -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% {

6
sass/_nav.scss
View File

@ -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;

6
sass/_typography.scss
View File

@ -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;

6
sass/_variables.scss
View File

@ -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;