--- 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>