vielle.dev
this repo has no description
1---
2type Props =
3 | {
4 title: string;
5 zoomable?: true;
6 }
7 | {
8 frontmatter: {
9 title: string;
10 };
11 };
12---
13
14<html lang="en">
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 {
28 :root {
29 color-scheme: dark;
30 font-family: sans-serif;
31 }
32
33 input,
34 textarea,
35 button {
36 font-family: inherit;
37 }
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>
96</html>