From a8fbf2d016d7fe051e21fc77bad050059bef498d Mon Sep 17 00:00:00 2001 From: Torsten Date: Sat, 11 Feb 2023 13:05:13 +0200 Subject: [PATCH] smaller tailwind build for emails --- .../stylesheets/merged/merged.email.css | 1336 +++++++++++++++++ app/views/layouts/mailer.html.erb | 13 - app/views/layouts/mailer.html.haml | 8 + bin/build | 14 + bin/watch | 2 +- config/tailwind.email.js | 14 + lib/merged/engine.rb | 2 +- 7 files changed, 1374 insertions(+), 15 deletions(-) create mode 100644 app/assets/stylesheets/merged/merged.email.css delete mode 100644 app/views/layouts/mailer.html.erb create mode 100644 app/views/layouts/mailer.html.haml create mode 100755 bin/build create mode 100644 config/tailwind.email.js diff --git a/app/assets/stylesheets/merged/merged.email.css b/app/assets/stylesheets/merged/merged.email.css new file mode 100644 index 0000000..3e47cb3 --- /dev/null +++ b/app/assets/stylesheets/merged/merged.email.css @@ -0,0 +1,1336 @@ +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.button { + display: inline-block; + border-radius: 0.5rem; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(107 114 128 / var(--tw-border-opacity)); + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 1rem; + line-height: 1.5rem; + font-weight: 500; +} + +.button:hover { + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); +} + +.change { + --tw-bg-opacity: 1; + background-color: rgb(165 243 252 / var(--tw-bg-opacity)); +} + +.absolute { + position: absolute; +} + +.relative { + position: relative; +} + +.inset-0 { + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; +} + +.top-3 { + top: 0.75rem; +} + +.bottom-0 { + bottom: 0px; +} + +.left-0 { + left: 0px; +} + +.top-0 { + top: 0px; +} + +.right-0 { + right: 0px; +} + +.z-0 { + z-index: 0; +} + +.-z-10 { + z-index: -10; +} + +.col-span-2 { + grid-column: span 2 / span 2; +} + +.m-5 { + margin: 1.25rem; +} + +.m-10 { + margin: 2.5rem; +} + +.m-8 { + margin: 2rem; +} + +.m-3 { + margin: 0.75rem; +} + +.m-2 { + margin: 0.5rem; +} + +.m-12 { + margin: 3rem; +} + +.m-6 { + margin: 1.5rem; +} + +.m-0 { + margin: 0px; +} + +.mx-auto { + margin-left: auto; + margin-right: auto; +} + +.my-4 { + margin-top: 1rem; + margin-bottom: 1rem; +} + +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.mx-5 { + margin-left: 1.25rem; + margin-right: 1.25rem; +} + +.my-5 { + margin-top: 1.25rem; + margin-bottom: 1.25rem; +} + +.mx-20 { + margin-left: 5rem; + margin-right: 5rem; +} + +.my-20 { + margin-top: 5rem; + margin-bottom: 5rem; +} + +.mt-6 { + margin-top: 1.5rem; +} + +.mb-2 { + margin-bottom: 0.5rem; +} + +.mb-4 { + margin-bottom: 1rem; +} + +.mt-4 { + margin-top: 1rem; +} + +.mt-16 { + margin-top: 4rem; +} + +.mt-10 { + margin-top: 2.5rem; +} + +.mb-10 { + margin-bottom: 2.5rem; +} + +.mb-6 { + margin-bottom: 1.5rem; +} + +.mt-8 { + margin-top: 2rem; +} + +.mt-3 { + margin-top: 0.75rem; +} + +.mt-20 { + margin-top: 5rem; +} + +.mt-2 { + margin-top: 0.5rem; +} + +.ml-20 { + margin-left: 5rem; +} + +.mr-20 { + margin-right: 5rem; +} + +.mr-2 { + margin-right: 0.5rem; +} + +.mb-3 { + margin-bottom: 0.75rem; +} + +.mt-1 { + margin-top: 0.25rem; +} + +.ml-0 { + margin-left: 0px; +} + +.mr-3 { + margin-right: 0.75rem; +} + +.block { + display: block; +} + +.inline-block { + display: inline-block; +} + +.flex { + display: flex; +} + +.inline-flex { + display: inline-flex; +} + +.grid { + display: grid; +} + +.h-40 { + height: 10rem; +} + +.h-full { + height: 100%; +} + +.h-56 { + height: 14rem; +} + +.h-60 { + height: 15rem; +} + +.h-24 { + height: 6rem; +} + +.h-1 { + height: 0.25rem; +} + +.h-16 { + height: 4rem; +} + +.h-8 { + height: 2rem; +} + +.h-20 { + height: 5rem; +} + +.h-96 { + height: 24rem; +} + +.w-full { + width: 100%; +} + +.w-1 { + width: 0.25rem; +} + +.w-16 { + width: 4rem; +} + +.w-8 { + width: 2rem; +} + +.w-40 { + width: 10rem; +} + +.w-20 { + width: 5rem; +} + +.max-w-full { + max-width: 100%; +} + +.max-w-prose { + max-width: 65ch; +} + +.max-w-\[50\%\] { + max-width: 50%; +} + +.max-w-4xl { + max-width: 56rem; +} + +.max-w-xl { + max-width: 36rem; +} + +.max-w-md { + max-width: 28rem; +} + +.max-w-none { + max-width: none; +} + +.flex-1 { + flex: 1 1 0%; +} + +.origin-\[0\] { + transform-origin: 0; +} + +.origin-left { + transform-origin: left; +} + +.origin-bottom { + transform-origin: bottom; +} + +.origin-right { + transform-origin: right; +} + +.origin-top { + transform-origin: top; +} + +.-translate-y-6 { + --tw-translate-y: -1.5rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.scale-75 { + --tw-scale-x: .75; + --tw-scale-y: .75; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.scale-x-0 { + --tw-scale-x: 0; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.scale-y-0 { + --tw-scale-y: 0; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.transform { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.appearance-none { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.columns-1 { + -moz-columns: 1; + columns: 1; +} + +.grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.flex-col { + flex-direction: column; +} + +.items-end { + align-items: flex-end; +} + +.items-center { + align-items: center; +} + +.justify-start { + justify-content: flex-start; +} + +.justify-center { + justify-content: center; +} + +.justify-between { + justify-content: space-between; +} + +.gap-16 { + gap: 4rem; +} + +.gap-6 { + gap: 1.5rem; +} + +.gap-12 { + gap: 3rem; +} + +.gap-8 { + gap: 2rem; +} + +.overflow-hidden { + overflow: hidden; +} + +.rounded-md { + border-radius: 0.375rem; +} + +.rounded { + border-radius: 0.25rem; +} + +.rounded-sm { + border-radius: 0.125rem; +} + +.rounded-full { + border-radius: 9999px; +} + +.rounded-lg { + border-radius: 0.5rem; +} + +.border-0 { + border-width: 0px; +} + +.border { + border-width: 1px; +} + +.border-4 { + border-width: 4px; +} + +.border-b { + border-bottom-width: 1px; +} + +.border-b-8 { + border-bottom-width: 8px; +} + +.border-gray-500 { + --tw-border-opacity: 1; + border-color: rgb(107 114 128 / var(--tw-border-opacity)); +} + +.border-gray-600 { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); +} + +.border-gray-100 { + --tw-border-opacity: 1; + border-color: rgb(243 244 246 / var(--tw-border-opacity)); +} + +.border-gray-400 { + --tw-border-opacity: 1; + border-color: rgb(156 163 175 / var(--tw-border-opacity)); +} + +.bg-transparent { + background-color: transparent; +} + +.bg-cyan-700 { + --tw-bg-opacity: 1; + background-color: rgb(14 116 144 / var(--tw-bg-opacity)); +} + +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.bg-gray-100 { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + +.bg-green-700 { + --tw-bg-opacity: 1; + background-color: rgb(21 128 61 / var(--tw-bg-opacity)); +} + +.bg-cyan-100 { + --tw-bg-opacity: 1; + background-color: rgb(207 250 254 / var(--tw-bg-opacity)); +} + +.bg-orange-50 { + --tw-bg-opacity: 1; + background-color: rgb(255 247 237 / var(--tw-bg-opacity)); +} + +.bg-amber-600 { + --tw-bg-opacity: 1; + background-color: rgb(217 119 6 / var(--tw-bg-opacity)); +} + +.bg-teal-700 { + --tw-bg-opacity: 1; + background-color: rgb(15 118 110 / var(--tw-bg-opacity)); +} + +.bg-cyan-900 { + --tw-bg-opacity: 1; + background-color: rgb(22 78 99 / var(--tw-bg-opacity)); +} + +.bg-slate-900 { + --tw-bg-opacity: 1; + background-color: rgb(15 23 42 / var(--tw-bg-opacity)); +} + +.bg-white\/25 { + background-color: rgb(255 255 255 / 0.25); +} + +.bg-black\/25 { + background-color: rgb(0 0 0 / 0.25); +} + +.bg-cyan-100\/25 { + background-color: rgb(207 250 254 / 0.25); +} + +.bg-orange-300\/25 { + background-color: rgb(253 186 116 / 0.25); +} + +.bg-cyan-700\/25 { + background-color: rgb(14 116 144 / 0.25); +} + +.bg-orange-800\/25 { + background-color: rgb(154 52 18 / 0.25); +} + +.bg-cover { + background-size: cover; +} + +.bg-no-repeat { + background-repeat: no-repeat; +} + +.object-cover { + -o-object-fit: cover; + object-fit: cover; +} + +.p-8 { + padding: 2rem; +} + +.p-20 { + padding: 5rem; +} + +.p-px { + padding: 1px; +} + +.p-5 { + padding: 1.25rem; +} + +.p-4 { + padding: 1rem; +} + +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + +.py-2\.5 { + padding-top: 0.625rem; + padding-bottom: 0.625rem; +} + +.px-0 { + padding-left: 0px; + padding-right: 0px; +} + +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.px-20 { + padding-left: 5rem; + padding-right: 5rem; +} + +.py-16 { + padding-top: 4rem; + padding-bottom: 4rem; +} + +.py-24 { + padding-top: 6rem; + padding-bottom: 6rem; +} + +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.pt-10 { + padding-top: 2.5rem; +} + +.pr-16 { + padding-right: 4rem; +} + +.pb-6 { + padding-bottom: 1.5rem; +} + +.text-left { + text-align: left; +} + +.text-center { + text-align: center; +} + +.align-bottom { + vertical-align: bottom; +} + +.text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; +} + +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.text-xs { + font-size: 0.75rem; + line-height: 1rem; +} + +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; +} + +.font-bold { + font-weight: 700; +} + +.font-medium { + font-weight: 500; +} + +.font-extrabold { + font-weight: 800; +} + +.font-semibold { + font-weight: 600; +} + +.leading-none { + line-height: 1; +} + +.leading-5 { + line-height: 1.25rem; +} + +.leading-relaxed { + line-height: 1.625; +} + +.tracking-tight { + letter-spacing: -0.025em; +} + +.tracking-widest { + letter-spacing: 0.1em; +} + +.text-gray-900 { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.text-gray-800 { + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); +} + +.text-black { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +.text-cyan-100 { + --tw-text-opacity: 1; + color: rgb(207 250 254 / var(--tw-text-opacity)); +} + +.text-gray-100 { + --tw-text-opacity: 1; + color: rgb(243 244 246 / var(--tw-text-opacity)); +} + +.text-cyan-700 { + --tw-text-opacity: 1; + color: rgb(14 116 144 / var(--tw-text-opacity)); +} + +.text-orange-800 { + --tw-text-opacity: 1; + color: rgb(154 52 18 / var(--tw-text-opacity)); +} + +.text-green-700 { + --tw-text-opacity: 1; + color: rgb(21 128 61 / var(--tw-text-opacity)); +} + +.text-teal-700 { + --tw-text-opacity: 1; + color: rgb(15 118 110 / var(--tw-text-opacity)); +} + +.text-indigo-800 { + --tw-text-opacity: 1; + color: rgb(55 48 163 / var(--tw-text-opacity)); +} + +.text-slate-800 { + --tw-text-opacity: 1; + color: rgb(30 41 59 / var(--tw-text-opacity)); +} + +.shadow-sm { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.transition-colors { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.duration-300 { + transition-duration: 300ms; +} + +.duration-200 { + transition-duration: 200ms; +} + +.duration-700 { + transition-duration: 700ms; +} + +.ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); +} + +.prose { + max-width: 100%; + color: inherit; + --tw-prose-bullets: #6b7280; + --tw-prose-headings: inherit; +} + +.hover\:scale-105:hover { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.hover\:scale-110:hover { + --tw-scale-x: 1.1; + --tw-scale-y: 1.1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.hover\:bg-blue-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(30 64 175 / var(--tw-bg-opacity)); +} + +.hover\:text-gray-500\/75:hover { + color: rgb(107 114 128 / 0.75); +} + +.hover\:text-gray-500:hover { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.hover\:shadow-xl:hover { + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.focus\:border-blue-600:focus { + --tw-border-opacity: 1; + border-color: rgb(37 99 235 / var(--tw-border-opacity)); +} + +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.focus\:ring-0: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(0px + 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); +} + +.group:hover .group-hover\:translate-x-1 { + --tw-translate-x: 0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.group:hover .group-hover\:scale-x-100 { + --tw-scale-x: 1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.group:hover .group-hover\:scale-y-100 { + --tw-scale-y: 1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.group:hover .group-hover\:bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} + +.group:hover .group-hover\:text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:translate-y-0 { + --tw-translate-y: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.peer:placeholder-shown ~ .peer-placeholder-shown\:translate-y-0 { + --tw-translate-y: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:scale-100 { + --tw-scale-x: 1; + --tw-scale-y: 1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.peer:placeholder-shown ~ .peer-placeholder-shown\:scale-100 { + --tw-scale-x: 1; + --tw-scale-y: 1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.peer:focus ~ .peer-focus\:left-0 { + left: 0px; +} + +.peer:focus ~ .peer-focus\:-translate-y-6 { + --tw-translate-y: -1.5rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.peer:focus ~ .peer-focus\:scale-75 { + --tw-scale-x: .75; + --tw-scale-y: .75; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.peer:focus ~ .peer-focus\:text-blue-600 { + --tw-text-opacity: 1; + color: rgb(37 99 235 / var(--tw-text-opacity)); +} + +@media (prefers-color-scheme: dark) { + .peer:focus ~ .peer-focus\:dark\:text-blue-500 { + --tw-text-opacity: 1; + color: rgb(59 130 246 / var(--tw-text-opacity)); + } +} + +@media (min-width: 640px) { + .sm\:mx-auto { + margin-left: auto; + margin-right: auto; + } + + .sm\:mt-4 { + margin-top: 1rem; + } + + .sm\:h-full { + height: 100%; + } + + .sm\:w-1\/2 { + width: 50%; + } + + .sm\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .sm\:text-center { + text-align: center; + } + + .sm\:text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; + } + + .sm\:text-2xl { + font-size: 1.5rem; + line-height: 2rem; + } +} + +@media (min-width: 768px) { + .md\:m-12 { + margin: 3rem; + } + + .md\:m-20 { + margin: 5rem; + } + + .md\:m-8 { + margin: 2rem; + } + + .md\:m-4 { + margin: 1rem; + } + + .md\:my-10 { + margin-top: 2.5rem; + margin-bottom: 2.5rem; + } + + .md\:mx-12 { + margin-left: 3rem; + margin-right: 3rem; + } + + .md\:grid { + display: grid; + } + + .md\:h-60 { + height: 15rem; + } + + .md\:columns-2 { + -moz-columns: 2; + columns: 2; + } + + .md\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .md\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .md\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .md\:flex-row { + flex-direction: row; + } + + .md\:gap-8 { + gap: 2rem; + } + + .md\:gap-12 { + gap: 3rem; + } + + .md\:p-12 { + padding: 3rem; + } + + .md\:py-10 { + padding-top: 2.5rem; + padding-bottom: 2.5rem; + } + + .md\:text-5xl { + font-size: 3rem; + line-height: 1; + } + + .md\:text-2xl { + font-size: 1.5rem; + line-height: 2rem; + } + + .md\:text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; + } +} + +@media (min-width: 1024px) { + .lg\:m-20 { + margin: 5rem; + } + + .lg\:m-12 { + margin: 3rem; + } + + .lg\:mx-20 { + margin-left: 5rem; + margin-right: 5rem; + } + + .lg\:mb-8 { + margin-bottom: 2rem; + } + + .lg\:mt-8 { + margin-top: 2rem; + } + + .lg\:mt-0 { + margin-top: 0px; + } + + .lg\:mb-0 { + margin-bottom: 0px; + } + + .lg\:ml-10 { + margin-left: 2.5rem; + } + + .lg\:h-96 { + height: 24rem; + } + + .lg\:w-1\/3 { + width: 33.333333%; + } + + .lg\:w-2\/3 { + width: 66.666667%; + } + + .lg\:w-3\/5 { + width: 60%; + } + + .lg\:w-2\/5 { + width: 40%; + } + + .lg\:columns-3 { + -moz-columns: 3; + columns: 3; + } + + .lg\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .lg\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .lg\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .lg\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .lg\:flex-row { + flex-direction: row; + } + + .lg\:items-center { + align-items: center; + } + + .lg\:gap-12 { + gap: 3rem; + } + + .lg\:gap-16 { + gap: 4rem; + } + + .lg\:px-8 { + padding-left: 2rem; + padding-right: 2rem; + } + + .lg\:px-16 { + padding-left: 4rem; + padding-right: 4rem; + } + + .lg\:py-24 { + padding-top: 6rem; + padding-bottom: 6rem; + } + + .lg\:py-16 { + padding-top: 4rem; + padding-bottom: 4rem; + } +} + +@media (min-width: 1280px) { + .xl\:m-8 { + margin: 2rem; + } + + .xl\:m-14 { + margin: 3.5rem; + } + + .xl\:m-20 { + margin: 5rem; + } + + .xl\:columns-4 { + -moz-columns: 4; + columns: 4; + } +} diff --git a/app/views/layouts/mailer.html.erb b/app/views/layouts/mailer.html.erb deleted file mode 100644 index cbd34d2..0000000 --- a/app/views/layouts/mailer.html.erb +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - <%= yield %> - - diff --git a/app/views/layouts/mailer.html.haml b/app/views/layouts/mailer.html.haml new file mode 100644 index 0000000..8dbf451 --- /dev/null +++ b/app/views/layouts/mailer.html.haml @@ -0,0 +1,8 @@ +!!! +%html + %head + %meta{:content => "text/html; charset=utf-8", "http-equiv" => "Content-Type"}/ + %style + = Rails.application.assets_manifest.find_sources('merged/merged.email.css').first.to_s.html_safe + %body + = yield diff --git a/bin/build b/bin/build new file mode 100755 index 0000000..a3d46eb --- /dev/null +++ b/bin/build @@ -0,0 +1,14 @@ +#!/usr/bin/env sh +# see also watch, the main css is the same without -w (watch) + +tailwindcss -i app/assets/stylesheets/merged.tailwind.css \ + -o app/assets/stylesheets/merged/merged.css \ + -c config/tailwind.config.js + +# the second rn is for emails, +# without prose, preflight and app styles (ie just views) +# to get to about 30% size + +tailwindcss -i app/assets/stylesheets/merged.tailwind.css \ + -o app/assets/stylesheets/merged/merged.email.css \ + -c config/tailwind.email.js diff --git a/bin/watch b/bin/watch index f4f57c0..1eb2cc3 100755 --- a/bin/watch +++ b/bin/watch @@ -2,7 +2,7 @@ # Since tailwind does not install into the engine, this will # watch and recompile during development # Note: i have merged in a dir next to the app i develop. and run this in a seperate window -# PS, not minified as appicaltion will do that +# PS, not minified as application will do that # tailwindcss executable must exist (by bundling tailwindcss-rails eg) tailwindcss -i app/assets/stylesheets/merged.tailwind.css \ diff --git a/config/tailwind.email.js b/config/tailwind.email.js new file mode 100644 index 0000000..b3e2ae3 --- /dev/null +++ b/config/tailwind.email.js @@ -0,0 +1,14 @@ +const defaultTheme = require('tailwindcss/defaultTheme') + +module.exports = { + corePlugins: { + preflight: false, + opacity: false, + }, + content: [ + './app/views/merged/view/**/*.haml', + './lib/**/*.rb' + ], + plugins: [ + ] +} diff --git a/lib/merged/engine.rb b/lib/merged/engine.rb index 60b5d37..eaf38fd 100644 --- a/lib/merged/engine.rb +++ b/lib/merged/engine.rb @@ -12,7 +12,7 @@ module Merged config.merged = Merged initializer "merged.assets.precompile" do |app| - app.config.assets.precompile += %w( merged/merged.css + app.config.assets.precompile += %w( merged/merged.css merged/merged.email.css merged/home merged/merged_logo) add_image_assets(app.config , "section_preview") add_image_assets(app.config , "card_preview")