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}
</header>
+
{block name='displayBeforeWrapper'}
{hook h='displayBeforeWrapper'}
{/block}
-
+
<section class="container mx-auto">
- {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}
+ <div class="relative flex items-center"><img
+ src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/banner.png"
+ alt="banner.png" />
+ <h3 class="lg:text-5xl md:text-3xl text-lg absolute lg:font-bold font-semibold right-8 w-[40%]">Elevate your
+ style with BrooksBingham!</h3>
+ </div>
+ <div class="container">
+ <h2 class="products-section-title text-2xl font-bold mt-20 text-center">Design in 3D - Choose a product to
+ Start Customization</h2>
+ <h3 class="text-lg font-semibold text-center mb-12">Tailored to you, at no extra cost.</h3>
+ <div class="flex md:flex-row flex-col gap-8 lg:mb-32 mb-20">
+ <div><a href="https://brooksbingham.com/module/thob/configurator?id_product=74"> <img id=shirtImage
+ class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100"
+ src="https://brooksbingham.com/111-home_default/business-shirt.jpg" alt="business-shirt.jpg" /></a>
+ <div class="flex flex-col pt-4 items-start">
+ <h3 class="text-center text-lg font-bold">$99.00</h3>
+ <h3 class="text-center text-lg font-semibold">Shirts</h3>
+ </div>
+ </div>
+ <div><a href="https://brooksbingham.com/module/thob/configurator?id_product=75"> <img id=suitImage
+ class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100"
+ src="https://brooksbingham.com/107-home_default/business-suit.jpg" alt="business-suit.jpg" /></a>
+ <div class="flex flex-col pt-4 items-start">
+ <h3 class="text-center text-lg font-bold">$795.00</h3>
+ <h3 class="text-center text-lg font-semibold">Suits</h3>
+ </div>
+ </div>
+ <div><a href="https://brooksbingham.com/module/thob/configurator?id_product=76"> <img id=sportsjacketImage
+ class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100"
+ src="https://brooksbingham.com/108-home_default/sports-jacket.jpg" alt="sports-jacket.jpg" /></a>
+ <div class="flex flex-col pt-4 items-start">
+ <h3 class="text-center text-lg font-bold">$495.00</h3>
+ <h3 class="text-center text-lg font-semibold">Sports Jackets</h3>
+ </div>
+ </div>
+ <div><a href="https://brooksbingham.com/module/thob/configurator?id_product=77"> <img id=tuxImage
+ class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100"
+ src="https://brooksbingham.com/112-home_default/tuxedo.jpg" alt="tuxedo.jpg" /></a>
+ <div class="flex flex-col pt-4 items-start">
+ <h3 class="text-center text-lg font-bold">$995.00</h3>
+ <h3 class="text-center text-lg font-semibold">Tuxedos</h3>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="lg:mb-32 mb-20">
+ <h1 class="text-2xl font-bold text-center">Design and Visualize what you need</h1>
+ <h3 class="text-lg font-semibold text-center mb-12">Choose what looks good on you</h3>
+ <a href="https://brooksbingham.com/module/thob/configurator?id_product=75"> <img
+ src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/widget-screenshot.png"
+ alt="widget-screenshot.png" /> </a>
+ </div>
+ <div class="text-white grid grid-cols-2 grid-rows-* gap-y-1 gap-x-1 mb-1">
+ <div class="row-span-3 col-start-1 row-end-2 relative">
+ <h3
+ class="absolute lg:bottom-3 bottom-1 right-0 lg:font-bold font-medium lg:text-xl lg:mb-2 pr-1.5 xxs lg:p-4">
+ Business Suits for Men</h3>
+ <h3 class="absolute bottom-0 right-0 text-white text-lg hide-on-small p-4">Make a powerful impression and
+ radiate confidence</h3>
+ <img class="object-cover"
+ src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-big%20img.jpg"
+ alt="Tailored business Suits designed for you to make a powerful impression and radiate confidence." />
+ </div>
+ <div class="col-span-1 col-start-2 row-span-2 flex relative">
+ <h3
+ class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl lg:mb-2 xxs lg:p-4">
+ Browse through our design</h3>
+ <h3 class="absolute bottom-0 right-0 text-lg hide-on-small p-4">Get inspired with our curated outfit ideas
+ </h3>
+ <img class="object-cover"
+ src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Right-small-img1.png"
+ alt="Right-small-img1.png" />
+ </div>
+ <div class="row-start-1 col-start-2 col-span-1 row-span-1 relative">
+ <h3
+ class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl lg:mb-2 xxs lg:p-4">
+ Get the perfect fit</h3>
+ <h3 class="absolute bottom-0 right-0 text-lg p-4 hide-on-small">Discover your perfect fit in minutes</h3>
+ <img class="object-cover h-full"
+ src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Right-small-img2.jpg"
+ alt="The future of fashion with our innovative designs. Customization options tailored to your measurements." />
+ </div>
+ </div>
+ <div class="text-white grid grid-cols-2 grid-rows-* gap-y-1 gap-x-1 mb-12">
+ <div class="row-span-3 col-start-2 row-end-2 relative">
+ <h3
+ class="absolute lg:bottom-3 bottom-1 right-0 lg:font-bold font-medium pr-1.5 lg:text-xl lg:mb-2 xxs lg:p-4">
+ Wear Your Identity</h3>
+ <h3 class="absolute bottom-0 right-0 text-white text-lg hide-on-small p-4">Fashion that speaks volumes</h3>
+ <img class="object-cover"
+ src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Right-big%20img.jpg"
+ alt="Right-big%20img.jpg" />
+ </div>
+ <div class="col-span-1 col-start-1 row-span-2 flex relative">
+ <h3
+ class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl lg:mb-2 xxs lg:p-4">
+ Timeless Quality</h3>
+ <h3 class="absolute bottom-0 right-0 text-lg hide-on-small p-4">Fashion that stands the test of time</h3>
+ <img class="object-cover"
+ src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg"
+ alt="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." />
+ </div>
+ <div class="row-start-1 col-start-1 col-span-1 row-span-1 relative">
+ <h3
+ class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl lg:mb-2 xxs lg:p-4">
+ Tailored to your specifications</h3>
+ <h3 class="absolute bottom-0 right-0 hide-on-small text-lg p-4">Tailor every detail to match your preferences
+ </h3>
+ <img class="object-cover h-full"
+ src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img2.png"
+ alt="Left-small-img2.png" />
+ </div>
+</div>
- {block name="left_column"}
- <div id="left-column" class="col-xs-12 col-sm-4 col-md-3">
- {if $page.page_name == 'product'}
- {hook h='displayLeftColumnProduct'}
- {else}
- {hook h="displayLeftColumn"}
- {/if}
+ {/if}
+
+
+ {block name="left_column"}
+ <div id="left-column" class="col-xs-12 col-sm-4 col-md-3">
+ {if $page.page_name == 'product'}
+ {hook h='displayLeftColumnProduct'}
+ {else}
+ {hook h="displayLeftColumn"}
+ {/if}
</div>
{/block}
-
+
{block name="content_wrapper"}
<div id="content-wrapper" class="flex w-full">
- {hook h="displayContentWrapperTop"}
- {block name="content"}
- <p>Hello world! This is HTML5 Boilerplate.</p>
- {/block}
- {hook h="displayContentWrapperBottom"}
+ {hook h="displayContentWrapperTop"}
+ {block name="content"}
+ <p>Hello world! This is HTML5 Boilerplate.</p>
+ {/block}
+ {hook h="displayContentWrapperBottom"}
</div>
{/block}
-
+
{block name="right_column"}
<div id="right-column" class="col-xs-12 col-sm-4 col-md-3">
- {if $page.page_name == 'product'}
- {hook h='displayRightColumnProduct'}
+ {if $page.page_name == 'product'}
+ {hook h='displayRightColumnProduct'}
{else}
{hook h="displayRightColumn"}
{/if}
- </div>
- {/block}
+ </div>
+ {/block}
+
+ {block name='wrapperBottom'}
+ {hook h="displayWrapperBottom"}
+ {/block}
- {block name='wrapperBottom'}
- {hook h="displayWrapperBottom"}
- {/block}
+
</section>
{block name='displayAfterWrapper'}