-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
59 lines (59 loc) · 3.57 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Beautiful open source fonts ~ typehaus.org</title>
<link rel="prefetch" as="style" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind-dark.min.css" crossorigin="anonymous" />
<link rel="prefetch" as="style" type="text/css" href="/assets/style.css" />
<link rel="prefetch" as="style" type="text/css" href="/assets/tabs.css" />
<link rel="prefetch" as="module" href="/assets/tabs.js" />
<meta name="title" content="typehaus.org" />
<meta name="description" content="typehaus.org is a non-profit curator of beautiful open-source typefaces." />
<meta name="keywords" content="typehaus,typefaces,tipografia,fonts,fontface,typography,open source,opensource,foss,woff,woff2,truetype,ttf,otf,opentype" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://typehaus.org/" />
<meta property="og:title" content="typehaus.org" />
<meta property="og:description" content="typehaus.org is a non-profit font curator of beautiful open-source typefaces." />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind-dark.min.css" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="/assets/style.css" />
<link rel="stylesheet" type="text/css" href="/assets/tabs.css" />
</head>
<body>
<script>
try {
if (!('theme' in localStorage)) localStorage.theme = window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light';
if (localStorage.theme === 'dark') document.querySelector('html').classList.toggle('dark', true);
}catch{}
</script>
<div class="outer flex sm:items-center items-top gap-4 space-x-2 dark:bg-gray-900">
<div class="inner">
<div class="window">
<div class="divide-y divide-slate-300/50">
<tab-container class="w-full">
<div role="tablist">
<button type="button" role="tab" id="PNPM" aria-label="PNPM" aria-selected="true"><span>PNPM</span></button>
<button type="button" role="tab" tabindex="-1" id="Yarn" aria-label="Yarn"><span>Yarn</span></button>
<button type="button" role="tab" tabindex="-1" id="NPM" aria-label="NPM"><span>NPM</span></button>
</div>
<div class="tabpanels max-w-fit">
<div role="tabpanel" aria-labelledby="PNPM">
<pre data-language="bash" class="text-xl px-4 py-2 bg-gray-50 border-2 border-gray-200 rounded-md mb-2"><code><span>pnpm add @typehaus/metropolis</span></code></pre>
</div>
<div role="tabpanel" aria-labelledby="Yarn" hidden>
<pre data-language="bash" class="text-xl px-4 py-2 bg-gray-50 border border-gray-200 rounded-md mb-2"><code><span>yarn add @typehaus/metropolis</span></code></pre>
</div>
<div role="tabpanel" aria-labelledby="NPM" hidden>
<pre data-language="bash" class="text-xl px-4 py-2 bg-gray-50 border border-gray-200 rounded-md mb-2"><code><span>npm i -D @typehaus/metropolis</span></code></pre>
</div>
</div>
</tab-container>
<footer>
<a href="https://github.com/typehaus">view on <strong>github</strong> →</a>
</footer>
</div>
</div>
</div>
</div>
<script type="module" src="./script.js"></script>
</body>
</html>