TheSANDWICH/thesandwi.ch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wait for font to load before rendering
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Isaac Mills 2025-07-19 10:30:58 -06:00
parent 966d56972e
commit 6e687e5400
Signed by: fnmain
GPG key ID: B67D7410F33A0F61
5 changed files with 14 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/firacode.css
View file

@ -1,15 +0,0 @@
@font-face {
font-family: 'Fira Code';
src: url('/assets/FiraCode-Bold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fira Code';
src: url('/assets/FiraCode-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}

18
src/partials/thecockpit.html
View file

@ -8,15 +8,17 @@
</x-section-head>
<div id="cockpit-canvas" style="height: 80vh; margin: 8px; background-color: #000;"></div>
</x-tab.content>
<push name="head">
<link rel="preload" href="/assets/FiraCode-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/FiraCode-Bold.woff2" as="font" type="font/woff2" crossorigin>
</push>
<script>
<script type="module">
const firaCodeFace = new FontFace('Fira Code', `url(${new URL('/assets/FiraCode-Regular.woff2', import.meta.url)})`, {style: "normal", weight: "normal"});
const firaCodeBoldFace = new FontFace('Fira Code', `url(${new URL('/assets/FiraCode-Bold.woff2', import.meta.url)})`, {style: "normal", weight: "bold"});
Promise.all([firaCodeFace.load(), firaCodeBoldFace.load()]).then((faces) => {
document.fonts.add(faces[0]);
document.fonts.add(faces[1]);
var interval = setInterval(function () {
if (typeof window.run_cockpit === 'function') {
if (typeof window.runCockpit === 'function') {
clearInterval(interval);
window.run_cockpit();
window.runCockpit();
}
}, 100);
}, 50);
});
</script>

1
src/style.css
View file

@ -1,5 +1,4 @@
@import 'apex.css';
@import 'firacode.css';
@custom-media --tablet only screen and (max-width: 1200px);
@custom-media --phone only screen and (max-width: 800px);

2
src/thecockpit.js
View file

@ -1,5 +1,5 @@
import { default as init, run } from 'thecockpit'
window.run_cockpit = async () => {
window.runCockpit = async () => {
await init();
run("cockpit-canvas");
};

1
src/triangle.css
View file

@ -1,5 +1,4 @@
@import 'apex.css';
@import 'firacode.css';
@custom-media --tablet only screen and (max-width: 1200px);
@custom-media --phone only screen and (max-width: 800px);