diff --git a/dist/winter.css b/dist/winter.css index e116ec4..b931c68 100644 --- a/dist/winter.css +++ b/dist/winter.css @@ -451,6 +451,12 @@ h6 { --winter-range-active-bg: var(--color-purple-200); --winter-range-active-fg: var(--winter-purple-2); --winter-range-active-thumb-size: 1.4rem; + --winter-form-aside-padding: var(--winter-spacing-xs) var(--winter-spacing-s); + --winter-form-aside-font: var(--winter-font-serif); + --winter-form-aside-font-size: var(--winter-font-size-s); + --winter-form-aside-fg: var(--winter-not-quite-black); + --winter-form-aside-bg: var(--color-white); + --winter-form-aside-accent: var(--winter-purple-4); --winter-admonition-font: var(--winter-font-serif); --winter-admonition-font-size: var(--winter-font-size-m); --winter-admonition-fg: var(--winter-fg); @@ -616,6 +622,7 @@ body :is(header, main, footer) { display: grid; grid-gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr)); + align-items: start; } .grid.col-2 { grid-template-columns: 1fr 1fr; @@ -836,6 +843,9 @@ main :is(h2 + :is(h2, h3, h4, h5, h6), h3 + :is(h3, h4, h5, h6), h4 + :is(h4, h5 main.hide-title h1 { display: none; } +main section { + margin-block: var(--winter-block-spacing); +} main :is(p, ol, ul, pre, blockquote, figure, hr, dl) { margin-block: var(--winter-block-spacing); } @@ -1138,7 +1148,6 @@ input[type=button] { align-items: center; justify-content: center; min-width: 8ch; - min-height: 2.2rem; text-align: center; line-height: inherit; vertical-align: middle; @@ -1253,6 +1262,28 @@ textarea { main form { margin-block: var(--winter-block-spacing); } +main form section { + margin-block: var(--winter-block-spacing); +} +main form section h2 { + margin-block-end: var(--winter-spacing-l); +} +main form section aside { + margin-block: var(--winter-block-spacing); + font-family: var(--winter-form-aside-font); + font-size: var(--winter-form-aside-font-size); + color: var(--winter-form-aside-fg); + background: var(--winter-form-aside-bg); + border-inline-start: 0.15rem solid var(--winter-form-aside-accent); + padding: var(--winter-form-aside-padding); + box-shadow: var(--winter-shadow-xs); +} +main form section aside p:first-child { + margin-block-start: 0; +} +main form section .grid { + --gap: 1.5rem; +} label:has(+ input, + select, + textarea) { display: block; } diff --git a/dist/winter.css.map b/dist/winter.css.map index 2473cea..32b7551 100644 --- a/dist/winter.css.map +++ b/dist/winter.css.map @@ -1,7 +1,7 @@ { "version": 3, "sources": ["../src/styles/reset.css", "../src/styles/colors.css", "../src/styles/tokens.css", "../src/styles/globals.css", "../src/styles/layout.css", "../src/styles/nav.css", "../src/styles/footer.css", "../src/styles/content.css", "../src/styles/buttons.css", "../src/styles/forms.css", "../src/styles/group.css", "../src/styles/admonitions.css", "../src/styles/footnotes.css", "../src/styles/keys.css", "../src/styles/components.css", "../src/styles/responsive.css"], - "sourcesContent": ["/*\n Copyright (c) 2024 Winterbloom LLC, Alethea Katherine Flowers\n Published under the standard MIT License.\n Full text available at: https://opensource.org/licenses/MIT\n*/\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n* {\n margin: 0;\n}\n\nbody {\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -webkit-text-size-adjust: 100%;\n -moz-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n text-size-adjust: 100%;\n}\n\nimg,\npicture,\nvideo,\ncanvas,\nsvg {\n display: block;\n max-width: 100%;\n}\n\ninput,\nbutton,\ntextarea,\nselect {\n font: inherit;\n}\n\np,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n overflow-wrap: break-word;\n}\n\n#root,\n#__next {\n isolation: isolate;\n}\n", "/*\n Copyright (c) 2024 Winterbloom LLC, Alethea Katherine Flowers\n Published under the standard MIT License.\n Full text available at: https://opensource.org/licenses/MIT\n*/\n\n:root {\n --winter-white: #fff;\n --winter-black: #000;\n --winter-not-quite-black: #333;\n --winter-yellow-1: rgb(184, 125, 33);\n --winter-yellow-2: rgb(219, 161, 64);\n --winter-yellow-3: rgb(250, 194, 105);\n --winter-yellow-4: rgb(255, 214, 143);\n --winter-yellow-5: rgb(255, 229, 186);\n --winter-red-1: rgb(191, 36, 54);\n --winter-red-2: rgb(217, 74, 92);\n --winter-red-3: rgb(245, 115, 128);\n --winter-red-4: rgb(250, 153, 163);\n --winter-red-5: rgb(252, 194, 201);\n --winter-teal-1: rgb(38, 120, 128);\n --winter-teal-2: rgb(64, 140, 148);\n --winter-teal-3: rgb(102, 173, 181);\n --winter-teal-4: rgb(153, 209, 214);\n --winter-teal-5: rgb(204, 237, 240);\n --winter-purple-1: rgb(94, 64, 158);\n --winter-purple-2: rgb(125, 97, 186);\n --winter-purple-3: rgb(163, 138, 214);\n --winter-purple-4: rgb(199, 184, 237);\n --winter-purple-5: rgb(235, 227, 250);\n}\n\n/*\nhttps://accessiblepalette.com/?lightness=98.2,93.95,85.1,76.5,67.65,57.8,47.6,40.4,32.4,23.55&gb(245,%20115,%20128)=1,0&f76707=0,12&f1d152=0,7&78ec90=0,0&gb(129,%20255,%20190)=0,5&gb(129,%20238,%20255)=0,0&97d2ff=0,0&ae82ff=0,0&9939b3=1,0&gb(254,%20129,%20173)=0,0&292537=0,0\n\nlet colors = [\"red\", \"orange\", \"yellow\", \"green\", \"mint\", \"cyan\", \"blue\", \"purple\", \"violet\", \"pink\", \"gray\"];\nlet shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];\nlet out = \"\";\n\ndocument.querySelectorAll(\".palette_colors\").forEach((column, n) => {\n column.querySelectorAll(\".hex\").forEach((row, i) => {\n out += `--color-${colors[n]}-${shades[i]}: ${row.innerText};\\n`;\n });\n});\n\nconsole.log(out);\n*/\n\n:root {\n --color-red-50: #fff8f8;\n --color-red-100: #ffe9e9;\n --color-red-200: #ffc7c9;\n --color-red-300: #fea5a9;\n --color-red-400: #f8818b;\n --color-red-500: #d96772;\n --color-red-600: #b0555d;\n --color-red-700: #93494f;\n --color-red-800: #753b40;\n --color-red-900: #542d2f;\n --color-orange-50: #fff9f5;\n --color-orange-100: #fdeadd;\n --color-orange-200: #facca8;\n --color-orange-300: #f6ad72;\n --color-orange-400: #f18c30;\n --color-orange-500: #de6a00;\n --color-orange-600: #b35800;\n --color-orange-700: #964b00;\n --color-orange-800: #773d00;\n --color-orange-900: #582d00;\n --color-yellow-50: #fdfaec;\n --color-yellow-100: #f9eebf;\n --color-yellow-200: #eed45a;\n --color-yellow-300: #d3bd4a;\n --color-yellow-400: #b7a540;\n --color-yellow-500: #9a8c36;\n --color-yellow-600: #7c722c;\n --color-yellow-700: #686025;\n --color-yellow-800: #534d1e;\n --color-yellow-900: #3d3916;\n --color-green-50: #f1fdf3;\n --color-green-100: #cef8d6;\n --color-green-200: #79ec91;\n --color-green-300: #6bd280;\n --color-green-400: #5db770;\n --color-green-500: #4f9b5e;\n --color-green-600: #407e4d;\n --color-green-700: #366a41;\n --color-green-800: #2b5534;\n --color-green-900: #203f26;\n --color-mint-50: #e9fff4;\n --color-mint-100: #abffd6;\n --color-mint-200: #73ebb1;\n --color-mint-300: #65d19e;\n --color-mint-400: #58b68b;\n --color-mint-500: #499a75;\n --color-mint-600: #3b7d60;\n --color-mint-700: #316a51;\n --color-mint-800: #275541;\n --color-mint-900: #1d3e30;\n --color-cyan-50: #eefdff;\n --color-cyan-100: #c2f7ff;\n --color-cyan-200: #7ce4f4;\n --color-cyan-300: #6ecad9;\n --color-cyan-400: #60b1bd;\n --color-cyan-500: #5195a0;\n --color-cyan-600: #427982;\n --color-cyan-700: #37666e;\n --color-cyan-800: #2c5258;\n --color-cyan-900: #213c41;\n --color-blue-50: #f5fbff;\n --color-blue-100: #ddf0ff;\n --color-blue-200: #abdaff;\n --color-blue-300: #8cc3ed;\n --color-blue-400: #7aaacf;\n --color-blue-500: #678fae;\n --color-blue-600: #54758e;\n --color-blue-700: #476278;\n --color-blue-800: #394f60;\n --color-blue-900: #2a3a46;\n --color-purple-50: #fbf9ff;\n --color-purple-100: #f2eaff;\n --color-purple-200: #deccff;\n --color-purple-300: #cbafff;\n --color-purple-400: #b791ff;\n --color-purple-500: #9d75e6;\n --color-purple-600: #8060bc;\n --color-purple-700: #6c519e;\n --color-purple-800: #56417f;\n --color-purple-900: #40305d;\n --color-violet-50: #fcf9fd;\n --color-violet-100: #f5eaf7;\n --color-violet-200: #e7ccec;\n --color-violet-300: #d8afe0;\n --color-violet-400: #c991d5;\n --color-violet-500: #b770c7;\n --color-violet-600: #a34cba;\n --color-violet-700: #9037a8;\n --color-violet-800: #722e85;\n --color-violet-900: #53255f;\n --color-pink-50: #fff8fb;\n --color-pink-100: #ffe8f0;\n --color-pink-200: #ffc5d9;\n --color-pink-300: #fea2c2;\n --color-pink-400: #f77ea8;\n --color-pink-500: #d16a8e;\n --color-pink-600: #aa5674;\n --color-pink-700: #8f4962;\n --color-pink-800: #733a4e;\n --color-pink-900: #552b3a;\n --color-gray-50: #fafafa;\n --color-gray-100: #eeedef;\n --color-gray-200: #d5d4d8;\n --color-gray-300: #bdbcc2;\n --color-gray-400: #a5a4ab;\n --color-gray-500: #8c8a93;\n --color-gray-600: #726f7b;\n --color-gray-700: #615e6b;\n --color-gray-800: #4e4a59;\n --color-gray-900: #3a3647;\n}\n", ":root {\n /* Border radius */\n --winter-border-radius-s: 0.1875rem;\n --winter-border-radius-m: 0.25rem;\n --winter-border-radius-l: 0.5rem;\n --winter-border-radius-xl: 1rem;\n --winter-border-radius-circle: 50%;\n --winter-border-radius-pill: 9999px;\n\n /* Elevation */\n --winter-shadow-color-hsl: 261, 32%, 28%;\n --winter-shadow-alpha-xs: 0.2;\n --winter-shadow-blur-alpha-xs: 0.05;\n --winter-shadow-alpha-s: 0.2;\n --winter-shadow-blur-alpha-s: 0.1;\n --winter-shadow-alpha-m: 0.3;\n --winter-shadow-blur-alpha-m: 0.15;\n --winter-shadow-alpha-l: 0.3;\n --winter-shadow-blur-alpha-l: 0.15;\n\n --winter-shadow-color-xs: hsl(\n var(--winter-shadow-color-hsl),\n var(--winter-shadow-alpha-xs)\n );\n --winter-shadow-blur-color-xs: hsl(\n var(--winter-shadow-color-hsl),\n var(--winter-shadow-blur-alpha-xs)\n );\n --winter-shadow-color-s: hsl(\n var(--winter-shadow-color-hsl),\n var(--winter-shadow-alpha-s)\n );\n --winter-shadow-blur-color-s: hsl(\n var(--winter-shadow-color-hsl),\n var(--winter-shadow-blur-alpha-s)\n );\n --winter-shadow-color-m: hsl(\n var(--winter-shadow-color-hsl),\n var(--winter-shadow-alpha-m)\n );\n --winter-shadow-blur-color-m: hsl(\n var(--winter-shadow-color-hsl),\n var(--winter-shadow-blur-alpha-m)\n );\n --winter-shadow-color-l: hsl(\n var(--winter-shadow-color-hsl),\n var(--winter-shadow-alpha-l)\n );\n --winter-shadow-blur-color-l: hsl(\n var(--winter-shadow-color-hsl),\n var(--winter-shadow-blur-alpha-l)\n );\n\n --winter-shadow-xs: 1px 1px 1px 0 var(--winter-shadow-color-xs),\n 0 0 10px 0 var(--winter-shadow-blur-color-xs);\n --winter-shadow-s: 3px 3px 1px 0 var(--winter-shadow-color-s),\n 0 0 10px 0 var(--winter-shadow-blur-color-s);\n --winter-shadow-m: 6px 6px 3px 0 var(--winter-shadow-color-m),\n 0 0 10px 0 var(--winter-shadow-blur-color-m);\n --winter-shadow-l: 10px 10px 3px 0 var(--winter-shadow-color-l),\n 0 0 10px 0 var(--winter-shadow-blur-color-l);\n\n /* Generic spacing */\n --winter-spacing-xxxs: 0.125rem;\n --winter-spacing-xxs: 0.25rem;\n --winter-spacing-xs: 0.5rem;\n --winter-spacing-s: 0.75rem;\n --winter-spacing-m: 1rem;\n --winter-spacing-l: 1.25rem;\n --winter-spacing-xl: 1.75rem;\n --winter-spacing-xxl: 2.25rem;\n --winter-spacing-xxxl: 3rem;\n --winter-spacing-xxxxl: 4.5rem;\n\n /* Transitons/duration */\n --winter-duration-xs: 50ms;\n --winter-duration-s: 150ms;\n --winter-duration-m: 250ms;\n --winter-duration-l: 500ms;\n --winter-duration-xl: 1000ms;\n\n /* Typography */\n --winter-font-serif: \"Nunito\", Georgia, \"Times New Roman\", serif;\n --winter-font-sans: \"Nunito Sans\", system-ui, -apple-system,\n BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell,\n \"Open Sans\", \"Helvetica Neue\", sans-serif;\n --winter-font-mono: \"IBM Plex Mono\", ui-monospace, SFMono-Regular, SF Mono,\n Menlo, Consolas, Liberation Mono, monospace;\n --winter-font-decorative: \"Space Grotesk\", system-ui;\n\n --winter-font-size-base: 20px;\n --winter-font-size-xxs: 0.625rem;\n --winter-font-size-xs: 0.75rem;\n --winter-font-size-s: 0.875rem;\n --winter-font-size-m: 1rem;\n --winter-font-size-l: 1.25rem;\n --winter-font-size-xl: 1.5rem;\n --winter-font-size-xxl: 1.75rem;\n --winter-font-size-xxxl: 2rem;\n --winter-font-size-xxxxl: 2.25rem;\n\n --winter-font-weight-light: 300;\n --winter-font-weight-normal: 400;\n --winter-font-weight-semibold: 500;\n --winter-font-weight-bold: 700;\n\n --winter-letter-spacing-xs: -0.03em;\n --winter-letter-spacing-s: -0.015em;\n --winter-letter-spacing-m: normal;\n --winter-letter-spacing-l: 0.075em;\n --winter-letter-spacing-xl: 0.15em;\n\n --winter-line-height-xs: 1;\n --winter-line-height-s: 1.25;\n --winter-line-height-m: 1.6;\n --winter-line-height-l: 1.8;\n --winter-line-height-xl: 2.2;\n\n /* Focus */\n --winter-focus-outline-color: var(--color-gray-800);\n --winter-focus-outline: 1px solid var(--winter-focus-outline-color);\n --winter-focus-outline-offset: 0px;\n\n /* Page colors */\n --winter-bg: var(--winter-white);\n --winter-fg: var(--winter-not-quite-black);\n\n /*
and