Website for showcasing all features of Tesseract Web.
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
 
 

182 lignes
4.4 KiB

  1. @font-face {
  2. font-family: 'mononoki';
  3. font-weight: 400;
  4. font-style: normal;
  5. font-display: swap;
  6. src:
  7. local('mononoki'),
  8. url(fonts/mononoki/mononoki-Regular.woff2) format('woff2');
  9. }
  10. @font-face {
  11. font-family: 'mononoki';
  12. font-weight: 700;
  13. font-style: normal;
  14. font-display: swap;
  15. src:
  16. local('mononoki Bold'),
  17. local('mononoki'),
  18. url(fonts/mononoki/mononoki-Bold.woff2) format('woff2');
  19. }
  20. @font-face {
  21. font-family: 'mononoki';
  22. font-weight: 400;
  23. font-style: italic;
  24. font-display: swap;
  25. src:
  26. local('mononoki Italic'),
  27. local('mononoki'),
  28. url(fonts/mononoki/mononoki-Italic.woff2) format('woff2');
  29. }
  30. @font-face {
  31. font-family: 'mononoki';
  32. font-weight: 700;
  33. font-style: italic;
  34. font-display: swap;
  35. src:
  36. local('mononoki Bold Italic'),
  37. local('mononoki BoldItalic'),
  38. local('mononoki'),
  39. url(fonts/mononoki/mononoki-BoldItalic.woff2) format('woff2');
  40. }
  41. :root {
  42. --font-family-base: 'Encode Sans', system-ui;
  43. --font-stretch-base: semi-expanded;
  44. --font-weight-base: 400;
  45. --line-height-base: 1.5em;
  46. --font-family-headings: Glory, 'Encode Sans', system-ui;
  47. --font-stretch-headings: condensed;
  48. --font-weight-headings: 100;
  49. --line-height-headings: 1.125em;
  50. --font-family-monospace: 'mononoki';
  51. --font-size-root: 16px;
  52. --opacity-light: 0.25;
  53. --opacity-lighter: 0.5;
  54. --opacity-lightest: 0.75;
  55. }
  56. :root {
  57. --color-bg: var(--color-negative, white);
  58. --color-fg: var(--color-positive, black);
  59. --color-accent: var(--color-primary, blue);
  60. --color-active: var(--color-tertiary, red);
  61. --color-hover: var(--color-secondary, blue);
  62. }
  63. @media (prefers-color-scheme: dark) {
  64. :root {
  65. --color-bg: var(--color-negative, black);
  66. --color-fg: var(--color-positive, white);
  67. }
  68. }
  69. :root {
  70. font-size: var(--font-size-root);
  71. font-family: var(--font-family-base), sans-serif;
  72. font-stretch: var(--font-stretch-base, normal);
  73. font-weight: var(--font-weight-base, 400);
  74. line-height: var(--line-height-base, 1.5);
  75. transition-property: color, background-color;
  76. transition-timing-function: ease;
  77. transition-duration: 350ms;
  78. }
  79. @media only screen {
  80. :root {
  81. background-color: var(--color-bg);
  82. color: var(--color-fg);
  83. }
  84. }
  85. title {
  86. font-family: var(--font-family-headings), sans-serif;
  87. font-stretch: var(--font-stretch-headings, normal);
  88. font-weight: var(--font-weight-headings, 400);
  89. line-height: var(--line-height-headings, 1.5);
  90. }
  91. meta[name="display-title"] {
  92. font-family: var(--font-family-headings), sans-serif;
  93. font-stretch: var(--font-stretch-headings, normal);
  94. font-weight: var(--font-weight-headings, 400);
  95. line-height: var(--line-height-headings, 1.5);
  96. }
  97. h1 {
  98. font-family: var(--font-family-headings), sans-serif;
  99. font-stretch: var(--font-stretch-headings, normal);
  100. font-weight: var(--font-weight-headings, 400);
  101. line-height: var(--line-height-headings, 1.5);
  102. }
  103. h2 {
  104. font-family: var(--font-family-headings), sans-serif;
  105. font-stretch: var(--font-stretch-headings, normal);
  106. font-weight: calc(var(--font-weight-headings, 400) / 100 * 150);
  107. line-height: var(--line-height-headings, 1.5);
  108. }
  109. h3 {
  110. font-family: var(--font-family-headings), sans-serif;
  111. font-stretch: var(--font-stretch-headings, normal);
  112. font-weight: calc(var(--font-weight-headings, 400) / 100 * 250);
  113. line-height: var(--line-height-headings, 1.5);
  114. }
  115. h4 {
  116. font-family: var(--font-family-headings), sans-serif;
  117. font-stretch: var(--font-stretch-headings, normal);
  118. font-weight: var(--font-weight-headings, 400);
  119. line-height: var(--line-height-headings, 1.5);
  120. }
  121. h5 {
  122. font-family: var(--font-family-headings), sans-serif;
  123. font-stretch: var(--font-stretch-headings, normal);
  124. font-weight: var(--font-weight-headings, 400);
  125. line-height: var(--line-height-headings, 1.5);
  126. }
  127. h6 {
  128. font-family: var(--font-family-headings), sans-serif;
  129. font-stretch: var(--font-stretch-headings, normal);
  130. font-weight: var(--font-weight-headings, 400);
  131. line-height: var(--line-height-headings, 1.5);
  132. }
  133. code {
  134. font-family: var(--font-family-monospace), monospace;
  135. }
  136. pre {
  137. font-family: var(--font-family-monospace), monospace;
  138. }
  139. a {
  140. color: inherit;
  141. text-decoration: none;
  142. }
  143. @media only screen {
  144. a {
  145. color: var(--color-accent);
  146. text-decoration: underline;
  147. }
  148. a:focus {
  149. color: var(--color-active);
  150. }
  151. }
  152. ::selection {
  153. background-color: var(--color-active);
  154. color: var(--color-fg);
  155. }
  156. :root {
  157. caret-color: var(--color-active);
  158. }