Hypertext sites generator
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.

230 lines
3.1 KiB

  1. @light: ~"(prefers-color-scheme: light)";
  2. @dark: ~"(prefers-color-scheme: dark)";
  3. @fontSize: 30px;
  4. * {
  5. padding: 0px;
  6. margin: 0px;
  7. font-family: system-ui, sans-serif;
  8. font-size: @fontSize;
  9. line-height: 42px;
  10. &:hover, &:focus {
  11. color: inherit;
  12. }
  13. @media @light {
  14. background-color: @lightColor;
  15. color: @darkColor;
  16. scrollbar-color: @darkColor @lightColor;
  17. }
  18. @media @dark {
  19. background-color: @darkColor;
  20. color: @lightColor;
  21. scrollbar-color: @lightColor @darkColor;
  22. }
  23. }
  24. ::selection {
  25. @media @light {
  26. color: @lightColor;
  27. background-color: @darkColor;
  28. }
  29. @media @dark {
  30. color: @darkColor;
  31. background-color: @lightColor;
  32. }
  33. }
  34. body {
  35. margin: 20px;
  36. }
  37. main {
  38. padding: 15px;
  39. @media (max-width: 500px) {
  40. padding-left: 10px;
  41. padding-right: 10px;
  42. }
  43. margin-left: 20%;
  44. margin-right: 20%;
  45. @media (max-width: 1400px) {
  46. margin-left: 10%;
  47. margin-right: 10%;
  48. }
  49. @media (max-width: 800px) {
  50. margin-left: 0px;
  51. margin-right: 0px;
  52. }
  53. }
  54. a, a:visited {
  55. text-decoration: underline;
  56. transition-property: color, border-color;
  57. transition-duration: 0.1s;
  58. transition-timing-function: linear;
  59. &:hover, &:focus {
  60. text-decoration: none;
  61. color: @mainColor;
  62. }
  63. }
  64. .button {
  65. border-width: 2px;
  66. border-style: solid;
  67. padding: 8px 16px 8px 16px;
  68. margin: 5px;
  69. display: inline-block;
  70. border-radius: 14px;
  71. text-decoration: none;
  72. @media @light {
  73. border-color: @darkColor;
  74. }
  75. @media @dark {
  76. border-color: @lightColor;
  77. }
  78. &:hover, &:focus {
  79. color: @mainColor;
  80. border: 2px solid @mainColor;
  81. }
  82. }
  83. .smallButton {
  84. .button();
  85. font-size: 80%;
  86. padding: 0px 16px 0px 16px;
  87. }
  88. img {
  89. height: auto;
  90. max-width: 100%;
  91. }
  92. .imgArticle {
  93. display: block;
  94. margin: auto;
  95. margin-top: 20px;
  96. margin-bottom: 20px;
  97. }
  98. .border {
  99. border-width: 1px;
  100. border-style: solid;
  101. border-radius: 5px;
  102. @media @light {
  103. border-color: @darkColor;
  104. }
  105. @media @dark {
  106. border-color: @lightColor;
  107. }
  108. }
  109. strong {
  110. font-weight: bold;
  111. }
  112. pre, *:not(pre) > code, var, samp {
  113. padding: 5px;
  114. }
  115. pre, code, var, samp {
  116. font-family: monospace;
  117. overflow: auto;
  118. border-radius: 10px;
  119. font-style: normal;
  120. @media @dark {
  121. background-color: @darkerColor;
  122. }
  123. @media @light {
  124. background-color: @lightlessColor;
  125. }
  126. }
  127. abbr[title] {
  128. text-decoration: dotted underline;
  129. }
  130. address {
  131. font-style: normal;
  132. }
  133. ul {
  134. padding-left: 35px;
  135. }
  136. dt {
  137. font-weight: 500;
  138. }
  139. dd {
  140. margin-left: 25px;
  141. padding-bottom: 10px;
  142. }
  143. p {
  144. padding-top: 8px;
  145. padding-bottom: 8px;
  146. }
  147. header, footer, .centered {
  148. text-align: center;
  149. justify-content: center;
  150. }
  151. // ----- TITLES -----
  152. h1, h2, h3, h4, h5, h6 {
  153. font-weight: normal;
  154. line-height: 100%;
  155. }
  156. h1, h1 > * {
  157. font-size: @fontSize + 40;
  158. }
  159. h1 {
  160. text-align: center;
  161. padding-top: 15px;
  162. }
  163. h2, h2 > * {
  164. font-size: @fontSize + 30;
  165. }
  166. h2 {
  167. margin-top: 50px;
  168. margin-bottom: 20px;
  169. }
  170. h3, h3 > * {
  171. font-size: @fontSize + 25;
  172. }
  173. h3 {
  174. margin-top: 30px;
  175. margin-bottom: 10px;
  176. }
  177. h4, h4 > * {
  178. font-size: @fontSize + 18;
  179. }
  180. h5, h5 > * {
  181. font-size: @fontSize + 12;
  182. }
  183. h6, h6 > * {
  184. font-size: @fontSize + 6;
  185. }