@graupl/graupl 1.0.0-beta.0 → 1.0.0-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (613) hide show
  1. package/.devcontainer/devcontainer.json +221 -0
  2. package/.env +3 -0
  3. package/.github/workflows/docs.yml +13 -6
  4. package/.github/workflows/prerelease.yml +125 -0
  5. package/.github/workflows/release.yml +111 -0
  6. package/.github/workflows/test.yml +54 -3
  7. package/.versionrc.cjs +12 -0
  8. package/.vscode/settings.json +10 -0
  9. package/CHANGELOG.md +203 -1
  10. package/build.js +4 -2
  11. package/combine-at-rules.cjs +61 -0
  12. package/container/.env +26 -0
  13. package/container/build/app.dockerfile +41 -0
  14. package/container/docker-compose.yml +27 -0
  15. package/dist/css/base/button.css +1 -1
  16. package/dist/css/base/button.css.map +1 -1
  17. package/dist/css/base/form.css +1 -1
  18. package/dist/css/base/form.css.map +1 -1
  19. package/dist/css/base/link.css +1 -1
  20. package/dist/css/base/link.css.map +1 -1
  21. package/dist/css/base/table.css +1 -1
  22. package/dist/css/base/table.css.map +1 -1
  23. package/dist/css/base.css +1 -1
  24. package/dist/css/base.css.map +1 -1
  25. package/dist/css/component/accordion.css +4 -1
  26. package/dist/css/component/accordion.css.map +1 -1
  27. package/dist/css/component/alert.css +1 -1
  28. package/dist/css/component/alert.css.map +1 -1
  29. package/dist/css/component/card.css +1 -1
  30. package/dist/css/component/card.css.map +1 -1
  31. package/dist/css/component/carousel.css +1 -1
  32. package/dist/css/component/carousel.css.map +1 -1
  33. package/dist/css/component/input-group.css +1 -1
  34. package/dist/css/component/input-group.css.map +1 -1
  35. package/dist/css/component/list.css +2 -0
  36. package/dist/css/component/list.css.map +1 -0
  37. package/dist/css/component/menu.css +1 -1
  38. package/dist/css/component/menu.css.map +1 -1
  39. package/dist/css/component/navigation.css +1 -1
  40. package/dist/css/component/navigation.css.map +1 -1
  41. package/dist/css/component.css +4 -1
  42. package/dist/css/component.css.map +1 -1
  43. package/dist/css/graupl.css +4 -1
  44. package/dist/css/graupl.css.map +1 -1
  45. package/dist/css/init.css.map +1 -1
  46. package/dist/css/layout/columns.css +1 -1
  47. package/dist/css/layout/columns.css.map +1 -1
  48. package/dist/css/layout/container.css +1 -1
  49. package/dist/css/layout/container.css.map +1 -1
  50. package/dist/css/layout/flex-columns.css +1 -1
  51. package/dist/css/layout/flex-columns.css.map +1 -1
  52. package/dist/css/layout.css +4 -1
  53. package/dist/css/layout.css.map +1 -1
  54. package/dist/css/normalize.css.map +1 -1
  55. package/dist/css/state/focus.css +1 -1
  56. package/dist/css/state/focus.css.map +1 -1
  57. package/dist/css/state.css +1 -1
  58. package/dist/css/state.css.map +1 -1
  59. package/dist/css/theme/color.css.map +1 -1
  60. package/dist/css/theme/typography.css +1 -1
  61. package/dist/css/theme/typography.css.map +1 -1
  62. package/dist/css/theme.css +1 -1
  63. package/dist/css/theme.css.map +1 -1
  64. package/dist/css/utilities/alignment.css.map +1 -1
  65. package/dist/css/utilities/background.css +2 -0
  66. package/dist/css/utilities/background.css.map +1 -0
  67. package/dist/css/utilities/border.css +2 -0
  68. package/dist/css/utilities/border.css.map +1 -0
  69. package/dist/css/utilities/color.css +1 -1
  70. package/dist/css/utilities/color.css.map +1 -1
  71. package/dist/css/utilities/container.css +2 -0
  72. package/dist/css/utilities/container.css.map +1 -0
  73. package/dist/css/utilities/display.css +1 -1
  74. package/dist/css/utilities/display.css.map +1 -1
  75. package/dist/css/utilities/flex.css +1 -1
  76. package/dist/css/utilities/flex.css.map +1 -1
  77. package/dist/css/utilities/gradient.css +2 -0
  78. package/dist/css/utilities/gradient.css.map +1 -0
  79. package/dist/css/utilities/height.css +1 -1
  80. package/dist/css/utilities/height.css.map +1 -1
  81. package/dist/css/utilities/inset.css +1 -1
  82. package/dist/css/utilities/inset.css.map +1 -1
  83. package/dist/css/utilities/justification.css.map +1 -1
  84. package/dist/css/utilities/list.css.map +1 -1
  85. package/dist/css/utilities/order.css.map +1 -1
  86. package/dist/css/utilities/position.css +2 -0
  87. package/dist/css/utilities/position.css.map +1 -0
  88. package/dist/css/utilities/ratio.css +1 -1
  89. package/dist/css/utilities/ratio.css.map +1 -1
  90. package/dist/css/utilities/spacing.css +1 -1
  91. package/dist/css/utilities/spacing.css.map +1 -1
  92. package/dist/css/utilities/typography.css +1 -1
  93. package/dist/css/utilities/typography.css.map +1 -1
  94. package/dist/css/utilities/visibility.css +1 -1
  95. package/dist/css/utilities/visibility.css.map +1 -1
  96. package/dist/css/utilities/visually-hidden.css +2 -0
  97. package/dist/css/utilities/visually-hidden.css.map +1 -0
  98. package/dist/css/utilities/width.css +1 -1
  99. package/dist/css/utilities/width.css.map +1 -1
  100. package/dist/css/utilities/z-index.css +2 -0
  101. package/dist/css/utilities/z-index.css.map +1 -0
  102. package/dist/css/utilities.css +1 -1
  103. package/dist/css/utilities.css.map +1 -1
  104. package/dist/js/graupl.cjs.js +5 -3
  105. package/dist/js/graupl.esm.js +1305 -206
  106. package/dist/js/graupl.iife.js +5 -3
  107. package/docs/.vitepress/config.js +31 -1
  108. package/docs/.vitepress/theme/custom.scss +16 -16
  109. package/docs/compiling-graupl.md +6 -5
  110. package/docs/components/alert.md +28 -28
  111. package/docs/components/button.md +36 -36
  112. package/docs/components/card.md +39 -39
  113. package/docs/components/inputgroup.md +12 -12
  114. package/docs/components/menu.md +112 -112
  115. package/docs/components/navigation.md +52 -52
  116. package/docs/content.md +86 -86
  117. package/docs/defaults.md +10 -10
  118. package/docs/forms.md +34 -34
  119. package/docs/layout.md +21 -21
  120. package/docs/state.md +8 -8
  121. package/docs/theme.md +58 -58
  122. package/docs/utilities/alignment.md +411 -0
  123. package/docs/utilities/background.md +192 -0
  124. package/docs/utilities/border.md +268 -0
  125. package/docs/utilities/color.md +348 -0
  126. package/docs/utilities/container.md +3 -0
  127. package/docs/utilities/display.md +3 -0
  128. package/docs/utilities/flex.md +3 -0
  129. package/docs/utilities/gradient.md +3 -0
  130. package/docs/utilities/height.md +3 -0
  131. package/docs/utilities/inset.md +3 -0
  132. package/docs/utilities/justification.md +3 -0
  133. package/docs/utilities/list.md +3 -0
  134. package/docs/utilities/order.md +3 -0
  135. package/docs/utilities/position.md +3 -0
  136. package/docs/utilities/ratio.md +3 -0
  137. package/docs/utilities/responsive-classes.md +3 -0
  138. package/docs/utilities/spacing.md +3 -0
  139. package/docs/utilities/typography.md +3 -0
  140. package/docs/utilities/visibility.md +3 -0
  141. package/docs/utilities/visually-hidden.md +3 -0
  142. package/docs/utilities/width.md +3 -0
  143. package/docs/utilities/z-index.md +3 -0
  144. package/docs/utilities.md +1 -1
  145. package/favicon.ico +0 -0
  146. package/index.html +418 -55
  147. package/logo.svg +296 -0
  148. package/package.json +33 -37
  149. package/packages/core/build.js +9 -0
  150. package/packages/core/dist/css/base/button.css +2 -0
  151. package/packages/core/dist/css/base/button.css.map +1 -0
  152. package/packages/core/dist/css/base/form.css +2 -0
  153. package/packages/core/dist/css/base/form.css.map +1 -0
  154. package/packages/core/dist/css/base/link.css +2 -0
  155. package/packages/core/dist/css/base/link.css.map +1 -0
  156. package/packages/core/dist/css/base/table.css +2 -0
  157. package/packages/core/dist/css/base/table.css.map +1 -0
  158. package/packages/core/dist/css/base.css +2 -0
  159. package/packages/core/dist/css/base.css.map +1 -0
  160. package/packages/core/dist/css/component/accordion.css +5 -0
  161. package/packages/core/dist/css/component/accordion.css.map +1 -0
  162. package/packages/core/dist/css/component/alert.css +2 -0
  163. package/packages/core/dist/css/component/alert.css.map +1 -0
  164. package/packages/core/dist/css/component/card.css +2 -0
  165. package/packages/core/dist/css/component/card.css.map +1 -0
  166. package/packages/core/dist/css/component/carousel.css +2 -0
  167. package/packages/core/dist/css/component/carousel.css.map +1 -0
  168. package/packages/core/dist/css/component/input-group.css +2 -0
  169. package/packages/core/dist/css/component/input-group.css.map +1 -0
  170. package/packages/core/dist/css/component/list.css +2 -0
  171. package/packages/core/dist/css/component/list.css.map +1 -0
  172. package/packages/core/dist/css/component/menu.css +2 -0
  173. package/packages/core/dist/css/component/menu.css.map +1 -0
  174. package/packages/core/dist/css/component/navigation.css +2 -0
  175. package/packages/core/dist/css/component/navigation.css.map +1 -0
  176. package/packages/core/dist/css/component.css +5 -0
  177. package/packages/core/dist/css/component.css.map +1 -0
  178. package/packages/core/dist/css/graupl.css +5 -0
  179. package/packages/core/dist/css/graupl.css.map +1 -0
  180. package/{src/scss/_init.scss → packages/core/dist/css/init.css} +1 -2
  181. package/packages/core/dist/css/init.css.map +1 -0
  182. package/packages/core/dist/css/layout/columns.css +2 -0
  183. package/packages/core/dist/css/layout/columns.css.map +1 -0
  184. package/packages/core/dist/css/layout/container.css +2 -0
  185. package/packages/core/dist/css/layout/container.css.map +1 -0
  186. package/packages/core/dist/css/layout/flex-columns.css +2 -0
  187. package/packages/core/dist/css/layout/flex-columns.css.map +1 -0
  188. package/packages/core/dist/css/layout.css +5 -0
  189. package/packages/core/dist/css/layout.css.map +1 -0
  190. package/packages/core/dist/css/normalize.css +2 -0
  191. package/packages/core/dist/css/normalize.css.map +1 -0
  192. package/packages/core/dist/css/state/focus.css +2 -0
  193. package/packages/core/dist/css/state/focus.css.map +1 -0
  194. package/packages/core/dist/css/state.css +2 -0
  195. package/packages/core/dist/css/state.css.map +1 -0
  196. package/packages/core/dist/css/theme/color.css +2 -0
  197. package/packages/core/dist/css/theme/color.css.map +1 -0
  198. package/packages/core/dist/css/theme/typography.css +2 -0
  199. package/packages/core/dist/css/theme/typography.css.map +1 -0
  200. package/packages/core/dist/css/theme.css +2 -0
  201. package/packages/core/dist/css/theme.css.map +1 -0
  202. package/packages/core/dist/css/utilities/alignment.css +2 -0
  203. package/packages/core/dist/css/utilities/alignment.css.map +1 -0
  204. package/packages/core/dist/css/utilities/background.css +2 -0
  205. package/packages/core/dist/css/utilities/background.css.map +1 -0
  206. package/packages/core/dist/css/utilities/border.css +2 -0
  207. package/packages/core/dist/css/utilities/border.css.map +1 -0
  208. package/packages/core/dist/css/utilities/color.css +2 -0
  209. package/packages/core/dist/css/utilities/color.css.map +1 -0
  210. package/packages/core/dist/css/utilities/container.css +2 -0
  211. package/packages/core/dist/css/utilities/container.css.map +1 -0
  212. package/packages/core/dist/css/utilities/display.css +2 -0
  213. package/packages/core/dist/css/utilities/display.css.map +1 -0
  214. package/packages/core/dist/css/utilities/flex.css +2 -0
  215. package/packages/core/dist/css/utilities/flex.css.map +1 -0
  216. package/packages/core/dist/css/utilities/gradient.css +2 -0
  217. package/packages/core/dist/css/utilities/gradient.css.map +1 -0
  218. package/packages/core/dist/css/utilities/height.css +2 -0
  219. package/packages/core/dist/css/utilities/height.css.map +1 -0
  220. package/packages/core/dist/css/utilities/inset.css +2 -0
  221. package/packages/core/dist/css/utilities/inset.css.map +1 -0
  222. package/packages/core/dist/css/utilities/justification.css +2 -0
  223. package/packages/core/dist/css/utilities/justification.css.map +1 -0
  224. package/packages/core/dist/css/utilities/list.css +2 -0
  225. package/packages/core/dist/css/utilities/list.css.map +1 -0
  226. package/packages/core/dist/css/utilities/order.css +2 -0
  227. package/packages/core/dist/css/utilities/order.css.map +1 -0
  228. package/packages/core/dist/css/utilities/position.css +2 -0
  229. package/packages/core/dist/css/utilities/position.css.map +1 -0
  230. package/packages/core/dist/css/utilities/ratio.css +2 -0
  231. package/packages/core/dist/css/utilities/ratio.css.map +1 -0
  232. package/packages/core/dist/css/utilities/spacing.css +2 -0
  233. package/packages/core/dist/css/utilities/spacing.css.map +1 -0
  234. package/packages/core/dist/css/utilities/typography.css +2 -0
  235. package/packages/core/dist/css/utilities/typography.css.map +1 -0
  236. package/packages/core/dist/css/utilities/visibility.css +2 -0
  237. package/packages/core/dist/css/utilities/visibility.css.map +1 -0
  238. package/packages/core/dist/css/utilities/visually-hidden.css +2 -0
  239. package/packages/core/dist/css/utilities/visually-hidden.css.map +1 -0
  240. package/packages/core/dist/css/utilities/width.css +2 -0
  241. package/packages/core/dist/css/utilities/width.css.map +1 -0
  242. package/packages/core/dist/css/utilities/z-index.css +2 -0
  243. package/packages/core/dist/css/utilities/z-index.css.map +1 -0
  244. package/packages/core/dist/css/utilities.css +2 -0
  245. package/packages/core/dist/css/utilities.css.map +1 -0
  246. package/packages/core/package.json +58 -0
  247. package/packages/core/scss/base/button.scss +3 -0
  248. package/packages/core/scss/base/form.scss +3 -0
  249. package/packages/core/scss/base/link.scss +3 -0
  250. package/packages/core/scss/base/table.scss +3 -0
  251. package/packages/core/scss/base.scss +3 -0
  252. package/packages/core/scss/component/accordion.scss +3 -0
  253. package/packages/core/scss/component/alert.scss +3 -0
  254. package/packages/core/scss/component/card.scss +3 -0
  255. package/packages/core/scss/component/carousel.scss +3 -0
  256. package/packages/core/scss/component/input-group.scss +3 -0
  257. package/packages/core/scss/component/list.scss +3 -0
  258. package/packages/core/scss/component/menu.scss +3 -0
  259. package/packages/core/scss/component/navigation.scss +3 -0
  260. package/packages/core/scss/component.scss +3 -0
  261. package/packages/core/scss/graupl.scss +3 -0
  262. package/packages/core/scss/init.scss +3 -0
  263. package/packages/core/scss/layout/columns.scss +3 -0
  264. package/packages/core/scss/layout/container.scss +3 -0
  265. package/packages/core/scss/layout/flex-columns.scss +3 -0
  266. package/packages/core/scss/layout.scss +3 -0
  267. package/packages/core/scss/normalize.scss +3 -0
  268. package/packages/core/scss/state/focus.scss +3 -0
  269. package/packages/core/scss/state.scss +3 -0
  270. package/packages/core/scss/theme/color.scss +3 -0
  271. package/packages/core/scss/theme/typography.scss +3 -0
  272. package/packages/core/scss/theme.scss +3 -0
  273. package/packages/core/scss/utilities/alignment.scss +3 -0
  274. package/packages/core/scss/utilities/background.scss +3 -0
  275. package/packages/core/scss/utilities/border.scss +3 -0
  276. package/packages/core/scss/utilities/color.scss +3 -0
  277. package/packages/core/scss/utilities/container.scss +3 -0
  278. package/packages/core/scss/utilities/display.scss +3 -0
  279. package/packages/core/scss/utilities/flex.scss +3 -0
  280. package/packages/core/scss/utilities/gradient.scss +3 -0
  281. package/packages/core/scss/utilities/height.scss +3 -0
  282. package/packages/core/scss/utilities/inset.scss +3 -0
  283. package/packages/core/scss/utilities/justification.scss +3 -0
  284. package/packages/core/scss/utilities/list.scss +3 -0
  285. package/packages/core/scss/utilities/order.scss +3 -0
  286. package/{scss/utilities/postion.scss → packages/core/scss/utilities/position.scss} +1 -1
  287. package/packages/core/scss/utilities/ratio.scss +3 -0
  288. package/packages/core/scss/utilities/spacing.scss +3 -0
  289. package/packages/core/scss/utilities/typography.scss +3 -0
  290. package/packages/core/scss/utilities/visibility.scss +3 -0
  291. package/packages/core/scss/utilities/visually-hidden.scss +3 -0
  292. package/packages/core/scss/utilities/width.scss +3 -0
  293. package/packages/core/scss/utilities/z-index.scss +3 -0
  294. package/packages/core/scss/utilities.scss +3 -0
  295. package/{src → packages/core/src}/scss/_defaults.scss +59 -11
  296. package/{src → packages/core/src}/scss/_index.scss +1 -1
  297. package/packages/core/src/scss/_init.scss +6 -0
  298. package/{src → packages/core/src}/scss/_normalize.scss +1 -1
  299. package/packages/core/src/scss/_variables.scss +95 -0
  300. package/{src → packages/core/src}/scss/base/_index.scss +1 -1
  301. package/{src → packages/core/src}/scss/base/button/_defaults.scss +13 -24
  302. package/packages/core/src/scss/base/button/_index.scss +206 -0
  303. package/packages/core/src/scss/base/button/_mixins.scss +104 -0
  304. package/packages/core/src/scss/base/button/_variables.scss +252 -0
  305. package/{src → packages/core/src}/scss/base/form/_defaults.scss +8 -1
  306. package/packages/core/src/scss/base/form/_index.scss +227 -0
  307. package/packages/core/src/scss/base/form/_variables.scss +245 -0
  308. package/packages/core/src/scss/base/link/_defaults.scss +35 -0
  309. package/packages/core/src/scss/base/link/_index.scss +245 -0
  310. package/packages/core/src/scss/base/link/_variables.scss +370 -0
  311. package/packages/core/src/scss/base/table/_defaults.scss +68 -0
  312. package/packages/core/src/scss/base/table/_index.scss +314 -0
  313. package/packages/core/src/scss/base/table/_variables.scss +309 -0
  314. package/{src → packages/core/src}/scss/component/_index.scss +2 -1
  315. package/{src → packages/core/src}/scss/component/accordion/_defaults.scss +1 -1
  316. package/{src → packages/core/src}/scss/component/accordion/_index.scss +78 -60
  317. package/{src → packages/core/src}/scss/component/accordion/_variables.scss +127 -87
  318. package/{src → packages/core/src}/scss/component/alert/_defaults.scss +1 -1
  319. package/{src → packages/core/src}/scss/component/alert/_index.scss +51 -50
  320. package/packages/core/src/scss/component/alert/_variables.scss +200 -0
  321. package/{src → packages/core/src}/scss/component/card/_defaults.scss +1 -1
  322. package/{src → packages/core/src}/scss/component/card/_index.scss +53 -19
  323. package/packages/core/src/scss/component/card/_variables.scss +216 -0
  324. package/{src → packages/core/src}/scss/component/carousel/_defaults.scss +1 -1
  325. package/{src → packages/core/src}/scss/component/carousel/_index.scss +32 -28
  326. package/{src → packages/core/src}/scss/component/carousel/_variables.scss +22 -22
  327. package/{src → packages/core/src}/scss/component/input-group/_defaults.scss +1 -1
  328. package/{src → packages/core/src}/scss/component/input-group/_index.scss +2 -2
  329. package/{src → packages/core/src}/scss/component/input-group/_variables.scss +13 -13
  330. package/{src/scss/utilities/order → packages/core/src/scss/component/list}/_defaults.scss +7 -14
  331. package/packages/core/src/scss/component/list/_index.scss +52 -0
  332. package/packages/core/src/scss/component/list/_variables.scss +236 -0
  333. package/{src → packages/core/src}/scss/component/menu/_defaults.scss +11 -20
  334. package/packages/core/src/scss/component/menu/_index.scss +308 -0
  335. package/packages/core/src/scss/component/menu/_variables.scss +642 -0
  336. package/packages/core/src/scss/component/navigation/_defaults.scss +23 -0
  337. package/packages/core/src/scss/component/navigation/_index.scss +190 -0
  338. package/packages/core/src/scss/component/navigation/_variables.scss +290 -0
  339. package/packages/core/src/scss/functions/_container.scss +38 -0
  340. package/packages/core/src/scss/functions/_important.scss +36 -0
  341. package/{src → packages/core/src}/scss/functions/_screen.scss +9 -1
  342. package/{src → packages/core/src}/scss/functions/_theme.scss +2 -2
  343. package/packages/core/src/scss/functions/_utility.scss +28 -0
  344. package/{src → packages/core/src}/scss/layout/_index.scss +1 -1
  345. package/{src → packages/core/src}/scss/layout/columns/_defaults.scss +9 -4
  346. package/packages/core/src/scss/layout/columns/_index.scss +137 -0
  347. package/{src → packages/core/src}/scss/layout/columns/_variables.scss +13 -9
  348. package/packages/core/src/scss/layout/container/_defaults.scss +35 -0
  349. package/packages/core/src/scss/layout/container/_index.scss +628 -0
  350. package/packages/core/src/scss/layout/container/_variables.scss +114 -0
  351. package/packages/core/src/scss/layout/flex-columns/_defaults.scss +28 -0
  352. package/packages/core/src/scss/layout/flex-columns/_index.scss +184 -0
  353. package/{src → packages/core/src}/scss/layout/flex-columns/_variables.scss +9 -5
  354. package/{src → packages/core/src}/scss/mixins/_animation.scss +1 -1
  355. package/packages/core/src/scss/mixins/_container.scss +80 -0
  356. package/{src → packages/core/src}/scss/mixins/_layer.scss +6 -2
  357. package/{src → packages/core/src}/scss/mixins/_screen.scss +25 -4
  358. package/packages/core/src/scss/mixins/_state.scss +18 -0
  359. package/packages/core/src/scss/mixins/_theme.scss +15 -0
  360. package/packages/core/src/scss/mixins/_utility.scss +185 -0
  361. package/packages/core/src/scss/mixins/_visually-hidden.scss +30 -0
  362. package/packages/core/src/scss/state/_index.scss +3 -0
  363. package/{src → packages/core/src}/scss/state/focus/_defaults.scss +1 -2
  364. package/packages/core/src/scss/state/focus/_index.scss +42 -0
  365. package/packages/core/src/scss/state/focus/_mixins.scss +13 -0
  366. package/packages/core/src/scss/state/focus/_variables.scss +50 -0
  367. package/{src → packages/core/src}/scss/theme/_index.scss +1 -1
  368. package/{src → packages/core/src}/scss/theme/color/_defaults.scss +1 -1
  369. package/{src → packages/core/src}/scss/theme/color/_index.scss +8 -8
  370. package/{src → packages/core/src}/scss/theme/color/_variables.scss +12 -8
  371. package/{src → packages/core/src}/scss/theme/typography/_defaults.scss +1 -1
  372. package/{src → packages/core/src}/scss/theme/typography/_index.scss +10 -1
  373. package/packages/core/src/scss/theme/typography/_variables.scss +248 -0
  374. package/{src → packages/core/src}/scss/utilities/_index.scss +7 -1
  375. package/packages/core/src/scss/utilities/_template/_defaults.scss +41 -0
  376. package/packages/core/src/scss/utilities/_template/_index.scss +171 -0
  377. package/{src/scss/utilities/alignment → packages/core/src/scss/utilities/_template}/_variables.scss +1 -1
  378. package/{src → packages/core/src}/scss/utilities/alignment/_defaults.scss +21 -7
  379. package/packages/core/src/scss/utilities/alignment/_index.scss +336 -0
  380. package/{src/scss/utilities/display → packages/core/src/scss/utilities/alignment}/_variables.scss +1 -1
  381. package/packages/core/src/scss/utilities/background/_defaults.scss +122 -0
  382. package/packages/core/src/scss/utilities/background/_index.scss +634 -0
  383. package/packages/core/src/scss/utilities/background/_variables.scss +6 -0
  384. package/packages/core/src/scss/utilities/border/_defaults.scss +73 -0
  385. package/packages/core/src/scss/utilities/border/_index.scss +558 -0
  386. package/{src/scss/utilities/list → packages/core/src/scss/utilities/border}/_variables.scss +1 -1
  387. package/packages/core/src/scss/utilities/color/_defaults.scss +49 -0
  388. package/packages/core/src/scss/utilities/color/_index.scss +469 -0
  389. package/{src/scss/utilities/flex → packages/core/src/scss/utilities/color}/_variables.scss +1 -1
  390. package/packages/core/src/scss/utilities/container/_defaults.scss +40 -0
  391. package/packages/core/src/scss/utilities/container/_index.scss +174 -0
  392. package/packages/core/src/scss/utilities/container/_variables.scss +6 -0
  393. package/packages/core/src/scss/utilities/display/_defaults.scss +47 -0
  394. package/packages/core/src/scss/utilities/display/_index.scss +184 -0
  395. package/{src/scss/utilities/inset → packages/core/src/scss/utilities/display}/_variables.scss +1 -1
  396. package/packages/core/src/scss/utilities/flex/_defaults.scss +99 -0
  397. package/packages/core/src/scss/utilities/flex/_index.scss +486 -0
  398. package/{src/scss/utilities/color → packages/core/src/scss/utilities/flex}/_variables.scss +1 -1
  399. package/packages/core/src/scss/utilities/gradient/_defaults.scss +70 -0
  400. package/packages/core/src/scss/utilities/gradient/_index.scss +696 -0
  401. package/packages/core/src/scss/utilities/gradient/_variables.scss +29 -0
  402. package/packages/core/src/scss/utilities/height/_defaults.scss +54 -0
  403. package/packages/core/src/scss/utilities/height/_index.scss +525 -0
  404. package/packages/core/src/scss/utilities/height/_variables.scss +6 -0
  405. package/packages/core/src/scss/utilities/inset/_defaults.scss +55 -0
  406. package/packages/core/src/scss/utilities/inset/_index.scss +258 -0
  407. package/packages/core/src/scss/utilities/inset/_variables.scss +6 -0
  408. package/{src → packages/core/src}/scss/utilities/justification/_defaults.scss +21 -7
  409. package/packages/core/src/scss/utilities/justification/_index.scss +333 -0
  410. package/packages/core/src/scss/utilities/justification/_variables.scss +6 -0
  411. package/packages/core/src/scss/utilities/list/_defaults.scss +53 -0
  412. package/packages/core/src/scss/utilities/list/_index.scss +253 -0
  413. package/packages/core/src/scss/utilities/list/_variables.scss +6 -0
  414. package/packages/core/src/scss/utilities/order/_defaults.scss +36 -0
  415. package/packages/core/src/scss/utilities/order/_index.scss +246 -0
  416. package/packages/core/src/scss/utilities/order/_variables.scss +6 -0
  417. package/packages/core/src/scss/utilities/position/_defaults.scss +41 -0
  418. package/packages/core/src/scss/utilities/position/_index.scss +178 -0
  419. package/{src/scss/utilities/height → packages/core/src/scss/utilities/position}/_variables.scss +1 -1
  420. package/packages/core/src/scss/utilities/ratio/_defaults.scss +42 -0
  421. package/packages/core/src/scss/utilities/ratio/_index.scss +188 -0
  422. package/{src → packages/core/src}/scss/utilities/ratio/_variables.scss +2 -2
  423. package/{src → packages/core/src}/scss/utilities/spacing/_defaults.scss +19 -4
  424. package/packages/core/src/scss/utilities/spacing/_index.scss +970 -0
  425. package/packages/core/src/scss/utilities/spacing/_variables.scss +6 -0
  426. package/packages/core/src/scss/utilities/typography/_defaults.scss +58 -0
  427. package/packages/core/src/scss/utilities/typography/_index.scss +1089 -0
  428. package/packages/core/src/scss/utilities/typography/_variables.scss +6 -0
  429. package/packages/core/src/scss/utilities/visibility/_defaults.scss +39 -0
  430. package/packages/core/src/scss/utilities/visibility/_index.scss +173 -0
  431. package/packages/core/src/scss/utilities/visibility/_variables.scss +6 -0
  432. package/packages/core/src/scss/utilities/visually-hidden/_defaults.scss +29 -0
  433. package/packages/core/src/scss/utilities/visually-hidden/_index.scss +189 -0
  434. package/packages/core/src/scss/utilities/visually-hidden/_variables.scss +6 -0
  435. package/packages/core/src/scss/utilities/width/_defaults.scss +54 -0
  436. package/packages/core/src/scss/utilities/width/_index.scss +525 -0
  437. package/packages/core/src/scss/utilities/width/_variables.scss +6 -0
  438. package/packages/core/src/scss/utilities/z-index/_defaults.scss +40 -0
  439. package/packages/core/src/scss/utilities/z-index/_index.scss +173 -0
  440. package/packages/core/src/scss/utilities/z-index/_variables.scss +6 -0
  441. package/packages/core/vite.config.js +28 -0
  442. package/packages/icons/dist/css/base/button.css +2 -0
  443. package/packages/icons/dist/css/base/button.css.map +1 -0
  444. package/packages/icons/dist/css/base/link.css +2 -0
  445. package/packages/icons/dist/css/base/link.css.map +1 -0
  446. package/packages/icons/dist/css/base.css +2 -0
  447. package/packages/icons/dist/css/base.css.map +1 -0
  448. package/packages/icons/dist/css/component/icon.css +2 -0
  449. package/packages/icons/dist/css/component/icon.css.map +1 -0
  450. package/packages/icons/dist/css/component.css +2 -0
  451. package/packages/icons/dist/css/component.css.map +1 -0
  452. package/packages/icons/dist/css/icon.css +2 -0
  453. package/packages/icons/dist/css/icon.css.map +1 -0
  454. package/packages/icons/package.json +48 -0
  455. package/packages/icons/scss/base/button.scss +3 -0
  456. package/packages/icons/scss/base/link.scss +3 -0
  457. package/packages/icons/scss/base.scss +3 -0
  458. package/packages/icons/scss/component/icon.scss +3 -0
  459. package/packages/icons/scss/component.scss +3 -0
  460. package/packages/icons/scss/icon.scss +3 -0
  461. package/packages/icons/src/scss/_index.scss +4 -0
  462. package/packages/icons/src/scss/base/_index.scss +4 -0
  463. package/packages/icons/src/scss/base/button/_defaults.scss +7 -0
  464. package/packages/icons/src/scss/base/button/_index.scss +58 -0
  465. package/packages/icons/src/scss/base/button/_variables.scss +7 -0
  466. package/packages/icons/src/scss/base/link/_defaults.scss +7 -0
  467. package/packages/icons/src/scss/base/link/_index.scss +58 -0
  468. package/packages/icons/src/scss/base/link/_variables.scss +7 -0
  469. package/packages/icons/src/scss/component/_index.scss +3 -0
  470. package/packages/icons/src/scss/component/icon/_defaults.scss +30 -0
  471. package/packages/icons/src/scss/component/icon/_index.scss +60 -0
  472. package/packages/icons/src/scss/component/icon/_mixins.scss +62 -0
  473. package/packages/icons/src/scss/component/icon/_variables.scss +24 -0
  474. package/postcss.config.cjs +2 -3
  475. package/scss/base/button.scss +1 -1
  476. package/scss/base/form.scss +1 -1
  477. package/scss/base/link.scss +1 -1
  478. package/scss/base/table.scss +1 -1
  479. package/scss/base.scss +1 -1
  480. package/scss/component/accordion.scss +1 -1
  481. package/scss/component/alert.scss +1 -1
  482. package/scss/component/card.scss +1 -1
  483. package/scss/component/carousel.scss +1 -1
  484. package/scss/component/input-group.scss +1 -1
  485. package/scss/component/list.scss +3 -0
  486. package/scss/component/menu.scss +1 -1
  487. package/scss/component/navigation.scss +1 -1
  488. package/scss/component.scss +1 -1
  489. package/scss/graupl.scss +1 -1
  490. package/scss/init.scss +1 -1
  491. package/scss/layout/columns.scss +1 -1
  492. package/scss/layout/container.scss +1 -1
  493. package/scss/layout/flex-columns.scss +1 -1
  494. package/scss/layout.scss +1 -1
  495. package/scss/normalize.scss +1 -1
  496. package/scss/state/focus.scss +1 -1
  497. package/scss/state.scss +1 -1
  498. package/scss/theme/color.scss +1 -1
  499. package/scss/theme/typography.scss +1 -1
  500. package/scss/theme.scss +1 -1
  501. package/scss/utilities/alignment.scss +1 -1
  502. package/scss/utilities/background.scss +3 -0
  503. package/scss/utilities/border.scss +3 -0
  504. package/scss/utilities/color.scss +1 -1
  505. package/scss/utilities/container.scss +3 -0
  506. package/scss/utilities/display.scss +1 -1
  507. package/scss/utilities/flex.scss +1 -1
  508. package/scss/utilities/gradient.scss +3 -0
  509. package/scss/utilities/height.scss +1 -1
  510. package/scss/utilities/inset.scss +1 -1
  511. package/scss/utilities/justification.scss +1 -1
  512. package/scss/utilities/list.scss +1 -1
  513. package/scss/utilities/order.scss +1 -1
  514. package/scss/utilities/position.scss +3 -0
  515. package/scss/utilities/ratio.scss +1 -1
  516. package/scss/utilities/spacing.scss +1 -1
  517. package/scss/utilities/typography.scss +1 -1
  518. package/scss/utilities/visibility.scss +1 -1
  519. package/scss/utilities/visually-hidden.scss +3 -0
  520. package/scss/utilities/width.scss +1 -1
  521. package/scss/utilities/z-index.scss +3 -0
  522. package/scss/utilities.scss +1 -1
  523. package/stylelint.config.js +1 -0
  524. package/vite.config.js +6 -35
  525. package/dist/css/utilities/postion.css +0 -2
  526. package/dist/css/utilities/postion.css.map +0 -1
  527. package/dist/js/component/accordion.cjs.js +0 -3
  528. package/dist/js/component/accordion.esm.js +0 -1289
  529. package/dist/js/component/accordion.iife.js +0 -3
  530. package/dist/js/component/alert.cjs.js +0 -3
  531. package/dist/js/component/alert.esm.js +0 -529
  532. package/dist/js/component/alert.iife.js +0 -3
  533. package/dist/js/component/carousel.cjs.js +0 -3
  534. package/dist/js/component/carousel.esm.js +0 -1110
  535. package/dist/js/component/carousel.iife.js +0 -3
  536. package/src/scss/_variables.scss +0 -53
  537. package/src/scss/base/button/_index.scss +0 -107
  538. package/src/scss/base/button/_mixins.scss +0 -166
  539. package/src/scss/base/button/_variables.scss +0 -176
  540. package/src/scss/base/form/_index.scss +0 -93
  541. package/src/scss/base/form/_variables.scss +0 -156
  542. package/src/scss/base/link/_defaults.scss +0 -50
  543. package/src/scss/base/link/_index.scss +0 -134
  544. package/src/scss/base/link/_variables.scss +0 -262
  545. package/src/scss/base/table/_defaults.scss +0 -53
  546. package/src/scss/base/table/_index.scss +0 -121
  547. package/src/scss/base/table/_variables.scss +0 -135
  548. package/src/scss/component/alert/_variables.scss +0 -173
  549. package/src/scss/component/card/_variables.scss +0 -186
  550. package/src/scss/component/menu/_index.scss +0 -305
  551. package/src/scss/component/menu/_variables.scss +0 -500
  552. package/src/scss/component/navigation/_defaults.scss +0 -29
  553. package/src/scss/component/navigation/_index.scss +0 -189
  554. package/src/scss/component/navigation/_variables.scss +0 -237
  555. package/src/scss/functions/_important.scss +0 -13
  556. package/src/scss/layout/columns/_index.scss +0 -58
  557. package/src/scss/layout/container/_defaults.scss +0 -17
  558. package/src/scss/layout/container/_index.scss +0 -41
  559. package/src/scss/layout/container/_variables.scss +0 -50
  560. package/src/scss/layout/flex-columns/_defaults.scss +0 -18
  561. package/src/scss/layout/flex-columns/_index.scss +0 -80
  562. package/src/scss/mixins/_utility.scss +0 -30
  563. package/src/scss/mixins/_visually-hidden.scss +0 -20
  564. package/src/scss/state/_index.scss +0 -3
  565. package/src/scss/state/focus/_index.scss +0 -13
  566. package/src/scss/state/focus/_mixins.scss +0 -15
  567. package/src/scss/state/focus/_variables.scss +0 -44
  568. package/src/scss/theme/typography/_variables.scss +0 -231
  569. package/src/scss/utilities/alignment/_index.scss +0 -75
  570. package/src/scss/utilities/color/_defaults.scss +0 -35
  571. package/src/scss/utilities/color/_index.scss +0 -91
  572. package/src/scss/utilities/display/_defaults.scss +0 -32
  573. package/src/scss/utilities/display/_index.scss +0 -61
  574. package/src/scss/utilities/flex/_defaults.scss +0 -63
  575. package/src/scss/utilities/flex/_index.scss +0 -71
  576. package/src/scss/utilities/height/_defaults.scss +0 -41
  577. package/src/scss/utilities/height/_index.scss +0 -98
  578. package/src/scss/utilities/inset/_defaults.scss +0 -41
  579. package/src/scss/utilities/inset/_index.scss +0 -37
  580. package/src/scss/utilities/justification/_index.scss +0 -75
  581. package/src/scss/utilities/justification/_variables.scss +0 -6
  582. package/src/scss/utilities/list/_defaults.scss +0 -39
  583. package/src/scss/utilities/list/_index.scss +0 -56
  584. package/src/scss/utilities/order/_index.scss +0 -63
  585. package/src/scss/utilities/order/_variables.scss +0 -6
  586. package/src/scss/utilities/position/_defaults.scss +0 -26
  587. package/src/scss/utilities/position/_index.scss +0 -37
  588. package/src/scss/utilities/position/_variables.scss +0 -6
  589. package/src/scss/utilities/ratio/_defaults.scss +0 -28
  590. package/src/scss/utilities/ratio/_index.scss +0 -52
  591. package/src/scss/utilities/spacing/_index.scss +0 -169
  592. package/src/scss/utilities/spacing/_variables.scss +0 -6
  593. package/src/scss/utilities/typography/_defaults.scss +0 -30
  594. package/src/scss/utilities/typography/_index.scss +0 -224
  595. package/src/scss/utilities/typography/_variables.scss +0 -6
  596. package/src/scss/utilities/visibility/_defaults.scss +0 -25
  597. package/src/scss/utilities/visibility/_index.scss +0 -36
  598. package/src/scss/utilities/visibility/_variables.scss +0 -6
  599. package/src/scss/utilities/width/_defaults.scss +0 -41
  600. package/src/scss/utilities/width/_index.scss +0 -98
  601. package/src/scss/utilities/width/_variables.scss +0 -6
  602. /package/{src → packages/core/src}/js/accordion/Accordion.js +0 -0
  603. /package/{src → packages/core/src}/js/accordion/AccordionItem.js +0 -0
  604. /package/{src → packages/core/src}/js/accordion/index.js +0 -0
  605. /package/{src → packages/core/src}/js/alert/Alert.js +0 -0
  606. /package/{src → packages/core/src}/js/alert/index.js +0 -0
  607. /package/{src → packages/core/src}/js/carousel/Carousel.js +0 -0
  608. /package/{src → packages/core/src}/js/carousel/index.js +0 -0
  609. /package/{src → packages/core/src}/js/domHelpers.js +0 -0
  610. /package/{src → packages/core/src}/js/eventHandlers.js +0 -0
  611. /package/{src → packages/core/src}/js/navigation/index.js +0 -0
  612. /package/{src → packages/core/src}/js/storage.js +0 -0
  613. /package/{src → packages/core/src}/js/validate.js +0 -0
package/index.html CHANGED
@@ -6,38 +6,131 @@
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
7
  <title>Document</title>
8
8
  <link rel="stylesheet" href="dist/css/graupl.css">
9
+ <style>
10
+ @media screen and (width > 72ch) {
11
+ .sidebar-left {
12
+ z-index: 1;
13
+ }
14
+
15
+ .inner-content {
16
+ .breakout,
17
+ .full-width,
18
+ .feature {
19
+ z-index: 0;
20
+ }
21
+ }
22
+
23
+ .sidebar-right {
24
+ z-index: 1;
25
+ }
26
+ }
27
+ </style>
9
28
  </head>
10
29
 
11
30
  <body>
12
31
  <main class="container pb-10">
13
- <h1>Hello Graupl!</h1>
14
- <p>Graupl is a modular CSS framework with the goal of making it easy to theme a site.</p>
15
- <p>This source code can be found in <a href="https://github.com/Graupl/graupl">GitHub</a>.</p>
16
- <p>Graupl supports light and dark modes out-of-the-box.</p>
17
- <button id="dark-mode-toggle" class="button mt-5 w-half">Toggle dark mode</button>
18
- <div class="full-width container min-h-full-screen align-content-center">
32
+ <div class="flex-columns">
33
+ <div class="col-8">
34
+ <h1 class="gradient from-tertiary-600 to-primary-600 w-max-content bg-clip-text text-transparent">Hello Graupl!</h1>
35
+ <p>Graupl is a modular CSS framework with the goal of making it easy to theme a site.</p>
36
+ <p>This source code can be found in <a href="https://github.com/Graupl/graupl">GitHub</a>.</p>
37
+ <p>Graupl supports light and dark modes out-of-the-box.</p>
38
+ <button id="dark-mode-toggle" class="button mt-5 w-half">Toggle dark mode</button>
39
+ </div>
40
+ <div class="col-4 align-items-center">
41
+ <img src="./logo.svg" alt="Graupl logo" class="logo">
42
+ </div>
43
+ </div>
44
+ <div class="container py-10 my-10 align-content-center">
45
+ <h2>Typography</h2>
46
+ <p>Graupl provides default typography styles and classes to go with them.</p>
47
+ <div class="text-h1">Heading 1 (<span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.text-h1</span>)</div>
48
+ <div class="text-h2">Heading 2 (<span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.text-h2</span>)</div>
49
+ <div class="text-h3">Heading 3 (<span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.text-h3</span>)</div>
50
+ <div class="text-h4">Heading 4 (<span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.text-h4</span>)</div>
51
+ <div class="text-h5">Heading 5 (<span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.text-h5</span>)</div>
52
+ <div class="text-h6">Heading 6 (<span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.text-h6</span>)</div>
53
+ <p>This is a paragraph. It provides the default styles for all text on the site and can be applied to non-paragraph elements using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.text-paragraph</span> class. There are also set defaults for <strong>bold</strong> and <em>emphasized</em> text.</p>
54
+ <h3>Links</h3>
55
+ <p>There are also default links styles that handle all states they could be in.</p>
56
+ <ul class="list-style-none m-0 p-0 display-flex flex-col g-3">
57
+ <li><a href="https://graupl.dev/page-that-cant-be-visited">Link</a></li>
58
+ <li><a href="https://graupl.dev" class="visited">Visited link</a></li>
59
+ <li><a href="https://graupl.dev" class="focus">Focused link</a></li>
60
+ <li><a href="https://graupl.dev" class="hover">Hovered link</a></li>
61
+ <li><a href="https://graupl.dev" class="active">Active link</a></li>
62
+ <li><a href="https://graupl.dev" class="disabled">Disabled link</a></li>
63
+ </ul>
64
+ </div>
65
+ <div class="container py-10 my-10 align-content-center">
19
66
  <h2>Buttons</h2>
20
67
  <p>There are 4 colours of buttons supported by default, with plans to have a "graupl-theme" plugin that adds more.
21
68
  </p>
22
- <div class="columns count-4">
23
- <button class="button">Default Button</button>
24
- <button class="button primary">Primary Button</button>
25
- <button class="button secondary">Secondary Button</button>
26
- <button class="button tertiary">Tertiary Button</button>
27
- <button class="button link">Link Button</button>
28
- <a class="button" href="#">Anchor Button</a>
29
- <button class="button" disabled>Default Button</button>
30
- <button class="button primary" disabled>Primary Button</button>
31
- <button class="button secondary" disabled>Secondary Button</button>
32
- <button class="button tertiary" disabled>Tertiary Button</button>
33
- <button class="button link" disabled>Link Button</button>
34
- <a class="button" href="#" disabled>Anchor Button</a>
69
+ <h3>Default buttons</h3>
70
+ <p>The default button can be applied by adding the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.button</span> class to any element.</p>
71
+ <div class="columns">
72
+ <button class="button">Default button</button>
73
+ <button class="button visited">Visited button</button>
74
+ <button class="button focus">Focused Button</button>
75
+ <button class="button hover">Hovered Button</button>
76
+ <button class="button active">Active Button</button>
77
+ <button class="button disabled">Disabled Button</button>
78
+ </div>
79
+ <h3>Primary buttons</h3>
80
+ <p>The primary button can be applied by adding the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.button</span> and <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.primary</span> classes to any element.</p>
81
+ <div class="columns">
82
+ <button class="button primary">Default button</button>
83
+ <button class="button primary visited">Visited button</button>
84
+ <button class="button primary focus">Focused Button</button>
85
+ <button class="button primary hover">Hovered Button</button>
86
+ <button class="button primary active">Active Button</button>
87
+ <button class="button primary disabled">Disabled Button</button>
88
+ </div>
89
+ <h3>Secondary buttons</h3>
90
+ <p>The secondary button can be applied by adding the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.button</span> and <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.secondary</span> classes to any element.</p>
91
+ <div class="columns">
92
+ <button class="button secondary">Default button</button>
93
+ <button class="button secondary visited">Visited button</button>
94
+ <button class="button secondary focus">Focused Button</button>
95
+ <button class="button secondary hover">Hovered Button</button>
96
+ <button class="button secondary active">Active Button</button>
97
+ <button class="button secondary disabled">Disabled Button</button>
98
+ </div>
99
+ <h3>Tertiary buttons</h3>
100
+ <p>The tertiary button can be applied by adding the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.button</span> and <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.tertiary</span> classes to any element.</p>
101
+ <div class="columns">
102
+ <button class="button tertiary">Default button</button>
103
+ <button class="button tertiary visited">Visited button</button>
104
+ <button class="button tertiary focus">Focused Button</button>
105
+ <button class="button tertiary hover">Hovered Button</button>
106
+ <button class="button tertiary active">Active Button</button>
107
+ <button class="button tertiary disabled">Disabled Button</button>
108
+ </div>
109
+ <h3>Link buttons</h3>
110
+ <p>The link button can be applied by adding the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.button</span> and <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.link</span> classes to any element. Buttons set to use the link variant will have their defaults overwritten by link defaults.</p>
111
+ <div class="columns">
112
+ <button class="button link">Default button</button>
113
+ <button class="button link visited">Visited button</button>
114
+ <button class="button link focus">Focused Button</button>
115
+ <button class="button link hover">Hovered Button</button>
116
+ <button class="button link active">Active Button</button>
117
+ <button class="button link disabled">Disabled Button</button>
118
+ </div>
119
+ <h3>Anchor buttons</h3>
120
+ <p>The anchor button isn't a class, but demonstrates the interactions between buttons and links. Any <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">&lt;a&gt;</span> tag with the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.button</span> class will have its defaults overwritten with button defaults.</p>
121
+ <div class="columns">
122
+ <a href="https://graupl.dev/page-that-cant-be-visited" class="button">Default button</a>
123
+ <a href="https://graupl.dev" class="button visited">Visited button</a>
124
+ <a href="https://graupl.dev" class="button focus">Focused Button</a>
125
+ <a href="https://graupl.dev" class="button hover">Hovered Button</a>
126
+ <a href="https://graupl.dev" class="button active">Active Button</a>
127
+ <a href="https://graupl.dev" class="button disabled">Disabled Button</a>
35
128
  </div>
36
129
  </div>
37
- <div class="full-width container min-h-full-screen align-content-center">
130
+ <div class="container py-10 my-10 align-content-center">
38
131
  <h2>Form elements</h2>
39
132
  <p>Graupl provides default styling for all form elements.</p>
40
- <form class="full-width rg-4">
133
+ <form class="container rg-4">
41
134
  <div class="input-group">
42
135
  <label for="input">Input</label>
43
136
  <input type="text" placeholder="Input" id="input">
@@ -83,7 +176,7 @@
83
176
  </optgroup>
84
177
  </select>
85
178
  </div>
86
- <div class="input-group"><label for"multi-select">Multi-select</label>
179
+ <div class="input-group"><label for="multi-select">Multi-select</label>
87
180
  <select id="multi-select" multiple>
88
181
  <option value="1">Option 1</option>
89
182
  <option value="2">Option 2</option>
@@ -131,7 +224,7 @@
131
224
  </div>
132
225
  </form>
133
226
  </div>
134
- <div class="full-width container min-h-full-screen align-content-center">
227
+ <div class="container py-10 my-10 align-content-center">
135
228
  <h2>Navigation</h2>
136
229
  <div class="py-7">
137
230
  <nav class="navigation" data-graupl-menu-type="DisclosureMenu"
@@ -155,7 +248,7 @@
155
248
  </nav>
156
249
  </div>
157
250
  </div>
158
- <div class="full-width container min-h-full-screen align-content-center">
251
+ <div class="container py-10 my-10 align-content-center">
159
252
  <h2>Tables</h2>
160
253
  <p>Graupl provides some default styling for tables as well as some other useful features to customize them.</p>
161
254
  <table class="bordered striped-rows hoverable">
@@ -386,9 +479,9 @@
386
479
  </table>
387
480
  </div>
388
481
  </div>
389
- <div class="full-width container min-h-full-screen align-content-center">
482
+ <div class="container py-10 my-10 align-content-center">
390
483
  <h2>Columns</h2>
391
- <div class="columns count-6 py-5">
484
+ <div class="columns py-5">
392
485
  <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
393
486
  <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
394
487
  <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
@@ -403,20 +496,20 @@
403
496
  <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
404
497
  </div>
405
498
  </div>
406
- <div class="full-width container min-h-full-screen align-content-center">
499
+ <div class="container py-10 my-10 align-content-center">
407
500
  <h2>Flex columns</h2>
408
501
  <div class="flex-columns py-5">
409
- <div class="col-6 col-md-8 col-xl-9 py-7 bg-primary-700 text-primary-100 px-5">
502
+ <div class="col-6 md:col-8 xl:col-9 py-7 bg-primary-700 text-primary-100 px-5">
410
503
  <div class="flex-columns">
411
504
  <div class="col-6 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
412
505
  <div class="col-6 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
413
506
  </div>
414
507
  </div>
415
- <div class="col-6 col-md-4 col-xl-3 py-7 bg-primary-700 text-primary-100 px-5"></div>
508
+ <div class="col-6 md:col-4 xl:col-3 py-7 bg-primary-700 text-primary-100 px-5"></div>
416
509
  <div class="col-12 py-7 bg-primary-700 text-primary-100 px-5">
417
510
  <div class="flex-columns">
418
- <div class="col-6 col-md-9 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
419
- <div class="col-6 col-md-3 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
511
+ <div class="col-6 md:col-9 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
512
+ <div class="col-6 md:col-3 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
420
513
  </div>
421
514
  </div>
422
515
  <div class="col-8 py-7 bg-primary-700 text-primary-100 px-5">
@@ -428,7 +521,7 @@
428
521
  <div class="col-4 py-7 bg-primary-700 text-primary-100 px-5"></div>
429
522
  </div>
430
523
  </div>
431
- <div class="full-width container min-h-full-screen align-content-center">
524
+ <div class="container py-10 my-10 align-content-center">
432
525
  <h2>Cards</h2>
433
526
  <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.top</span> class
434
527
  will have the image placed on the top while cards using the <span
@@ -447,7 +540,7 @@
447
540
  <p>This is some text that describes the card.</p>
448
541
  </div>
449
542
  <div class="card-footer">
450
- <a class="button primary stretched" href="#">Card Action</a>
543
+ <a class="button stretched" href="#">Card Action</a>
451
544
  </div>
452
545
  </div>
453
546
  </div>
@@ -463,7 +556,7 @@
463
556
  <p>This is some text that describes the card.</p>
464
557
  </div>
465
558
  <div class="card-footer">
466
- <a class="button primary stretched" href="#">Card Action</a>
559
+ <a class="button stretched" href="#">Card Action</a>
467
560
  </div>
468
561
  </div>
469
562
  </div>
@@ -479,7 +572,7 @@
479
572
  <p>This is some text that describes the card.</p>
480
573
  </div>
481
574
  <div class="card-footer">
482
- <a class="button primary stretched" href="#">Card Action</a>
575
+ <a class="button stretched" href="#">Card Action</a>
483
576
  </div>
484
577
  </div>
485
578
  </div>
@@ -495,7 +588,7 @@
495
588
  <p>This is some text that describes the card.</p>
496
589
  </div>
497
590
  <div class="card-footer">
498
- <a class="button primary stretched" href="#">Card Action</a>
591
+ <a class="button stretched" href="#">Card Action</a>
499
592
  </div>
500
593
  </div>
501
594
  </div>
@@ -511,7 +604,7 @@
511
604
  <p>This is some text that describes the card.</p>
512
605
  </div>
513
606
  <div class="card-footer">
514
- <a class="button primary stretched" href="#">Card Action</a>
607
+ <a class="button stretched" href="#">Card Action</a>
515
608
  </div>
516
609
  </div>
517
610
  </div>
@@ -527,13 +620,13 @@
527
620
  <p>This is some text that describes the card.</p>
528
621
  </div>
529
622
  <div class="card-footer">
530
- <a class="button primary stretched" href="#">Card Action</a>
623
+ <a class="button stretched" href="#">Card Action</a>
531
624
  </div>
532
625
  </div>
533
626
  </div>
534
627
  </div>
535
628
  </div>
536
- <div class="full-width container min-h-full-screen align-content-center">
629
+ <div class="container py-10 my-10 align-content-center">
537
630
  <h2>Horizontal Cards</h2>
538
631
  <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.right</span> class
539
632
  will have the image placed on the right while cards using the <span
@@ -552,7 +645,7 @@
552
645
  <p>This is some text that describes the card.</p>
553
646
  </div>
554
647
  <div class="card-footer">
555
- <a class="button primary stretched" href="#">Card Action</a>
648
+ <a class="button stretched" href="#">Card Action</a>
556
649
  </div>
557
650
  </div>
558
651
  </div>
@@ -568,7 +661,7 @@
568
661
  <p>This is some text that describes the card.</p>
569
662
  </div>
570
663
  <div class="card-footer">
571
- <a class="button primary stretched" href="#">Card Action</a>
664
+ <a class="button stretched" href="#">Card Action</a>
572
665
  </div>
573
666
  </div>
574
667
  </div>
@@ -584,7 +677,7 @@
584
677
  <p>This is some text that describes the card.</p>
585
678
  </div>
586
679
  <div class="card-footer">
587
- <a class="button primary stretched" href="#">Card Action</a>
680
+ <a class="button stretched" href="#">Card Action</a>
588
681
  </div>
589
682
  </div>
590
683
  </div>
@@ -600,7 +693,7 @@
600
693
  <p>This is some text that describes the card.</p>
601
694
  </div>
602
695
  <div class="card-footer">
603
- <a class="button primary stretched" href="#">Card Action</a>
696
+ <a class="button stretched" href="#">Card Action</a>
604
697
  </div>
605
698
  </div>
606
699
  </div>
@@ -616,7 +709,7 @@
616
709
  <p>This is some text that describes the card.</p>
617
710
  </div>
618
711
  <div class="card-footer">
619
- <a class="button primary stretched" href="#">Card Action</a>
712
+ <a class="button stretched" href="#">Card Action</a>
620
713
  </div>
621
714
  </div>
622
715
  </div>
@@ -632,13 +725,13 @@
632
725
  <p>This is some text that describes the card.</p>
633
726
  </div>
634
727
  <div class="card-footer">
635
- <a class="button primary stretched" href="#">Card Action</a>
728
+ <a class="button stretched" href="#">Card Action</a>
636
729
  </div>
637
730
  </div>
638
731
  </div>
639
732
  </div>
640
733
  </div>
641
- <div class="full-width container min-h-full-screen align-content-center">
734
+ <div class="container py-10 my-10 align-content-center">
642
735
  <h2>Inverse Cards</h2>
643
736
  <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.inverse</span>
644
737
  class will have the image placed on the right if it is a horizontal card and on the bottom if it is a vertical
@@ -659,7 +752,7 @@
659
752
  <p>This is some text that describes the card.</p>
660
753
  </div>
661
754
  <div class="card-footer">
662
- <a class="button primary stretched" href="#">Card Action</a>
755
+ <a class="button stretched" href="#">Card Action</a>
663
756
  </div>
664
757
  </div>
665
758
  </div>
@@ -675,13 +768,128 @@
675
768
  <p>This is some text that describes the card.</p>
676
769
  </div>
677
770
  <div class="card-footer">
678
- <a class="button primary stretched" href="#">Card Action</a>
771
+ <a class="button stretched" href="#">Card Action</a>
772
+ </div>
773
+ </div>
774
+ </div>
775
+ </div>
776
+ </div>
777
+ <div class="container py-10 my-10 align-content-center">
778
+ <h2>Contained Cards</h2>
779
+ <p>Cards will adjust their layout based on the available space within their parent container.</p>
780
+ <p>If you use horizontal cards in a grid, where each individual grid space is it's own container, the cards will go from horizontal to vertical depending on the layout.</p>
781
+ <div class="flex-columns">
782
+ <div class="col-6 lg:col-4 container-type-inline display-flex">
783
+ <div class="card horizontal flex-grow">
784
+ <div class="card-image">
785
+ <img src="https://picsum.photos/1000/400?random=1" alt="Card image">
786
+ </div>
787
+ <div class="card-content">
788
+ <div class="card-header">
789
+ <h3 class="card-title">Title</h3>
790
+ </div>
791
+ <div class="card-body">
792
+ <p>This is some text that describes the card.</p>
793
+ </div>
794
+ <div class="card-footer">
795
+ <a class="button stretched" href="#">Card Action</a>
796
+ </div>
797
+ </div>
798
+ </div>
799
+ </div>
800
+ <div class="col-6 lg:col-4 container-type-inline display-flex">
801
+ <div class="card horizontal flex-grow right">
802
+ <div class="card-image">
803
+ <img src="https://picsum.photos/1000/400?random=2" alt="Card image">
804
+ </div>
805
+ <div class="card-content">
806
+ <div class="card-header">
807
+ <h3 class="card-title">Title</h3>
808
+ </div>
809
+ <div class="card-body">
810
+ <p>This is some text that describes the card.</p>
811
+ </div>
812
+ <div class="card-footer">
813
+ <a class="button stretched" href="#">Card Action</a>
814
+ </div>
815
+ </div>
816
+ </div>
817
+ </div>
818
+ <div class="col-6 lg:col-4 container-type-inline display-flex">
819
+ <div class="card horizontal flex-grow">
820
+ <div class="card-image">
821
+ <img src="https://picsum.photos/1000/400?random=3" alt="Card image">
822
+ </div>
823
+ <div class="card-content">
824
+ <div class="card-header">
825
+ <h3 class="card-title">Title</h3>
826
+ </div>
827
+ <div class="card-body">
828
+ <p>This is some text that describes the card.</p>
829
+ </div>
830
+ <div class="card-footer">
831
+ <a class="button stretched" href="#">Card Action</a>
832
+ </div>
833
+ </div>
834
+ </div>
835
+ </div>
836
+ <div class="col-6 lg:col-12 container-type-inline display-flex">
837
+ <div class="card horizontal flex-grow right">
838
+ <div class="card-image">
839
+ <img src="https://picsum.photos/1000/400?random=4" alt="Card image">
840
+ </div>
841
+ <div class="card-content">
842
+ <div class="card-header">
843
+ <h3 class="card-title">Title</h3>
844
+ </div>
845
+ <div class="card-body">
846
+ <p>This is some text that describes the card.</p>
847
+ </div>
848
+ <div class="card-footer">
849
+ <a class="button stretched" href="#">Card Action</a>
850
+ </div>
851
+ </div>
852
+ </div>
853
+ </div>
854
+ <div class="col-6 xl:col-9 container-type-inline display-flex">
855
+ <div class="card horizontal flex-grow">
856
+ <div class="card-image">
857
+ <img src="https://picsum.photos/1000/400?random=5" alt="Card image">
858
+ </div>
859
+ <div class="card-content">
860
+ <div class="card-header">
861
+ <h3 class="card-title">Title</h3>
862
+ </div>
863
+ <div class="card-body">
864
+ <p>This is some text that describes the card.</p>
865
+ </div>
866
+ <div class="card-footer">
867
+ <a class="button stretched" href="#">Card Action</a>
868
+ </div>
869
+ </div>
870
+ </div>
871
+ </div>
872
+ <div class="col-6 xl:col-3 container-type-inline display-flex">
873
+ <div class="card horizontal flex-grow right">
874
+ <div class="card-image">
875
+ <img src="https://picsum.photos/1000/400?random=6" alt="Card image">
876
+ </div>
877
+ <div class="card-content">
878
+ <div class="card-header">
879
+ <h3 class="card-title">Title</h3>
880
+ </div>
881
+ <div class="card-body">
882
+ <p>This is some text that describes the card.</p>
883
+ </div>
884
+ <div class="card-footer">
885
+ <a class="button stretched" href="#">Card Action</a>
679
886
  </div>
680
887
  </div>
681
888
  </div>
889
+ </div>
682
890
  </div>
683
891
  </div>
684
- <div class="full-width container min-h-full-screen align-content-center">
892
+ <div class="container py-10 my-10 align-content-center">
685
893
  <h2>Alerts</h2>
686
894
  <div class="display-grid g-5">
687
895
  <div class="alert">
@@ -734,7 +942,7 @@
734
942
  </div>
735
943
  </div>
736
944
  </div>
737
- <div class="py-10 full-width container">
945
+ <div class="py-10 container">
738
946
  <h2>Accordions</h2>
739
947
  <div class="accordion">
740
948
  <div class="accordion-item show">
@@ -788,7 +996,8 @@
788
996
  </div>
789
997
  </div>
790
998
  </div>
791
- <div class="full-width container min-h-full-screen align-content-center">
999
+ </div>
1000
+ <div class="container py-10 my-10 align-content-center">
792
1001
  <h2>Carousels</h2>
793
1002
  <section class="carousel">
794
1003
  <div class="carousel-control-container">
@@ -822,12 +1031,146 @@
822
1031
  </div>
823
1032
  </section>
824
1033
  </div>
1034
+ <div class="container py-10 my-10 align-content-center">
1035
+ <h2>Lists</h2>
1036
+ <p>Lists are inspired by Bootstrap's list groups.</p>
1037
+ <h3>Unordered list</h3>
1038
+ <ul class="list">
1039
+ <li class="list-item">
1040
+ <a href="#">List item 1</a>
1041
+ </li>
1042
+ <li class="list-item">
1043
+ List item 2
1044
+ </li>
1045
+ <li class="list-item">
1046
+ <a href="#" class="stretched">List item 3</a>
1047
+ </li>
1048
+ </ul>
1049
+ <h3>Ordered list</h3>
1050
+ <p>You can add the list markers back in using utility classes (in this case <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.list-style-decimal</span> and <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.list-style-inside</span>).</p>
1051
+ <ol class="list list-style-decimal list-style-inside">
1052
+ <li class="list-item">
1053
+ <a href="#">List item 1</a>
1054
+ </li>
1055
+ <li class="list-item">
1056
+ List item 2
1057
+ </li>
1058
+ <li class="list-item">
1059
+ <a href="#" class="stretched">List item 3</a>
1060
+ </li>
1061
+ </ol>
1062
+ <h3>Inline lists</h3>
1063
+ <p>We can achieve an inline list by utilizing the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.columns</span> class.</p>
1064
+ <ul class="list columns">
1065
+ <li class="list-item">
1066
+ <a href="#">List item 1</a>
1067
+ </li>
1068
+ <li class="list-item">
1069
+ List item 2
1070
+ </li>
1071
+ <li class="list-item">
1072
+ <a href="#" class="stretched">List item 3</a>
1073
+ </li>
1074
+ <li class="list-item">
1075
+ <a href="#">List item 4</a>
1076
+ </li>
1077
+ <li class="list-item">
1078
+ List item 5
1079
+ </li>
1080
+ <li class="list-item">
1081
+ <a href="#" class="stretched">List item 6</a>
1082
+ </li>
1083
+ </ul>
1084
+ <p class="pt-5">We can also use the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.display-flex</span> utility class.</p>
1085
+ <ul class="list display-flex flex-wrap">
1086
+ <li class="list-item">
1087
+ <a href="#">List item 1</a>
1088
+ </li>
1089
+ <li class="list-item">
1090
+ List item 2
1091
+ </li>
1092
+ <li class="list-item">
1093
+ <a href="#" class="stretched">List item 3</a>
1094
+ </li>
1095
+ <li class="list-item">
1096
+ <a href="#">List item 4</a>
1097
+ </li>
1098
+ <li class="list-item">
1099
+ List item 5
1100
+ </li>
1101
+ <li class="list-item">
1102
+ <a href="#" class="stretched">List item 6</a>
1103
+ </li>
1104
+ </ul>
1105
+ </div>
1106
+ <div class="py-10 my-10 container sidebars">
1107
+ <div class="sidebar-left z-1">
1108
+ <div class="bg-primary-500 py-10">
1109
+ <h2>Sidebar content (left)</h2>
1110
+ <p>This is sidebar content.</p>
1111
+ </div>
1112
+ </div>
1113
+ <div class="inner-content container z-0">
1114
+ <div class="bg-secondary-500 py-10">
1115
+ <h2>Inner content 1</h2>
1116
+ <p>This is the inner content section where additional information can be placed.</p>
1117
+ </div>
1118
+ <div class="bg-tertiary-500 full-width contain">
1119
+ <div class="bg-tertiary-700 feature contain">
1120
+ <div class="bg-tertiary-800 breakout contain">
1121
+ <div class="bg-secondary-500 py-10">
1122
+ <h2>Inner content 2</h2>
1123
+ <p>This is the inner content section where additional information can be placed.</p>
1124
+ </div>
1125
+ </div>
1126
+ </div>
1127
+ </div>
1128
+ <div class="bg-secondary-500 py-10">
1129
+ <h2>Inner content 3</h2>
1130
+ <p>This is the inner content section where additional information can be placed.</p>
1131
+ </div>
1132
+ </div>
1133
+ <div class="sidebar-right z-1">
1134
+ <div class="bg-primary-500 py-10">
1135
+ <h2>Sidebar content (right)</h2>
1136
+ <p>This is sidebar content.</p>
1137
+ </div>
1138
+ </div>
1139
+ </div>
1140
+ <div class="py-10 my-10 container sidebars">
1141
+ <div class="sidebar-left bg-primary-700 z-1">
1142
+ <div class="bg-primary-500 py-10">
1143
+ <h2>Sidebar content (left)</h2>
1144
+ <p>This is sidebar content.</p>
1145
+ </div>
1146
+ </div>
1147
+ <div class="content-right bg-secondary-700 z-0">
1148
+ <div class="bg-secondary-500 py-10">
1149
+ <h2>Inner content 1</h2>
1150
+ <p>This is the inner content section where additional information can be placed.</p>
1151
+ </div>
1152
+ </div>
1153
+ </div>
1154
+ <div class="py-10 my-10 container sidebars">
1155
+ <div class="content-left bg-secondary-700 z-0">
1156
+ <div class="bg-secondary-500 py-10">
1157
+ <h2>Inner content 1</h2>
1158
+ <p>This is the inner content section where additional information can be placed.</p>
1159
+ </div>
1160
+ </div>
1161
+ <div class="sidebar-right bg-primary-700 z-1">
1162
+ <div class="bg-primary-500 py-10">
1163
+ <h2>Sidebar content (right)</h2>
1164
+ <p>This is sidebar content.</p>
1165
+ </div>
1166
+ </div>
1167
+ </div>
825
1168
  </main>
826
1169
  <script src="https://cdn.jsdelivr.net/npm/accessible-menu/dist/disclosure-menu.iife.js"></script>
827
- <script type="module" src="src/js/alert/index.js"></script>
828
- <script type="module" src="src/js/accordion/index.js"></script>
829
- <script type="module" src="src/js/carousel/index.js"></script>
830
- <script type="module" src="src/js/navigation/index.js"></script>
1170
+ <script type="module" src="packages/core/src/js/alert/index.js"></script>
1171
+ <script type="module" src="packages/core/src/js/accordion/index.js"></script>
1172
+ <script type="module" src="packages/core/src/js/carousel/index.js"></script>
1173
+ <script type="module" src="packages/core/src/js/navigation/index.js"></script>
831
1174
  <script>
832
1175
  const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
833
1176
  const setTheme = window.localStorage.getItem('theme') || preferredTheme;
@@ -846,6 +1189,26 @@
846
1189
  themeToggle.innerHTML = newTheme === 'dark' ? 'Toggle light mode' : 'Toggle dark mode';
847
1190
  });
848
1191
  </script>
1192
+ <script>
1193
+ document.addEventListener('DOMContentLoaded', () => {
1194
+ const viewSwapper = document.getElementById('view-swapper');
1195
+ const cardContainer = document.querySelector('.container-type-inline > .columns');
1196
+
1197
+ viewSwapper.addEventListener('click', () => {
1198
+ if (viewSwapper.dataset.view === 'list') {
1199
+ // Set the --graupl-columns-count CSS variable to 1 for list view.
1200
+ cardContainer.style.setProperty('--graupl-columns-count', '1');
1201
+ viewSwapper.dataset.view = 'grid';
1202
+ viewSwapper.textContent = 'Grid view';
1203
+ } else {
1204
+ // Set the --graupl-columns-count CSS variable to 3 for grid view.
1205
+ cardContainer.style.setProperty('--graupl-columns-count', '3');
1206
+ viewSwapper.dataset.view = 'list';
1207
+ viewSwapper.textContent = 'List view';
1208
+ }
1209
+ });
1210
+ });
1211
+ </script>
849
1212
  </body>
850
1213
 
851
1214
  </html>