max/website
1
0
Fork 0
Code Issues 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
Show Stats 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 - name: 🚀 Deploy Changed Files via rclone
run: | 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: env:
REMOTE_DIR: ${{ vars.REMOTE_DIR }} 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><a href="#main-content" class="skip-link">Skip to main content</a></li>
<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 <a
href={translatePath("/")} 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 /> <Logo />
</a> </a>
</li> </li>
@ -50,13 +48,11 @@ const paths = [
${isActive(link) ? "bg-light underline" : "bg"} ${isActive(link) ? "bg-light underline" : "bg"}
${i === 0 ? "rounded-bl-md border-l-1" : "border-l-1"} ${i === 0 ? "rounded-bl-md border-l-1" : "border-l-1"}
${i === paths.length - 1 ? "rounded-tr-md !border-r-1" : ""} ${i === paths.length - 1 ? "rounded-tr-md !border-r-1" : ""}
`} `}>
>
<a <a
class="text-neutral w-full h-full flex items-center justify-center lowercase" class="text-neutral w-full h-full flex items-center justify-center lowercase"
href={link} href={link}
data-astro-prefetch data-astro-prefetch>
>
{text} {text}
</a> </a>
</li> </li>

28
src/layouts/Layout.astro
View File

@ -75,31 +75,10 @@ import "./global.css";
max-width: 600px; max-width: 600px;
margin: 0 auto; 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> </style>
</head> </head>
<body class="bg-dark text-neutral p-2 flex flex-col gap-4"> <body class="text-neutral p-2 flex flex-col gap-4">
<header class="sticky top-0 z-2 bg-dark"> <header class="sticky top-0 z-2">
<Nav /> <Nav />
</header> </header>
<main id="main-content" class="flex flex-col gap-4"> <main id="main-content" class="flex flex-col gap-4">
@ -142,6 +121,8 @@ import "./global.css";
const hash = img.getAttribute("data-thumbhash"); const hash = img.getAttribute("data-thumbhash");
if (!hash) return; if (!hash) return;
if (img.complete || parent.complete) return;
// its only browser, why you have to be mad // its only browser, why you have to be mad
const decodedString = window.atob(hash); const decodedString = window.atob(hash);
@ -158,7 +139,6 @@ import "./global.css";
parent.style.background = `url(${dataURL})`; parent.style.background = `url(${dataURL})`;
parent.style.backgroundSize = "cover"; parent.style.backgroundSize = "cover";
if (img.complete || parent.complete) return;
let count = 0; let count = 0;
const interval = setInterval(() => { const interval = setInterval(() => {
count++; count++;

12
src/layouts/global.css
View File

@ -98,3 +98,15 @@ picture.thumb-loading::before {
transform: rotate(360deg); 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 { body {
--background-dark: var(--neutral-800); --background-dark: var(--neutral-000);
--background: var(--neutral-000); --background: var(--neutral-000);
--background-light: var(--neutral-400); --background-light: var(--neutral-400);
--outline: var(--neutral-300); --outline: var(--neutral-300);
--text: var(--neutral-800); --text: var(--neutral-800);
--text-light: black; --text-light: black;
background-color: var(--neutral-100); transition: background-color 0.2s;
transition: background-color 0.1s;
color: var(--text); color: var(--text);
font-family: "Nunito Sans", sans-serif; font-family: "Nunito Sans", sans-serif;
background-color: var(--background-dark); background-color: var(--neutral-000);
} }
.dark body { .dark body {
background-color: var(--neutral-800);
--background-dark: var(--neutral-800); --background-dark: var(--neutral-800);
--background: var(--neutral-500); --background: var(--neutral-500);
--background-light: var(--neutral-400); --background-light: var(--neutral-400);
@ -42,3 +42,8 @@ body {
--text: var(--neutral-100); --text: var(--neutral-100);
--text-light: white; --text-light: white;
} }
header {
background-color: var(--background-dark);
transition: background-color 0.2s;
}