From 155943ea99107d60863ac2505e5575be18137338 Mon Sep 17 00:00:00 2001 From: Mitchell Christ Date: Tue, 19 Oct 2021 22:56:01 -0700 Subject: [PATCH] tailwind.css to theme.css --- assets/tailwind.min.css | 1234 ---------------------------- assets/{tailwind.css => theme.css} | 0 assets/theme.min.css | 1 + config/settings_schema.json | 12 - layout/theme.liquid | 2 +- package.json | 4 +- snippets/root.css.liquid | 2 - 7 files changed, 4 insertions(+), 1251 deletions(-) delete mode 100644 assets/tailwind.min.css rename assets/{tailwind.css => theme.css} (100%) create mode 100644 assets/theme.min.css diff --git a/assets/tailwind.min.css b/assets/tailwind.min.css deleted file mode 100644 index 02afa0c..0000000 --- a/assets/tailwind.min.css +++ /dev/null @@ -1,1234 +0,0 @@ -/*! tailwindcss v2.2.17 | MIT License | https://tailwindcss.com */ - -/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ - -/* -Document -======== -*/ - -/** -Use a better box model (opinionated). -*/ - -*, -::before, -::after { - box-sizing: border-box; -} - -/** -Use a more readable tab size (opinionated). -*/ - -html { - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; -} - -/** -1. Correct the line height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -*/ - -html { - line-height: 1.15; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ -} - -/* -Sections -======== -*/ - -/** -Remove the margin in all browsers. -*/ - -body { - margin: 0; -} - -/** -Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) -*/ - -body { - font-family: - system-ui, - -apple-system, /* Firefox supports this but not yet `system-ui` */ - 'Segoe UI', - Roboto, - Helvetica, - Arial, - sans-serif, - 'Apple Color Emoji', - 'Segoe UI Emoji'; -} - -/* -Grouping content -================ -*/ - -/** -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ -} - -/* -Text-level semantics -==================== -*/ - -/** -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr[title] { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/** -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/** -1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) -2. Correct the odd 'em' font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: - ui-monospace, - SFMono-Regular, - Consolas, - 'Liberation Mono', - Menlo, - monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/** -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/** -Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -Tabular data -============ -*/ - -/** -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ -} - -/* -Forms -===== -*/ - -/** -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - line-height: 1.15; - /* 1 */ - margin: 0; - /* 2 */ -} - -/** -Remove the inheritance of text transform in Edge and Firefox. -1. Remove the inheritance of text transform in Firefox. -*/ - -button, -select { - /* 1 */ - text-transform: none; -} - -/** -Correct the inability to style clickable types in iOS and Safari. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; -} - -/** -Remove the inner border and padding in Firefox. -*/ - -::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** -Restore the focus styles unset by the previous rule. -*/ - -:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** -Remove the additional ':invalid' styles in Firefox. -See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/** -Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. -*/ - -legend { - padding: 0; -} - -/** -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/** -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/** -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/** -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to 'inherit' in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Interactive -=========== -*/ - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/** - * Manually forked from SUIT CSS Base: https://github.com/suitcss/base - * A thin layer on top of normalize.css that provides a starting point more - * suitable for web applications. - */ - -/** - * Removes the default spacing and border for appropriate elements. - */ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -button { - background-color: transparent; - background-image: none; -} - -fieldset { - margin: 0; - padding: 0; -} - -ol, -ul { - list-style: none; - margin: 0; - padding: 0; -} - -/** - * Tailwind custom reset styles - */ - -/** - * 1. Use the user's configured `sans` font-family (with Tailwind's default - * sans-serif font stack as a fallback) as a sane default. - * 2. Use Tailwind's default "normal" line-height so the user isn't forced - * to override it to ensure consistency even when using the default theme. - */ - -html { - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 1 */ - line-height: 1.5; - /* 2 */ -} - -/** - * Inherit font-family and line-height from `html` so users can set them as - * a class directly on the `html` element. - */ - -body { - font-family: inherit; - line-height: inherit; -} - -/** - * 1. Prevent padding and border from affecting element width. - * - * We used to set this in the html element and inherit from - * the parent element for everything else. This caused issues - * in shadow-dom-enhanced elements like
where the content - * is wrapped by a div with box-sizing set to `content-box`. - * - * https://github.com/mozdevs/cssremedy/issues/4 - * - * - * 2. Allow adding a border to an element by just adding a border-width. - * - * By default, the way the browser specifies that an element should have no - * border is by setting it's border-style to `none` in the user-agent - * stylesheet. - * - * In order to easily add borders to elements by just setting the `border-width` - * property, we change the default border-style for all elements to `solid`, and - * use border-width to hide them instead. This way our `border` utilities only - * need to set the `border-width` property instead of the entire `border` - * shorthand, making our border utilities much more straightforward to compose. - * - * https://github.com/tailwindcss/tailwindcss/pull/116 - */ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: currentColor; - /* 2 */ -} - -/* - * Ensure horizontal rules are visible by default - */ - -hr { - border-top-width: 1px; -} - -/** - * Undo the `border-style: none` reset that Normalize applies to images so that - * our `border-{width}` utilities have the expected effect. - * - * The Normalize reset is unnecessary for us since we default the border-width - * to 0 on all elements. - * - * https://github.com/tailwindcss/tailwindcss/issues/362 - */ - -img { - border-style: solid; -} - -textarea { - resize: vertical; -} - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - color: #9ca3af; -} - -input:-ms-input-placeholder, textarea:-ms-input-placeholder { - opacity: 1; - color: #9ca3af; -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - color: #9ca3af; -} - -button, -[role="button"] { - cursor: pointer; -} - -/** - * Override legacy focus reset from Normalize with modern Firefox focus styles. - * - * This is actually an improvement over the new defaults in Firefox in our testing, - * as it triggers the better focus styles even for links, which still use a dotted - * outline in Firefox by default. - */ - -:-moz-focusring { - outline: auto; -} - -table { - border-collapse: collapse; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/** - * Reset links to optimize for opt-in styling instead of - * opt-out. - */ - -a { - color: inherit; - text-decoration: inherit; -} - -/** - * Reset form element properties that are easy to forget to - * style explicitly so you don't inadvertently introduce - * styles that deviate from your design system. These styles - * supplement a partial reset that is already applied by - * normalize.css. - */ - -button, -input, -optgroup, -select, -textarea { - padding: 0; - line-height: inherit; - color: inherit; -} - -/** - * Use the configured 'mono' font family for elements that - * are expected to be rendered with a monospace font, falling - * back to the system monospace stack if there is no configured - * 'mono' font family. - */ - -pre, -code, -kbd, -samp { - font-family: monospace; -} - -/** - * 1. Make replaced elements `display: block` by default as that's - * the behavior you want almost all of the time. Inspired by - * CSS Remedy, with `svg` added as well. - * - * https://github.com/mozdevs/cssremedy/issues/14 - * - * 2. Add `vertical-align: middle` to align replaced elements more - * sensibly by default when overriding `display` by adding a - * utility like `inline`. - * - * This can trigger a poorly considered linting error in some - * tools but is included by design. - * - * https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210 - */ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/** - * Constrain images and videos to the parent width and preserve - * their intrinsic aspect ratio. - * - * https://github.com/mozdevs/cssremedy/issues/14 - */ - -img, -video { - max-width: 100%; - height: auto; -} - -/** - * Ensure the default browser behavior of the `hidden` attribute. - */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-opacity: 1; - border-color: rgba(229, 231, 235, var(--tw-border-opacity)); - --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgba(59, 130, 246, 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-blur: var(--tw-empty,/*!*/ /*!*/); - --tw-brightness: var(--tw-empty,/*!*/ /*!*/); - --tw-contrast: var(--tw-empty,/*!*/ /*!*/); - --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); - --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); - --tw-invert: var(--tw-empty,/*!*/ /*!*/); - --tw-saturate: var(--tw-empty,/*!*/ /*!*/); - --tw-sepia: var(--tw-empty,/*!*/ /*!*/); - --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); - --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -html { - accent-color: var(--primary-color); - scroll-behavior: smooth; -} - -body { - font-family: var(--font-body); -} - -summary { - cursor: pointer; -} - -svg { - fill: currentColor; -} - -[disabled] { - cursor: not-allowed; - filter: grayscale(1) brightness(0.9); -} - -::-moz-selection { - background-color: var(--primary-color-alpha); -} - -::selection { - background-color: var(--primary-color-alpha); -} - -:target { - scroll-margin-top: var(--header-height); -} - -.page-width { - margin-left: auto; - margin-right: auto; - max-width: 1000px; -} - -.page-width-sm { - margin-left: auto; - margin-right: auto; - max-width: 750px; -} - -.page-width-half { - margin-left: auto; - margin-right: auto; - max-width: 500px; -} - -/* typography */ - -.h1 { - font-family: var(--font-heading); - font-size: 3rem; - line-height: 1; -} - -.h2 { - font-family: var(--font-heading); - font-size: 1.5rem; - line-height: 2rem; -} - -.h3 { - font-family: var(--font-heading); - font-size: 1.25rem; - line-height: 1.75rem; -} - -.h4 { - font-family: var(--font-heading); - font-size: 0.75rem; - line-height: 1rem; -} - -/* links, actions, buttons */ - -.primary { - --accent: var(--primary-color); - --accent-dark: var(--primary-color-dark); -} - -.secondary { - --accent: var(--secondary-color); - --accent-dark: var(--secondary-color-dark); -} - -.link { - color: var(--accent, inherit); - text-decoration: none; -} - -.link:hover { - text-decoration: underline; -} - -.link:active { - text-decoration-thickness: 2px; -} - -.link-underline { - color: var(--accent, inherit); - text-decoration: underline; -} - -.link-underline:hover { - text-decoration-thickness: 2px; -} - -:is(.link, .link-underline):active { - color: var(--accent-dark); -} - -.action, - .action-alt, - .button { - border: 1px solid; - display: inline-block; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - --tw-bg-opacity: 1; - background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 1rem; - padding-right: 1rem; - text-align: center; - text-decoration: none; -} - -.action:focus, .action-alt:focus, .button:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} - -.action { - border-color: var(--accent, var(--primary-color)); - background-color: var(--accent, var(--primary-color)); - color: #fff; -} - -.action:hover { - border-color: var(--accent-dark, var(--primary-color-dark)); - background-color: var(--accent-dark, var(--primary-color-dark)); -} - -.action-alt { - color: var(--accent, var(--primary-color)); - border-color: currentColor; -} - -.action-alt:hover { - color: var(--accent-dark, var(--primary-color-dark)); -} - -:is(.action, .action-alt).lg { - padding-top: 1rem; - padding-bottom: 1rem; - padding-left: 1.5rem; - padding-right: 1.5rem; -} - -:is(.action, .action-alt).full { - box-sizing: border-box; - width: 100%; -} - -.button { - --tw-border-opacity: 1; - border-color: rgba(209, 213, 219, var(--tw-border-opacity)); -} - -.button:hover { - --tw-border-opacity: 1; - border-color: rgba(156, 163, 175, var(--tw-border-opacity)); -} - -.button:focus { - --tw-border-opacity: 1; - border-color: rgba(156, 163, 175, var(--tw-border-opacity)); -} - -/* inputs */ - -.input { - box-sizing: border-box; - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgba(209, 213, 219, var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - outline: 2px solid transparent; - outline-offset: 2px; -} - -.input:hover { - --tw-border-opacity: 1; - border-color: rgba(156, 163, 175, var(--tw-border-opacity)); -} - -.input:focus { - --tw-border-opacity: 1; - border-color: rgba(156, 163, 175, var(--tw-border-opacity)); - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} - -.input:invalid:not([value=""]) { - --tw-border-opacity: 1; - border-color: rgba(239, 68, 68, var(--tw-border-opacity)); -} - -/* paragraph, richtext */ - -:is(.paragraph, .richtext) > * + * { - margin-top: 1em; -} - -.richtext > :is(h1, h2, h3, h4, h5, h6) { - font-family: var(--font-heading); -} - -.richtext ul { - list-style-type: disc; - padding-left: 2em; -} - -.richtext ol { - list-style-type: decimal; - padding-left: 2em; -} - -.richtext a { - color: var(--primary-color); - text-decoration: underline; -} - -.richtext a:hover { - text-decoration-thickness: 2px; -} - -.richtext a:active { - color: var(--primary-color-dark); -} - -.richtext blockquote { - border-left-width: 4px; - --tw-border-opacity: 1; - border-color: rgba(209, 213, 219, var(--tw-border-opacity)); - padding-left: 1em; -} - -.richtext table { - width: 100%; - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgba(156, 163, 175, var(--tw-border-opacity)); - text-align: center; -} - -.richtext thead { - border-width: 1px; - border-bottom-width: 1px; - --tw-border-opacity: 1; - border-color: rgba(156, 163, 175, var(--tw-border-opacity)); -} - -.richtext tfoot { - border-width: 1px; - border-top-width: 1px; - --tw-border-opacity: 1; - border-color: rgba(156, 163, 175, var(--tw-border-opacity)); -} - -.richtext th { - padding-top: 1rem; - padding-bottom: 1rem; - padding-left: 1.5rem; - padding-right: 1.5rem; - vertical-align: middle; - text-transform: uppercase; - --tw-text-opacity: 1; - color: rgba(209, 213, 219, var(--tw-text-opacity)); -} - -.richtext td { - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 1.5rem; - padding-right: 1.5rem; - vertical-align: middle; -} - -.richtext tfoot tr:first-child td { - padding-top: 1rem; -} - -.richtext tfoot tr:last-child td { - padding-bottom: 1rem; -} - -.richtext tfoot td[colspan] { - text-align: right; -} - -.relative { - position: relative; -} - -.sticky { - position: -webkit-sticky; - position: sticky; -} - -.z-10 { - z-index: 10; -} - -.col-span-full { - grid-column: 1 / -1; -} - -.mb-4 { - margin-bottom: 1rem; -} - -.mt-2 { - margin-top: 0.5rem; -} - -.block { - display: block; -} - -.inline-block { - display: inline-block; -} - -.inline { - display: inline; -} - -.flex { - display: flex; -} - -.table { - display: table; -} - -.grid { - display: grid; -} - -.hidden { - display: none; -} - -.h-full { - height: 100%; -} - -.grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} - -.flex-wrap { - flex-wrap: wrap; -} - -.gap-2 { - gap: 0.5rem; -} - -.gap-8 { - gap: 2rem; -} - -.border { - border-width: 1px; -} - -.border-b { - border-bottom-width: 1px; -} - -.border-gray-400 { - --tw-border-opacity: 1; - border-color: rgba(156, 163, 175, var(--tw-border-opacity)); -} - -.bg-white { - --tw-bg-opacity: 1; - background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); -} - -.p-4 { - padding: 1rem; -} - -.py-8 { - padding-top: 2rem; - padding-bottom: 2rem; -} - -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} - -.py-16 { - padding-top: 4rem; - padding-bottom: 4rem; -} - -.text-center { - text-align: center; -} - -.text-2xl { - font-size: 1.5rem; - line-height: 2rem; -} - -.text-xl { - font-size: 1.25rem; - line-height: 1.75rem; -} - -.text-5xl { - font-size: 3rem; - line-height: 1; -} - -.text-gray-400 { - --tw-text-opacity: 1; - color: rgba(156, 163, 175, var(--tw-text-opacity)); -} - -.no-underline { - text-decoration: none; -} - -.filter { - filter: var(--tw-filter); -} - -.line-clamp { - display: -webkit-box; - -webkit-line-clamp: var(--line-clamp, 1); - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* quantity selector */ - -.qty-inputs { - grid-template-columns: 1fr auto 1fr; - display: grid; - max-width: -webkit-max-content; - max-width: -moz-max-content; - max-width: max-content; - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgba(209, 213, 219, var(--tw-border-opacity)); -} - -.qty-inputs:focus-within { - --tw-border-opacity: 1; - border-color: rgba(156, 163, 175, var(--tw-border-opacity)); - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} - -.qty-inputs:hover { - --tw-border-opacity: 1; - border-color: rgba(156, 163, 175, var(--tw-border-opacity)); -} - -.qty-inc { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 1rem; - padding-right: 1rem; - font-family: monospace; -} - -.qty-inc:hover { - color: var(--primary-color); -} - -.qty-value { - -moz-appearance: textfield; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - text-align: center; -} - -/* blog */ - -.article-item-img > :is(img, div, svg) { - height: 200px; - width: 100%; - -o-object-fit: cover; - object-fit: cover; -} - -.article-tag-list { - font-family: var(--font-heading); - font-size: 0.875rem; - line-height: 1.25rem; - text-transform: uppercase; -} - -.article-tag-list li:not(:last-child)::after { - content: ', '; -} - -.article-tag-list.show-label::before { - content: 'Tags: '; -} - -/* predictive search */ - -.search-suggestions { - max-height: max(200px, 50vh); - position: absolute; - left: 0px; - top: 100%; - z-index: 1; - box-sizing: border-box; - width: 100%; - overflow-y: auto; - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgba(156, 163, 175, var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); - padding-left: 1rem; - padding-right: 1rem; -} - -.search-suggestions:empty { - display: none; -} - -.suggestion-group-title { - position: -webkit-sticky; - position: sticky; - top: 0px; - border-bottom-width: 1px; - --tw-border-opacity: 1; - border-color: rgba(209, 213, 219, var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); - padding-top: 1rem; - padding-bottom: 1rem; - text-transform: uppercase; - --tw-text-opacity: 1; - color: rgba(156, 163, 175, var(--tw-text-opacity)); -} - -.suggestion-item { - --suggestion-img-size: 50px; - margin-top: 0.5rem; -} - -.suggestion-item-url { - grid-template-columns: var(--suggestion-img-size) 1fr; - color: inherit; - display: grid; - align-items: center; - gap: 0.5rem; - text-decoration: none; -} - -.suggestion-item-url:hover .suggestion-item-title { - color: var(--primary-color); -} - -.suggestion-item-img { - --tw-bg-opacity: 1; - background-color: rgba(243, 244, 246, var(--tw-bg-opacity)); -} - -.suggestion-item-img img { - width: var(--suggestion-img-size); - height: var(--suggestion-img-size); - display: block; - --tw-bg-opacity: 1; - background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); - -o-object-fit: contain; - object-fit: contain; -} - -.suggestion-item-img img:not([src]) { - opacity: 0; -} - -@media (min-width: 769px) { - .tablet\+\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } -} diff --git a/assets/tailwind.css b/assets/theme.css similarity index 100% rename from assets/tailwind.css rename to assets/theme.css diff --git a/assets/theme.min.css b/assets/theme.min.css new file mode 100644 index 0000000..a69d592 --- /dev/null +++ b/assets/theme.min.css @@ -0,0 +1 @@ +/*! tailwindcss v2.2.17 | MIT License | https://tailwindcss.com*//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:initial;background-image:none}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{box-sizing:border-box;border:0 solid}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:-moz-focusring{outline:auto}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity));--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-blur:var(--tw-empty,/*!*/ /*!*/);--tw-brightness:var(--tw-empty,/*!*/ /*!*/);--tw-contrast:var(--tw-empty,/*!*/ /*!*/);--tw-grayscale:var(--tw-empty,/*!*/ /*!*/);--tw-hue-rotate:var(--tw-empty,/*!*/ /*!*/);--tw-invert:var(--tw-empty,/*!*/ /*!*/);--tw-saturate:var(--tw-empty,/*!*/ /*!*/);--tw-sepia:var(--tw-empty,/*!*/ /*!*/);--tw-drop-shadow:var(--tw-empty,/*!*/ /*!*/);--tw-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}html{accent-color:var(--primary-color);scroll-behavior:smooth}body{font-family:var(--font-body)}summary{cursor:pointer}svg{fill:currentColor}[disabled]{cursor:not-allowed;filter:grayscale(1) brightness(.9)}::-moz-selection{background-color:var(--primary-color-alpha)}::selection{background-color:var(--primary-color-alpha)}:target{scroll-margin-top:var(--header-height)}.page-width{max-width:1000px}.page-width,.page-width-sm{margin-left:auto;margin-right:auto}.page-width-sm{max-width:750px}.page-width-half{margin-left:auto;margin-right:auto;max-width:500px}.h1{font-size:3rem;line-height:1}.h1,.h2{font-family:var(--font-heading)}.h2{font-size:1.5rem;line-height:2rem}.h3{font-size:1.25rem;line-height:1.75rem}.h3,.h4{font-family:var(--font-heading)}.h4{font-size:.75rem;line-height:1rem}.primary{--accent:var(--primary-color);--accent-dark:var(--primary-color-dark)}.secondary{--accent:var(--secondary-color);--accent-dark:var(--secondary-color-dark)}.link{color:var(--accent,inherit);text-decoration:none}.link:hover{text-decoration:underline}.link:active{text-decoration-thickness:2px}.link-underline{color:var(--accent,inherit);text-decoration:underline}.link-underline:hover{text-decoration-thickness:2px}:is(.link,.link-underline):active{color:var(--accent-dark)}.action,.action-alt,.button{border:1px solid;display:inline-block;-webkit-appearance:none;-moz-appearance:none;appearance:none;--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity));padding:.5rem 1rem;text-align:center;text-decoration:none}.action-alt:focus,.action:focus,.button:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.action{border-color:var(--accent,var(--primary-color));background-color:var(--accent,var(--primary-color));color:#fff}.action:hover{border-color:var(--accent-dark,var(--primary-color-dark));background-color:var(--accent-dark,var(--primary-color-dark))}.action-alt{color:var(--accent,var(--primary-color));border-color:currentColor}.action-alt:hover{color:var(--accent-dark,var(--primary-color-dark))}:is(.action,.action-alt).lg{padding:1rem 1.5rem}:is(.action,.action-alt).full{box-sizing:border-box;width:100%}.button{--tw-border-opacity:1;border-color:rgba(209,213,219,var(--tw-border-opacity))}.button:focus,.button:hover{--tw-border-opacity:1;border-color:rgba(156,163,175,var(--tw-border-opacity))}.input{box-sizing:border-box;border-width:1px;--tw-border-opacity:1;border-color:rgba(209,213,219,var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity));padding:.25rem .5rem;outline:2px solid transparent;outline-offset:2px}.input:focus,.input:hover{--tw-border-opacity:1;border-color:rgba(156,163,175,var(--tw-border-opacity))}.input:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.input:invalid:not([value=""]){--tw-border-opacity:1;border-color:rgba(239,68,68,var(--tw-border-opacity))}:is(.paragraph,.richtext)>*+*{margin-top:1em}.richtext>:is(h1,h2,h3,h4,h5,h6){font-family:var(--font-heading)}.richtext ul{list-style-type:disc;padding-left:2em}.richtext ol{list-style-type:decimal;padding-left:2em}.richtext a{color:var(--primary-color);text-decoration:underline}.richtext a:hover{text-decoration-thickness:2px}.richtext a:active{color:var(--primary-color-dark)}.richtext blockquote{border-left-width:4px;--tw-border-opacity:1;border-color:rgba(209,213,219,var(--tw-border-opacity));padding-left:1em}.richtext table{width:100%;text-align:center}.richtext table,.richtext tfoot,.richtext thead{border-width:1px;--tw-border-opacity:1;border-color:rgba(156,163,175,var(--tw-border-opacity))}.richtext th{padding:1rem 1.5rem;vertical-align:middle;text-transform:uppercase;--tw-text-opacity:1;color:rgba(209,213,219,var(--tw-text-opacity))}.richtext td{padding:.25rem 1.5rem;vertical-align:middle}.richtext tfoot tr:first-child td{padding-top:1rem}.richtext tfoot tr:last-child td{padding-bottom:1rem}.richtext tfoot td[colspan]{text-align:right}.relative{position:relative}.sticky{position:-webkit-sticky;position:sticky}.z-10{z-index:10}.col-span-full{grid-column:1/-1}.mb-4{margin-bottom:1rem}.mt-2{margin-top:.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.gap-2{gap:.5rem}.gap-8{gap:2rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-gray-400{--tw-border-opacity:1;border-color:rgba(156,163,175,var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.p-4{padding:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.px-4{padding-left:1rem;padding-right:1rem}.py-16{padding-top:4rem;padding-bottom:4rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-5xl{font-size:3rem;line-height:1}.text-gray-400{--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.no-underline{text-decoration:none}.filter{filter:var(--tw-filter)}.line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp,1);-webkit-box-orient:vertical;overflow:hidden}.qty-inputs{grid-template-columns:1fr auto 1fr;display:grid;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content;border-width:1px;--tw-border-opacity:1;border-color:rgba(209,213,219,var(--tw-border-opacity))}.qty-inputs:focus-within{--tw-border-opacity:1;border-color:rgba(156,163,175,var(--tw-border-opacity));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.qty-inputs:hover{--tw-border-opacity:1;border-color:rgba(156,163,175,var(--tw-border-opacity))}.qty-inc{padding:.5rem 1rem;font-family:monospace}.qty-inc:hover{color:var(--primary-color)}.qty-value{-moz-appearance:textfield;padding-top:.5rem;padding-bottom:.5rem;text-align:center}.article-item-img>:is(img,div,svg){height:200px;width:100%;-o-object-fit:cover;object-fit:cover}.article-tag-list{font-family:var(--font-heading);font-size:.875rem;line-height:1.25rem;text-transform:uppercase}.article-tag-list li:not(:last-child):after{content:", "}.article-tag-list.show-label:before{content:"Tags: "}.search-suggestions{max-height:max(200px,50vh);position:absolute;left:0;top:100%;z-index:1;box-sizing:border-box;width:100%;overflow-y:auto;border-width:1px;--tw-border-opacity:1;border-color:rgba(156,163,175,var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity));padding-left:1rem;padding-right:1rem}.search-suggestions:empty{display:none}.suggestion-group-title{position:-webkit-sticky;position:sticky;top:0;border-bottom-width:1px;--tw-border-opacity:1;border-color:rgba(209,213,219,var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity));padding-top:1rem;padding-bottom:1rem;text-transform:uppercase;--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.suggestion-item{--suggestion-img-size:50px;margin-top:.5rem}.suggestion-item-url{grid-template-columns:var(--suggestion-img-size) 1fr;color:inherit;display:grid;align-items:center;gap:.5rem;text-decoration:none}.suggestion-item-url:hover .suggestion-item-title{color:var(--primary-color)}.suggestion-item-img{--tw-bg-opacity:1;background-color:rgba(243,244,246,var(--tw-bg-opacity))}.suggestion-item-img img{width:var(--suggestion-img-size);height:var(--suggestion-img-size);display:block;--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity));-o-object-fit:contain;object-fit:contain}.suggestion-item-img img:not([src]){opacity:0}@media (min-width:769px){.tablet\+\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}} \ No newline at end of file diff --git a/config/settings_schema.json b/config/settings_schema.json index 727e351..f9d991f 100644 --- a/config/settings_schema.json +++ b/config/settings_schema.json @@ -29,18 +29,6 @@ { "type": "header", "content": "Supplemental colors" - }, - { - "type": "color", - "id": "bg", - "label": "Background color", - "default": "#ddd" - }, - { - "type": "color", - "id": "border", - "label": "Border color", - "default": "#bbb" } ] }, diff --git a/layout/theme.liquid b/layout/theme.liquid index c07197d..7e6d122 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -20,7 +20,7 @@ {%- render 'root.css' %} - {{ 'tailwind.min.css' | asset_url | stylesheet_tag }} + {{ 'theme.min.css' | asset_url | stylesheet_tag }} {{ content_for_header }} diff --git a/package.json b/package.json index acffbfa..3fcf4c7 100644 --- a/package.json +++ b/package.json @@ -9,9 +9,9 @@ "scripts": { "shopify:switch": "shopify switch --store=human-dev.myshopify.com", "dev": "yarn shopify:switch && shopify theme serve", - "dev:css": "tailwindcss -i assets/tailwind.css -o assets/tailwind.min.css --watch", + "dev:css": "tailwindcss -i assets/theme.css -o assets/theme.min.css --watch", "build": "yarn build:css && yarn build:js", - "build:css": "tailwindcss -i assets/tailwind.css -o assets/tailwind.min.css --postcss --minify", + "build:css": "tailwindcss -i assets/theme.css -o assets/theme.min.css --postcss --minify", "build:js": "rm assets/*.min.js && esbuild assets/*.js --outdir=assets --out-extension:.js=.min.js" }, "devDependencies": { diff --git a/snippets/root.css.liquid b/snippets/root.css.liquid index af01978..70a7e99 100644 --- a/snippets/root.css.liquid +++ b/snippets/root.css.liquid @@ -13,7 +13,5 @@ --secondary-color-dark: {{ settings.secondary_color | color_darken: 10 }}; --header-height: 0; - - --t: 0.2s ease-in-out; } {% endstyle %}