diff --git a/_dev/elegance.css b/_dev/elegance.css index 3e04714..9ff5110 100644 --- a/_dev/elegance.css +++ b/_dev/elegance.css @@ -82,3 +82,18 @@ input[type="radio"],input[type="checkbox"] { z-index: 10 !important; } +#shirtImage:hover { + content: url('https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/shirt_hover_img.png'); +} + +#suitImage:hover{ + content: url('https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/suit_hover_img.png'); +} + +#sportsjacketImage:hover{ + content:url('https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/sports_jacket_hover_img.png'); +} + +#tuxImage:hover{ + content:url('https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/tux_hover_img.png') +} \ No newline at end of file diff --git a/assets/css/theme.css b/assets/css/theme.css index adbcbb2..7fe4f98 100644 --- a/assets/css/theme.css +++ b/assets/css/theme.css @@ -1,5 +1,113 @@ +*, ::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-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --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: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +::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-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --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: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + /* -! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com +! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com */ /* @@ -32,9 +140,11 @@ 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. +7. Disable tap highlights on iOS */ -html { +html, +:host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; @@ -50,6 +160,8 @@ html { /* 5 */ font-variation-settings: normal; /* 6 */ + -webkit-tap-highlight-color: transparent; + /* 7 */ } /* @@ -121,8 +233,10 @@ strong { } /* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. +1. Use the user's configured `mono` font-family by default. +2. Use the user's configured `mono` font-feature-settings by default. +3. Use the user's configured `mono` font-variation-settings by default. +4. Correct the odd `em` font sizing in all browsers. */ code, @@ -131,8 +245,12 @@ samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ - font-size: 1em; + font-feature-settings: normal; /* 2 */ + font-variation-settings: normal; + /* 3 */ + font-size: 1em; + /* 4 */ } /* @@ -201,6 +319,8 @@ textarea { /* 1 */ line-height: inherit; /* 1 */ + letter-spacing: inherit; + /* 1 */ color: inherit; /* 1 */ margin: 0; @@ -224,9 +344,9 @@ select { */ button, -[type='button'], -[type='reset'], -[type='submit'] { +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; @@ -430,7 +550,7 @@ video { /* Make elements with the HTML hidden attribute stay hidden by default */ -[hidden] { +[hidden]:where(:not([hidden="until-found"])) { display: none; } @@ -605,106 +725,6 @@ select { outline: 1px auto -webkit-focus-ring-color; } -*, ::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-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --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-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --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: ; -} - .container { width: 100%; } @@ -783,6 +803,10 @@ select { bottom: 0px; } +.bottom-1 { + bottom: 0.25rem; +} + .bottom-\[50\%\] { bottom: 50%; } @@ -803,10 +827,18 @@ select { right: 3rem; } +.right-2 { + right: 0.5rem; +} + .right-4 { right: 1rem; } +.right-8 { + right: 2rem; +} + .top-0 { top: 0px; } @@ -831,6 +863,38 @@ select { z-index: 10; } +.col-span-1 { + grid-column: span 1 / span 1; +} + +.col-start-1 { + grid-column-start: 1; +} + +.col-start-2 { + grid-column-start: 2; +} + +.row-span-1 { + grid-row: span 1 / span 1; +} + +.row-span-2 { + grid-row: span 2 / span 2; +} + +.row-span-3 { + grid-row: span 3 / span 3; +} + +.row-start-1 { + grid-row-start: 1; +} + +.row-end-2 { + grid-row-end: 2; +} + .m-0 { margin: 0px; } @@ -860,11 +924,6 @@ select { margin-right: auto; } -.my-0 { - margin-top: 0px; - margin-bottom: 0px; -} - .my-0\.5 { margin-top: 0.125rem; margin-bottom: 0.125rem; @@ -908,10 +967,18 @@ select { margin-bottom: 3rem; } +.mb-16 { + margin-bottom: 4rem; +} + .mb-2 { margin-bottom: 0.5rem; } +.mb-20 { + margin-bottom: 5rem; +} + .mb-3 { margin-bottom: 0.75rem; } @@ -964,6 +1031,10 @@ select { margin-top: 0.5rem; } +.mt-20 { + margin-top: 5rem; +} + .mt-24 { margin-top: 6rem; } @@ -1128,6 +1199,10 @@ select { width: 160px; } +.w-\[40\%\] { + width: 40%; +} + .w-full { width: 100%; } @@ -1216,6 +1291,10 @@ select { grid-template-columns: repeat(1, minmax(0, 1fr)); } +.grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + .flex-row { flex-direction: row; } @@ -1232,6 +1311,10 @@ select { flex-wrap: wrap; } +.items-start { + align-items: flex-start; +} + .items-end { align-items: flex-end; } @@ -1292,6 +1375,15 @@ select { gap: 2rem; } +.gap-x-1 { + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; +} + +.gap-y-1 { + row-gap: 0.25rem; +} + .space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); @@ -1310,6 +1402,12 @@ select { margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } +.space-y-8 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(2rem * var(--tw-space-y-reverse)); +} + .overflow-y-auto { overflow-y: auto; } @@ -1362,62 +1460,62 @@ select { .border-blue-300 { --tw-border-opacity: 1; - border-color: rgb(147 197 253 / var(--tw-border-opacity)); + border-color: rgb(147 197 253 / var(--tw-border-opacity, 1)); } .border-blue-950 { --tw-border-opacity: 1; - border-color: rgb(23 37 84 / var(--tw-border-opacity)); + border-color: rgb(23 37 84 / var(--tw-border-opacity, 1)); } .border-gray-100 { --tw-border-opacity: 1; - border-color: rgb(243 244 246 / var(--tw-border-opacity)); + border-color: rgb(243 244 246 / var(--tw-border-opacity, 1)); } .border-gray-200 { --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); + border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); } .border-gray-300 { --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); + border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); } .border-gray-500 { --tw-border-opacity: 1; - border-color: rgb(107 114 128 / var(--tw-border-opacity)); + border-color: rgb(107 114 128 / var(--tw-border-opacity, 1)); } .border-gray-600 { --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity)); + border-color: rgb(75 85 99 / var(--tw-border-opacity, 1)); } .border-gray-800 { --tw-border-opacity: 1; - border-color: rgb(31 41 55 / var(--tw-border-opacity)); + border-color: rgb(31 41 55 / var(--tw-border-opacity, 1)); } .border-gray-900 { --tw-border-opacity: 1; - border-color: rgb(17 24 39 / var(--tw-border-opacity)); + border-color: rgb(17 24 39 / var(--tw-border-opacity, 1)); } .border-red-100 { --tw-border-opacity: 1; - border-color: rgb(254 226 226 / var(--tw-border-opacity)); + border-color: rgb(254 226 226 / var(--tw-border-opacity, 1)); } .border-red-300 { --tw-border-opacity: 1; - border-color: rgb(252 165 165 / var(--tw-border-opacity)); + border-color: rgb(252 165 165 / var(--tw-border-opacity, 1)); } .border-white { --tw-border-opacity: 1; - border-color: rgb(255 255 255 / var(--tw-border-opacity)); + border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); } .bg-black\/70 { @@ -1426,42 +1524,50 @@ select { .bg-blue-100 { --tw-bg-opacity: 1; - background-color: rgb(219 234 254 / var(--tw-bg-opacity)); + background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1)); } .bg-blue-500 { --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); } .bg-blue-950 { --tw-bg-opacity: 1; - background-color: rgb(23 37 84 / var(--tw-bg-opacity)); + background-color: rgb(23 37 84 / var(--tw-bg-opacity, 1)); } .bg-gray-100 { --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); } .bg-gray-200 { --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)); + background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); } .bg-red-100 { --tw-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--tw-bg-opacity)); + background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); } .bg-red-50 { --tw-bg-opacity: 1; - background-color: rgb(254 242 242 / var(--tw-bg-opacity)); + background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1)); } .bg-white { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); +} + +.bg-cover { + background-size: cover; +} + +.bg-center { + background-position: center; } .stroke-black { @@ -1509,6 +1615,10 @@ select { padding: 0.625rem; } +.p-3 { + padding: 0.75rem; +} + .p-4 { padding: 1rem; } @@ -1561,6 +1671,11 @@ select { padding-bottom: 1rem; } +.py-6 { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + .py-8 { padding-top: 2rem; padding-bottom: 2rem; @@ -1590,6 +1705,10 @@ select { padding-right: 0px; } +.pr-1\.5 { + padding-right: 0.375rem; +} + .pr-2 { padding-right: 0.5rem; } @@ -1702,87 +1821,87 @@ select { .text-\[\#4B5563\] { --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); + color: rgb(75 85 99 / var(--tw-text-opacity, 1)); } .text-blue-500 { --tw-text-opacity: 1; - color: rgb(59 130 246 / var(--tw-text-opacity)); + color: rgb(59 130 246 / var(--tw-text-opacity, 1)); } .text-blue-600 { --tw-text-opacity: 1; - color: rgb(37 99 235 / var(--tw-text-opacity)); + color: rgb(37 99 235 / var(--tw-text-opacity, 1)); } .text-blue-900 { --tw-text-opacity: 1; - color: rgb(30 58 138 / var(--tw-text-opacity)); + color: rgb(30 58 138 / var(--tw-text-opacity, 1)); } .text-blue-950 { --tw-text-opacity: 1; - color: rgb(23 37 84 / var(--tw-text-opacity)); + color: rgb(23 37 84 / var(--tw-text-opacity, 1)); } .text-gray-400 { --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); + color: rgb(156 163 175 / var(--tw-text-opacity, 1)); } .text-gray-50 { --tw-text-opacity: 1; - color: rgb(249 250 251 / var(--tw-text-opacity)); + color: rgb(249 250 251 / var(--tw-text-opacity, 1)); } .text-gray-500 { --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); + color: rgb(107 114 128 / var(--tw-text-opacity, 1)); } .text-gray-600 { --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); + color: rgb(75 85 99 / var(--tw-text-opacity, 1)); } .text-gray-700 { --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); + color: rgb(55 65 81 / var(--tw-text-opacity, 1)); } .text-gray-900 { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity, 1)); } .text-gray-950 { --tw-text-opacity: 1; - color: rgb(3 7 18 / var(--tw-text-opacity)); + color: rgb(3 7 18 / var(--tw-text-opacity, 1)); } .text-red-400 { --tw-text-opacity: 1; - color: rgb(248 113 113 / var(--tw-text-opacity)); + color: rgb(248 113 113 / var(--tw-text-opacity, 1)); } .text-red-500 { --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity)); + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); } .text-red-600 { --tw-text-opacity: 1; - color: rgb(220 38 38 / var(--tw-text-opacity)); + color: rgb(220 38 38 / var(--tw-text-opacity, 1)); } .text-red-900 { --tw-text-opacity: 1; - color: rgb(127 29 29 / var(--tw-text-opacity)); + color: rgb(127 29 29 / var(--tw-text-opacity, 1)); } .text-white { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .underline { @@ -1832,20 +1951,20 @@ select { body { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); + color: rgb(75 85 99 / var(--tw-text-opacity, 1)); font-weight: 300; } a { --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); + color: rgb(75 85 99 / var(--tw-text-opacity, 1)); } a:hover { --tw-text-opacity: 1; - color: rgb(30 58 138 / var(--tw-text-opacity)); + color: rgb(30 58 138 / var(--tw-text-opacity, 1)); text-decoration-line: underline; text-underline-offset: 2px; } @@ -1854,7 +1973,7 @@ a:hover { stroke-width: 1px; fill: none; --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); + color: rgb(107 114 128 / var(--tw-text-opacity, 1)); stroke: #6b7280; } @@ -1918,6 +2037,22 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { z-index: 10 !important; } +#shirtImage:hover { + content: url('https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/shirt_hover_img.png'); +} + +#suitImage:hover{ + content: url('https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/suit_hover_img.png'); +} + +#sportsjacketImage:hover{ + content:url('https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/sports_jacket_hover_img.png'); +} + +#tuxImage:hover{ + content:url('https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/tux_hover_img.png') +} + .file\:mr-4::file-selector-button { margin-right: 1rem; } @@ -1939,11 +2074,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { padding-right: 1rem; } -.file\:py-1::file-selector-button { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - .file\:py-1\.5::file-selector-button { padding-top: 0.375rem; padding-bottom: 0.375rem; @@ -1960,7 +2090,7 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { .file\:text-blue-950::file-selector-button { --tw-text-opacity: 1; - color: rgb(23 37 84 / var(--tw-text-opacity)); + color: rgb(23 37 84 / var(--tw-text-opacity, 1)); } .last\:hidden:last-child { @@ -1973,22 +2103,22 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { .even\:bg-gray-200:nth-child(even) { --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)); + background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); } .hover\:border-blue-900:hover { --tw-border-opacity: 1; - border-color: rgb(30 58 138 / var(--tw-border-opacity)); + border-color: rgb(30 58 138 / var(--tw-border-opacity, 1)); } .hover\:bg-blue-600:hover { --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); + background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); } .hover\:bg-blue-900:hover { --tw-bg-opacity: 1; - background-color: rgb(30 58 138 / var(--tw-bg-opacity)); + background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1)); } .hover\:stroke-blue-900:hover { @@ -1997,37 +2127,37 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { .hover\:text-blue-700:hover { --tw-text-opacity: 1; - color: rgb(29 78 216 / var(--tw-text-opacity)); + color: rgb(29 78 216 / var(--tw-text-opacity, 1)); } .hover\:text-blue-900:hover { --tw-text-opacity: 1; - color: rgb(30 58 138 / var(--tw-text-opacity)); + color: rgb(30 58 138 / var(--tw-text-opacity, 1)); } .hover\:text-gray-50:hover { --tw-text-opacity: 1; - color: rgb(249 250 251 / var(--tw-text-opacity)); + color: rgb(249 250 251 / var(--tw-text-opacity, 1)); } .hover\:text-gray-500:hover { --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); + color: rgb(107 114 128 / var(--tw-text-opacity, 1)); } .hover\:text-gray-950:hover { --tw-text-opacity: 1; - color: rgb(3 7 18 / var(--tw-text-opacity)); + color: rgb(3 7 18 / var(--tw-text-opacity, 1)); } .hover\:text-white:hover { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .hover\:text-yellow-700:hover { --tw-text-opacity: 1; - color: rgb(161 98 7 / var(--tw-text-opacity)); + color: rgb(161 98 7 / var(--tw-text-opacity, 1)); } .hover\:underline:hover { @@ -2040,13 +2170,18 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { .hover\:file\:text-blue-900::file-selector-button:hover { --tw-text-opacity: 1; - color: rgb(30 58 138 / var(--tw-text-opacity)); + color: rgb(30 58 138 / var(--tw-text-opacity, 1)); } .focus\:border-0:focus { border-width: 0px; } +.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); @@ -2059,6 +2194,11 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } +.focus\:ring-blue-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)); +} + .active\:ring-0:active { --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); @@ -2067,17 +2207,17 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { .disabled\:bg-gray-600:disabled { --tw-bg-opacity: 1; - background-color: rgb(75 85 99 / var(--tw-bg-opacity)); + background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1)); } .disabled\:bg-gray-700:disabled { --tw-bg-opacity: 1; - background-color: rgb(55 65 81 / var(--tw-bg-opacity)); + background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)); } .disabled\:text-gray-300:disabled { --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); + color: rgb(209 213 219 / var(--tw-text-opacity, 1)); } .group:hover .group-hover\:flex { @@ -2086,7 +2226,7 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { .group:hover .group-hover\:text-blue-900 { --tw-text-opacity: 1; - color: rgb(30 58 138 / var(--tw-text-opacity)); + color: rgb(30 58 138 / var(--tw-text-opacity, 1)); } .group.-complete .group-\[\.-complete\]\:block { @@ -2185,6 +2325,11 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { gap: 0.5rem; } + .sm\:px-8 { + padding-left: 2rem; + padding-right: 2rem; + } + .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; @@ -2200,6 +2345,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { position: absolute; } + .md\:col-span-2 { + grid-column: span 2 / span 2; + } + .md\:my-8 { margin-top: 2rem; margin-bottom: 2rem; @@ -2269,10 +2418,18 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { width: 66.666667%; } + .md\:w-auto { + width: auto; + } + .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\:flex-row { flex-direction: row; } @@ -2309,6 +2466,11 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { padding: 2rem; } + .md\:px-12 { + padding-left: 3rem; + padding-right: 3rem; + } + .md\:px-4 { padding-left: 1rem; padding-right: 1rem; @@ -2343,6 +2505,11 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { line-height: 2rem; } + .md\:text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; + } + .md\:text-base { font-size: 1rem; line-height: 1.5rem; @@ -2380,10 +2547,22 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { position: static; } + .lg\:bottom-3 { + bottom: 0.75rem; + } + .lg\:right-0 { right: 0px; } + .lg\:mb-2 { + margin-bottom: 0.5rem; + } + + .lg\:mb-32 { + margin-bottom: 8rem; + } + .lg\:flex { display: flex; } @@ -2476,6 +2655,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { background-color: transparent; } + .lg\:p-4 { + padding: 1rem; + } + .lg\:py-0 { padding-top: 0px; padding-bottom: 0px; @@ -2508,11 +2691,20 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { line-height: 2.5rem; } + .lg\:text-5xl { + font-size: 3rem; + line-height: 1; + } + .lg\:text-xl { font-size: 1.25rem; line-height: 1.75rem; } + .lg\:font-bold { + font-weight: 700; + } + .lg\:font-semibold { font-weight: 600; } @@ -2528,5 +2720,4 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { .xl\:w-1\/4 { width: 25%; } -} - +} \ No newline at end of file diff --git a/templates/layouts/layout-both-columns.tpl b/templates/layouts/layout-both-columns.tpl index b517507..6550c36 100644 --- a/templates/layouts/layout-both-columns.tpl +++ b/templates/layouts/layout-both-columns.tpl @@ -51,53 +51,176 @@ {/block} + {block name='displayBeforeWrapper'} {hook h='displayBeforeWrapper'} {/block} - +
- {block name='breadcrumb'} - {include file='_partials/breadcrumb.tpl'} - {/block} + {block name='breadcrumb'} + {include file='_partials/breadcrumb.tpl'} + {/block} + + {block name='wrapperTop'} + {hook h="displayWrapperTop"} + {/block} + + + {if $page.page_name == 'index'} - {block name='wrapperTop'} - {hook h="displayWrapperTop"} - {/block} +
banner.png +

Elevate your + style with BrooksBingham!

+
+
+

Design in 3D - Choose a product to + Start Customization

+

Tailored to you, at no extra cost.

+
+
business-shirt.jpg +
+

$99.00

+

Shirts

+
+
+
business-suit.jpg +
+

$795.00

+

Suits

+
+
+
sports-jacket.jpg +
+

$495.00

+

Sports Jackets

+
+
+
tuxedo.jpg +
+

$995.00

+

Tuxedos

+
+
+
+
+
+

Design and Visualize what you need

+

Choose what looks good on you

+ widget-screenshot.png +
+
+
+

+ Business Suits for Men

+

Make a powerful impression and + radiate confidence

+ Tailored business Suits designed for you to make a powerful impression and radiate confidence. +
+
+

+ Browse through our design

+

Get inspired with our curated outfit ideas +

+ Right-small-img1.png +
+
+

+ Get the perfect fit

+

Discover your perfect fit in minutes

+ The future of fashion with our innovative designs. Customization options tailored to your measurements. +
+
+
+
+

+ Wear Your Identity

+

Fashion that speaks volumes

+ Right-big%20img.jpg +
+
+

+ Timeless Quality

+

Fashion that stands the test of time

+ Invest in enduring fashion with our commitment to quality and durability.From custom-made tuxedos to business suits, each piece stands the test of time. +
+
+

+ Tailored to your specifications

+

Tailor every detail to match your preferences +

+ Left-small-img2.png +
+
- {block name="left_column"} -
- {if $page.page_name == 'product'} - {hook h='displayLeftColumnProduct'} - {else} - {hook h="displayLeftColumn"} - {/if} + {/if} + + + {block name="left_column"} +
+ {if $page.page_name == 'product'} + {hook h='displayLeftColumnProduct'} + {else} + {hook h="displayLeftColumn"} + {/if}
{/block} - + {block name="content_wrapper"}
- {hook h="displayContentWrapperTop"} - {block name="content"} -

Hello world! This is HTML5 Boilerplate.

- {/block} - {hook h="displayContentWrapperBottom"} + {hook h="displayContentWrapperTop"} + {block name="content"} +

Hello world! This is HTML5 Boilerplate.

+ {/block} + {hook h="displayContentWrapperBottom"}
{/block} - + {block name="right_column"}
- {if $page.page_name == 'product'} - {hook h='displayRightColumnProduct'} + {if $page.page_name == 'product'} + {hook h='displayRightColumnProduct'} {else} {hook h="displayRightColumn"} {/if} -
- {/block} +
+ {/block} + + {block name='wrapperBottom'} + {hook h="displayWrapperBottom"} + {/block} - {block name='wrapperBottom'} - {hook h="displayWrapperBottom"} - {/block} +
{block name='displayAfterWrapper'}