Skip to content

Commit 9c53cd8

Browse files
rudolfsrudolfs
committed
Add pixelated Button component
1 parent 1954e5f commit 9c53cd8

File tree

4 files changed

+409
-61
lines changed

4 files changed

+409
-61
lines changed

‎index.html

Lines changed: 60 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,64 @@
11
<!doctype html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Radicle</title>
8+
<link
9+
rel="preload"
10+
href="/fonts/Inter-Regular.woff2"
11+
as="font"
12+
type="font/woff2"
13+
crossorigin="anonymous" />
14+
<link
15+
rel="preload"
16+
href="/fonts/Inter-Medium.woff2"
17+
as="font"
18+
type="font/woff2"
19+
crossorigin="anonymous" />
20+
<link
21+
rel="preload"
22+
href="/fonts/Inter-SemiBold.woff2"
23+
as="font"
24+
type="font/woff2"
25+
crossorigin="anonymous" />
26+
<link
27+
rel="preload"
28+
href="/fonts/Inter-Bold.woff2"
29+
as="font"
30+
type="font/woff2"
31+
crossorigin="anonymous" />
32+
<link
33+
rel="preload"
34+
href="/fonts/JetBrainsMono-Regular.woff2"
35+
as="font"
36+
type="font/woff2"
37+
crossorigin="anonymous" />
38+
<link
39+
rel="preload"
40+
href="/fonts/JetBrainsMono-Medium.woff2"
41+
as="font"
42+
type="font/woff2"
43+
crossorigin="anonymous" />
44+
<link
45+
rel="preload"
46+
href="/fonts/JetBrainsMono-SemiBold.woff2"
47+
as="font"
48+
type="font/woff2"
49+
crossorigin="anonymous" />
50+
<link
51+
rel="preload"
52+
href="/fonts/JetBrainsMono-Bold.woff2"
53+
as="font"
54+
type="font/woff2"
55+
crossorigin="anonymous" />
356

4-
<head>
5-
<meta charset="UTF-8" />
6-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
<title>Radicle</title>
9-
</head>
57+
<link rel="stylesheet" type="text/css" href="/typography.css" />
58+
</head>
1059

11-
<body>
12-
<div id="app"></div>
13-
<script type="module" src="/src/main.ts"></script>
14-
</body>
15-
16-
</html>
60+
<body>
61+
<div id="app"></div>
62+
<script type="module" src="/src/main.ts"></script>
63+
</body>
64+
</html>

‎public/typography.css

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
@font-face {
2+
font-family: "Inter";
3+
font-style: normal;
4+
font-weight: 400;
5+
font-display: swap;
6+
src: url("fonts/Inter-Regular.woff2");
7+
}
8+
9+
@font-face {
10+
font-family: "Inter";
11+
font-weight: 500;
12+
font-display: swap;
13+
src: url("fonts/Inter-Medium.woff2");
14+
}
15+
16+
@font-face {
17+
font-family: "Inter";
18+
font-weight: 600;
19+
font-display: swap;
20+
src: url("fonts/Inter-SemiBold.woff2");
21+
}
22+
23+
@font-face {
24+
font-family: "Inter";
25+
font-weight: 700;
26+
font-display: swap;
27+
src: url("fonts/Inter-Bold.woff2");
28+
}
29+
30+
@font-face {
31+
font-family: "JetBrains Mono";
32+
font-style: normal;
33+
font-weight: 400;
34+
font-display: swap;
35+
src: url("fonts/JetBrainsMono-Regular.woff2");
36+
}
37+
38+
@font-face {
39+
font-family: "JetBrains Mono";
40+
font-style: normal;
41+
font-weight: 500;
42+
font-display: swap;
43+
src: url("fonts/JetBrainsMono-Medium.woff2");
44+
}
45+
46+
@font-face {
47+
font-family: "JetBrains Mono";
48+
font-weight: 600;
49+
font-display: swap;
50+
src: url("fonts/JetBrainsMono-SemiBold.woff2");
51+
}
52+
53+
@font-face {
54+
font-family: "JetBrains Mono";
55+
font-weight: 700;
56+
font-display: swap;
57+
src: url("fonts/JetBrainsMono-Bold.woff2");
58+
}
59+
60+
:root {
61+
--font-family-sans-serif: Inter, sans-serif;
62+
--font-family-monospace: monospace;
63+
--font-weight-regular: 400;
64+
--font-weight-medium: 500;
65+
--font-weight-semibold: 600;
66+
--font-weight-bold: 700;
67+
--font-size-tiny: 0.75rem; /* 12px */
68+
--font-size-small: 0.875rem; /* 14px */
69+
--font-size-regular: 1rem; /* 16px */
70+
--font-size-medium: 1.25rem; /* 20px */
71+
--font-size-large: 1.5rem; /* 24px */
72+
--font-size-x-large: 2rem; /* 32px */
73+
--font-size-xx-large: 3rem; /* 48px */
74+
}
75+
76+
[data-codefont="system"] {
77+
--font-family-monospace: monospace;
78+
}
79+
80+
[data-codefont="jetbrains"] {
81+
--font-family-monospace: "JetBrains Mono";
82+
}
83+
84+
html {
85+
-ms-text-size-adjust: 100%;
86+
-webkit-font-smoothing: antialiased;
87+
-webkit-text-size-adjust: 100%;
88+
font-family: var(--font-family-sans-serif);
89+
font-feature-settings: "zero";
90+
/* The root element font size has to be set in px,
91+
* otherwise Safari breaks. */
92+
font-size: 16px;
93+
font-weight: var(--font-weight-regular);
94+
line-height: 1.5;
95+
}
96+
97+
p {
98+
margin: 1rem 0;
99+
}
100+
.txt-tiny {
101+
font-size: var(--font-size-tiny);
102+
}
103+
.txt-small {
104+
font-size: var(--font-size-small);
105+
}
106+
.txt-regular {
107+
font-size: var(--font-size-regular);
108+
}
109+
.txt-medium {
110+
font-size: var(--font-size-medium);
111+
}
112+
.txt-large {
113+
font-size: var(--font-size-large);
114+
}
115+
.txt-huge {
116+
font-size: var(--font-size-x-large);
117+
}
118+
.txt-humongous {
119+
font-size: var(--font-size-xx-large);
120+
}
121+
122+
.txt-monospace {
123+
font-family: var(--font-family-monospace);
124+
}
125+
.txt-bold {
126+
font-weight: var(--font-weight-bold) !important;
127+
}
128+
.txt-semibold {
129+
font-weight: var(--font-weight-semibold) !important;
130+
}
131+
.txt-missing {
132+
color: var(--color-foreground-dim);
133+
}
134+
.txt-emoji {
135+
height: 1em;
136+
width: 1em;
137+
margin: 0 0.05em 0 0.1em;
138+
vertical-align: -0.1em;
139+
}
140+
.txt-overflow {
141+
overflow: hidden;
142+
text-overflow: ellipsis;
143+
white-space: nowrap;
144+
}

‎src/App.svelte

Lines changed: 2 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,7 @@
11
<script lang="ts">
2-
import { invoke } from "@tauri-apps/api/core";
3-
4-
import svelteLogo from "./assets/svelte.svg";
5-
import viteLogo from "/vite.svg";
2+
import Button from "./Button.svelte";
63
</script>
74

8-
<style>
9-
.logo {
10-
height: 6em;
11-
padding: 1.5em;
12-
will-change: filter;
13-
transition: filter 300ms;
14-
}
15-
.logo:hover {
16-
filter: drop-shadow(0 0 2em #646cffaa);
17-
}
18-
.logo.svelte:hover {
19-
filter: drop-shadow(0 0 2em #ff3e00aa);
20-
}
21-
.read-the-docs {
22-
color: #888;
23-
}
24-
</style>
25-
265
<main>
27-
<div>
28-
<a href="https://vitejs.dev" target="_blank" rel="noreferrer">
29-
<img src={viteLogo} class="logo" alt="Vite Logo" />
30-
</a>
31-
<a href="https://svelte.dev" target="_blank" rel="noreferrer">
32-
<img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
33-
</a>
34-
</div>
35-
<h1>Vite + Svelte</h1>
36-
37-
{#await invoke("greet", { name: "radicle" }) then result}
38-
<span>
39-
Greetings from the Tauri core: {result}
40-
</span>
41-
{/await}
42-
43-
<p>
44-
Check out <a
45-
href="https://github.com/sveltejs/kit#readme"
46-
target="_blank"
47-
rel="noreferrer">
48-
SvelteKit
49-
</a>
50-
, the official Svelte app framework powered by Vite!
51-
</p>
52-
53-
<p class="read-the-docs">Click on the Vite and Svelte logos to learn more</p>
6+
<Button>Press me</Button>
547
</main>

0 commit comments

Comments
 (0)