Piano notes book, powered by Astro and React.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

145 lines
2.2 KiB

  1. ---
  2. const { title } = Astro.props.frontmatter || Astro.props;
  3. ---
  4. <!doctype html>
  5. <html lang="en-PH">
  6. <head>
  7. <meta charset="UTF-8" />
  8. <meta name="viewport" content="width=device-width" />
  9. <link rel="icon" type="image/svg+xml" href="favicon.svg" />
  10. <title>{title}</title>
  11. <style is:global>
  12. html {
  13. @apply font-body;
  14. }
  15. body {
  16. @apply w-full;
  17. @apply mx-auto;
  18. @apply max-w-screen-md;
  19. @apply leading-relaxed;
  20. @apply box-border;
  21. }
  22. p {
  23. @apply my-6;
  24. @apply indent-6;
  25. @apply text-justify;
  26. }
  27. figure {
  28. @apply m-0;
  29. }
  30. figcaption {
  31. @apply text-center;
  32. }
  33. .screen-controls {
  34. @apply flex;
  35. @apply justify-center;
  36. }
  37. a:link {
  38. @apply text-blue-600;
  39. }
  40. a:visited {
  41. @apply text-purple-600;
  42. }
  43. div.score-wrapper {
  44. @apply mt-8;
  45. @apply mb-16;
  46. }
  47. @media only screen {
  48. html {
  49. @apply text-gray-800;
  50. }
  51. body {
  52. @apply px-8;
  53. @apply my-16;
  54. }
  55. div.score-wrapper figure svg {
  56. @apply text-gray-800;
  57. }
  58. }
  59. @media only print {
  60. head {
  61. @apply block;
  62. @apply text-black;
  63. }
  64. div.score-wrapper figure svg {
  65. @apply text-black;
  66. }
  67. title {
  68. @apply block;
  69. @apply text-5xl;
  70. @apply text-center;
  71. @apply my-16;
  72. @apply font-bold;
  73. }
  74. body {
  75. @apply max-w-full;
  76. @apply m-0;
  77. }
  78. .screen-controls {
  79. @apply hidden;
  80. }
  81. a:link {
  82. @apply text-inherit;
  83. @apply no-underline;
  84. }
  85. a:visited {
  86. @apply text-inherit;
  87. }
  88. figcaption {
  89. @apply text-sm;
  90. }
  91. }
  92. @media only screen and (prefers-color-scheme: dark) {
  93. html {
  94. @apply bg-black;
  95. @apply text-white;
  96. }
  97. div.score-wrapper figure svg {
  98. @apply text-white;
  99. }
  100. img.score {
  101. filter: invert(100%) grayscale(100%);
  102. }
  103. a:link {
  104. @apply text-blue-400;
  105. }
  106. a:visited {
  107. @apply text-purple-400;
  108. }
  109. }
  110. @page {
  111. margin: 2cm;
  112. }
  113. </style>
  114. </head>
  115. <body>
  116. <slot />
  117. </body>
  118. </html>