From 429689ee2bec9d248b19cf330a6266ac680df87f Mon Sep 17 00:00:00 2001 From: Thea Flowers Date: Mon, 26 Feb 2024 19:20:46 -0500 Subject: [PATCH] Add .grid helper --- dist/winter.css | 29 +++++++++++++++++++++++++++++ dist/winter.css.map | 4 ++-- src/styles/layout.css | 34 ++++++++++++++++++++++++++++++++++ 3 files changed, 65 insertions(+), 2 deletions(-) diff --git a/dist/winter.css b/dist/winter.css index 2fac573..e116ec4 100644 --- a/dist/winter.css +++ b/dist/winter.css @@ -609,6 +609,35 @@ body :is(header, main, footer) { margin-right: auto; margin-left: auto; } +.grid { + display: grid; + --min: 15ch; + --gap: 1rem; + display: grid; + grid-gap: var(--gap); + grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr)); +} +.grid.col-2 { + grid-template-columns: 1fr 1fr; +} +.grid.col-3 { + grid-template-columns: 1fr 1fr 1fr; +} +.grid.col-4 { + grid-template-columns: 1fr 1fr 1fr 1fr; +} +.grid.col-1-2 { + grid-template-columns: 1fr 2fr; +} +.grid.col-2-1 { + grid-template-columns: 2fr 1fr; +} +.grid.col-1-3 { + grid-template-columns: 1fr 3fr; +} +.grid.col-3-1 { + grid-template-columns: 3fr 1fr; +} /* src/styles/nav.css */ header { diff --git a/dist/winter.css.map b/dist/winter.css.map index 6a7663a..2473cea 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