vielle.dev
this repo has no description
zoom button
+78
-50
src/Base.astro
+78
-50
src/Base.astro
···
2
2
type Props =
3
3
| {
4
4
title: string;
5
+
zoomable?: true;
5
6
}
6
7
| {
7
8
frontmatter: {
···
11
12
---
12
13
13
14
<html lang="en">
14
-
<head>
15
-
<meta charset="utf-8" />
16
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
17
-
<meta name="generator" content={Astro.generator} />
18
-
<title>
19
-
{
20
-
"title" in Astro.props
21
-
? Astro.props.title
22
-
: Astro.props.frontmatter.title
23
-
}
24
-
</title>
25
-
<style is:inline>
26
-
@layer base {
27
-
:root {
28
-
color-scheme: dark;
29
-
font-family: sans-serif;
30
-
}
31
-
32
-
input,
33
-
textarea,
34
-
button {
35
-
font-family: inherit;
36
-
}
37
-
}
38
-
</style>
39
-
{"frontmatter" in Astro.props
40
-
? <style>
41
-
body {
42
-
background: canvas;
43
-
margin: 0;
44
-
padding: .2em 1em;
45
-
grid-area: main;
46
-
}
47
-
15
+
<head>
16
+
<meta charset="utf-8" />
17
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
18
+
<meta name="generator" content={Astro.generator} />
19
+
<title>
20
+
{
21
+
"title" in Astro.props
22
+
? Astro.props.title
23
+
: Astro.props.frontmatter.title
24
+
}
25
+
</title>
26
+
<style is:inline>
27
+
@layer base {
48
28
:root {
49
-
background: color-mix(in oklab, canvas 100%, currentColor 5%);
50
-
min-height: 100vh;
51
-
display: grid;
52
-
grid-template: ". main ." 1fr / 1fr minmax(auto, 80ch) 1fr;
29
+
color-scheme: dark;
30
+
font-family: sans-serif;
53
31
}
54
32
55
-
blockquote {
56
-
border-left: 1px solid currentColor;
57
-
margin-left: 1em;
58
-
padding-left: 1em;
33
+
input,
34
+
textarea,
35
+
button {
36
+
font-family: inherit;
59
37
}
60
-
</style>
61
-
: null}
62
-
<slot name="head" />
63
-
</head>
64
-
<body>
65
-
{"frontmatter" in Astro.props ? <div style="height: 0.01px;"/> : null}
66
-
<slot />
67
-
</body>
38
+
}
39
+
</style>
40
+
{"frontmatter" in Astro.props
41
+
? <style>
42
+
body {
43
+
background: canvas;
44
+
margin: 0;
45
+
padding: .2em 1em;
46
+
grid-area: main;
47
+
}
48
+
49
+
:root {
50
+
background: color-mix(in oklab, canvas 100%, currentColor 5%);
51
+
min-height: 100vh;
52
+
display: grid;
53
+
grid-template: ". main ." 1fr / 1fr minmax(auto, 40rem) 1fr;
54
+
}
55
+
56
+
blockquote {
57
+
border-left: 1px solid currentColor;
58
+
margin-left: 1em;
59
+
padding-left: 1em;
60
+
}
61
+
62
+
code {
63
+
overflow-wrap: anywhere;
64
+
}
65
+
</style>
66
+
: null}
67
+
<slot name="head" />
68
+
</head>
69
+
<body>
70
+
{"frontmatter" in Astro.props ? <div style="height: 0.01px; margin-bottom: 1em;"/> : null}
71
+
{"frontmatter" in Astro.props || Astro.props.zoomable
72
+
? <div>
73
+
<script>
74
+
let size = 16;
75
+
const fontSizeEl = document.getElementById("font-size") as HTMLElement;
76
+
77
+
document.getElementById("dec")?.addEventListener("click", () => {
78
+
size -= 2;
79
+
document.body.style.fontSize = `${size}px`;
80
+
fontSizeEl.innerText = document.body.style.fontSize
81
+
})
82
+
83
+
document.getElementById("inc")?.addEventListener("click", () => {
84
+
size += 2;
85
+
document.body.style.fontSize = `${size}px`;
86
+
fontSizeEl.innerText = document.body.style.fontSize
87
+
})
88
+
</script>
89
+
<button id="dec" style="width: 2em; height: 1.5lh; padding: 0.2em;">-</button>
90
+
<span id="font-size">16px</span>
91
+
<button id="inc" style="width: 2em; height: 1.5lh; padding: 0.2em;">+</button>
92
+
</div>
93
+
: null}
94
+
<slot />
95
+
</body>
68
96
</html>