API tools faq
paste
Guest User

белый

a guest
Dec 23rd, 2025
36
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.00 KB | None | 0 0
raw download clone embed print report
  1. ```
  2. <!DOCTYPE html>
  3. <!DOCTYPE html>
  4. <html lang="ru">
  5. <head>
  6. <meta charset="UTF-8" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8. <title>Авторские заметки — блок</title>
  9.  
  10. <style>
  11. @import url("https://fontsapi.zeoseven.com/309/main/result.css"); /* KingHwaOldSong */
  12.  
  13. /*
  14. Стиль: "Авторские заметки" (поля, бумага, карандаш/чернила, ремарки на полях)
  15. Структура и заглушки: $1..$5 как в исходнике
  16. */
  17.  
  18. .author-notes {
  19. --paper: #f3efe7;
  20. --ink: #232323;
  21. --muted: #6f6a62;
  22. --accent: #8a6a3f;
  23. --border: rgba(0,0,0,.10);
  24.  
  25. position: relative;
  26. margin: 1em 0;
  27. background: var(--paper);
  28. color: var(--ink);
  29. border-radius: 2px;
  30. overflow: hidden;
  31. box-shadow:
  32. 0 2px 14px rgba(0,0,0,.12),
  33. 0 0 0 1px rgba(255,255,255,.06) inset;
  34. isolation: isolate;
  35. }
  36.  
  37. /* тонкая "книжная" линейка сверху */
  38. .author-notes::before {
  39. content: "";
  40. position: absolute;
  41. top: 0; left: 0; right: 0; height: 2px;
  42. background: linear-gradient(90deg, var(--accent), rgba(138,106,63,.25));
  43. z-index: 2;
  44. }
  45.  
  46. /* поле слева + легкая линейка */
  47. .author-notes::after {
  48. content: "";
  49. position: absolute;
  50. top: 14px; bottom: 14px; left: 18px; width: 14px;
  51. background:
  52. linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,0) 70%),
  53. repeating-linear-gradient(
  54. to bottom,
  55. rgba(0,0,0,.06) 0px,
  56. rgba(0,0,0,.06) 1px,
  57. rgba(0,0,0,0) 24px
  58. );
  59. opacity: .25;
  60. pointer-events: none;
  61. z-index: 1;
  62. }
  63.  
  64. .author-notes summary {
  65. list-style: none;
  66. padding: 20px 20px 18px 40px;
  67. cursor: pointer;
  68. position: relative;
  69. z-index: 5;
  70. }
  71.  
  72. /* убрать стандартный маркер (стрелку) кроссбраузерно */
  73. .author-notes summary::marker { content: ""; } /* Firefox/Chromium */
  74. .author-notes summary::-webkit-details-marker { display: none; } /* Safari */
  75.  
  76. .an-header {
  77. display: flex;
  78. flex-direction: column;
  79. gap: 7px;
  80. position: relative;
  81. }
  82.  
  83. .an-watermark {
  84. position: absolute;
  85. right: -6px;
  86. top: -6px;
  87. font-family: "Didot", "Bodoni MT", serif;
  88. font-style: italic;
  89. font-size: 4.4rem;
  90. color: rgba(0,0,0,.045);
  91. line-height: 1;
  92. pointer-events: none;
  93. z-index: -1;
  94. }
  95.  
  96. .an-tag {
  97. font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  98. font-size: 0.62rem;
  99. letter-spacing: 0.16em;
  100. text-transform: uppercase;
  101. color: var(--accent);
  102. display: flex;
  103. align-items: center;
  104. gap: 8px;
  105. }
  106. .an-tag::after {
  107. content: "";
  108. height: 1px;
  109. width: 22px;
  110. background: var(--accent);
  111. opacity: .55;
  112. }
  113.  
  114. /* тот же "любимый" шрифт заголовка */
  115. .an-title {
  116. font-family: "KingHwaOldSong", "kinghwaoldsong", Georgia, "Times New Roman", serif;
  117. font-size: 1.32rem;
  118. font-weight: 400;
  119. line-height: 1.25;
  120. padding-bottom: 10px;
  121. border-bottom: 1px dashed var(--border);
  122. }
  123.  
  124. .an-meta {
  125. display: flex;
  126. flex-direction: column;
  127. gap: 3px;
  128. font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  129. font-size: 0.68rem;
  130. color: var(--muted);
  131. }
  132.  
  133. .an-content {
  134. padding: 0 22px 22px 42px;
  135. font-size: 0.92rem;
  136. line-height: 1.72;
  137. color: #3f3f3f;
  138. text-align: justify;
  139.  
  140. opacity: 0;
  141. max-height: 0;
  142. transform: translateY(-6px);
  143. transform-origin: top;
  144. animation: anUnfold .45s ease forwards;
  145. }
  146.  
  147. .author-notes[open] {
  148. box-shadow:
  149. 0 10px 26px rgba(0,0,0,.16),
  150. 0 0 0 1px rgba(138, 106, 63, .18) inset;
  151. }
  152.  
  153. @keyframes anUnfold {
  154. to { opacity: 1; max-height: 1200px; transform: translateY(0); }
  155. }
  156.  
  157. @media (min-width: 768px) {
  158. .author-notes summary { padding: 24px 26px 20px 48px; }
  159. .an-title { font-size: 1.5rem; }
  160. .an-meta { flex-direction: row; justify-content: space-between; }
  161. .an-content { padding: 0 30px 28px 52px; }
  162. .an-watermark { font-size: 5.2rem; }
  163. }
  164.  
  165. @media (min-width: 1024px) {
  166. .author-notes summary { padding: 28px 32px 22px 56px; }
  167. .an-title { font-size: 1.62rem; }
  168. .an-content { padding: 0 40px 36px 62px; }
  169. .an-watermark { font-size: 6.0rem; }
  170. }
  171. </style>
  172.  
  173. <div class="tsuki-wrapper">
  174. <details class="author-notes">
  175. <summary>
  176. <div class="an-header">
  177. <div class="an-watermark">$1</div>
  178.  
  179. <div class="an-tag">Author’s Notes // Entry $1</div>
  180.  
  181. <div class="an-title">$2</div>
  182.  
  183. <div class="an-meta">
  184. <span>WHEN: $3</span>
  185. <span>WHERE: $4</span>
  186. </div>
  187. </div>
  188. </summary>
  189.  
  190. <div class="an-content">
  191. $5
  192. </div>
  193. </details>
  194. </div>
  195. </body>
  196. </html>
  197. ```
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!