TheoryOfNekomata
/
piano-notes-book


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

			div.score-wrapper {
				@apply mt-8;
				@apply mb-16;
			}

			@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-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;
        }

        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>