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