FeenixMakers
/
merged
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

smaller tailwind build for emails

This commit is contained in:
Torsten 2023-02-11 13:05:13 +02:00
parent e62244acae
commit a8fbf2d016
7 changed files with 1374 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1336
app/assets/stylesheets/merged/merged.email.css Normal file
View File

@ -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;
}
}

13
app/views/layouts/mailer.html.erb
View File

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/* Email styles need to be inline */
</style>
</head>
<body>
<%= yield %>
</body>
</html>

8
app/views/layouts/mailer.html.haml Normal file
View File

@ -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

14
bin/build Executable file
View File

@ -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

2
bin/watch
View File

@ -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 \

14
config/tailwind.email.js Normal file
View File

@ -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: [
]
}

2
lib/merged/engine.rb
View File

@ -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")