brut 0.0.20 → 0.0.22

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 (728) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +24 -3
  3. data/.nvim.lua +1 -0
  4. data/Dockerfile.dx +12 -3
  5. data/Gemfile.lock +9 -7
  6. data/README.md +0 -7
  7. data/Rakefile +6 -4
  8. data/bin/dev +20 -0
  9. data/bin/docs +27 -0
  10. data/bin/setup +47 -1
  11. data/brut-css/.nvim.lua +1 -0
  12. data/brut-css/README.md +28 -0
  13. data/brut-css/bin/build +31 -0
  14. data/brut-css/bin/dev +1 -0
  15. data/brut-css/bin/docs +15 -0
  16. data/brut-css/bin/setup +5 -0
  17. data/brut-css/config/media-queries-all.css +15 -0
  18. data/brut-css/config/media-queries-minimal.css +5 -0
  19. data/brut-css/config/postcss.config.cjs +7 -0
  20. data/brut-css/config/pseudo-classes-all.css +9 -0
  21. data/brut-css/dx +1 -0
  22. data/brut-css/package-lock.json +3217 -0
  23. data/brut-css/package.json +36 -0
  24. data/brut-css/src/css/appearance.css +145 -0
  25. data/brut-css/src/css/border.css +522 -0
  26. data/brut-css/src/css/colors.css +3502 -0
  27. data/brut-css/src/css/dimensions.css +548 -0
  28. data/brut-css/src/css/flex.css +179 -0
  29. data/brut-css/src/css/index.css +13 -0
  30. data/brut-css/src/css/layout.css +120 -0
  31. data/brut-css/src/css/list.css +41 -0
  32. data/brut-css/src/css/positioning.css +354 -0
  33. data/brut-css/src/css/properties/colors.css +455 -0
  34. data/brut-css/src/css/properties/index.css +3 -0
  35. data/brut-css/src/css/properties/spacing.css +140 -0
  36. data/brut-css/src/css/properties/typography.css +224 -0
  37. data/brut-css/src/css/reset.css +107 -0
  38. data/brut-css/src/css/spacing.css +585 -0
  39. data/brut-css/src/css/typography.css +519 -0
  40. data/brut-css/src/css/utils.css +104 -0
  41. data/brut-css/src/docs/1_getting-started/1_overview.md +46 -0
  42. data/brut-css/src/docs/1_getting-started/2_installation.md +25 -0
  43. data/brut-css/src/docs/1_getting-started/3_core-concepts.md +75 -0
  44. data/brut-css/src/docs/1_getting-started/4_simple-example.md +132 -0
  45. data/brut-css/src/docs/1_getting-started/page.html.ejs +10 -0
  46. data/brut-css/src/docs/2_properties/page.html.ejs +71 -0
  47. data/brut-css/src/docs/3_classes/color-demo.html.ejs +31 -0
  48. data/brut-css/src/docs/3_classes/page.html.ejs +87 -0
  49. data/brut-css/src/docs/4_customization/1_design-system.md +36 -0
  50. data/brut-css/src/docs/4_customization/2_breakpoints.md +75 -0
  51. data/brut-css/src/docs/4_customization/3_pseudo-classes.md +74 -0
  52. data/brut-css/src/docs/4_customization/4_advanced-configuration.md +40 -0
  53. data/brut-css/src/docs/4_customization/page.html.ejs +10 -0
  54. data/brut-css/src/docs/docs.css +98 -0
  55. data/brut-css/src/docs/includes/body-and-header.html.ejs +30 -0
  56. data/brut-css/src/docs/includes/footer-and-rest.html.ejs +9 -0
  57. data/brut-css/src/docs/includes/head.html.ejs +5 -0
  58. data/brut-css/src/docs/includes/nav.html.ejs +10 -0
  59. data/brut-css/src/docs/index.html.ejs +32 -0
  60. data/brut-css/src/docs/prism-twilight.min.css +1 -0
  61. data/brut-css/src/js/Logger.js +71 -0
  62. data/brut-css/src/js/build.js +111 -0
  63. data/brut-css/src/js/cli/CLIArgError.js +7 -0
  64. data/brut-css/src/js/cli/Debug.js +27 -0
  65. data/brut-css/src/js/cli/DocsDir.js +16 -0
  66. data/brut-css/src/js/cli/DocsTemplateSourceDir.js +16 -0
  67. data/brut-css/src/js/cli/InputFile.js +31 -0
  68. data/brut-css/src/js/cli/MediaQueryConfigFile.js +10 -0
  69. data/brut-css/src/js/cli/OutputFile.js +22 -0
  70. data/brut-css/src/js/cli/ParsedArg.js +17 -0
  71. data/brut-css/src/js/cli/PathToBrutCSSRoot.js +19 -0
  72. data/brut-css/src/js/cli/PseudoClassConfigFile.js +11 -0
  73. data/brut-css/src/js/cli.js +108 -0
  74. data/brut-css/src/js/docGenerator.js +467 -0
  75. data/brut-css/src/js/mediaQueryConfigParser.js +98 -0
  76. data/brut-css/src/js/post-css-plugins/addMediaQueriesPlugin.js +49 -0
  77. data/brut-css/src/js/post-css-plugins/addPseudoClassesPlugin.js +42 -0
  78. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Category.js +9 -0
  79. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/DocState.js +185 -0
  80. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Documentable.js +8 -0
  81. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Group.js +7 -0
  82. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/ParsedComment.js +73 -0
  83. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Property.js +9 -0
  84. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/PropertyCategory.js +4 -0
  85. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/PropertyGroup.js +8 -0
  86. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Rule.js +12 -0
  87. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/RuleCategory.js +4 -0
  88. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/RuleGroup.js +8 -0
  89. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/SeeRef.js +5 -0
  90. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/SeeURL.js +9 -0
  91. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin.js +49 -0
  92. data/brut-css/src/js/post-css-plugins/generateRootCustomPropertiesPlugin.js +45 -0
  93. data/brut-css/src/js/pseudoClassConfigParser.js +145 -0
  94. data/brut-js/.projections.json +10 -0
  95. data/brut-js/README.md +118 -0
  96. data/brut-js/bin/build +10 -0
  97. data/brut-js/bin/ci +5 -0
  98. data/brut-js/bin/setup +5 -0
  99. data/brut-js/docs/README.md +8 -0
  100. data/brut-js/docs/jsdoc-plugins/customElementTag.js +8 -0
  101. data/brut-js/docs/jsdoc-theme/publish.js +692 -0
  102. data/brut-js/docs/jsdoc-theme/static/scripts/linenumber.js +25 -0
  103. data/brut-js/docs/jsdoc-theme/static/scripts/prettify/Apache-License-2.0.txt +202 -0
  104. data/brut-js/docs/jsdoc-theme/static/scripts/prettify/lang-css.js +2 -0
  105. data/brut-js/docs/jsdoc-theme/static/scripts/prettify/prettify.js +28 -0
  106. data/brut-js/docs/jsdoc-theme/static/styles/jsdoc-default.css +327 -0
  107. data/brut-js/docs/jsdoc-theme/static/styles/prettify-jsdoc.css +111 -0
  108. data/brut-js/docs/jsdoc-theme/static/styles/prettify-tomorrow.css +132 -0
  109. data/brut-js/docs/jsdoc-theme/tmpl/augments.tmpl +10 -0
  110. data/brut-js/docs/jsdoc-theme/tmpl/container.tmpl +199 -0
  111. data/brut-js/docs/jsdoc-theme/tmpl/details.tmpl +143 -0
  112. data/brut-js/docs/jsdoc-theme/tmpl/example.tmpl +2 -0
  113. data/brut-js/docs/jsdoc-theme/tmpl/examples.tmpl +13 -0
  114. data/brut-js/docs/jsdoc-theme/tmpl/exceptions.tmpl +32 -0
  115. data/brut-js/docs/jsdoc-theme/tmpl/layout.tmpl +38 -0
  116. data/brut-js/docs/jsdoc-theme/tmpl/mainpage.tmpl +14 -0
  117. data/brut-js/docs/jsdoc-theme/tmpl/members.tmpl +38 -0
  118. data/brut-js/docs/jsdoc-theme/tmpl/method.tmpl +131 -0
  119. data/brut-js/docs/jsdoc-theme/tmpl/modifies.tmpl +14 -0
  120. data/brut-js/docs/jsdoc-theme/tmpl/params.tmpl +131 -0
  121. data/brut-js/docs/jsdoc-theme/tmpl/properties.tmpl +108 -0
  122. data/brut-js/docs/jsdoc-theme/tmpl/returns.tmpl +19 -0
  123. data/brut-js/docs/jsdoc-theme/tmpl/source.tmpl +8 -0
  124. data/brut-js/docs/jsdoc-theme/tmpl/tutorial.tmpl +19 -0
  125. data/brut-js/docs/jsdoc-theme/tmpl/type.tmpl +7 -0
  126. data/brut-js/docs/jsdoc.config.json +23 -0
  127. data/brut-js/docs/package-lock.json +343 -0
  128. data/brut-js/docs/package.json +7 -0
  129. data/brut-js/package-lock.json +2171 -0
  130. data/brut-js/package.json +32 -0
  131. data/brut-js/specs/AjaxSubmit.spec.js +256 -0
  132. data/brut-js/specs/Autosubmit.spec.js +127 -0
  133. data/brut-js/specs/ConfirmSubmit.spec.js +193 -0
  134. data/brut-js/specs/ConstraintViolationMessage.spec.js +33 -0
  135. data/brut-js/specs/ConstraintViolationMessages.spec.js +29 -0
  136. data/brut-js/specs/CopyToClipboard.spec.js +35 -0
  137. data/brut-js/specs/Form.spec.js +181 -0
  138. data/brut-js/specs/I18nTranslation.spec.js +19 -0
  139. data/brut-js/specs/LocaleDetection.spec.js +22 -0
  140. data/brut-js/specs/Message.spec.js +15 -0
  141. data/brut-js/specs/SpecHelper.js +23 -0
  142. data/brut-js/specs/Tabs.spec.js +41 -0
  143. data/brut-js/specs/config/asset_metadata.json +7 -0
  144. data/brut-js/src/AjaxSubmit.js +384 -0
  145. data/brut-js/src/Autosubmit.js +63 -0
  146. data/brut-js/src/BaseCustomElement.js +261 -0
  147. data/brut-js/src/ConfirmSubmit.js +116 -0
  148. data/brut-js/src/ConfirmationDialog.js +143 -0
  149. data/brut-js/src/ConstraintViolationMessage.js +125 -0
  150. data/brut-js/src/ConstraintViolationMessages.js +98 -0
  151. data/brut-js/src/CopyToClipboard.js +96 -0
  152. data/brut-js/src/Form.js +151 -0
  153. data/brut-js/src/I18nTranslation.js +61 -0
  154. data/brut-js/src/LocaleDetection.js +117 -0
  155. data/brut-js/src/Logger.js +90 -0
  156. data/brut-js/src/Message.js +56 -0
  157. data/brut-js/src/RichString.js +113 -0
  158. data/brut-js/src/Tabs.js +168 -0
  159. data/brut-js/src/Tracing.js +247 -0
  160. data/brut-js/src/appForTestingOnly.js +15 -0
  161. data/brut-js/src/index.js +130 -0
  162. data/brut-js/src/testing/AssetMetadata.js +35 -0
  163. data/brut-js/src/testing/AssetMetadataLoader.js +25 -0
  164. data/brut-js/src/testing/CustomElementTest.js +235 -0
  165. data/brut-js/src/testing/DOMCreator.js +45 -0
  166. data/brut-js/src/testing/index.js +48 -0
  167. data/brutrb.com/.vitepress/config.mjs +106 -0
  168. data/brutrb.com/.vitepress/plugins/jsdocLinker.js +34 -0
  169. data/brutrb.com/.vitepress/plugins/rdocLinker.js +18 -0
  170. data/brutrb.com/.vitepress/theme/custom.css +7 -0
  171. data/brutrb.com/.vitepress/theme/index.js +18 -0
  172. data/brutrb.com/.vitepress/theme/style.css +149 -0
  173. data/brutrb.com/ai.md +68 -0
  174. data/brutrb.com/assets.md +138 -0
  175. data/brutrb.com/bin/build +5 -0
  176. data/brutrb.com/bin/deploy +7 -0
  177. data/brutrb.com/bin/dev +5 -0
  178. data/brutrb.com/bin/setup +5 -0
  179. data/brutrb.com/brut-js.md +117 -0
  180. data/brutrb.com/business-logic.md +55 -0
  181. data/brutrb.com/cli.md +278 -0
  182. data/brutrb.com/components.md +243 -0
  183. data/brutrb.com/configuration.md +257 -0
  184. data/brutrb.com/css.md +103 -0
  185. data/brutrb.com/custom-element-tests.md +149 -0
  186. data/brutrb.com/database-access.md +201 -0
  187. data/brutrb.com/database-schema.md +312 -0
  188. data/brutrb.com/deployment.md +66 -0
  189. data/brutrb.com/dev-environment.md +179 -0
  190. data/brutrb.com/doc-conventions.md +39 -0
  191. data/brutrb.com/end-to-end-tests.md +174 -0
  192. data/brutrb.com/flash-and-session.md +224 -0
  193. data/brutrb.com/forms.md +866 -0
  194. data/brutrb.com/getting-started.md +66 -0
  195. data/brutrb.com/handlers.md +153 -0
  196. data/brutrb.com/hooks.md +178 -0
  197. data/brutrb.com/i18n.md +188 -0
  198. data/brutrb.com/images/Makefile +10 -0
  199. data/brutrb.com/images/dev-env-overview.dot +54 -0
  200. data/brutrb.com/images/dev-env-overview.png +0 -0
  201. data/brutrb.com/images/dev-env-protocol.dot +37 -0
  202. data/brutrb.com/images/dev-env-protocol.png +0 -0
  203. data/brutrb.com/images/logo-300.png +0 -0
  204. data/brutrb.com/images/logo.png +0 -0
  205. data/brutrb.com/images/overview.graffle +0 -0
  206. data/brutrb.com/images/overview.png +0 -0
  207. data/brutrb.com/images/spa.dot +19 -0
  208. data/brutrb.com/images/spa.png +0 -0
  209. data/brutrb.com/images/workspace-protocol.dot +44 -0
  210. data/brutrb.com/images/workspace-protocol.png +0 -0
  211. data/brutrb.com/index.md +36 -0
  212. data/brutrb.com/instrumentation.md +183 -0
  213. data/brutrb.com/javascript.md +122 -0
  214. data/brutrb.com/jobs.md +14 -0
  215. data/{doc-src → brutrb.com}/keyword-injection.md +122 -68
  216. data/brutrb.com/markdown-examples.md +85 -0
  217. data/brutrb.com/middleware.md +80 -0
  218. data/brutrb.com/not-released.md +5 -0
  219. data/brutrb.com/overview.md +404 -0
  220. data/brutrb.com/package-lock.json +2404 -0
  221. data/brutrb.com/package.json +11 -0
  222. data/brutrb.com/pages.md +378 -0
  223. data/brutrb.com/public/images/logo-300.png +0 -0
  224. data/brutrb.com/public/images/logo.png +0 -0
  225. data/brutrb.com/routes.md +215 -0
  226. data/brutrb.com/security.md +105 -0
  227. data/brutrb.com/seed-data.md +63 -0
  228. data/brutrb.com/space-time-continuum.md +85 -0
  229. data/brutrb.com/tutorial.md +3 -0
  230. data/brutrb.com/unit-tests.md +148 -0
  231. data/docker-compose.dx.yml +6 -3
  232. data/docs/404.html +21 -0
  233. data/docs/CNAME +1 -0
  234. data/docs/ai.html +24 -0
  235. data/docs/api/Brut/BackEnd/SeedData.html +493 -0
  236. data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server/FlushSpans.html +214 -0
  237. data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server.html +125 -0
  238. data/docs/api/Brut/BackEnd/Sidekiq/Middlewares.html +125 -0
  239. data/docs/api/Brut/BackEnd/Sidekiq.html +125 -0
  240. data/docs/api/Brut/BackEnd/Validators/FormValidator.html +414 -0
  241. data/docs/api/Brut/BackEnd/Validators.html +128 -0
  242. data/docs/api/Brut/BackEnd.html +132 -0
  243. data/docs/api/Brut/CLI/App.html +1576 -0
  244. data/docs/api/Brut/CLI/AppRunner.html +491 -0
  245. data/docs/api/Brut/CLI/Apps/BuildAssets/All.html +264 -0
  246. data/docs/api/Brut/CLI/Apps/BuildAssets/CSS.html +306 -0
  247. data/docs/api/Brut/CLI/Apps/BuildAssets/Images.html +262 -0
  248. data/docs/api/Brut/CLI/Apps/BuildAssets/JS.html +314 -0
  249. data/docs/api/Brut/CLI/Apps/BuildAssets.html +183 -0
  250. data/docs/api/Brut/CLI/Apps/DB/Create.html +365 -0
  251. data/docs/api/Brut/CLI/Apps/DB/Drop.html +357 -0
  252. data/docs/api/Brut/CLI/Apps/DB/Migrate.html +383 -0
  253. data/docs/api/Brut/CLI/Apps/DB/NewMigration.html +335 -0
  254. data/docs/api/Brut/CLI/Apps/DB/Rebuild.html +329 -0
  255. data/docs/api/Brut/CLI/Apps/DB/Seed.html +347 -0
  256. data/docs/api/Brut/CLI/Apps/DB/Status.html +383 -0
  257. data/docs/api/Brut/CLI/Apps/DB.html +183 -0
  258. data/docs/api/Brut/CLI/Apps/Scaffold/Action/Route.html +303 -0
  259. data/docs/api/Brut/CLI/Apps/Scaffold/Action.html +512 -0
  260. data/docs/api/Brut/CLI/Apps/Scaffold/Component.html +398 -0
  261. data/docs/api/Brut/CLI/Apps/Scaffold/CustomElementTest.html +374 -0
  262. data/docs/api/Brut/CLI/Apps/Scaffold/E2ETest.html +410 -0
  263. data/docs/api/Brut/CLI/Apps/Scaffold/Form.html +262 -0
  264. data/docs/api/Brut/CLI/Apps/Scaffold/Page/Route.html +303 -0
  265. data/docs/api/Brut/CLI/Apps/Scaffold/Page.html +480 -0
  266. data/docs/api/Brut/CLI/Apps/Scaffold/RoutesEditor.html +450 -0
  267. data/docs/api/Brut/CLI/Apps/Scaffold/Test.html +380 -0
  268. data/docs/api/Brut/CLI/Apps/Scaffold.html +253 -0
  269. data/docs/api/Brut/CLI/Apps/Test/Audit.html +464 -0
  270. data/docs/api/Brut/CLI/Apps/Test/E2e.html +407 -0
  271. data/docs/api/Brut/CLI/Apps/Test/JS.html +262 -0
  272. data/docs/api/Brut/CLI/Apps/Test/Run.html +578 -0
  273. data/docs/api/Brut/CLI/Apps/Test.html +253 -0
  274. data/docs/api/Brut/CLI/Apps.html +125 -0
  275. data/docs/api/Brut/CLI/Command.html +2342 -0
  276. data/docs/api/Brut/CLI/Error.html +139 -0
  277. data/docs/api/Brut/CLI/ExecutionResults/Result.html +664 -0
  278. data/docs/api/Brut/CLI/ExecutionResults.html +675 -0
  279. data/docs/api/Brut/CLI/Executor.html +430 -0
  280. data/docs/api/Brut/CLI/InvalidOption.html +245 -0
  281. data/docs/api/Brut/CLI/Options.html +753 -0
  282. data/docs/api/Brut/CLI/Output.html +699 -0
  283. data/docs/api/Brut/CLI/SystemExecError.html +451 -0
  284. data/docs/api/Brut/CLI.html +263 -0
  285. data/docs/api/Brut/FactoryBot.html +225 -0
  286. data/docs/api/Brut/Framework/App.html +1097 -0
  287. data/docs/api/Brut/Framework/Config.html +1045 -0
  288. data/docs/api/Brut/Framework/Container.html +1379 -0
  289. data/docs/api/Brut/Framework/Error.html +140 -0
  290. data/docs/api/Brut/Framework/Errors/AbstractMethod.html +144 -0
  291. data/docs/api/Brut/Framework/Errors/Bug.html +234 -0
  292. data/docs/api/Brut/Framework/Errors/MissingConfiguration.html +257 -0
  293. data/docs/api/Brut/Framework/Errors/MissingParameter.html +273 -0
  294. data/docs/api/Brut/Framework/Errors/NoClassForPath.html +471 -0
  295. data/docs/api/Brut/Framework/Errors/NotFound.html +308 -0
  296. data/docs/api/Brut/Framework/Errors/NotImplemented.html +234 -0
  297. data/docs/api/Brut/Framework/Errors.html +328 -0
  298. data/docs/api/Brut/Framework/FussyTypeEnforcement.html +392 -0
  299. data/docs/api/Brut/Framework/MCP.html +861 -0
  300. data/docs/api/Brut/Framework/ProjectEnvironment.html +648 -0
  301. data/docs/api/Brut/Framework.html +129 -0
  302. data/docs/api/Brut/FrontEnd/AssetPathResolver.html +317 -0
  303. data/docs/api/Brut/FrontEnd/Component/Helpers.html +326 -0
  304. data/docs/api/Brut/FrontEnd/Component.html +365 -0
  305. data/docs/api/Brut/FrontEnd/Components/ConstraintViolations.html +470 -0
  306. data/docs/api/Brut/FrontEnd/Components/FormTag.html +518 -0
  307. data/docs/api/Brut/FrontEnd/Components/I18nTranslations.html +317 -0
  308. data/docs/api/Brut/FrontEnd/Components/Input.html +195 -0
  309. data/docs/api/Brut/FrontEnd/Components/Inputs/CsrfToken.html +339 -0
  310. data/docs/api/Brut/FrontEnd/Components/Inputs/InputTag.html +660 -0
  311. data/docs/api/Brut/FrontEnd/Components/Inputs/RadioButton.html +417 -0
  312. data/docs/api/Brut/FrontEnd/Components/Inputs/SelectTagWithOptions.html +918 -0
  313. data/docs/api/Brut/FrontEnd/Components/Inputs/TextareaTag.html +651 -0
  314. data/docs/api/Brut/FrontEnd/Components/Inputs.html +125 -0
  315. data/docs/api/Brut/FrontEnd/Components/LocaleDetection.html +367 -0
  316. data/docs/api/Brut/FrontEnd/Components/PageIdentifier.html +336 -0
  317. data/docs/api/Brut/FrontEnd/Components/TimeTag.html +655 -0
  318. data/docs/api/Brut/FrontEnd/Components/Traceparent.html +352 -0
  319. data/docs/api/Brut/FrontEnd/Components.html +135 -0
  320. data/docs/api/Brut/FrontEnd/Download.html +467 -0
  321. data/docs/api/Brut/FrontEnd/Flash.html +1150 -0
  322. data/docs/api/Brut/FrontEnd/Form.html +1157 -0
  323. data/docs/api/Brut/FrontEnd/Forms/ConstraintViolation.html +634 -0
  324. data/docs/api/Brut/FrontEnd/Forms/Input.html +615 -0
  325. data/docs/api/Brut/FrontEnd/Forms/InputDeclarations.html +547 -0
  326. data/docs/api/Brut/FrontEnd/Forms/InputDefinition.html +1318 -0
  327. data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInput.html +609 -0
  328. data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInputDefinition.html +587 -0
  329. data/docs/api/Brut/FrontEnd/Forms/SelectInput.html +613 -0
  330. data/docs/api/Brut/FrontEnd/Forms/SelectInputDefinition.html +582 -0
  331. data/docs/api/Brut/FrontEnd/Forms/ValidityState.html +609 -0
  332. data/docs/api/Brut/FrontEnd/Forms.html +127 -0
  333. data/docs/api/Brut/FrontEnd/GenericResponse.html +377 -0
  334. data/docs/api/Brut/FrontEnd/Handler.html +442 -0
  335. data/docs/api/Brut/FrontEnd/Handlers/CspReportingHandler.html +318 -0
  336. data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler/TraceParent.html +336 -0
  337. data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler.html +399 -0
  338. data/docs/api/Brut/FrontEnd/Handlers/LocaleDetectionHandler.html +354 -0
  339. data/docs/api/Brut/FrontEnd/Handlers/MissingHandler/Form.html +151 -0
  340. data/docs/api/Brut/FrontEnd/Handlers/MissingHandler.html +315 -0
  341. data/docs/api/Brut/FrontEnd/Handlers.html +125 -0
  342. data/docs/api/Brut/FrontEnd/HandlingResults.html +339 -0
  343. data/docs/api/Brut/FrontEnd/HttpMethod.html +661 -0
  344. data/docs/api/Brut/FrontEnd/HttpStatus.html +496 -0
  345. data/docs/api/Brut/FrontEnd/InlineSvgLocator.html +284 -0
  346. data/docs/api/Brut/FrontEnd/Layout.html +318 -0
  347. data/docs/api/Brut/FrontEnd/Middleware.html +135 -0
  348. data/docs/api/Brut/FrontEnd/Middlewares/AnnotateBrutOwnedPaths.html +288 -0
  349. data/docs/api/Brut/FrontEnd/Middlewares/Favicon.html +292 -0
  350. data/docs/api/Brut/FrontEnd/Middlewares/OpenTelemetrySpan.html +324 -0
  351. data/docs/api/Brut/FrontEnd/Middlewares/ReloadApp.html +372 -0
  352. data/docs/api/Brut/FrontEnd/Middlewares.html +125 -0
  353. data/docs/api/Brut/FrontEnd/Page.html +773 -0
  354. data/docs/api/Brut/FrontEnd/Pages/MissingPage.html +797 -0
  355. data/docs/api/Brut/FrontEnd/Pages.html +125 -0
  356. data/docs/api/Brut/FrontEnd/RequestContext.html +1312 -0
  357. data/docs/api/Brut/FrontEnd/RouteHook.html +424 -0
  358. data/docs/api/Brut/FrontEnd/RouteHooks/AgeFlash.html +242 -0
  359. data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineScripts.html +249 -0
  360. data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts/ReportOnly.html +264 -0
  361. data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts.html +261 -0
  362. data/docs/api/Brut/FrontEnd/RouteHooks/LocaleDetection.html +284 -0
  363. data/docs/api/Brut/FrontEnd/RouteHooks/SetupRequestContext.html +252 -0
  364. data/docs/api/Brut/FrontEnd/RouteHooks.html +115 -0
  365. data/docs/api/Brut/FrontEnd/Routing/FormHandlerRoute.html +227 -0
  366. data/docs/api/Brut/FrontEnd/Routing/FormRoute.html +305 -0
  367. data/docs/api/Brut/FrontEnd/Routing/MissingForm.html +324 -0
  368. data/docs/api/Brut/FrontEnd/Routing/MissingHandler.html +319 -0
  369. data/docs/api/Brut/FrontEnd/Routing/MissingPage.html +315 -0
  370. data/docs/api/Brut/FrontEnd/Routing/MissingPath.html +315 -0
  371. data/docs/api/Brut/FrontEnd/Routing/PageRoute.html +327 -0
  372. data/docs/api/Brut/FrontEnd/Routing/Route.html +761 -0
  373. data/docs/api/Brut/FrontEnd/Routing.html +927 -0
  374. data/docs/api/Brut/FrontEnd/Session.html +1195 -0
  375. data/docs/api/Brut/FrontEnd.html +134 -0
  376. data/docs/api/Brut/I18n/BaseMethods.html +931 -0
  377. data/docs/api/Brut/I18n/ForBackEnd.html +302 -0
  378. data/docs/api/Brut/I18n/ForCLI.html +302 -0
  379. data/docs/api/Brut/I18n/ForHTML.html +296 -0
  380. data/docs/api/Brut/I18n/HTTPAcceptLanguage/AlwaysEnglish.html +316 -0
  381. data/docs/api/Brut/I18n/HTTPAcceptLanguage.html +930 -0
  382. data/docs/api/Brut/I18n.html +127 -0
  383. data/docs/api/Brut/Instrumentation/LoggerSpanExporter.html +435 -0
  384. data/docs/api/Brut/Instrumentation/OpenTelemetry/NormalizedAttributes.html +286 -0
  385. data/docs/api/Brut/Instrumentation/OpenTelemetry/Span.html +302 -0
  386. data/docs/api/Brut/Instrumentation/OpenTelemetry.html +864 -0
  387. data/docs/api/Brut/Instrumentation.html +126 -0
  388. data/docs/api/Brut/SinatraHelpers/ClassMethods.html +532 -0
  389. data/docs/api/Brut/SinatraHelpers.html +281 -0
  390. data/docs/api/Brut/SpecSupport/ClockSupport.html +383 -0
  391. data/docs/api/Brut/SpecSupport/ComponentSupport.html +502 -0
  392. data/docs/api/Brut/SpecSupport/E2ETestServer.html +503 -0
  393. data/docs/api/Brut/SpecSupport/E2eSupport.html +142 -0
  394. data/docs/api/Brut/SpecSupport/EnhancedNode.html +403 -0
  395. data/docs/api/Brut/SpecSupport/FlashSupport.html +278 -0
  396. data/docs/api/Brut/SpecSupport/GeneralSupport/ClassMethods.html +401 -0
  397. data/docs/api/Brut/SpecSupport/GeneralSupport.html +195 -0
  398. data/docs/api/Brut/SpecSupport/HandlerSupport.html +160 -0
  399. data/docs/api/Brut/SpecSupport/Matchers/HaveConstraintViolation.html +553 -0
  400. data/docs/api/Brut/SpecSupport/Matchers/HaveHTMLAttribute.html +439 -0
  401. data/docs/api/Brut/SpecSupport/Matchers.html +125 -0
  402. data/docs/api/Brut/SpecSupport/RSpecSetup/OptionalSidekiqSupport.html +335 -0
  403. data/docs/api/Brut/SpecSupport/RSpecSetup.html +602 -0
  404. data/docs/api/Brut/SpecSupport/SessionSupport.html +196 -0
  405. data/docs/api/Brut/SpecSupport.html +129 -0
  406. data/docs/api/Brut.html +225 -0
  407. data/docs/api/Clock.html +603 -0
  408. data/docs/api/RichString.html +968 -0
  409. data/docs/api/SemanticLogger/Appender/Async.html +219 -0
  410. data/docs/api/Sequel/Extensions/BrutInstrumentation.html +115 -0
  411. data/docs/api/Sequel/Extensions/BrutMigrations.html +533 -0
  412. data/docs/api/Sequel/Extensions.html +117 -0
  413. data/docs/api/Sequel/Plugins/CreatedAt/InstanceMethods.html +105 -0
  414. data/docs/api/Sequel/Plugins/CreatedAt.html +125 -0
  415. data/docs/api/Sequel/Plugins/ExternalId/ClassMethods.html +207 -0
  416. data/docs/api/Sequel/Plugins/ExternalId/InstanceMethods.html +186 -0
  417. data/docs/api/Sequel/Plugins/ExternalId.html +218 -0
  418. data/docs/api/Sequel/Plugins/FindBang/ClassMethods.html +202 -0
  419. data/docs/api/Sequel/Plugins/FindBang.html +125 -0
  420. data/docs/api/Sequel/Plugins.html +117 -0
  421. data/docs/api/Sequel.html +117 -0
  422. data/docs/api/_index.html +1553 -0
  423. data/docs/api/class_list.html +54 -0
  424. data/docs/api/css/common.css +1 -0
  425. data/docs/api/css/full_list.css +58 -0
  426. data/docs/api/css/style.css +503 -0
  427. data/docs/api/file.README.html +127 -0
  428. data/docs/api/file_list.html +59 -0
  429. data/docs/api/frames.html +22 -0
  430. data/docs/api/index.html +127 -0
  431. data/docs/api/js/app.js +344 -0
  432. data/docs/api/js/full_list.js +242 -0
  433. data/docs/api/js/jquery.js +4 -0
  434. data/docs/api/method_list.html +3998 -0
  435. data/docs/api/top-level-namespace.html +112 -0
  436. data/docs/assets/ai.md.tZrjP9im.js +1 -0
  437. data/docs/assets/ai.md.tZrjP9im.lean.js +1 -0
  438. data/docs/assets/app.D_yaTITQ.js +1 -0
  439. data/docs/assets/assets.md.D3wunzLx.js +19 -0
  440. data/docs/assets/assets.md.D3wunzLx.lean.js +1 -0
  441. data/docs/assets/brut-js.md.o2DAO2s2.js +12 -0
  442. data/docs/assets/brut-js.md.o2DAO2s2.lean.js +1 -0
  443. data/docs/assets/business-logic.md.BY4hGy0m.js +1 -0
  444. data/docs/assets/business-logic.md.BY4hGy0m.lean.js +1 -0
  445. data/docs/assets/chunks/@localSearchIndexroot.BsN5i0Fi.js +1 -0
  446. data/docs/assets/chunks/VPLocalSearchBox.B2-ZzyTY.js +8 -0
  447. data/docs/assets/chunks/framework.1L-BeKqY.js +18 -0
  448. data/docs/assets/chunks/theme.CfGFVRvE.js +2 -0
  449. data/docs/assets/cli.md.RmeA2b0i.js +127 -0
  450. data/docs/assets/cli.md.RmeA2b0i.lean.js +1 -0
  451. data/docs/assets/components.md.eCttGlN-.js +104 -0
  452. data/docs/assets/components.md.eCttGlN-.lean.js +1 -0
  453. data/docs/assets/configuration.md.BRriU0cL.js +78 -0
  454. data/docs/assets/configuration.md.BRriU0cL.lean.js +1 -0
  455. data/docs/assets/css.md.DJgj2clw.js +21 -0
  456. data/docs/assets/css.md.DJgj2clw.lean.js +1 -0
  457. data/docs/assets/custom-element-tests.md.BrYJQEl3.js +69 -0
  458. data/docs/assets/custom-element-tests.md.BrYJQEl3.lean.js +1 -0
  459. data/docs/assets/database-access.md.C7l-Vuvb.js +63 -0
  460. data/docs/assets/database-access.md.C7l-Vuvb.lean.js +1 -0
  461. data/docs/assets/database-schema.md.BUjR0VS1.js +63 -0
  462. data/docs/assets/database-schema.md.BUjR0VS1.lean.js +1 -0
  463. data/docs/assets/deployment.md.Dbka4OTr.js +1 -0
  464. data/docs/assets/deployment.md.Dbka4OTr.lean.js +1 -0
  465. data/docs/assets/dev-env-overview.Gj7NWM8-.png +0 -0
  466. data/docs/assets/dev-env-protocol.DysDAtnz.png +0 -0
  467. data/docs/assets/dev-environment.md.BNc8AYiK.js +11 -0
  468. data/docs/assets/dev-environment.md.BNc8AYiK.lean.js +1 -0
  469. data/docs/assets/doc-conventions.md.DCfRXXi-.js +1 -0
  470. data/docs/assets/doc-conventions.md.DCfRXXi-.lean.js +1 -0
  471. data/docs/assets/end-to-end-tests.md.yfQHC0b5.js +26 -0
  472. data/docs/assets/end-to-end-tests.md.yfQHC0b5.lean.js +1 -0
  473. data/docs/assets/flash-and-session.md.BXY8RvT0.js +93 -0
  474. data/docs/assets/flash-and-session.md.BXY8RvT0.lean.js +1 -0
  475. data/docs/assets/forms.md.CBTYQ_Cz.js +379 -0
  476. data/docs/assets/forms.md.CBTYQ_Cz.lean.js +1 -0
  477. data/docs/assets/getting-started.md.Bz2s1Vjb.js +2 -0
  478. data/docs/assets/getting-started.md.Bz2s1Vjb.lean.js +1 -0
  479. data/docs/assets/handlers.md.089DVD3v.js +69 -0
  480. data/docs/assets/handlers.md.089DVD3v.lean.js +1 -0
  481. data/docs/assets/hooks.md.C4-moMny.js +80 -0
  482. data/docs/assets/hooks.md.C4-moMny.lean.js +1 -0
  483. data/docs/assets/i18n.md.Do9i1qWl.js +23 -0
  484. data/docs/assets/i18n.md.Do9i1qWl.lean.js +1 -0
  485. data/docs/assets/index.md.B28EwVpq.js +1 -0
  486. data/docs/assets/index.md.B28EwVpq.lean.js +1 -0
  487. data/docs/assets/instrumentation.md.CL6ax7nT.js +35 -0
  488. data/docs/assets/instrumentation.md.CL6ax7nT.lean.js +1 -0
  489. data/docs/assets/javascript.md.GWbhRS51.js +31 -0
  490. data/docs/assets/javascript.md.GWbhRS51.lean.js +1 -0
  491. data/docs/assets/jobs.md.S-2amAYp.js +1 -0
  492. data/docs/assets/jobs.md.S-2amAYp.lean.js +1 -0
  493. data/docs/assets/keyword-injection.md.Dt2tKREs.js +25 -0
  494. data/docs/assets/keyword-injection.md.Dt2tKREs.lean.js +1 -0
  495. data/docs/assets/markdown-examples.md.CCFEQO44.js +33 -0
  496. data/docs/assets/markdown-examples.md.CCFEQO44.lean.js +1 -0
  497. data/docs/assets/middleware.md.Czz_UlJN.js +20 -0
  498. data/docs/assets/middleware.md.Czz_UlJN.lean.js +1 -0
  499. data/docs/assets/not-released.md.BBy28McC.js +1 -0
  500. data/docs/assets/not-released.md.BBy28McC.lean.js +1 -0
  501. data/docs/assets/overview.Da81cB9R.png +0 -0
  502. data/docs/assets/overview.md.CDalkuxV.js +133 -0
  503. data/docs/assets/overview.md.CDalkuxV.lean.js +1 -0
  504. data/docs/assets/pages.md.BE3kfOc5.js +122 -0
  505. data/docs/assets/pages.md.BE3kfOc5.lean.js +1 -0
  506. data/docs/assets/routes.md.BMM7peut.js +29 -0
  507. data/docs/assets/routes.md.BMM7peut.lean.js +1 -0
  508. data/docs/assets/security.md.C668yXCi.js +1 -0
  509. data/docs/assets/security.md.C668yXCi.lean.js +1 -0
  510. data/docs/assets/seed-data.md.BvFZlqIk.js +14 -0
  511. data/docs/assets/seed-data.md.BvFZlqIk.lean.js +1 -0
  512. data/docs/assets/spa.qejUdp-5.png +0 -0
  513. data/docs/assets/space-time-continuum.md.KPUIKysQ.js +1 -0
  514. data/docs/assets/space-time-continuum.md.KPUIKysQ.lean.js +1 -0
  515. data/docs/assets/style.D73IYGCX.css +1 -0
  516. data/docs/assets/tutorial.md.BnoGjrdK.js +1 -0
  517. data/docs/assets/tutorial.md.BnoGjrdK.lean.js +1 -0
  518. data/docs/assets/unit-tests.md.DUGrnLj5.js +13 -0
  519. data/docs/assets/unit-tests.md.DUGrnLj5.lean.js +1 -0
  520. data/docs/assets/workspace-protocol.C0gXsoDb.png +0 -0
  521. data/docs/assets.html +42 -0
  522. data/docs/brut-css/brut.css +1 -0
  523. data/docs/brut-css/brut.max.css +22372 -0
  524. data/docs/brut-css/classes/appearances.html +783 -0
  525. data/docs/brut-css/classes/background-colors.html +3529 -0
  526. data/docs/brut-css/classes/border-colors.html +3529 -0
  527. data/docs/brut-css/classes/borders.html +2293 -0
  528. data/docs/brut-css/classes/dimensions.html +2581 -0
  529. data/docs/brut-css/classes/flex.html +917 -0
  530. data/docs/brut-css/classes/foreground-colors.html +3261 -0
  531. data/docs/brut-css/classes/junk-drawer.html +431 -0
  532. data/docs/brut-css/classes/layout.html +668 -0
  533. data/docs/brut-css/classes/lists.html +331 -0
  534. data/docs/brut-css/classes/positioning.html +1751 -0
  535. data/docs/brut-css/classes/spacings.html +2633 -0
  536. data/docs/brut-css/classes/typography.html +2206 -0
  537. data/docs/brut-css/customization/advanced-configuration.html +204 -0
  538. data/docs/brut-css/customization/breakpoints.html +227 -0
  539. data/docs/brut-css/customization/design-system.html +197 -0
  540. data/docs/brut-css/customization/pseudo-classes.html +228 -0
  541. data/docs/brut-css/docs.css +98 -0
  542. data/docs/brut-css/getting-started/core-concepts.html +234 -0
  543. data/docs/brut-css/getting-started/installation.html +190 -0
  544. data/docs/brut-css/getting-started/overview.html +210 -0
  545. data/docs/brut-css/getting-started/simple-example.html +285 -0
  546. data/docs/brut-css/index.html +193 -0
  547. data/docs/brut-css/prism-twilight.min.css +1 -0
  548. data/docs/brut-css/properties/colors.html +1548 -0
  549. data/docs/brut-css/properties/spacings.html +614 -0
  550. data/docs/brut-css/properties/typography.html +777 -0
  551. data/docs/brut-js/api/AjaxSubmit.html +374 -0
  552. data/docs/brut-js/api/AjaxSubmit.js.html +435 -0
  553. data/docs/brut-js/api/Autosubmit.html +192 -0
  554. data/docs/brut-js/api/Autosubmit.js.html +114 -0
  555. data/docs/brut-js/api/BaseCustomElement.html +1091 -0
  556. data/docs/brut-js/api/BaseCustomElement.js.html +312 -0
  557. data/docs/brut-js/api/BrutCustomElements.html +172 -0
  558. data/docs/brut-js/api/BufferedLogger.html +173 -0
  559. data/docs/brut-js/api/ConfirmSubmit.html +278 -0
  560. data/docs/brut-js/api/ConfirmSubmit.js.html +167 -0
  561. data/docs/brut-js/api/ConfirmationDialog.html +425 -0
  562. data/docs/brut-js/api/ConfirmationDialog.js.html +194 -0
  563. data/docs/brut-js/api/ConstraintViolationMessage.html +448 -0
  564. data/docs/brut-js/api/ConstraintViolationMessage.js.html +176 -0
  565. data/docs/brut-js/api/ConstraintViolationMessages.html +590 -0
  566. data/docs/brut-js/api/ConstraintViolationMessages.js.html +149 -0
  567. data/docs/brut-js/api/CopyToClipboard.html +345 -0
  568. data/docs/brut-js/api/CopyToClipboard.js.html +147 -0
  569. data/docs/brut-js/api/Form.html +294 -0
  570. data/docs/brut-js/api/Form.js.html +202 -0
  571. data/docs/brut-js/api/I18nTranslation.html +409 -0
  572. data/docs/brut-js/api/I18nTranslation.js.html +112 -0
  573. data/docs/brut-js/api/LocaleDetection.html +312 -0
  574. data/docs/brut-js/api/LocaleDetection.js.html +168 -0
  575. data/docs/brut-js/api/Logger.html +702 -0
  576. data/docs/brut-js/api/Logger.js.html +141 -0
  577. data/docs/brut-js/api/Message.html +238 -0
  578. data/docs/brut-js/api/Message.js.html +107 -0
  579. data/docs/brut-js/api/PrefixedLogger.html +369 -0
  580. data/docs/brut-js/api/RichString.html +1049 -0
  581. data/docs/brut-js/api/RichString.js.html +164 -0
  582. data/docs/brut-js/api/Tabs.html +295 -0
  583. data/docs/brut-js/api/Tabs.js.html +219 -0
  584. data/docs/brut-js/api/Tracing.html +277 -0
  585. data/docs/brut-js/api/Tracing.js.html +298 -0
  586. data/docs/brut-js/api/external-CustomElementRegistry.html +140 -0
  587. data/docs/brut-js/api/external-Performance.html +138 -0
  588. data/docs/brut-js/api/external-Promise.html +138 -0
  589. data/docs/brut-js/api/external-ValidityState.html +138 -0
  590. data/docs/brut-js/api/external-Window.html +233 -0
  591. data/docs/brut-js/api/external-fetch.html +138 -0
  592. data/docs/brut-js/api/global.html +400 -0
  593. data/docs/brut-js/api/index.html +168 -0
  594. data/docs/brut-js/api/index.js.html +181 -0
  595. data/docs/brut-js/api/module-testing.html +383 -0
  596. data/docs/brut-js/api/scripts/linenumber.js +25 -0
  597. data/docs/brut-js/api/scripts/prettify/Apache-License-2.0.txt +202 -0
  598. data/docs/brut-js/api/scripts/prettify/lang-css.js +2 -0
  599. data/docs/brut-js/api/scripts/prettify/prettify.js +28 -0
  600. data/docs/brut-js/api/styles/jsdoc-default.css +327 -0
  601. data/docs/brut-js/api/styles/prettify-jsdoc.css +111 -0
  602. data/docs/brut-js/api/styles/prettify-tomorrow.css +132 -0
  603. data/docs/brut-js/api/testing.AssetMetadata.html +172 -0
  604. data/docs/brut-js/api/testing.AssetMetadataLoader.html +171 -0
  605. data/docs/brut-js/api/testing.CustomElementTest.html +679 -0
  606. data/docs/brut-js/api/testing.DOMCreator.html +171 -0
  607. data/docs/brut-js/api/testing_AssetMetadata.js.html +86 -0
  608. data/docs/brut-js/api/testing_AssetMetadataLoader.js.html +76 -0
  609. data/docs/brut-js/api/testing_CustomElementTest.js.html +286 -0
  610. data/docs/brut-js/api/testing_DOMCreator.js.html +96 -0
  611. data/docs/brut-js/api/testing_index.js.html +99 -0
  612. data/docs/brut-js.html +35 -0
  613. data/docs/business-logic.html +24 -0
  614. data/docs/cli.html +150 -0
  615. data/docs/components.html +127 -0
  616. data/docs/configuration.html +101 -0
  617. data/docs/css.html +44 -0
  618. data/docs/custom-element-tests.html +92 -0
  619. data/docs/database-access.html +86 -0
  620. data/docs/database-schema.html +86 -0
  621. data/docs/deployment.html +24 -0
  622. data/docs/dev-environment.html +34 -0
  623. data/docs/doc-conventions.html +24 -0
  624. data/docs/end-to-end-tests.html +49 -0
  625. data/docs/flash-and-session.html +116 -0
  626. data/docs/forms.html +402 -0
  627. data/docs/getting-started.html +25 -0
  628. data/docs/handlers.html +92 -0
  629. data/docs/hashmap.json +1 -0
  630. data/docs/hooks.html +103 -0
  631. data/docs/i18n.html +46 -0
  632. data/docs/images/logo-300.png +0 -0
  633. data/docs/images/logo.png +0 -0
  634. data/docs/index.html +24 -0
  635. data/docs/instrumentation.html +58 -0
  636. data/docs/javascript.html +54 -0
  637. data/docs/jobs.html +24 -0
  638. data/docs/keyword-injection.html +48 -0
  639. data/docs/markdown-examples.html +56 -0
  640. data/docs/middleware.html +43 -0
  641. data/docs/not-released.html +24 -0
  642. data/docs/overview.html +156 -0
  643. data/docs/pages.html +145 -0
  644. data/docs/routes.html +52 -0
  645. data/docs/security.html +24 -0
  646. data/docs/seed-data.html +37 -0
  647. data/docs/space-time-continuum.html +24 -0
  648. data/docs/tutorial.html +24 -0
  649. data/docs/unit-tests.html +36 -0
  650. data/docs/vp-icons.css +1 -0
  651. data/lib/brut/back_end/seed_data.rb +19 -2
  652. data/lib/brut/back_end/sidekiq/middlewares/server.rb +2 -1
  653. data/lib/brut/back_end/sidekiq/middlewares.rb +2 -1
  654. data/lib/brut/back_end/sidekiq.rb +2 -1
  655. data/lib/brut/back_end/validator.rb +5 -1
  656. data/lib/brut/back_end.rb +4 -2
  657. data/lib/brut/cli/app_runner.rb +1 -1
  658. data/lib/brut/cli/apps/test.rb +5 -0
  659. data/lib/brut/cli.rb +4 -3
  660. data/lib/brut/factory_bot.rb +0 -5
  661. data/lib/brut/framework/app.rb +70 -5
  662. data/lib/brut/framework/config.rb +5 -3
  663. data/lib/brut/framework/container.rb +3 -2
  664. data/lib/brut/framework/errors.rb +12 -4
  665. data/lib/brut/framework/mcp.rb +58 -1
  666. data/lib/brut/framework/project_environment.rb +6 -2
  667. data/lib/brut/framework.rb +1 -1
  668. data/lib/brut/front_end/component.rb +69 -71
  669. data/lib/brut/front_end/components/constraint_violations.rb +1 -4
  670. data/lib/brut/front_end/components/form_tag.rb +1 -1
  671. data/lib/brut/front_end/components/input.rb +3 -3
  672. data/lib/brut/front_end/components/inputs/csrf_token.rb +1 -1
  673. data/lib/brut/front_end/components/inputs/{text_field.rb → input_tag.rb} +7 -9
  674. data/lib/brut/front_end/components/inputs/radio_button.rb +1 -1
  675. data/lib/brut/front_end/components/inputs/select_tag_with_options.rb +187 -0
  676. data/lib/brut/front_end/components/inputs/{textarea.rb → textarea_tag.rb} +2 -2
  677. data/lib/brut/front_end/components/time_tag.rb +2 -1
  678. data/lib/brut/front_end/form.rb +4 -4
  679. data/lib/brut/front_end/forms/input.rb +2 -1
  680. data/lib/brut/front_end/forms/input_definition.rb +5 -2
  681. data/lib/brut/front_end/forms/radio_button_group_input.rb +2 -1
  682. data/lib/brut/front_end/forms/radio_button_group_input_definition.rb +2 -2
  683. data/lib/brut/front_end/forms/select_input.rb +2 -4
  684. data/lib/brut/front_end/forms/select_input_definition.rb +2 -2
  685. data/lib/brut/front_end/handler.rb +28 -26
  686. data/lib/brut/front_end/handlers/csp_reporting_handler.rb +5 -2
  687. data/lib/brut/front_end/handlers/instrumentation_handler.rb +8 -4
  688. data/lib/brut/front_end/handlers/locale_detection_handler.rb +9 -5
  689. data/lib/brut/front_end/handlers/missing_handler.rb +5 -2
  690. data/lib/brut/front_end/layout.rb +16 -0
  691. data/lib/brut/front_end/page.rb +52 -29
  692. data/lib/brut/front_end/request_context.rb +3 -2
  693. data/lib/brut/front_end/routing.rb +5 -1
  694. data/lib/brut/front_end.rb +4 -13
  695. data/lib/brut/i18n/base_methods.rb +167 -79
  696. data/lib/brut/i18n/for_back_end.rb +4 -0
  697. data/lib/brut/i18n/for_cli.rb +4 -0
  698. data/lib/brut/i18n/for_html.rb +32 -4
  699. data/lib/brut/i18n/http_accept_language.rb +47 -0
  700. data/lib/brut/instrumentation/open_telemetry.rb +36 -1
  701. data/lib/brut/instrumentation.rb +3 -5
  702. data/lib/brut/sinatra_helpers.rb +11 -3
  703. data/lib/brut/spec_support/component_support.rb +30 -16
  704. data/lib/brut/spec_support/e2e_support.rb +1 -1
  705. data/lib/brut/spec_support/e2e_test_server.rb +3 -0
  706. data/lib/brut/spec_support/general_support.rb +3 -0
  707. data/lib/brut/spec_support/handler_support.rb +6 -1
  708. data/lib/brut/spec_support/matcher.rb +1 -0
  709. data/lib/brut/spec_support/matchers/be_page_for.rb +1 -0
  710. data/lib/brut/spec_support/matchers/have_html_attribute.rb +1 -0
  711. data/lib/brut/spec_support/matchers/have_i18n_string.rb +2 -5
  712. data/lib/brut/spec_support/matchers/have_link_to.rb +1 -0
  713. data/lib/brut/spec_support/matchers/have_redirected_to.rb +1 -0
  714. data/lib/brut/spec_support/matchers/have_rendered.rb +1 -0
  715. data/lib/brut/spec_support/matchers/have_returned_rack_response.rb +44 -0
  716. data/lib/brut/spec_support.rb +1 -1
  717. data/lib/brut/version.rb +1 -1
  718. data/lib/brut.rb +5 -4
  719. data/lib/sequel/extensions/brut_migrations.rb +1 -1
  720. metadata +648 -13
  721. data/doc-src/architecture.md +0 -102
  722. data/doc-src/assets.md +0 -98
  723. data/doc-src/forms.md +0 -214
  724. data/doc-src/handlers.md +0 -83
  725. data/doc-src/javascript.md +0 -265
  726. data/doc-src/pages.md +0 -210
  727. data/doc-src/route-hooks.md +0 -59
  728. data/lib/brut/front_end/components/inputs/select.rb +0 -117
data/docs/brut-css/classes/dimensions.html ADDED
@@ -0,0 +1,2581 @@
1
+ <!doctype html>
2
+ <html class="ma-0 pa-0 h-100" lang="en">
3
+ <head>
4
+ <link rel="stylesheet" href="/brut-css/brut.css">
5
+ <link rel="stylesheet" href="/brut-css/docs.css">
6
+ <link rel="stylesheet" href="/brut-css/prism-twilight.min.css">
7
+ </head>
8
+
9
+ <body class="flex flex-column ff-sans ma-0 pa-0 h-100">
10
+ <header class="pos-sticky top-0 bg-gray-700 pa-3 z-5 shadow-2">
11
+ <div class="flex gap-3 justify-between items-center">
12
+ <h1><a href="/brut-css" class="black tdn">BrutCSS Reference Documentation</a></h1>
13
+ <ul class="lst-none pl-0 flex gap-2 justify-end items-center">
14
+ <form class="flex items-center gap-1 mr-3">
15
+ <label>
16
+ <input type="search" placeholder="e.g. padding-left" class="pa-2 br-2 ba bc-gray-600 bg-white-ish gray-200">
17
+ <span class="sr-only">Search term</span>
18
+ </label>
19
+ <button class="ph-3 pv-2 bg-white gray-100 ba bc-gray-500 br-3 hover-bg-gray-800 pointer flex items-center justify-between">
20
+ <span class="mr-2">Search</span>
21
+ <kbd>&#8984;</kbd>
22
+ <kbd>/</kbd>
23
+ </button>
24
+ </form>
25
+ <li><a href="/" class="red-200 tdn hover-tdu">BrutRB</a></li>
26
+ <span aria-hidden="true">&middot;</span>
27
+ <li><a href="/brut-js" class="gray-200 tdn hover-tdu">BrutJS</a></li>
28
+ <span aria-hidden="true">&middot;</span>
29
+ <li><a href="https://github.com/thirdtank/brut/tree/main/brut-css" class="gray-200 tdn hover-tdu">Code</a></li>
30
+ </ul>
31
+ </div>
32
+ </header>
33
+ <main class="flex overflow-hidden flex-grow-1 flex-shrink-1 flex-basis-0 pos-relative">
34
+ <nav class="overflow-y-auto ph-3 pb-2 pt-4 w-20 bg-gray-800 gray-200 h-100">
35
+
36
+ <h3>Getting Started</h3>
37
+ <ul class="pl-3">
38
+
39
+ <li>
40
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/overview.html">Overview</a>
41
+ </li>
42
+
43
+ <li>
44
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/installation.html">Installation</a>
45
+ </li>
46
+
47
+ <li>
48
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/core-concepts.html">Core Concepts</a>
49
+ </li>
50
+
51
+ <li>
52
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/simple-example.html">Simple Example</a>
53
+ </li>
54
+
55
+ </ul>
56
+
57
+ <h3>Properties</h3>
58
+ <ul class="pl-3">
59
+
60
+ <li>
61
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/properties/colors.html">Colors</a>
62
+ </li>
63
+
64
+ <li>
65
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/properties/spacings.html">Spacings</a>
66
+ </li>
67
+
68
+ <li>
69
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/properties/typography.html">Typography</a>
70
+ </li>
71
+
72
+ </ul>
73
+
74
+ <h3>Classes</h3>
75
+ <ul class="pl-3">
76
+
77
+ <li>
78
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/appearances.html">Appearances</a>
79
+ </li>
80
+
81
+ <li>
82
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/borders.html">Borders</a>
83
+ </li>
84
+
85
+ <li>
86
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/foreground-colors.html">Foreground Colors</a>
87
+ </li>
88
+
89
+ <li>
90
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/background-colors.html">Background Colors</a>
91
+ </li>
92
+
93
+ <li>
94
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/border-colors.html">Border Colors</a>
95
+ </li>
96
+
97
+ <li>
98
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/dimensions.html">Dimensions</a>
99
+ </li>
100
+
101
+ <li>
102
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/flex.html">Flex</a>
103
+ </li>
104
+
105
+ <li>
106
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/layout.html">Layout</a>
107
+ </li>
108
+
109
+ <li>
110
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/lists.html">Lists</a>
111
+ </li>
112
+
113
+ <li>
114
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/positioning.html">Positioning</a>
115
+ </li>
116
+
117
+ <li>
118
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/spacings.html">Spacings</a>
119
+ </li>
120
+
121
+ <li>
122
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/typography.html">Typography</a>
123
+ </li>
124
+
125
+ <li>
126
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/junk-drawer.html">Junk Drawer</a>
127
+ </li>
128
+
129
+ </ul>
130
+
131
+ <h3>Customization</h3>
132
+ <ul class="pl-3">
133
+
134
+ <li>
135
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/design-system.html">Design System</a>
136
+ </li>
137
+
138
+ <li>
139
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/breakpoints.html">Breakpoints</a>
140
+ </li>
141
+
142
+ <li>
143
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/pseudo-classes.html">Pseudo Classes</a>
144
+ </li>
145
+
146
+ <li>
147
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/advanced-configuration.html">Advanced Configuration</a>
148
+ </li>
149
+
150
+ </ul>
151
+
152
+
153
+ </nav>
154
+ <section class="overflow-y-auto pt-4 h-100 flex-grow-1 flex-shrink-1 flex-basis-0 flex flex-column">
155
+ <div class="ph-3 pv-2 flex items-start gap-2 justify-between">
156
+
157
+ <article>
158
+ <h2 class="}-5">Dimensions Classes</h2>
159
+
160
+ <p>Dimensions, namely width and height. These are all using an 8-step scale with 1 being the smallest width and 8 the largest. These scales use the <a href="/brut-css/properties/spacings.html#property-scale:widths-heights">Widths Heights</a> scale, which, by default, is double the respective value from <a href="/brut-css/properties/spacings.html#property-scale:spacing">Spacing</a>. This should result in harmonious designs that align on a grid. There are also percentage-based scales where the value in the class is the percentage, with the addition of <code>third</code> and <code>two-thirds</code>.</p>
161
+
162
+
163
+
164
+
165
+ <h3 class="f-5 mt-4" id="class-scale:widths">Widths</h3>
166
+ <p class="p">
167
+ <p>Numeric/fixed widths.</p>
168
+
169
+ </p>
170
+
171
+
172
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-1">
173
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-1</code></h4>
174
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-1</span> <span class="token punctuation">{</span>
175
+ <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
176
+ <span class="token punctuation">}</span></pre>
177
+ </div>
178
+ <div class="ml-3">
179
+ <p class="p">
180
+
181
+ </p>
182
+
183
+
184
+ </div>
185
+
186
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-2">
187
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-2</code></h4>
188
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-2</span> <span class="token punctuation">{</span>
189
+ <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
190
+ <span class="token punctuation">}</span></pre>
191
+ </div>
192
+ <div class="ml-3">
193
+ <p class="p">
194
+
195
+ </p>
196
+
197
+
198
+ </div>
199
+
200
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-3">
201
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-3</code></h4>
202
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-3</span> <span class="token punctuation">{</span>
203
+ <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
204
+ <span class="token punctuation">}</span></pre>
205
+ </div>
206
+ <div class="ml-3">
207
+ <p class="p">
208
+
209
+ </p>
210
+
211
+
212
+ </div>
213
+
214
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-4">
215
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-4</code></h4>
216
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-4</span> <span class="token punctuation">{</span>
217
+ <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
218
+ <span class="token punctuation">}</span></pre>
219
+ </div>
220
+ <div class="ml-3">
221
+ <p class="p">
222
+
223
+ </p>
224
+
225
+
226
+ </div>
227
+
228
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-5">
229
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-5</code></h4>
230
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-5</span> <span class="token punctuation">{</span>
231
+ <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
232
+ <span class="token punctuation">}</span></pre>
233
+ </div>
234
+ <div class="ml-3">
235
+ <p class="p">
236
+
237
+ </p>
238
+
239
+
240
+ </div>
241
+
242
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-6">
243
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-6</code></h4>
244
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-6</span> <span class="token punctuation">{</span>
245
+ <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
246
+ <span class="token punctuation">}</span></pre>
247
+ </div>
248
+ <div class="ml-3">
249
+ <p class="p">
250
+
251
+ </p>
252
+
253
+
254
+ </div>
255
+
256
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-7">
257
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-7</code></h4>
258
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-7</span> <span class="token punctuation">{</span>
259
+ <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
260
+ <span class="token punctuation">}</span></pre>
261
+ </div>
262
+ <div class="ml-3">
263
+ <p class="p">
264
+
265
+ </p>
266
+
267
+
268
+ </div>
269
+
270
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-8">
271
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-8</code></h4>
272
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-8</span> <span class="token punctuation">{</span>
273
+ <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
274
+ <span class="token punctuation">}</span></pre>
275
+ </div>
276
+ <div class="ml-3">
277
+ <p class="p">
278
+
279
+ </p>
280
+
281
+
282
+ </div>
283
+
284
+
285
+ <h3 class="f-5 mt-4" id="class-scale:width-percent">Width Percent</h3>
286
+ <p class="p">
287
+ <p>Percentage widths.</p>
288
+
289
+ </p>
290
+
291
+
292
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-10">
293
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-10</code></h4>
294
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-10</span> <span class="token punctuation">{</span>
295
+ <span class="token property">width</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
296
+ <span class="token punctuation">}</span></pre>
297
+ </div>
298
+ <div class="ml-3">
299
+ <p class="p">
300
+
301
+ </p>
302
+
303
+
304
+ </div>
305
+
306
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-20">
307
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-20</code></h4>
308
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-20</span> <span class="token punctuation">{</span>
309
+ <span class="token property">width</span><span class="token punctuation">:</span> 20%<span class="token punctuation">;</span>
310
+ <span class="token punctuation">}</span></pre>
311
+ </div>
312
+ <div class="ml-3">
313
+ <p class="p">
314
+
315
+ </p>
316
+
317
+
318
+ </div>
319
+
320
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-25">
321
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-25</code></h4>
322
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-25</span> <span class="token punctuation">{</span>
323
+ <span class="token property">width</span><span class="token punctuation">:</span> 25%<span class="token punctuation">;</span>
324
+ <span class="token punctuation">}</span></pre>
325
+ </div>
326
+ <div class="ml-3">
327
+ <p class="p">
328
+
329
+ </p>
330
+
331
+
332
+ </div>
333
+
334
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-30">
335
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-30</code></h4>
336
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-30</span> <span class="token punctuation">{</span>
337
+ <span class="token property">width</span><span class="token punctuation">:</span> 30%<span class="token punctuation">;</span>
338
+ <span class="token punctuation">}</span></pre>
339
+ </div>
340
+ <div class="ml-3">
341
+ <p class="p">
342
+
343
+ </p>
344
+
345
+
346
+ </div>
347
+
348
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-40">
349
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-40</code></h4>
350
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-40</span> <span class="token punctuation">{</span>
351
+ <span class="token property">width</span><span class="token punctuation">:</span> 40%<span class="token punctuation">;</span>
352
+ <span class="token punctuation">}</span></pre>
353
+ </div>
354
+ <div class="ml-3">
355
+ <p class="p">
356
+
357
+ </p>
358
+
359
+
360
+ </div>
361
+
362
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-50">
363
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-50</code></h4>
364
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-50</span> <span class="token punctuation">{</span>
365
+ <span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
366
+ <span class="token punctuation">}</span></pre>
367
+ </div>
368
+ <div class="ml-3">
369
+ <p class="p">
370
+
371
+ </p>
372
+
373
+
374
+ </div>
375
+
376
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-60">
377
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-60</code></h4>
378
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-60</span> <span class="token punctuation">{</span>
379
+ <span class="token property">width</span><span class="token punctuation">:</span> 60%<span class="token punctuation">;</span>
380
+ <span class="token punctuation">}</span></pre>
381
+ </div>
382
+ <div class="ml-3">
383
+ <p class="p">
384
+
385
+ </p>
386
+
387
+
388
+ </div>
389
+
390
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-70">
391
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-70</code></h4>
392
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-70</span> <span class="token punctuation">{</span>
393
+ <span class="token property">width</span><span class="token punctuation">:</span> 70%<span class="token punctuation">;</span>
394
+ <span class="token punctuation">}</span></pre>
395
+ </div>
396
+ <div class="ml-3">
397
+ <p class="p">
398
+
399
+ </p>
400
+
401
+
402
+ </div>
403
+
404
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-75">
405
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-75</code></h4>
406
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-75</span> <span class="token punctuation">{</span>
407
+ <span class="token property">width</span><span class="token punctuation">:</span> 75%<span class="token punctuation">;</span>
408
+ <span class="token punctuation">}</span></pre>
409
+ </div>
410
+ <div class="ml-3">
411
+ <p class="p">
412
+
413
+ </p>
414
+
415
+
416
+ </div>
417
+
418
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-80">
419
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-80</code></h4>
420
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-80</span> <span class="token punctuation">{</span>
421
+ <span class="token property">width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
422
+ <span class="token punctuation">}</span></pre>
423
+ </div>
424
+ <div class="ml-3">
425
+ <p class="p">
426
+
427
+ </p>
428
+
429
+
430
+ </div>
431
+
432
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-90">
433
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-90</code></h4>
434
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-90</span> <span class="token punctuation">{</span>
435
+ <span class="token property">width</span><span class="token punctuation">:</span> 90%<span class="token punctuation">;</span>
436
+ <span class="token punctuation">}</span></pre>
437
+ </div>
438
+ <div class="ml-3">
439
+ <p class="p">
440
+
441
+ </p>
442
+
443
+
444
+ </div>
445
+
446
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-100">
447
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-100</code></h4>
448
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-100</span> <span class="token punctuation">{</span>
449
+ <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
450
+ <span class="token punctuation">}</span></pre>
451
+ </div>
452
+ <div class="ml-3">
453
+ <p class="p">
454
+
455
+ </p>
456
+
457
+
458
+ </div>
459
+
460
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-third">
461
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-third</code></h4>
462
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-third</span> <span class="token punctuation">{</span>
463
+ <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% / 3<span class="token punctuation">)</span><span class="token punctuation">;</span>
464
+ <span class="token punctuation">}</span></pre>
465
+ </div>
466
+ <div class="ml-3">
467
+ <p class="p">
468
+
469
+ </p>
470
+
471
+
472
+ </div>
473
+
474
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-two-thirds">
475
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-two-thirds</code></h4>
476
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-two-thirds</span> <span class="token punctuation">{</span>
477
+ <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% / 1.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
478
+ <span class="token punctuation">}</span></pre>
479
+ </div>
480
+ <div class="ml-3">
481
+ <p class="p">
482
+
483
+ </p>
484
+
485
+
486
+ </div>
487
+
488
+
489
+ <h3 class="f-5 mt-4" id="class-scale:width-view-width">Width View Width</h3>
490
+ <p class="p">
491
+ <p>View-width percentage widths</p>
492
+
493
+ </p>
494
+
495
+
496
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-10vw">
497
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-10vw</code></h4>
498
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-10vw</span> <span class="token punctuation">{</span>
499
+ <span class="token property">width</span><span class="token punctuation">:</span> 10vw<span class="token punctuation">;</span>
500
+ <span class="token punctuation">}</span></pre>
501
+ </div>
502
+ <div class="ml-3">
503
+ <p class="p">
504
+
505
+ </p>
506
+
507
+
508
+ </div>
509
+
510
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-20vw">
511
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-20vw</code></h4>
512
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-20vw</span> <span class="token punctuation">{</span>
513
+ <span class="token property">width</span><span class="token punctuation">:</span> 20vw<span class="token punctuation">;</span>
514
+ <span class="token punctuation">}</span></pre>
515
+ </div>
516
+ <div class="ml-3">
517
+ <p class="p">
518
+
519
+ </p>
520
+
521
+
522
+ </div>
523
+
524
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-30vw">
525
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-30vw</code></h4>
526
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-30vw</span> <span class="token punctuation">{</span>
527
+ <span class="token property">width</span><span class="token punctuation">:</span> 30vw<span class="token punctuation">;</span>
528
+ <span class="token punctuation">}</span></pre>
529
+ </div>
530
+ <div class="ml-3">
531
+ <p class="p">
532
+
533
+ </p>
534
+
535
+
536
+ </div>
537
+
538
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-40vw">
539
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-40vw</code></h4>
540
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-40vw</span> <span class="token punctuation">{</span>
541
+ <span class="token property">width</span><span class="token punctuation">:</span> 40vw<span class="token punctuation">;</span>
542
+ <span class="token punctuation">}</span></pre>
543
+ </div>
544
+ <div class="ml-3">
545
+ <p class="p">
546
+
547
+ </p>
548
+
549
+
550
+ </div>
551
+
552
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-50vw">
553
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-50vw</code></h4>
554
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-50vw</span> <span class="token punctuation">{</span>
555
+ <span class="token property">width</span><span class="token punctuation">:</span> 50vw<span class="token punctuation">;</span>
556
+ <span class="token punctuation">}</span></pre>
557
+ </div>
558
+ <div class="ml-3">
559
+ <p class="p">
560
+
561
+ </p>
562
+
563
+
564
+ </div>
565
+
566
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-60vw">
567
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-60vw</code></h4>
568
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-60vw</span> <span class="token punctuation">{</span>
569
+ <span class="token property">width</span><span class="token punctuation">:</span> 60vw<span class="token punctuation">;</span>
570
+ <span class="token punctuation">}</span></pre>
571
+ </div>
572
+ <div class="ml-3">
573
+ <p class="p">
574
+
575
+ </p>
576
+
577
+
578
+ </div>
579
+
580
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-70vw">
581
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-70vw</code></h4>
582
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-70vw</span> <span class="token punctuation">{</span>
583
+ <span class="token property">width</span><span class="token punctuation">:</span> 70vw<span class="token punctuation">;</span>
584
+ <span class="token punctuation">}</span></pre>
585
+ </div>
586
+ <div class="ml-3">
587
+ <p class="p">
588
+
589
+ </p>
590
+
591
+
592
+ </div>
593
+
594
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-80vw">
595
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-80vw</code></h4>
596
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-80vw</span> <span class="token punctuation">{</span>
597
+ <span class="token property">width</span><span class="token punctuation">:</span> 80vw<span class="token punctuation">;</span>
598
+ <span class="token punctuation">}</span></pre>
599
+ </div>
600
+ <div class="ml-3">
601
+ <p class="p">
602
+
603
+ </p>
604
+
605
+
606
+ </div>
607
+
608
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-90vw">
609
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-90vw</code></h4>
610
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-90vw</span> <span class="token punctuation">{</span>
611
+ <span class="token property">width</span><span class="token punctuation">:</span> 90vw<span class="token punctuation">;</span>
612
+ <span class="token punctuation">}</span></pre>
613
+ </div>
614
+ <div class="ml-3">
615
+ <p class="p">
616
+
617
+ </p>
618
+
619
+
620
+ </div>
621
+
622
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-100vw">
623
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-100vw</code></h4>
624
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-100vw</span> <span class="token punctuation">{</span>
625
+ <span class="token property">width</span><span class="token punctuation">:</span> 100vw<span class="token punctuation">;</span>
626
+ <span class="token punctuation">}</span></pre>
627
+ </div>
628
+ <div class="ml-3">
629
+ <p class="p">
630
+
631
+ </p>
632
+
633
+
634
+ </div>
635
+
636
+ <div class="mt-4 flex gap-3 items-center justify-between" id="w-auto">
637
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.w-auto</code></h4>
638
+ <pre class="f-3 highlighted-code"><span class="token selector">.w-auto</span> <span class="token punctuation">{</span>
639
+ <span class="token property">width</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
640
+ <span class="token punctuation">}</span></pre>
641
+ </div>
642
+ <div class="ml-3">
643
+ <p class="p">
644
+
645
+ </p>
646
+
647
+
648
+ </div>
649
+
650
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-1">
651
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-1</code></h4>
652
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-1</span> <span class="token punctuation">{</span>
653
+ <span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
654
+ <span class="token punctuation">}</span></pre>
655
+ </div>
656
+ <div class="ml-3">
657
+ <p class="p">
658
+ <p>Numeric/fixed maximum widths.</p>
659
+
660
+ </p>
661
+
662
+
663
+ </div>
664
+
665
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-2">
666
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-2</code></h4>
667
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-2</span> <span class="token punctuation">{</span>
668
+ <span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
669
+ <span class="token punctuation">}</span></pre>
670
+ </div>
671
+ <div class="ml-3">
672
+ <p class="p">
673
+
674
+ </p>
675
+
676
+
677
+ </div>
678
+
679
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-3">
680
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-3</code></h4>
681
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-3</span> <span class="token punctuation">{</span>
682
+ <span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
683
+ <span class="token punctuation">}</span></pre>
684
+ </div>
685
+ <div class="ml-3">
686
+ <p class="p">
687
+
688
+ </p>
689
+
690
+
691
+ </div>
692
+
693
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-4">
694
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-4</code></h4>
695
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-4</span> <span class="token punctuation">{</span>
696
+ <span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
697
+ <span class="token punctuation">}</span></pre>
698
+ </div>
699
+ <div class="ml-3">
700
+ <p class="p">
701
+
702
+ </p>
703
+
704
+
705
+ </div>
706
+
707
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-5">
708
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-5</code></h4>
709
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-5</span> <span class="token punctuation">{</span>
710
+ <span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
711
+ <span class="token punctuation">}</span></pre>
712
+ </div>
713
+ <div class="ml-3">
714
+ <p class="p">
715
+
716
+ </p>
717
+
718
+
719
+ </div>
720
+
721
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-6">
722
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-6</code></h4>
723
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-6</span> <span class="token punctuation">{</span>
724
+ <span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
725
+ <span class="token punctuation">}</span></pre>
726
+ </div>
727
+ <div class="ml-3">
728
+ <p class="p">
729
+
730
+ </p>
731
+
732
+
733
+ </div>
734
+
735
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-7">
736
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-7</code></h4>
737
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-7</span> <span class="token punctuation">{</span>
738
+ <span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
739
+ <span class="token punctuation">}</span></pre>
740
+ </div>
741
+ <div class="ml-3">
742
+ <p class="p">
743
+
744
+ </p>
745
+
746
+
747
+ </div>
748
+
749
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-8">
750
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-8</code></h4>
751
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-8</span> <span class="token punctuation">{</span>
752
+ <span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
753
+ <span class="token punctuation">}</span></pre>
754
+ </div>
755
+ <div class="ml-3">
756
+ <p class="p">
757
+
758
+ </p>
759
+
760
+
761
+ </div>
762
+
763
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-10">
764
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-10</code></h4>
765
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-10</span> <span class="token punctuation">{</span>
766
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
767
+ <span class="token punctuation">}</span></pre>
768
+ </div>
769
+ <div class="ml-3">
770
+ <p class="p">
771
+ <p>Percentage-based maximum widths.</p>
772
+
773
+ </p>
774
+
775
+
776
+ </div>
777
+
778
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-20">
779
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-20</code></h4>
780
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-20</span> <span class="token punctuation">{</span>
781
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 20%<span class="token punctuation">;</span>
782
+ <span class="token punctuation">}</span></pre>
783
+ </div>
784
+ <div class="ml-3">
785
+ <p class="p">
786
+
787
+ </p>
788
+
789
+
790
+ </div>
791
+
792
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-25">
793
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-25</code></h4>
794
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-25</span> <span class="token punctuation">{</span>
795
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 25%<span class="token punctuation">;</span>
796
+ <span class="token punctuation">}</span></pre>
797
+ </div>
798
+ <div class="ml-3">
799
+ <p class="p">
800
+
801
+ </p>
802
+
803
+
804
+ </div>
805
+
806
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-30">
807
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-30</code></h4>
808
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-30</span> <span class="token punctuation">{</span>
809
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 30%<span class="token punctuation">;</span>
810
+ <span class="token punctuation">}</span></pre>
811
+ </div>
812
+ <div class="ml-3">
813
+ <p class="p">
814
+
815
+ </p>
816
+
817
+
818
+ </div>
819
+
820
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-40">
821
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-40</code></h4>
822
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-40</span> <span class="token punctuation">{</span>
823
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 40%<span class="token punctuation">;</span>
824
+ <span class="token punctuation">}</span></pre>
825
+ </div>
826
+ <div class="ml-3">
827
+ <p class="p">
828
+
829
+ </p>
830
+
831
+
832
+ </div>
833
+
834
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-50">
835
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-50</code></h4>
836
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-50</span> <span class="token punctuation">{</span>
837
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
838
+ <span class="token punctuation">}</span></pre>
839
+ </div>
840
+ <div class="ml-3">
841
+ <p class="p">
842
+
843
+ </p>
844
+
845
+
846
+ </div>
847
+
848
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-60">
849
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-60</code></h4>
850
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-60</span> <span class="token punctuation">{</span>
851
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 60%<span class="token punctuation">;</span>
852
+ <span class="token punctuation">}</span></pre>
853
+ </div>
854
+ <div class="ml-3">
855
+ <p class="p">
856
+
857
+ </p>
858
+
859
+
860
+ </div>
861
+
862
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-70">
863
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-70</code></h4>
864
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-70</span> <span class="token punctuation">{</span>
865
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 70%<span class="token punctuation">;</span>
866
+ <span class="token punctuation">}</span></pre>
867
+ </div>
868
+ <div class="ml-3">
869
+ <p class="p">
870
+
871
+ </p>
872
+
873
+
874
+ </div>
875
+
876
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-75">
877
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-75</code></h4>
878
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-75</span> <span class="token punctuation">{</span>
879
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 75%<span class="token punctuation">;</span>
880
+ <span class="token punctuation">}</span></pre>
881
+ </div>
882
+ <div class="ml-3">
883
+ <p class="p">
884
+
885
+ </p>
886
+
887
+
888
+ </div>
889
+
890
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-80">
891
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-80</code></h4>
892
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-80</span> <span class="token punctuation">{</span>
893
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
894
+ <span class="token punctuation">}</span></pre>
895
+ </div>
896
+ <div class="ml-3">
897
+ <p class="p">
898
+
899
+ </p>
900
+
901
+
902
+ </div>
903
+
904
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-90">
905
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-90</code></h4>
906
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-90</span> <span class="token punctuation">{</span>
907
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 90%<span class="token punctuation">;</span>
908
+ <span class="token punctuation">}</span></pre>
909
+ </div>
910
+ <div class="ml-3">
911
+ <p class="p">
912
+
913
+ </p>
914
+
915
+
916
+ </div>
917
+
918
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-100">
919
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-100</code></h4>
920
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-100</span> <span class="token punctuation">{</span>
921
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
922
+ <span class="token punctuation">}</span></pre>
923
+ </div>
924
+ <div class="ml-3">
925
+ <p class="p">
926
+
927
+ </p>
928
+
929
+
930
+ </div>
931
+
932
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-third">
933
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-third</code></h4>
934
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-third</span> <span class="token punctuation">{</span>
935
+ <span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% / 3<span class="token punctuation">)</span><span class="token punctuation">;</span>
936
+ <span class="token punctuation">}</span></pre>
937
+ </div>
938
+ <div class="ml-3">
939
+ <p class="p">
940
+
941
+ </p>
942
+
943
+
944
+ </div>
945
+
946
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-two-thirds">
947
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-two-thirds</code></h4>
948
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-two-thirds</span> <span class="token punctuation">{</span>
949
+ <span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% / 1.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
950
+ <span class="token punctuation">}</span></pre>
951
+ </div>
952
+ <div class="ml-3">
953
+ <p class="p">
954
+
955
+ </p>
956
+
957
+
958
+ </div>
959
+
960
+
961
+ <h3 class="f-5 mt-4" id="class-scale:width-view-max-width">Width View Max Width</h3>
962
+ <p class="p">
963
+ <p>View-width percentage maximum widths</p>
964
+
965
+ </p>
966
+
967
+
968
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-10vw">
969
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-10vw</code></h4>
970
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-10vw</span> <span class="token punctuation">{</span>
971
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 10vw<span class="token punctuation">;</span>
972
+ <span class="token punctuation">}</span></pre>
973
+ </div>
974
+ <div class="ml-3">
975
+ <p class="p">
976
+
977
+ </p>
978
+
979
+
980
+ </div>
981
+
982
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-20vw">
983
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-20vw</code></h4>
984
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-20vw</span> <span class="token punctuation">{</span>
985
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 20vw<span class="token punctuation">;</span>
986
+ <span class="token punctuation">}</span></pre>
987
+ </div>
988
+ <div class="ml-3">
989
+ <p class="p">
990
+
991
+ </p>
992
+
993
+
994
+ </div>
995
+
996
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-30vw">
997
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-30vw</code></h4>
998
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-30vw</span> <span class="token punctuation">{</span>
999
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 30vw<span class="token punctuation">;</span>
1000
+ <span class="token punctuation">}</span></pre>
1001
+ </div>
1002
+ <div class="ml-3">
1003
+ <p class="p">
1004
+
1005
+ </p>
1006
+
1007
+
1008
+ </div>
1009
+
1010
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-40vw">
1011
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-40vw</code></h4>
1012
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-40vw</span> <span class="token punctuation">{</span>
1013
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 40vw<span class="token punctuation">;</span>
1014
+ <span class="token punctuation">}</span></pre>
1015
+ </div>
1016
+ <div class="ml-3">
1017
+ <p class="p">
1018
+
1019
+ </p>
1020
+
1021
+
1022
+ </div>
1023
+
1024
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-50vw">
1025
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-50vw</code></h4>
1026
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-50vw</span> <span class="token punctuation">{</span>
1027
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 50vw<span class="token punctuation">;</span>
1028
+ <span class="token punctuation">}</span></pre>
1029
+ </div>
1030
+ <div class="ml-3">
1031
+ <p class="p">
1032
+
1033
+ </p>
1034
+
1035
+
1036
+ </div>
1037
+
1038
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-60vw">
1039
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-60vw</code></h4>
1040
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-60vw</span> <span class="token punctuation">{</span>
1041
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 60vw<span class="token punctuation">;</span>
1042
+ <span class="token punctuation">}</span></pre>
1043
+ </div>
1044
+ <div class="ml-3">
1045
+ <p class="p">
1046
+
1047
+ </p>
1048
+
1049
+
1050
+ </div>
1051
+
1052
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-70vw">
1053
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-70vw</code></h4>
1054
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-70vw</span> <span class="token punctuation">{</span>
1055
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 70vw<span class="token punctuation">;</span>
1056
+ <span class="token punctuation">}</span></pre>
1057
+ </div>
1058
+ <div class="ml-3">
1059
+ <p class="p">
1060
+
1061
+ </p>
1062
+
1063
+
1064
+ </div>
1065
+
1066
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-80vw">
1067
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-80vw</code></h4>
1068
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-80vw</span> <span class="token punctuation">{</span>
1069
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 80vw<span class="token punctuation">;</span>
1070
+ <span class="token punctuation">}</span></pre>
1071
+ </div>
1072
+ <div class="ml-3">
1073
+ <p class="p">
1074
+
1075
+ </p>
1076
+
1077
+
1078
+ </div>
1079
+
1080
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-90vw">
1081
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-90vw</code></h4>
1082
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-90vw</span> <span class="token punctuation">{</span>
1083
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 90vw<span class="token punctuation">;</span>
1084
+ <span class="token punctuation">}</span></pre>
1085
+ </div>
1086
+ <div class="ml-3">
1087
+ <p class="p">
1088
+
1089
+ </p>
1090
+
1091
+
1092
+ </div>
1093
+
1094
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mw-100vw">
1095
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mw-100vw</code></h4>
1096
+ <pre class="f-3 highlighted-code"><span class="token selector">.mw-100vw</span> <span class="token punctuation">{</span>
1097
+ <span class="token property">max-width</span><span class="token punctuation">:</span> 100vw<span class="token punctuation">;</span>
1098
+ <span class="token punctuation">}</span></pre>
1099
+ </div>
1100
+ <div class="ml-3">
1101
+ <p class="p">
1102
+
1103
+ </p>
1104
+
1105
+
1106
+ </div>
1107
+
1108
+
1109
+ <h3 class="f-5 mt-4" id="class-scale:min-width">Min Width</h3>
1110
+ <p class="p">
1111
+ <p>Numeric/fixed minimum widths</p>
1112
+
1113
+ </p>
1114
+
1115
+
1116
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-1">
1117
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-1</code></h4>
1118
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-1</span> <span class="token punctuation">{</span>
1119
+ <span class="token property">min-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
1120
+ <span class="token punctuation">}</span></pre>
1121
+ </div>
1122
+ <div class="ml-3">
1123
+ <p class="p">
1124
+
1125
+ </p>
1126
+
1127
+
1128
+ </div>
1129
+
1130
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-2">
1131
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-2</code></h4>
1132
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-2</span> <span class="token punctuation">{</span>
1133
+ <span class="token property">min-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
1134
+ <span class="token punctuation">}</span></pre>
1135
+ </div>
1136
+ <div class="ml-3">
1137
+ <p class="p">
1138
+
1139
+ </p>
1140
+
1141
+
1142
+ </div>
1143
+
1144
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-3">
1145
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-3</code></h4>
1146
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-3</span> <span class="token punctuation">{</span>
1147
+ <span class="token property">min-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
1148
+ <span class="token punctuation">}</span></pre>
1149
+ </div>
1150
+ <div class="ml-3">
1151
+ <p class="p">
1152
+
1153
+ </p>
1154
+
1155
+
1156
+ </div>
1157
+
1158
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-4">
1159
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-4</code></h4>
1160
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-4</span> <span class="token punctuation">{</span>
1161
+ <span class="token property">min-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
1162
+ <span class="token punctuation">}</span></pre>
1163
+ </div>
1164
+ <div class="ml-3">
1165
+ <p class="p">
1166
+
1167
+ </p>
1168
+
1169
+
1170
+ </div>
1171
+
1172
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-5">
1173
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-5</code></h4>
1174
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-5</span> <span class="token punctuation">{</span>
1175
+ <span class="token property">min-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
1176
+ <span class="token punctuation">}</span></pre>
1177
+ </div>
1178
+ <div class="ml-3">
1179
+ <p class="p">
1180
+
1181
+ </p>
1182
+
1183
+
1184
+ </div>
1185
+
1186
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-6">
1187
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-6</code></h4>
1188
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-6</span> <span class="token punctuation">{</span>
1189
+ <span class="token property">min-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
1190
+ <span class="token punctuation">}</span></pre>
1191
+ </div>
1192
+ <div class="ml-3">
1193
+ <p class="p">
1194
+
1195
+ </p>
1196
+
1197
+
1198
+ </div>
1199
+
1200
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-7">
1201
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-7</code></h4>
1202
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-7</span> <span class="token punctuation">{</span>
1203
+ <span class="token property">min-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
1204
+ <span class="token punctuation">}</span></pre>
1205
+ </div>
1206
+ <div class="ml-3">
1207
+ <p class="p">
1208
+
1209
+ </p>
1210
+
1211
+
1212
+ </div>
1213
+
1214
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-8">
1215
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-8</code></h4>
1216
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-8</span> <span class="token punctuation">{</span>
1217
+ <span class="token property">min-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
1218
+ <span class="token punctuation">}</span></pre>
1219
+ </div>
1220
+ <div class="ml-3">
1221
+ <p class="p">
1222
+
1223
+ </p>
1224
+
1225
+
1226
+ </div>
1227
+
1228
+
1229
+ <h3 class="f-5 mt-4" id="class-scale:min-width-percent">Min Width Percent</h3>
1230
+ <p class="p">
1231
+ <p>Percentage-based minimum widths</p>
1232
+
1233
+ </p>
1234
+
1235
+
1236
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-10">
1237
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-10</code></h4>
1238
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-10</span> <span class="token punctuation">{</span>
1239
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
1240
+ <span class="token punctuation">}</span></pre>
1241
+ </div>
1242
+ <div class="ml-3">
1243
+ <p class="p">
1244
+
1245
+ </p>
1246
+
1247
+
1248
+ </div>
1249
+
1250
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-20">
1251
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-20</code></h4>
1252
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-20</span> <span class="token punctuation">{</span>
1253
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 20%<span class="token punctuation">;</span>
1254
+ <span class="token punctuation">}</span></pre>
1255
+ </div>
1256
+ <div class="ml-3">
1257
+ <p class="p">
1258
+
1259
+ </p>
1260
+
1261
+
1262
+ </div>
1263
+
1264
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-25">
1265
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-25</code></h4>
1266
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-25</span> <span class="token punctuation">{</span>
1267
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 25%<span class="token punctuation">;</span>
1268
+ <span class="token punctuation">}</span></pre>
1269
+ </div>
1270
+ <div class="ml-3">
1271
+ <p class="p">
1272
+
1273
+ </p>
1274
+
1275
+
1276
+ </div>
1277
+
1278
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-30">
1279
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-30</code></h4>
1280
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-30</span> <span class="token punctuation">{</span>
1281
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 30%<span class="token punctuation">;</span>
1282
+ <span class="token punctuation">}</span></pre>
1283
+ </div>
1284
+ <div class="ml-3">
1285
+ <p class="p">
1286
+
1287
+ </p>
1288
+
1289
+
1290
+ </div>
1291
+
1292
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-40">
1293
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-40</code></h4>
1294
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-40</span> <span class="token punctuation">{</span>
1295
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 40%<span class="token punctuation">;</span>
1296
+ <span class="token punctuation">}</span></pre>
1297
+ </div>
1298
+ <div class="ml-3">
1299
+ <p class="p">
1300
+
1301
+ </p>
1302
+
1303
+
1304
+ </div>
1305
+
1306
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-50">
1307
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-50</code></h4>
1308
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-50</span> <span class="token punctuation">{</span>
1309
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
1310
+ <span class="token punctuation">}</span></pre>
1311
+ </div>
1312
+ <div class="ml-3">
1313
+ <p class="p">
1314
+
1315
+ </p>
1316
+
1317
+
1318
+ </div>
1319
+
1320
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-60">
1321
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-60</code></h4>
1322
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-60</span> <span class="token punctuation">{</span>
1323
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 60%<span class="token punctuation">;</span>
1324
+ <span class="token punctuation">}</span></pre>
1325
+ </div>
1326
+ <div class="ml-3">
1327
+ <p class="p">
1328
+
1329
+ </p>
1330
+
1331
+
1332
+ </div>
1333
+
1334
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-70">
1335
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-70</code></h4>
1336
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-70</span> <span class="token punctuation">{</span>
1337
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 70%<span class="token punctuation">;</span>
1338
+ <span class="token punctuation">}</span></pre>
1339
+ </div>
1340
+ <div class="ml-3">
1341
+ <p class="p">
1342
+
1343
+ </p>
1344
+
1345
+
1346
+ </div>
1347
+
1348
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-75">
1349
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-75</code></h4>
1350
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-75</span> <span class="token punctuation">{</span>
1351
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 75%<span class="token punctuation">;</span>
1352
+ <span class="token punctuation">}</span></pre>
1353
+ </div>
1354
+ <div class="ml-3">
1355
+ <p class="p">
1356
+
1357
+ </p>
1358
+
1359
+
1360
+ </div>
1361
+
1362
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-80">
1363
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-80</code></h4>
1364
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-80</span> <span class="token punctuation">{</span>
1365
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
1366
+ <span class="token punctuation">}</span></pre>
1367
+ </div>
1368
+ <div class="ml-3">
1369
+ <p class="p">
1370
+
1371
+ </p>
1372
+
1373
+
1374
+ </div>
1375
+
1376
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-90">
1377
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-90</code></h4>
1378
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-90</span> <span class="token punctuation">{</span>
1379
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 90%<span class="token punctuation">;</span>
1380
+ <span class="token punctuation">}</span></pre>
1381
+ </div>
1382
+ <div class="ml-3">
1383
+ <p class="p">
1384
+
1385
+ </p>
1386
+
1387
+
1388
+ </div>
1389
+
1390
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-100">
1391
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-100</code></h4>
1392
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-100</span> <span class="token punctuation">{</span>
1393
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
1394
+ <span class="token punctuation">}</span></pre>
1395
+ </div>
1396
+ <div class="ml-3">
1397
+ <p class="p">
1398
+
1399
+ </p>
1400
+
1401
+
1402
+ </div>
1403
+
1404
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-third">
1405
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-third</code></h4>
1406
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-third</span> <span class="token punctuation">{</span>
1407
+ <span class="token property">min-width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% / 3<span class="token punctuation">)</span><span class="token punctuation">;</span>
1408
+ <span class="token punctuation">}</span></pre>
1409
+ </div>
1410
+ <div class="ml-3">
1411
+ <p class="p">
1412
+
1413
+ </p>
1414
+
1415
+
1416
+ </div>
1417
+
1418
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-two-thirds">
1419
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-two-thirds</code></h4>
1420
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-two-thirds</span> <span class="token punctuation">{</span>
1421
+ <span class="token property">min-width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% / 1.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
1422
+ <span class="token punctuation">}</span></pre>
1423
+ </div>
1424
+ <div class="ml-3">
1425
+ <p class="p">
1426
+
1427
+ </p>
1428
+
1429
+
1430
+ </div>
1431
+
1432
+
1433
+ <h3 class="f-5 mt-4" id="class-scale:min-width-view-width">Min Width View Width</h3>
1434
+ <p class="p">
1435
+ <p>View-width-based minimum widths</p>
1436
+
1437
+ </p>
1438
+
1439
+
1440
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-10vw">
1441
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-10vw</code></h4>
1442
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-10vw</span> <span class="token punctuation">{</span>
1443
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 10vw<span class="token punctuation">;</span>
1444
+ <span class="token punctuation">}</span></pre>
1445
+ </div>
1446
+ <div class="ml-3">
1447
+ <p class="p">
1448
+
1449
+ </p>
1450
+
1451
+
1452
+ </div>
1453
+
1454
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-20vw">
1455
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-20vw</code></h4>
1456
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-20vw</span> <span class="token punctuation">{</span>
1457
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 20vw<span class="token punctuation">;</span>
1458
+ <span class="token punctuation">}</span></pre>
1459
+ </div>
1460
+ <div class="ml-3">
1461
+ <p class="p">
1462
+
1463
+ </p>
1464
+
1465
+
1466
+ </div>
1467
+
1468
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-30vw">
1469
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-30vw</code></h4>
1470
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-30vw</span> <span class="token punctuation">{</span>
1471
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 30vw<span class="token punctuation">;</span>
1472
+ <span class="token punctuation">}</span></pre>
1473
+ </div>
1474
+ <div class="ml-3">
1475
+ <p class="p">
1476
+
1477
+ </p>
1478
+
1479
+
1480
+ </div>
1481
+
1482
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-40vw">
1483
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-40vw</code></h4>
1484
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-40vw</span> <span class="token punctuation">{</span>
1485
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 40vw<span class="token punctuation">;</span>
1486
+ <span class="token punctuation">}</span></pre>
1487
+ </div>
1488
+ <div class="ml-3">
1489
+ <p class="p">
1490
+
1491
+ </p>
1492
+
1493
+
1494
+ </div>
1495
+
1496
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-50vw">
1497
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-50vw</code></h4>
1498
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-50vw</span> <span class="token punctuation">{</span>
1499
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 50vw<span class="token punctuation">;</span>
1500
+ <span class="token punctuation">}</span></pre>
1501
+ </div>
1502
+ <div class="ml-3">
1503
+ <p class="p">
1504
+
1505
+ </p>
1506
+
1507
+
1508
+ </div>
1509
+
1510
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-60vw">
1511
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-60vw</code></h4>
1512
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-60vw</span> <span class="token punctuation">{</span>
1513
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 60vw<span class="token punctuation">;</span>
1514
+ <span class="token punctuation">}</span></pre>
1515
+ </div>
1516
+ <div class="ml-3">
1517
+ <p class="p">
1518
+
1519
+ </p>
1520
+
1521
+
1522
+ </div>
1523
+
1524
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-70vw">
1525
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-70vw</code></h4>
1526
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-70vw</span> <span class="token punctuation">{</span>
1527
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 70vw<span class="token punctuation">;</span>
1528
+ <span class="token punctuation">}</span></pre>
1529
+ </div>
1530
+ <div class="ml-3">
1531
+ <p class="p">
1532
+
1533
+ </p>
1534
+
1535
+
1536
+ </div>
1537
+
1538
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-80vw">
1539
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-80vw</code></h4>
1540
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-80vw</span> <span class="token punctuation">{</span>
1541
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 80vw<span class="token punctuation">;</span>
1542
+ <span class="token punctuation">}</span></pre>
1543
+ </div>
1544
+ <div class="ml-3">
1545
+ <p class="p">
1546
+
1547
+ </p>
1548
+
1549
+
1550
+ </div>
1551
+
1552
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-90vw">
1553
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-90vw</code></h4>
1554
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-90vw</span> <span class="token punctuation">{</span>
1555
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 90vw<span class="token punctuation">;</span>
1556
+ <span class="token punctuation">}</span></pre>
1557
+ </div>
1558
+ <div class="ml-3">
1559
+ <p class="p">
1560
+
1561
+ </p>
1562
+
1563
+
1564
+ </div>
1565
+
1566
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-100vw">
1567
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-100vw</code></h4>
1568
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-100vw</span> <span class="token punctuation">{</span>
1569
+ <span class="token property">min-width</span><span class="token punctuation">:</span> 100vw<span class="token punctuation">;</span>
1570
+ <span class="token punctuation">}</span></pre>
1571
+ </div>
1572
+ <div class="ml-3">
1573
+ <p class="p">
1574
+
1575
+ </p>
1576
+
1577
+
1578
+ </div>
1579
+
1580
+ <div class="mt-4 flex gap-3 items-center justify-between" id="minw-auto">
1581
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.minw-auto</code></h4>
1582
+ <pre class="f-3 highlighted-code"><span class="token selector">.minw-auto</span> <span class="token punctuation">{</span>
1583
+ <span class="token property">min-width</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
1584
+ <span class="token punctuation">}</span></pre>
1585
+ </div>
1586
+ <div class="ml-3">
1587
+ <p class="p">
1588
+
1589
+ </p>
1590
+
1591
+
1592
+ </div>
1593
+
1594
+
1595
+ <h3 class="f-5 mt-4" id="class-scale:heights">Heights</h3>
1596
+ <p class="p">
1597
+ <p>Numeric/fixed heights.</p>
1598
+
1599
+ </p>
1600
+
1601
+
1602
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-1">
1603
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-1</code></h4>
1604
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-1</span> <span class="token punctuation">{</span>
1605
+ <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
1606
+ <span class="token punctuation">}</span></pre>
1607
+ </div>
1608
+ <div class="ml-3">
1609
+ <p class="p">
1610
+
1611
+ </p>
1612
+
1613
+
1614
+ </div>
1615
+
1616
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-2">
1617
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-2</code></h4>
1618
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-2</span> <span class="token punctuation">{</span>
1619
+ <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
1620
+ <span class="token punctuation">}</span></pre>
1621
+ </div>
1622
+ <div class="ml-3">
1623
+ <p class="p">
1624
+
1625
+ </p>
1626
+
1627
+
1628
+ </div>
1629
+
1630
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-3">
1631
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-3</code></h4>
1632
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-3</span> <span class="token punctuation">{</span>
1633
+ <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
1634
+ <span class="token punctuation">}</span></pre>
1635
+ </div>
1636
+ <div class="ml-3">
1637
+ <p class="p">
1638
+
1639
+ </p>
1640
+
1641
+
1642
+ </div>
1643
+
1644
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-4">
1645
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-4</code></h4>
1646
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-4</span> <span class="token punctuation">{</span>
1647
+ <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
1648
+ <span class="token punctuation">}</span></pre>
1649
+ </div>
1650
+ <div class="ml-3">
1651
+ <p class="p">
1652
+
1653
+ </p>
1654
+
1655
+
1656
+ </div>
1657
+
1658
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-5">
1659
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-5</code></h4>
1660
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-5</span> <span class="token punctuation">{</span>
1661
+ <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
1662
+ <span class="token punctuation">}</span></pre>
1663
+ </div>
1664
+ <div class="ml-3">
1665
+ <p class="p">
1666
+
1667
+ </p>
1668
+
1669
+
1670
+ </div>
1671
+
1672
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-6">
1673
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-6</code></h4>
1674
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-6</span> <span class="token punctuation">{</span>
1675
+ <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
1676
+ <span class="token punctuation">}</span></pre>
1677
+ </div>
1678
+ <div class="ml-3">
1679
+ <p class="p">
1680
+
1681
+ </p>
1682
+
1683
+
1684
+ </div>
1685
+
1686
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-7">
1687
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-7</code></h4>
1688
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-7</span> <span class="token punctuation">{</span>
1689
+ <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
1690
+ <span class="token punctuation">}</span></pre>
1691
+ </div>
1692
+ <div class="ml-3">
1693
+ <p class="p">
1694
+
1695
+ </p>
1696
+
1697
+
1698
+ </div>
1699
+
1700
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-8">
1701
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-8</code></h4>
1702
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-8</span> <span class="token punctuation">{</span>
1703
+ <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
1704
+ <span class="token punctuation">}</span></pre>
1705
+ </div>
1706
+ <div class="ml-3">
1707
+ <p class="p">
1708
+
1709
+ </p>
1710
+
1711
+
1712
+ </div>
1713
+
1714
+
1715
+ <h3 class="f-5 mt-4" id="class-scale:height-percent">Height Percent</h3>
1716
+ <p class="p">
1717
+ <p>Percentage heights.</p>
1718
+
1719
+ </p>
1720
+
1721
+
1722
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-10">
1723
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-10</code></h4>
1724
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-10</span> <span class="token punctuation">{</span>
1725
+ <span class="token property">height</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
1726
+ <span class="token punctuation">}</span></pre>
1727
+ </div>
1728
+ <div class="ml-3">
1729
+ <p class="p">
1730
+
1731
+ </p>
1732
+
1733
+
1734
+ </div>
1735
+
1736
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-20">
1737
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-20</code></h4>
1738
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-20</span> <span class="token punctuation">{</span>
1739
+ <span class="token property">height</span><span class="token punctuation">:</span> 20%<span class="token punctuation">;</span>
1740
+ <span class="token punctuation">}</span></pre>
1741
+ </div>
1742
+ <div class="ml-3">
1743
+ <p class="p">
1744
+
1745
+ </p>
1746
+
1747
+
1748
+ </div>
1749
+
1750
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-25">
1751
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-25</code></h4>
1752
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-25</span> <span class="token punctuation">{</span>
1753
+ <span class="token property">height</span><span class="token punctuation">:</span> 25%<span class="token punctuation">;</span>
1754
+ <span class="token punctuation">}</span></pre>
1755
+ </div>
1756
+ <div class="ml-3">
1757
+ <p class="p">
1758
+
1759
+ </p>
1760
+
1761
+
1762
+ </div>
1763
+
1764
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-30">
1765
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-30</code></h4>
1766
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-30</span> <span class="token punctuation">{</span>
1767
+ <span class="token property">height</span><span class="token punctuation">:</span> 30%<span class="token punctuation">;</span>
1768
+ <span class="token punctuation">}</span></pre>
1769
+ </div>
1770
+ <div class="ml-3">
1771
+ <p class="p">
1772
+
1773
+ </p>
1774
+
1775
+
1776
+ </div>
1777
+
1778
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-40">
1779
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-40</code></h4>
1780
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-40</span> <span class="token punctuation">{</span>
1781
+ <span class="token property">height</span><span class="token punctuation">:</span> 40%<span class="token punctuation">;</span>
1782
+ <span class="token punctuation">}</span></pre>
1783
+ </div>
1784
+ <div class="ml-3">
1785
+ <p class="p">
1786
+
1787
+ </p>
1788
+
1789
+
1790
+ </div>
1791
+
1792
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-50">
1793
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-50</code></h4>
1794
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-50</span> <span class="token punctuation">{</span>
1795
+ <span class="token property">height</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
1796
+ <span class="token punctuation">}</span></pre>
1797
+ </div>
1798
+ <div class="ml-3">
1799
+ <p class="p">
1800
+
1801
+ </p>
1802
+
1803
+
1804
+ </div>
1805
+
1806
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-60">
1807
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-60</code></h4>
1808
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-60</span> <span class="token punctuation">{</span>
1809
+ <span class="token property">height</span><span class="token punctuation">:</span> 60%<span class="token punctuation">;</span>
1810
+ <span class="token punctuation">}</span></pre>
1811
+ </div>
1812
+ <div class="ml-3">
1813
+ <p class="p">
1814
+
1815
+ </p>
1816
+
1817
+
1818
+ </div>
1819
+
1820
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-70">
1821
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-70</code></h4>
1822
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-70</span> <span class="token punctuation">{</span>
1823
+ <span class="token property">height</span><span class="token punctuation">:</span> 70%<span class="token punctuation">;</span>
1824
+ <span class="token punctuation">}</span></pre>
1825
+ </div>
1826
+ <div class="ml-3">
1827
+ <p class="p">
1828
+
1829
+ </p>
1830
+
1831
+
1832
+ </div>
1833
+
1834
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-75">
1835
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-75</code></h4>
1836
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-75</span> <span class="token punctuation">{</span>
1837
+ <span class="token property">height</span><span class="token punctuation">:</span> 75%<span class="token punctuation">;</span>
1838
+ <span class="token punctuation">}</span></pre>
1839
+ </div>
1840
+ <div class="ml-3">
1841
+ <p class="p">
1842
+
1843
+ </p>
1844
+
1845
+
1846
+ </div>
1847
+
1848
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-80">
1849
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-80</code></h4>
1850
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-80</span> <span class="token punctuation">{</span>
1851
+ <span class="token property">height</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
1852
+ <span class="token punctuation">}</span></pre>
1853
+ </div>
1854
+ <div class="ml-3">
1855
+ <p class="p">
1856
+
1857
+ </p>
1858
+
1859
+
1860
+ </div>
1861
+
1862
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-90">
1863
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-90</code></h4>
1864
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-90</span> <span class="token punctuation">{</span>
1865
+ <span class="token property">height</span><span class="token punctuation">:</span> 90%<span class="token punctuation">;</span>
1866
+ <span class="token punctuation">}</span></pre>
1867
+ </div>
1868
+ <div class="ml-3">
1869
+ <p class="p">
1870
+
1871
+ </p>
1872
+
1873
+
1874
+ </div>
1875
+
1876
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-100">
1877
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-100</code></h4>
1878
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-100</span> <span class="token punctuation">{</span>
1879
+ <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
1880
+ <span class="token punctuation">}</span></pre>
1881
+ </div>
1882
+ <div class="ml-3">
1883
+ <p class="p">
1884
+
1885
+ </p>
1886
+
1887
+
1888
+ </div>
1889
+
1890
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-third">
1891
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-third</code></h4>
1892
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-third</span> <span class="token punctuation">{</span>
1893
+ <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% / 3<span class="token punctuation">)</span><span class="token punctuation">;</span>
1894
+ <span class="token punctuation">}</span></pre>
1895
+ </div>
1896
+ <div class="ml-3">
1897
+ <p class="p">
1898
+
1899
+ </p>
1900
+
1901
+
1902
+ </div>
1903
+
1904
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-two-thirds">
1905
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-two-thirds</code></h4>
1906
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-two-thirds</span> <span class="token punctuation">{</span>
1907
+ <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% / 1.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
1908
+ <span class="token punctuation">}</span></pre>
1909
+ </div>
1910
+ <div class="ml-3">
1911
+ <p class="p">
1912
+
1913
+ </p>
1914
+
1915
+
1916
+ </div>
1917
+
1918
+
1919
+ <h3 class="f-5 mt-4" id="class-scale:height-view-height">Height View Height</h3>
1920
+ <p class="p">
1921
+ <p>View-height percentage heights</p>
1922
+
1923
+ </p>
1924
+
1925
+
1926
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-10vh">
1927
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-10vh</code></h4>
1928
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-10vh</span> <span class="token punctuation">{</span>
1929
+ <span class="token property">height</span><span class="token punctuation">:</span> 10vh<span class="token punctuation">;</span>
1930
+ <span class="token punctuation">}</span></pre>
1931
+ </div>
1932
+ <div class="ml-3">
1933
+ <p class="p">
1934
+
1935
+ </p>
1936
+
1937
+
1938
+ </div>
1939
+
1940
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-20vh">
1941
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-20vh</code></h4>
1942
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-20vh</span> <span class="token punctuation">{</span>
1943
+ <span class="token property">height</span><span class="token punctuation">:</span> 20vh<span class="token punctuation">;</span>
1944
+ <span class="token punctuation">}</span></pre>
1945
+ </div>
1946
+ <div class="ml-3">
1947
+ <p class="p">
1948
+
1949
+ </p>
1950
+
1951
+
1952
+ </div>
1953
+
1954
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-30vh">
1955
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-30vh</code></h4>
1956
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-30vh</span> <span class="token punctuation">{</span>
1957
+ <span class="token property">height</span><span class="token punctuation">:</span> 30vh<span class="token punctuation">;</span>
1958
+ <span class="token punctuation">}</span></pre>
1959
+ </div>
1960
+ <div class="ml-3">
1961
+ <p class="p">
1962
+
1963
+ </p>
1964
+
1965
+
1966
+ </div>
1967
+
1968
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-40vh">
1969
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-40vh</code></h4>
1970
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-40vh</span> <span class="token punctuation">{</span>
1971
+ <span class="token property">height</span><span class="token punctuation">:</span> 40vh<span class="token punctuation">;</span>
1972
+ <span class="token punctuation">}</span></pre>
1973
+ </div>
1974
+ <div class="ml-3">
1975
+ <p class="p">
1976
+
1977
+ </p>
1978
+
1979
+
1980
+ </div>
1981
+
1982
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-50vh">
1983
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-50vh</code></h4>
1984
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-50vh</span> <span class="token punctuation">{</span>
1985
+ <span class="token property">height</span><span class="token punctuation">:</span> 50vh<span class="token punctuation">;</span>
1986
+ <span class="token punctuation">}</span></pre>
1987
+ </div>
1988
+ <div class="ml-3">
1989
+ <p class="p">
1990
+
1991
+ </p>
1992
+
1993
+
1994
+ </div>
1995
+
1996
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-60vh">
1997
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-60vh</code></h4>
1998
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-60vh</span> <span class="token punctuation">{</span>
1999
+ <span class="token property">height</span><span class="token punctuation">:</span> 60vh<span class="token punctuation">;</span>
2000
+ <span class="token punctuation">}</span></pre>
2001
+ </div>
2002
+ <div class="ml-3">
2003
+ <p class="p">
2004
+
2005
+ </p>
2006
+
2007
+
2008
+ </div>
2009
+
2010
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-70vh">
2011
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-70vh</code></h4>
2012
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-70vh</span> <span class="token punctuation">{</span>
2013
+ <span class="token property">height</span><span class="token punctuation">:</span> 70vh<span class="token punctuation">;</span>
2014
+ <span class="token punctuation">}</span></pre>
2015
+ </div>
2016
+ <div class="ml-3">
2017
+ <p class="p">
2018
+
2019
+ </p>
2020
+
2021
+
2022
+ </div>
2023
+
2024
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-80vh">
2025
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-80vh</code></h4>
2026
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-80vh</span> <span class="token punctuation">{</span>
2027
+ <span class="token property">height</span><span class="token punctuation">:</span> 80vh<span class="token punctuation">;</span>
2028
+ <span class="token punctuation">}</span></pre>
2029
+ </div>
2030
+ <div class="ml-3">
2031
+ <p class="p">
2032
+
2033
+ </p>
2034
+
2035
+
2036
+ </div>
2037
+
2038
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-90vh">
2039
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-90vh</code></h4>
2040
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-90vh</span> <span class="token punctuation">{</span>
2041
+ <span class="token property">height</span><span class="token punctuation">:</span> 90vh<span class="token punctuation">;</span>
2042
+ <span class="token punctuation">}</span></pre>
2043
+ </div>
2044
+ <div class="ml-3">
2045
+ <p class="p">
2046
+
2047
+ </p>
2048
+
2049
+
2050
+ </div>
2051
+
2052
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-100vh">
2053
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-100vh</code></h4>
2054
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-100vh</span> <span class="token punctuation">{</span>
2055
+ <span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span>
2056
+ <span class="token punctuation">}</span></pre>
2057
+ </div>
2058
+ <div class="ml-3">
2059
+ <p class="p">
2060
+
2061
+ </p>
2062
+
2063
+
2064
+ </div>
2065
+
2066
+ <div class="mt-4 flex gap-3 items-center justify-between" id="h-auto">
2067
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.h-auto</code></h4>
2068
+ <pre class="f-3 highlighted-code"><span class="token selector">.h-auto</span> <span class="token punctuation">{</span>
2069
+ <span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
2070
+ <span class="token punctuation">}</span></pre>
2071
+ </div>
2072
+ <div class="ml-3">
2073
+ <p class="p">
2074
+
2075
+ </p>
2076
+
2077
+
2078
+ </div>
2079
+
2080
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-1">
2081
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-1</code></h4>
2082
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-1</span> <span class="token punctuation">{</span>
2083
+ <span class="token property">max-height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
2084
+ <span class="token punctuation">}</span></pre>
2085
+ </div>
2086
+ <div class="ml-3">
2087
+ <p class="p">
2088
+ <p>Numeric/fixed maximum heights.</p>
2089
+
2090
+ </p>
2091
+
2092
+
2093
+ </div>
2094
+
2095
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-2">
2096
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-2</code></h4>
2097
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-2</span> <span class="token punctuation">{</span>
2098
+ <span class="token property">max-height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
2099
+ <span class="token punctuation">}</span></pre>
2100
+ </div>
2101
+ <div class="ml-3">
2102
+ <p class="p">
2103
+
2104
+ </p>
2105
+
2106
+
2107
+ </div>
2108
+
2109
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-3">
2110
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-3</code></h4>
2111
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-3</span> <span class="token punctuation">{</span>
2112
+ <span class="token property">max-height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
2113
+ <span class="token punctuation">}</span></pre>
2114
+ </div>
2115
+ <div class="ml-3">
2116
+ <p class="p">
2117
+
2118
+ </p>
2119
+
2120
+
2121
+ </div>
2122
+
2123
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-4">
2124
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-4</code></h4>
2125
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-4</span> <span class="token punctuation">{</span>
2126
+ <span class="token property">max-height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
2127
+ <span class="token punctuation">}</span></pre>
2128
+ </div>
2129
+ <div class="ml-3">
2130
+ <p class="p">
2131
+
2132
+ </p>
2133
+
2134
+
2135
+ </div>
2136
+
2137
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-5">
2138
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-5</code></h4>
2139
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-5</span> <span class="token punctuation">{</span>
2140
+ <span class="token property">max-height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
2141
+ <span class="token punctuation">}</span></pre>
2142
+ </div>
2143
+ <div class="ml-3">
2144
+ <p class="p">
2145
+
2146
+ </p>
2147
+
2148
+
2149
+ </div>
2150
+
2151
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-6">
2152
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-6</code></h4>
2153
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-6</span> <span class="token punctuation">{</span>
2154
+ <span class="token property">max-height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
2155
+ <span class="token punctuation">}</span></pre>
2156
+ </div>
2157
+ <div class="ml-3">
2158
+ <p class="p">
2159
+
2160
+ </p>
2161
+
2162
+
2163
+ </div>
2164
+
2165
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-7">
2166
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-7</code></h4>
2167
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-7</span> <span class="token punctuation">{</span>
2168
+ <span class="token property">max-height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
2169
+ <span class="token punctuation">}</span></pre>
2170
+ </div>
2171
+ <div class="ml-3">
2172
+ <p class="p">
2173
+
2174
+ </p>
2175
+
2176
+
2177
+ </div>
2178
+
2179
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-8">
2180
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-8</code></h4>
2181
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-8</span> <span class="token punctuation">{</span>
2182
+ <span class="token property">max-height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wh-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
2183
+ <span class="token punctuation">}</span></pre>
2184
+ </div>
2185
+ <div class="ml-3">
2186
+ <p class="p">
2187
+
2188
+ </p>
2189
+
2190
+
2191
+ </div>
2192
+
2193
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-10">
2194
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-10</code></h4>
2195
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-10</span> <span class="token punctuation">{</span>
2196
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
2197
+ <span class="token punctuation">}</span></pre>
2198
+ </div>
2199
+ <div class="ml-3">
2200
+ <p class="p">
2201
+ <p>Percentage-based maximum heights.</p>
2202
+
2203
+ </p>
2204
+
2205
+
2206
+ </div>
2207
+
2208
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-20">
2209
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-20</code></h4>
2210
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-20</span> <span class="token punctuation">{</span>
2211
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 20%<span class="token punctuation">;</span>
2212
+ <span class="token punctuation">}</span></pre>
2213
+ </div>
2214
+ <div class="ml-3">
2215
+ <p class="p">
2216
+
2217
+ </p>
2218
+
2219
+
2220
+ </div>
2221
+
2222
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-25">
2223
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-25</code></h4>
2224
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-25</span> <span class="token punctuation">{</span>
2225
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 25%<span class="token punctuation">;</span>
2226
+ <span class="token punctuation">}</span></pre>
2227
+ </div>
2228
+ <div class="ml-3">
2229
+ <p class="p">
2230
+
2231
+ </p>
2232
+
2233
+
2234
+ </div>
2235
+
2236
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-30">
2237
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-30</code></h4>
2238
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-30</span> <span class="token punctuation">{</span>
2239
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 30%<span class="token punctuation">;</span>
2240
+ <span class="token punctuation">}</span></pre>
2241
+ </div>
2242
+ <div class="ml-3">
2243
+ <p class="p">
2244
+
2245
+ </p>
2246
+
2247
+
2248
+ </div>
2249
+
2250
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-40">
2251
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-40</code></h4>
2252
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-40</span> <span class="token punctuation">{</span>
2253
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 40%<span class="token punctuation">;</span>
2254
+ <span class="token punctuation">}</span></pre>
2255
+ </div>
2256
+ <div class="ml-3">
2257
+ <p class="p">
2258
+
2259
+ </p>
2260
+
2261
+
2262
+ </div>
2263
+
2264
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-50">
2265
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-50</code></h4>
2266
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-50</span> <span class="token punctuation">{</span>
2267
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
2268
+ <span class="token punctuation">}</span></pre>
2269
+ </div>
2270
+ <div class="ml-3">
2271
+ <p class="p">
2272
+
2273
+ </p>
2274
+
2275
+
2276
+ </div>
2277
+
2278
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-60">
2279
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-60</code></h4>
2280
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-60</span> <span class="token punctuation">{</span>
2281
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 60%<span class="token punctuation">;</span>
2282
+ <span class="token punctuation">}</span></pre>
2283
+ </div>
2284
+ <div class="ml-3">
2285
+ <p class="p">
2286
+
2287
+ </p>
2288
+
2289
+
2290
+ </div>
2291
+
2292
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-70">
2293
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-70</code></h4>
2294
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-70</span> <span class="token punctuation">{</span>
2295
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 70%<span class="token punctuation">;</span>
2296
+ <span class="token punctuation">}</span></pre>
2297
+ </div>
2298
+ <div class="ml-3">
2299
+ <p class="p">
2300
+
2301
+ </p>
2302
+
2303
+
2304
+ </div>
2305
+
2306
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-75">
2307
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-75</code></h4>
2308
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-75</span> <span class="token punctuation">{</span>
2309
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 75%<span class="token punctuation">;</span>
2310
+ <span class="token punctuation">}</span></pre>
2311
+ </div>
2312
+ <div class="ml-3">
2313
+ <p class="p">
2314
+
2315
+ </p>
2316
+
2317
+
2318
+ </div>
2319
+
2320
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-80">
2321
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-80</code></h4>
2322
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-80</span> <span class="token punctuation">{</span>
2323
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
2324
+ <span class="token punctuation">}</span></pre>
2325
+ </div>
2326
+ <div class="ml-3">
2327
+ <p class="p">
2328
+
2329
+ </p>
2330
+
2331
+
2332
+ </div>
2333
+
2334
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-90">
2335
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-90</code></h4>
2336
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-90</span> <span class="token punctuation">{</span>
2337
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 90%<span class="token punctuation">;</span>
2338
+ <span class="token punctuation">}</span></pre>
2339
+ </div>
2340
+ <div class="ml-3">
2341
+ <p class="p">
2342
+
2343
+ </p>
2344
+
2345
+
2346
+ </div>
2347
+
2348
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-100">
2349
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-100</code></h4>
2350
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-100</span> <span class="token punctuation">{</span>
2351
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
2352
+ <span class="token punctuation">}</span></pre>
2353
+ </div>
2354
+ <div class="ml-3">
2355
+ <p class="p">
2356
+
2357
+ </p>
2358
+
2359
+
2360
+ </div>
2361
+
2362
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-third">
2363
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-third</code></h4>
2364
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-third</span> <span class="token punctuation">{</span>
2365
+ <span class="token property">max-height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% / 3<span class="token punctuation">)</span><span class="token punctuation">;</span>
2366
+ <span class="token punctuation">}</span></pre>
2367
+ </div>
2368
+ <div class="ml-3">
2369
+ <p class="p">
2370
+
2371
+ </p>
2372
+
2373
+
2374
+ </div>
2375
+
2376
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-two-thirds">
2377
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-two-thirds</code></h4>
2378
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-two-thirds</span> <span class="token punctuation">{</span>
2379
+ <span class="token property">max-height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% / 1.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
2380
+ <span class="token punctuation">}</span></pre>
2381
+ </div>
2382
+ <div class="ml-3">
2383
+ <p class="p">
2384
+
2385
+ </p>
2386
+
2387
+
2388
+ </div>
2389
+
2390
+
2391
+ <h3 class="f-5 mt-4" id="class-scale:height-view-max-height">Height View Max Height</h3>
2392
+ <p class="p">
2393
+ <p>View-height percentage maximum heights</p>
2394
+
2395
+ </p>
2396
+
2397
+
2398
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-10vh">
2399
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-10vh</code></h4>
2400
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-10vh</span> <span class="token punctuation">{</span>
2401
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 10vh<span class="token punctuation">;</span>
2402
+ <span class="token punctuation">}</span></pre>
2403
+ </div>
2404
+ <div class="ml-3">
2405
+ <p class="p">
2406
+
2407
+ </p>
2408
+
2409
+
2410
+ </div>
2411
+
2412
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-20vh">
2413
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-20vh</code></h4>
2414
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-20vh</span> <span class="token punctuation">{</span>
2415
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 20vh<span class="token punctuation">;</span>
2416
+ <span class="token punctuation">}</span></pre>
2417
+ </div>
2418
+ <div class="ml-3">
2419
+ <p class="p">
2420
+
2421
+ </p>
2422
+
2423
+
2424
+ </div>
2425
+
2426
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-30vh">
2427
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-30vh</code></h4>
2428
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-30vh</span> <span class="token punctuation">{</span>
2429
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 30vh<span class="token punctuation">;</span>
2430
+ <span class="token punctuation">}</span></pre>
2431
+ </div>
2432
+ <div class="ml-3">
2433
+ <p class="p">
2434
+
2435
+ </p>
2436
+
2437
+
2438
+ </div>
2439
+
2440
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-40vh">
2441
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-40vh</code></h4>
2442
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-40vh</span> <span class="token punctuation">{</span>
2443
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 40vh<span class="token punctuation">;</span>
2444
+ <span class="token punctuation">}</span></pre>
2445
+ </div>
2446
+ <div class="ml-3">
2447
+ <p class="p">
2448
+
2449
+ </p>
2450
+
2451
+
2452
+ </div>
2453
+
2454
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-50vh">
2455
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-50vh</code></h4>
2456
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-50vh</span> <span class="token punctuation">{</span>
2457
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 50vh<span class="token punctuation">;</span>
2458
+ <span class="token punctuation">}</span></pre>
2459
+ </div>
2460
+ <div class="ml-3">
2461
+ <p class="p">
2462
+
2463
+ </p>
2464
+
2465
+
2466
+ </div>
2467
+
2468
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-60vh">
2469
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-60vh</code></h4>
2470
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-60vh</span> <span class="token punctuation">{</span>
2471
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 60vh<span class="token punctuation">;</span>
2472
+ <span class="token punctuation">}</span></pre>
2473
+ </div>
2474
+ <div class="ml-3">
2475
+ <p class="p">
2476
+
2477
+ </p>
2478
+
2479
+
2480
+ </div>
2481
+
2482
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-70vh">
2483
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-70vh</code></h4>
2484
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-70vh</span> <span class="token punctuation">{</span>
2485
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 70vh<span class="token punctuation">;</span>
2486
+ <span class="token punctuation">}</span></pre>
2487
+ </div>
2488
+ <div class="ml-3">
2489
+ <p class="p">
2490
+
2491
+ </p>
2492
+
2493
+
2494
+ </div>
2495
+
2496
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-80vh">
2497
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-80vh</code></h4>
2498
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-80vh</span> <span class="token punctuation">{</span>
2499
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 80vh<span class="token punctuation">;</span>
2500
+ <span class="token punctuation">}</span></pre>
2501
+ </div>
2502
+ <div class="ml-3">
2503
+ <p class="p">
2504
+
2505
+ </p>
2506
+
2507
+
2508
+ </div>
2509
+
2510
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-90vh">
2511
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-90vh</code></h4>
2512
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-90vh</span> <span class="token punctuation">{</span>
2513
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 90vh<span class="token punctuation">;</span>
2514
+ <span class="token punctuation">}</span></pre>
2515
+ </div>
2516
+ <div class="ml-3">
2517
+ <p class="p">
2518
+
2519
+ </p>
2520
+
2521
+
2522
+ </div>
2523
+
2524
+ <div class="mt-4 flex gap-3 items-center justify-between" id="max-height-100vh">
2525
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.max-height-100vh</code></h4>
2526
+ <pre class="f-3 highlighted-code"><span class="token selector">.max-height-100vh</span> <span class="token punctuation">{</span>
2527
+ <span class="token property">max-height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span>
2528
+ <span class="token punctuation">}</span></pre>
2529
+ </div>
2530
+ <div class="ml-3">
2531
+ <p class="p">
2532
+
2533
+ </p>
2534
+
2535
+
2536
+ </div>
2537
+
2538
+
2539
+ </article>
2540
+ <div class="z-5 ma-0 overflow-y-auto pa-2 w-20 h-100 pos-absolute top-0 right-2">
2541
+ <div class="pa-3 ba bc-gray-700 bg-gray-900 br-3 shadow-1 ridiculous-liquid-glass-is-all-the-rage">
2542
+ <h3>On this Page</h3>
2543
+ <ul class="lst-none ma-0 pa-0">
2544
+
2545
+ <li class="lh-copy"><a href="#class-scale:widths">Widths</a></li>
2546
+
2547
+ <li class="lh-copy"><a href="#class-scale:width-percent">Width Percent</a></li>
2548
+
2549
+ <li class="lh-copy"><a href="#class-scale:width-view-width">Width View Width</a></li>
2550
+
2551
+ <li class="lh-copy"><a href="#class-scale:width-view-max-width">Width View Max Width</a></li>
2552
+
2553
+ <li class="lh-copy"><a href="#class-scale:min-width">Min Width</a></li>
2554
+
2555
+ <li class="lh-copy"><a href="#class-scale:min-width-percent">Min Width Percent</a></li>
2556
+
2557
+ <li class="lh-copy"><a href="#class-scale:min-width-view-width">Min Width View Width</a></li>
2558
+
2559
+ <li class="lh-copy"><a href="#class-scale:heights">Heights</a></li>
2560
+
2561
+ <li class="lh-copy"><a href="#class-scale:height-percent">Height Percent</a></li>
2562
+
2563
+ <li class="lh-copy"><a href="#class-scale:height-view-height">Height View Height</a></li>
2564
+
2565
+ <li class="lh-copy"><a href="#class-scale:height-view-max-height">Height View Max Height</a></li>
2566
+
2567
+ </ul>
2568
+ </div>
2569
+ </div>
2570
+ </div>
2571
+ <footer class="bg-black white mt-auto">
2572
+ <p class="tc">
2573
+ Copyright &copy; 2025 David Bryant Copeland.
2574
+ </p>
2575
+ </footer>
2576
+ </section>
2577
+ </main>
2578
+ </body>
2579
+
2580
+ </html>
2581
+