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