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.
 
 

153 rivejä
2.3 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. table {
  48. caption-side: bottom;
  49. }
  50. @media only screen {
  51. html {
  52. @apply text-gray-800;
  53. }
  54. body {
  55. @apply px-8;
  56. @apply my-16;
  57. }
  58. div.score-wrapper figure svg {
  59. @apply text-gray-800;
  60. }
  61. }
  62. @media only print {
  63. head {
  64. @apply block;
  65. @apply text-black;
  66. }
  67. div.score-wrapper figure svg {
  68. @apply text-black;
  69. }
  70. title {
  71. @apply block;
  72. @apply text-5xl;
  73. @apply text-center;
  74. @apply my-16;
  75. @apply font-bold;
  76. }
  77. body {
  78. @apply max-w-full;
  79. @apply m-0;
  80. }
  81. .screen-controls {
  82. @apply hidden;
  83. }
  84. a:link {
  85. @apply text-inherit;
  86. @apply no-underline;
  87. }
  88. a:visited {
  89. @apply text-inherit;
  90. }
  91. figcaption {
  92. @apply text-sm;
  93. }
  94. .print-hidden {
  95. display: none;
  96. }
  97. }
  98. @media only screen and (prefers-color-scheme: dark) {
  99. html {
  100. @apply bg-black;
  101. @apply text-white;
  102. }
  103. div.score-wrapper figure svg {
  104. @apply text-white;
  105. }
  106. img.score {
  107. filter: invert(100%) grayscale(100%);
  108. }
  109. a:link {
  110. @apply text-blue-400;
  111. }
  112. a:visited {
  113. @apply text-purple-400;
  114. }
  115. }
  116. @page {
  117. margin: 2cm;
  118. }
  119. </style>
  120. </head>
  121. <body>
  122. <slot />
  123. </body>
  124. </html>