feat: optimize loading of styles
Some checks failed
Deploy to SFTP Server / build (push) Failing after 3m41s
Some checks failed
Deploy to SFTP Server / build (push) Failing after 3m41s
This commit is contained in:
parent
5e7a63230b
commit
db17e56559
@ -30,7 +30,7 @@ const paths = [
|
||||
];
|
||||
---
|
||||
|
||||
<ul class="flex my-4 h-12">
|
||||
<ul class="flex my-4 h-12 bg-dark">
|
||||
<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"
|
||||
|
||||
@ -9,7 +9,9 @@ interface Props {
|
||||
}
|
||||
const t = useTranslations(Astro.url);
|
||||
|
||||
const { title, width = "compact" } = Astro.props;
|
||||
const { title } = Astro.props;
|
||||
import "./theme.css";
|
||||
import "./global.css";
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
@ -52,58 +54,9 @@ const { title, width = "compact" } = Astro.props;
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<link rel="stylesheet" href="/app.css" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<!-- <meta http-equiv="refresh" content="0;url=/" /> -->
|
||||
<title>{title}</title>
|
||||
<style is:inline>
|
||||
:root {
|
||||
--neutral-1000: #000000;
|
||||
--neutral-800: #16161e;
|
||||
--neutral-500: #252530;
|
||||
--neutral-400: #2c2c3a;
|
||||
--neutral-300: #414152;
|
||||
--neutral-100: #d5d5d7;
|
||||
--neutral-000: #f1f1f4;
|
||||
--fill: #cb5a5a;
|
||||
|
||||
--border-radius-sm: 10px;
|
||||
--border-radius-md: 20px;
|
||||
--border-radius-lg: 30px;
|
||||
|
||||
--spacing-sm: 10px;
|
||||
--spacing-md: 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
--background-dark: var(--neutral-800);
|
||||
--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;
|
||||
color: var(--text);
|
||||
font-family: "Nunito Sans", sans-serif;
|
||||
background-color: var(--background-dark);
|
||||
}
|
||||
|
||||
.dark body {
|
||||
--background-dark: var(--neutral-800);
|
||||
--background: var(--neutral-500);
|
||||
--background-light: var(--neutral-400);
|
||||
--background-gradient: linear-gradient(
|
||||
-30deg,
|
||||
var(--neutral-500) 0%,
|
||||
var(--neutral-400) 100%
|
||||
);
|
||||
--outline: var(--neutral-300);
|
||||
--text: var(--neutral-100);
|
||||
--text-light: white;
|
||||
}
|
||||
</style>
|
||||
<script is:inline>
|
||||
(function () {
|
||||
try {
|
||||
@ -119,7 +72,7 @@ const { title, width = "compact" } = Astro.props;
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-dark text-neutral p-2 flex flex-col gap-4">
|
||||
<header>
|
||||
<header class="sticky top-0 z-2 bg-dark">
|
||||
<Nav />
|
||||
</header>
|
||||
<main id="main-content" class="flex flex-col gap-4">
|
||||
@ -139,11 +92,32 @@ const { title, width = "compact" } = Astro.props;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dark header::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
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>
|
||||
<script is:inline>
|
||||
<script>
|
||||
(function () {
|
||||
// prettier-ignore
|
||||
function rgbaToDataURL(w, h, rgba) { let row = w * 4 + 1; let idat = 6 + h * (5 + row); let bytes = [ 137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, w >> 8, w & 255, 0, 0, h >> 8, h & 255, 8, 6, 0, 0, 0, 0, 0, 0, 0, idat >>> 24, (idat >> 16) & 255, (idat >> 8) & 255, idat & 255, 73, 68, 65, 84, 120, 1, ]; let table = [ 0, 498536548, 997073096, 651767980, 1994146192, 1802195444, 1303535960, 1342533948, -306674912, -267414716, -690576408, -882789492, -1687895376, -2032938284, -1609899400, -1111625188, ]; let a = 1, b = 0; for (let y = 0, i = 0, end = row - 1; y < h; y++, end += row - 1) { bytes.push( y + 1 < h ? 0 : 1, row & 255, row >> 8, ~row & 255, (row >> 8) ^ 255, 0,); for (b = (b + a) % 65521; i < end; i++) { let u = rgba[i] & 255; bytes.push(u); a = (a + u) % 65521; b = (b + a) % 65521; } } bytes.push( b >> 8, b & 255, a >> 8, a & 255, 0, 0, 0, 0, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130,); for (let [start, end] of [ [12, 29], [37, 41 + idat], ]) { let c = ~0; for (let i = start; i < end; i++) { c ^= bytes[i]; c = (c >>> 4) ^ table[c & 15]; c = (c >>> 4) ^ table[c & 15]; } c = ~c; bytes[end++] = c >>> 24; bytes[end++] = (c >> 16) & 255; bytes[end++] = (c >> 8) & 255; bytes[end++] = c & 255; } return "data:image/png;base64," + btoa(String.fromCharCode(...bytes)); }
|
||||
function rgbaToDataURL(w, h, rgba) { let row = w * 4 + 1; let idat = 6 + h * (5 + row); let bytes = [ 137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, w >> 8, w & 255, 0, 0, h >> 8, h & 255, 8, 6, 0, 0, 0, 0, 0, 0, 0, idat >>> 24, (idat >> 16) & 255, (idat >> 8) & 255, idat & 255, 73, 68, 65, 84, 120, 1, ]; let table = [ 0, 498536548, 997073096, 651767980, 1994146192, 1802195444, 1303535960, 1342533948, -306674912, -267414716, -690576408, -882789492, -1687895376, -2032938284, -1609899400, -1111625188, ]; let a = 1, b = 0; for (let y = 0, i = 0, end = row - 1; y < h; y++, end += row - 1) { bytes.push( y + 1 < h ? 0 : 1, row & 255, row >> 8, ~row & 255, (row >> 8) ^ 255, 0,); for (b = (b + a) % 65521; i < end; i++) { let u = rgba[i] & 255; bytes.push(u); a = (a + u) % 65521; b = (b + a) % 65521; } } bytes.push( b >> 8, b & 255, a >> 8, a & 255, 0, 0, 0, 0, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130,); for (let [start, end] of [ [12, 29], [37, 41 + idat], ]) { let c = ~0; for (let i = start; i < end; i++) { c ^= bytes[i]; c = (c >>> 4) ^ table[c & 15]; c = (c >>> 4) ^ table[c & 15]; } c = ~c; bytes[end++] = c >>> 24; bytes[end++] = (c >> 16) & 255; bytes[end++] = (c >> 8) & 255; bytes[end++] = c & 255; } return "data:image/png;base64," + window.btoa(String.fromCharCode(...bytes)); }
|
||||
// prettier-ignore
|
||||
function thumbHashToApproximateAspectRatio(hash) { let header = hash[3]; let hasAlpha = hash[2] & 0x80; let isLandscape = hash[4] & 0x80; let lx = isLandscape ? (hasAlpha ? 5 : 7) : header & 7; let ly = isLandscape ? header & 7 : hasAlpha ? 5 : 7; return lx / ly; }
|
||||
// prettier-ignore
|
||||
|
||||
44
src/layouts/theme.css
Normal file
44
src/layouts/theme.css
Normal file
@ -0,0 +1,44 @@
|
||||
:root {
|
||||
--neutral-1000: #000000;
|
||||
--neutral-800: #16161e;
|
||||
--neutral-500: #252530;
|
||||
--neutral-400: #2c2c3a;
|
||||
--neutral-300: #414152;
|
||||
--neutral-100: #d5d5d7;
|
||||
--neutral-000: #f1f1f4;
|
||||
--fill: #cb5a5a;
|
||||
|
||||
--border-radius-sm: 10px;
|
||||
--border-radius-md: 20px;
|
||||
--border-radius-lg: 30px;
|
||||
|
||||
--spacing-sm: 10px;
|
||||
--spacing-md: 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
--background-dark: var(--neutral-800);
|
||||
--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;
|
||||
color: var(--text);
|
||||
font-family: "Nunito Sans", sans-serif;
|
||||
background-color: var(--background-dark);
|
||||
}
|
||||
|
||||
.dark body {
|
||||
--background-dark: var(--neutral-800);
|
||||
--background: var(--neutral-500);
|
||||
--background-light: var(--neutral-400);
|
||||
--background-gradient: linear-gradient(-30deg,
|
||||
var(--neutral-500) 0%,
|
||||
var(--neutral-400) 100%);
|
||||
--outline: var(--neutral-300);
|
||||
--text: var(--neutral-100);
|
||||
--text-light: white;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user