Compare commits

..

2 Commits

Author SHA1 Message Date
brian e5e45043a8 adding in fonts 2026-06-01 15:01:14 -06:00
brian f53f3a82a4 updated index with my personal things 2026-06-01 14:47:00 -06:00
6 changed files with 68 additions and 50 deletions
+60 -10
View File
@@ -1,12 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MK Design System</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Set the base URL for all relative URLs within the document -->
<!-- <base href="https://example.com/"> -->
<meta name="robots" content="index,follow">
<meta name="googlebot" content="index,follow">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-dns-prefetch-control" content="off">
<meta name="google" content="notranslate">
<meta name="google" content="nositelinkssearchbox">
<meta name="rating" content="General">
<!-- <meta name="url" content="https://example.com/"> -->
<!-- <meta name="subject" content="your website's subject"> -->
<!-- <meta name="description" content="A description of the page"> -->
<title>Page Title</title>
<!-- Privacy -->
<!-- analytics -->
<!-- -->
<!-- Files listing who was involved in this site and copyrights -->
<!-- <link href="https://example.com/humans.txt" rel="author"> -->
<!-- <link href="https://example.com/copyright.html" rel="copyright"> -->
<!-- Favicon -->
<!-- <link href="https://example.com/favicon.ico" rel="icon" sizes="16x16" type="image/icon"> -->
<!-- <link href="https://example.com/favicon.svg" rel="icon" type="image/svg+xml"> -->
<!-- <link href="https://example.com/favicon.png" rel="icon" sizes="192x192"> -->
<!-- Font preloads (should be done for each font file) -->
<link href="public/fonts/material-icons-round/material-icons-round-latin-400-normal.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
<link href="public/fonts/roboto/Roboto-VariableFont_wdth-wght.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
<link href="public/fonts/roboto-slab/RobotoSlab-VariableFont_wght.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
<!-- CSS -->
<link href="/src/style.css" rel="stylesheet" media="screen">
<!-- JS that must be executed before the document is loaded -->
<script>
if (localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
document.documentElement.classList.add("dark"); localStorage.theme = "dark";
} else {
document.documentElement.classList.remove("dark"); localStorage.theme = "light";
}
</script>
<script type="module" src="/src/main.js" defer></script>
</head>
<body class="font-sans antialiased">
<div id="app" class="min-h-screen bg-neutral-100"></div>
</body>
</html>
+8 -40
View File
@@ -6,58 +6,26 @@
@font-face {
font-family: 'Roboto';
font-weight: 300;
font-weight: 100 900;
font-style: normal;
font-display: swap;
src: url('/fonts/roboto/roboto-latin-300-normal.woff2') format('woff2');
src: url('/fonts/roboto/Roboto-VariableFont_wdth-wght.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-weight: 400;
font-style: normal;
font-weight: 100 900;
font-style: italic;
font-display: swap;
src: url('/fonts/roboto/roboto-latin-400-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-weight: 500;
font-style: normal;
font-display: swap;
src: url('/fonts/roboto/roboto-latin-500-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url('/fonts/roboto/roboto-latin-700-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-weight: 900;
font-style: normal;
font-display: swap;
src: url('/fonts/roboto/roboto-latin-900-normal.woff2') format('woff2');
src: url('/fonts/roboto/Roboto-Italic-VariableFont_wdth-wght.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto Slab';
font-weight: 400;
font-weight: 100 900;
font-style: normal;
font-display: swap;
src: url('/fonts/roboto-slab/roboto-slab-latin-400-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto Slab';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url('/fonts/roboto-slab/roboto-slab-latin-700-normal.woff2') format('woff2');
src: url('/fonts/roboto-slab/RobotoSlab-VariableFont_wght.woff2') format('woff2');
}
@font-face {
@@ -65,7 +33,7 @@
font-weight: 400;
font-style: normal;
font-display: block;
src: url('/fonts/material-icons-round/material-icons-round-all-400-normal.woff2') format('woff2');
src: url('/fonts/material-icons-round/material-icons-round-latin-400-normal.woff2') format('woff2');
}
/* ============================================================