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

feat: remove layout shift

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

2
.github/workflows/default.yaml vendored
View File

@@ -70,6 +70,6 @@ jobs:
- name: 🚀 Deploy Changed Files via rclone
run: |
rclone sync --update --progress --stats-one-line ./dist/ sftp-remote:${REMOTE_DIR} --transfers 4
rclone sync --update -v --progress --stats 5s --stats-one-line ./dist/ sftp-remote:${REMOTE_DIR} --transfers 4
env:
REMOTE_DIR: ${{ vars.REMOTE_DIR }}

14
src/components/Nav.astro
View File

@@ -30,15 +30,13 @@ const paths = [
];
---
<ul class="flex my-4 h-12 bg-dark">
<ul class="flex my-4 h-12">
<li><a href="#main-content" class="skip-link">Skip to main content</a></li>
<li
class="border-none bg-transparent my-2 mr-4 logo grid place-content-center"
>
class="border-none bg-transparent my-2 mr-4 logo grid place-content-center">
<a
href={translatePath("/")}
class="text-neutral h-9 flex items-center justify-center lowercase"
>
class="text-neutral h-9 flex items-center justify-center lowercase">
<Logo />
</a>
</li>
@@ -50,13 +48,11 @@ const paths = [
${isActive(link) ? "bg-light underline" : "bg"}
${i === 0 ? "rounded-bl-md border-l-1" : "border-l-1"}
${i === paths.length - 1 ? "rounded-tr-md !border-r-1" : ""}
`}
>
`}>
<a
class="text-neutral w-full h-full flex items-center justify-center lowercase"
href={link}
data-astro-prefetch
>
data-astro-prefetch>
{text}
</a>
</li>

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