- ---
- const { title } = Astro.props.frontmatter || Astro.props;
- ---
-
- <!doctype html>
- <html lang="en-PH">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width" />
- <link rel="icon" type="image/svg+xml" href="favicon.svg" />
- <title>{title}</title>
- <style is:global>
- html {
- @apply font-body;
- }
-
- body {
- @apply w-full;
- @apply mx-auto;
- @apply max-w-screen-md;
- @apply leading-relaxed;
- @apply box-border;
- }
-
- p {
- @apply my-6;
- @apply indent-6;
- @apply text-justify;
- }
-
- figure {
- @apply m-0;
- }
-
- figcaption {
- @apply text-center;
- }
-
- .screen-controls {
- @apply flex;
- @apply justify-center;
- }
-
- a:link {
- @apply text-blue-600;
- }
-
- a:visited {
- @apply text-purple-600;
- }
-
- img.score {
- @apply -my-8;
- }
-
- div.score-wrapper {
- @apply my-12;
- }
-
- @media only screen {
- body {
- @apply px-8;
- @apply my-16;
- }
- }
-
- @media only print {
- head {
- @apply block;
- }
-
- title {
- @apply block;
- @apply text-5xl;
- @apply text-center;
- @apply my-16;
- @apply font-bold;
- }
-
- body {
- @apply max-w-full;
- @apply m-0;
- }
-
- .screen-controls {
- @apply hidden;
- }
-
- a:link {
- @apply text-inherit;
- @apply no-underline;
- }
-
- a:visited {
- @apply text-inherit;
- }
-
- figcaption {
- @apply text-sm;
- }
- }
-
- @media only screen and (prefers-color-scheme: dark) {
- html {
- @apply bg-black;
- @apply text-white;
- }
-
- img.score {
- filter: invert(100%) grayscale(100%);
- }
-
- a:link {
- @apply text-blue-400;
- }
-
- a:visited {
- @apply text-purple-400;
- }
- }
-
- @page {
- margin: 2cm;
- }
- </style>
- </head>
- <body>
- <slot />
- <div class="">
-
- </div>
- </body>
- </html>
|