max/max-richter.dev
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: remove layout shift
Some checks failed
Deploy to SFTP Server / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
max_richter
2024-04-07 22:43:13 +02:00
parent cf26695719
commit 3216d79bd0
5 changed files with 31 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/layouts/Layout.astro
View File

@@ -75,31 +75,10 @@ import "./global.css";
max-width: 600px;
margin: 0 auto;
}
.dark header::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
color: red;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 249 249' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M248.5 0H0V249C0.268799 111.435 111.423 0 248.5 0Z' fill='%2316161e'/%3E%3C/svg%3E");
}
.dark header::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
right: 0px;
bottom: -10px;
transform: rotate(90deg);
color: red;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 249 249' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M248.5 0H0V249C0.268799 111.435 111.423 0 248.5 0Z' fill='%2316161e'/%3E%3C/svg%3E");
}
</style>
</head>
<body class="bg-dark text-neutral p-2 flex flex-col gap-4">
<header class="sticky top-0 z-2 bg-dark">
<body class="text-neutral p-2 flex flex-col gap-4">
<header class="sticky top-0 z-2">
<Nav />
</header>
<main id="main-content" class="flex flex-col gap-4">
@@ -142,6 +121,8 @@ import "./global.css";
const hash = img.getAttribute("data-thumbhash");
if (!hash) return;
if (img.complete || parent.complete) return;
// its only browser, why you have to be mad
const decodedString = window.atob(hash);
@@ -158,7 +139,6 @@ import "./global.css";
parent.style.background = `url(${dataURL})`;
parent.style.backgroundSize = "cover";
if (img.complete || parent.complete) return;
let count = 0;
const interval = setInterval(() => {
count++;

12
src/layouts/global.css
View File

@@ -98,3 +98,15 @@ picture.thumb-loading::before {
transform: rotate(360deg);
}
}
.dark header::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
right: 0px;
bottom: -10px;
transform: rotate(90deg);
color: red;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 249 249' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M248.5 0H0V249C0.268799 111.435 111.423 0 248.5 0Z' fill='%2316161e'/%3E%3C/svg%3E");
}

13
src/layouts/theme.css
View File

@@ -17,21 +17,21 @@
}
body {
--background-dark: var(--neutral-800);
--background-dark: var(--neutral-000);
--background: var(--neutral-000);
--background-light: var(--neutral-400);
--outline: var(--neutral-300);
--text: var(--neutral-800);
--text-light: black;
background-color: var(--neutral-100);
transition: background-color 0.1s;
transition: background-color 0.2s;
color: var(--text);
font-family: "Nunito Sans", sans-serif;
background-color: var(--background-dark);
background-color: var(--neutral-000);
}
.dark body {
background-color: var(--neutral-800);
--background-dark: var(--neutral-800);
--background: var(--neutral-500);
--background-light: var(--neutral-400);
@@ -42,3 +42,8 @@ body {
--text: var(--neutral-100);
--text-light: white;
}
header {
background-color: var(--background-dark);
transition: background-color 0.2s;
}