--- const { title, titlePrefix } = 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 data-prefix={titlePrefix}>{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; } div.score-wrapper { @apply mt-8; @apply mb-16; } title[data-prefix]::before { @apply block; @apply text-xl; content: attr(data-prefix); } table { @apply caption-bottom; @apply w-full; @apply border-spacing-0; } table caption { @apply mt-4; @apply px-16; } table.alternate-rows { @apply border-0; } table.alternate-rows tbody tr:nth-child(2n + 1) * { @apply relative; } table.alternate-rows tbody tr:nth-child(2n + 1) > *::before { @apply absolute; @apply top-0; @apply left-0; @apply w-full; @apply h-full; @apply bg-current; @apply opacity-10; @apply p-0; content: ''; } @media only screen { html { @apply text-gray-800; } body { @apply px-8; @apply my-16; } div.score-wrapper figure svg { @apply text-gray-800; } } @media only print { head { @apply block; @apply text-black; } div.score-wrapper figure svg { @apply text-black; } title { @apply block; @apply text-3xl; @apply text-center; @apply mb-12; @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; } .print-hidden { display: none; } } @media only screen and (prefers-color-scheme: dark) { html { @apply bg-black; @apply text-white; } div.score-wrapper figure svg { @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 /> </body> </html>