Piano notes book, powered by Astro and React.
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
 
 

187 řádky
2.9 KiB

  1. ---
  2. const { title, titlePrefix } = 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 data-prefix={titlePrefix}>{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. title[data-prefix]::before {
  48. @apply block;
  49. @apply text-xl;
  50. content: attr(data-prefix);
  51. }
  52. table {
  53. @apply caption-bottom;
  54. @apply w-full;
  55. @apply border-spacing-0;
  56. }
  57. table caption {
  58. @apply mt-4;
  59. @apply px-16;
  60. }
  61. table.alternate-rows {
  62. @apply border-0;
  63. }
  64. table.alternate-rows tbody tr:nth-child(2n + 1) * {
  65. @apply relative;
  66. }
  67. table.alternate-rows tbody tr:nth-child(2n + 1) > *::before {
  68. @apply absolute;
  69. @apply top-0;
  70. @apply left-0;
  71. @apply w-full;
  72. @apply h-full;
  73. @apply bg-current;
  74. @apply opacity-10;
  75. @apply p-0;
  76. content: '';
  77. }
  78. @media only screen {
  79. html {
  80. @apply text-gray-800;
  81. }
  82. body {
  83. @apply px-8;
  84. @apply my-16;
  85. }
  86. div.score-wrapper figure svg {
  87. @apply text-gray-800;
  88. }
  89. }
  90. @media only print {
  91. head {
  92. @apply block;
  93. @apply text-black;
  94. }
  95. div.score-wrapper figure svg {
  96. @apply text-black;
  97. }
  98. title {
  99. @apply block;
  100. @apply text-3xl;
  101. @apply text-center;
  102. @apply mb-12;
  103. @apply font-bold;
  104. }
  105. body {
  106. @apply max-w-full;
  107. @apply m-0;
  108. }
  109. .screen-controls {
  110. @apply hidden;
  111. }
  112. a:link {
  113. @apply text-inherit;
  114. @apply no-underline;
  115. }
  116. a:visited {
  117. @apply text-inherit;
  118. }
  119. figcaption {
  120. @apply text-sm;
  121. }
  122. .print-hidden {
  123. display: none;
  124. }
  125. }
  126. @media only screen and (prefers-color-scheme: dark) {
  127. html {
  128. @apply bg-black;
  129. @apply text-white;
  130. }
  131. div.score-wrapper figure svg {
  132. @apply text-white;
  133. }
  134. img.score {
  135. filter: invert(100%) grayscale(100%);
  136. }
  137. a:link {
  138. @apply text-blue-400;
  139. }
  140. a:visited {
  141. @apply text-purple-400;
  142. }
  143. }
  144. @page {
  145. margin: 2cm;
  146. }
  147. </style>
  148. </head>
  149. <body>
  150. <slot />
  151. </body>
  152. </html>