feat: remove layout shift
Some checks failed
Deploy to SFTP Server / build (push) Has been cancelled
Some checks failed
Deploy to SFTP Server / build (push) Has been cancelled
This commit is contained in:
parent
cf26695719
commit
3216d79bd0
2
.github/workflows/default.yaml
vendored
2
.github/workflows/default.yaml
vendored
@ -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 }}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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++;
|
||||
|
||||
@ -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");
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user