diff options
Diffstat (limited to 'www-2/src/layouts/PageBase.astro')
| -rw-r--r-- | www-2/src/layouts/PageBase.astro | 242 |
1 files changed, 125 insertions, 117 deletions
diff --git a/www-2/src/layouts/PageBase.astro b/www-2/src/layouts/PageBase.astro index e6e0e1e..83073ca 100644 --- a/www-2/src/layouts/PageBase.astro +++ b/www-2/src/layouts/PageBase.astro @@ -1,3 +1,11 @@ +--- +interface Props { + title: string; +} + +const { title } = Astro.props; +--- + <!doctype html> <html lang="en"> <head> @@ -5,7 +13,7 @@ <meta name="viewport" content="width=device-width" /> <link rel="icon" href="/favicon.ico" /> <meta name="generator" content={Astro.generator} /> - <title>Astro Basics</title> + <title>{title}</title> </head> <body> <article id="main-article"> @@ -41,141 +49,141 @@ </html> <style is:global> -html { - width: 100%; - --body-fg-color: unset; - --body-bg-color: unset; - --table-border-color: black; - --toast-fg-color: white; - --toast-bg-color: black; - --code-fg-color: var(--body-fg-color); - --code-bg-color: #eff1f5; -} + html { + width: 100%; + --body-fg-color: unset; + --body-bg-color: unset; + --table-border-color: black; + --toast-fg-color: white; + --toast-bg-color: black; + --code-fg-color: var(--body-fg-color); + --code-bg-color: #eff1f5; + } -* { - box-sizing: border-box; -} + * { + box-sizing: border-box; + } -body { - width: 100%; - margin: 0; - color: var(--body-fg-color); - background-color: var(--body-bg-color); -} + body { + width: 100%; + margin: 0; + color: var(--body-fg-color); + background-color: var(--body-bg-color); + } -/* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1 */ -h1 { - margin-block: 0.67em; - font-size: 2em; -} + /* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1 */ + h1 { + margin-block: 0.67em; + font-size: 2em; + } -.mono { - font-family: monospace; -} + .mono { + font-family: monospace; + } -a.mono-link, -.mono-link a, -.mono-link .fake-link { - font-family: monospace; -} + a.mono-link, + .mono-link a, + .mono-link .fake-link { + font-family: monospace; + } -div.mono-container { - font-family: monospace; - margin-block: 1rem; -} + div.mono-container { + font-family: monospace; + margin-block: 1rem; + } -table { - border-collapse: collapse; + table { + border-collapse: collapse; - &, :is(td,th) { - padding: 0.2em 0.4em; - border: 1px solid var(--table-border-color); - } -} + &, + :is(td, th) { + padding: 0.2em 0.4em; + border: 1px solid var(--table-border-color); + } + } -.toast { - font-size: large; - font-family: monospace; - color: var(--toast-fg-color); - background-color: var(--toast-bg-color); - padding: 0.5em 0.3em; - border-radius: 6px; - - position: fixed; - z-index: 1; - top: 4px; - left: 50vw; - transform: translateX(-50%); -} + .toast { + font-size: large; + font-family: monospace; + color: var(--toast-fg-color); + background-color: var(--toast-bg-color); + padding: 0.5em 0.3em; + border-radius: 6px; + + position: fixed; + z-index: 1; + top: 4px; + left: 50vw; + transform: translateX(-50%); + } -.chroma { - overflow-x: auto; - padding-left: 1px; - padding-right: 4px; - border-radius: 6px; -} + .chroma { + overflow-x: auto; + padding-left: 1px; + padding-right: 4px; + border-radius: 6px; + } -nav { - font-size: large; -} + nav { + font-size: large; + } -#main-article { - position: relative; - left: 50%; - transform: translateX(-50%); - max-width: 880px; - padding: 0 1em; - margin-top: 1em; -} + #main-article { + position: relative; + left: 50%; + transform: translateX(-50%); + max-width: 880px; + padding: 0 1em; + margin-top: 1em; + } -#license a { - font-family: initial; - text-decoration: none; -} + #license a { + font-family: initial; + text-decoration: none; + } -#license-text { - font-family: monospace; - text-decoration: initial; -} + #license-text { + font-family: monospace; + text-decoration: initial; + } -#license-img-container img { - height: 1em; - vertical-align: middle; -} + #license-img-container img { + height: 1em; + vertical-align: middle; + } -.link-group { - margin-block-end: 1em; + .link-group { + margin-block-end: 1em; - > .link-group-title { - font-size: 1.1em; - margin-block-end: 5px; - } + > .link-group-title { + font-size: 1.1em; + margin-block-end: 5px; + } - > .link-group-list { - border-inline-start: solid 1px hsl(0, 0%, 25%); - padding-inline-start: 8px; + > .link-group-list { + border-inline-start: solid 1px hsl(0, 0%, 25%); + padding-inline-start: 8px; - > .link-group-item::before { - content: "- "; + > .link-group-item::before { + content: "- "; + } + } } - } -} - -html[data-theme="dark"] { - --body-fg-color: white; - --body-bg-color: black; - --table-border-color: hsl(0, 0%, 25%); - --toast-fg-color: var(--body-bg-color); - --toast-bg-color: var(--body-fg-color); - --code-bg-color: #1e1e2e; - - & a:link { - color:#34ffd9; - } - - & a:visited { - color:#abcac4; - } -} + html[data-theme="dark"] { + --body-fg-color: white; + --body-bg-color: black; + --table-border-color: hsl(0, 0%, 25%); + --toast-fg-color: var(--body-bg-color); + --toast-bg-color: var(--body-fg-color); + --code-bg-color: #1e1e2e; + + & a:link { + color: #34ffd9; + } + + & a:visited { + color: #abcac4; + } + } </style> |