From 06ddabcb7729e9f93b70776669db689e341a1d10 Mon Sep 17 00:00:00 2001 From: Codux Date: Thu, 10 Oct 2024 14:56:26 +0300 Subject: [PATCH 01/10] fix responsive --- _codux/boards/hero-flex.board.css | 46 +++++++++++++++++++++++++++++++ _codux/boards/hero-flex.board.tsx | 19 +++++++------ 2 files changed, 56 insertions(+), 9 deletions(-) diff --git a/_codux/boards/hero-flex.board.css b/_codux/boards/hero-flex.board.css index e69de29..5ce1545 100644 --- a/_codux/boards/hero-flex.board.css +++ b/_codux/boards/hero-flex.board.css @@ -0,0 +1,46 @@ +.card { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + width: 100%; + background-color: white; + overflow: hidden; +} +.card-image { + width: 100%; + height: auto; + max-width: 100%; + order: -1; + object-fit: fill; + flex-grow: 1; + flex-shrink: 1; + flex-basis: 300px; +} +.card-content { + padding: 20px 20px 20px 46px; + flex: 1 1 300px; + max-width: 100%; + display: flex; + flex-direction: column; + row-gap: 1rem; +} +h2 { + font-size: calc(6.25rem + ((1vw - 19.2px) * 4.375)); + margin-bottom: 10px; +} +p { + font-size: 2rem; + color: #555; +} + +.button { + font-size: calc(2.8rem + ((1vw - 19.2px) * 1.125)); + padding-right: 20px; + padding-left: 20px; + padding-bottom: 6px; + padding-top: 6px; + border: 2px solid black; + border-radius: 30px; + width: fit-content; +} diff --git a/_codux/boards/hero-flex.board.tsx b/_codux/boards/hero-flex.board.tsx index 540a3e0..cd086c1 100644 --- a/_codux/boards/hero-flex.board.tsx +++ b/_codux/boards/hero-flex.board.tsx @@ -4,23 +4,24 @@ import './hero-flex.board.css'; export default createBoard({ name: 'HeroFlex', Board: () => ( -
+
-
-

Write a Title Here

-

+

+

Write aTitle Here

+

This is a space to welcome visitors to the site. Grab their attention with copy - that clearly states what the site is about, and add an engaging image or video. + that clearly states what the site is about, and add an engaging image or video

- +
), environmentProps: { - windowWidth: 430, + windowWidth: 1124, + windowHeight: 1080, }, }); From 73cde4f8f5440e6964d1da59b78352f220009e66 Mon Sep 17 00:00:00 2001 From: Codux Date: Thu, 10 Oct 2024 14:57:32 +0300 Subject: [PATCH 02/10] fix responsive --- _codux/boards/hero-flex.board.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_codux/boards/hero-flex.board.css b/_codux/boards/hero-flex.board.css index 5ce1545..8a5bedb 100644 --- a/_codux/boards/hero-flex.board.css +++ b/_codux/boards/hero-flex.board.css @@ -35,7 +35,7 @@ p { } .button { - font-size: calc(2.8rem + ((1vw - 19.2px) * 1.125)); + font-size: calc(2.2rem + ((1vw - 19.2px) * 1.125)); padding-right: 20px; padding-left: 20px; padding-bottom: 6px; From 95eead554627077ba49a30cc7a7e23570add77df Mon Sep 17 00:00:00 2001 From: Codux Date: Sun, 13 Oct 2024 10:53:23 +0300 Subject: [PATCH 03/10] hero without MQ --- _codux/boards/hero-flex-2.board.css | 57 +++++++++ _codux/boards/hero-flex-2.board.tsx | 31 +++++ _codux/boards/hero-flex.board.css | 173 ++++++++++++++++++++++++++-- _codux/boards/hero-flex.board.tsx | 36 +++--- 4 files changed, 274 insertions(+), 23 deletions(-) create mode 100644 _codux/boards/hero-flex-2.board.css create mode 100644 _codux/boards/hero-flex-2.board.tsx diff --git a/_codux/boards/hero-flex-2.board.css b/_codux/boards/hero-flex-2.board.css new file mode 100644 index 0000000..cb3417c --- /dev/null +++ b/_codux/boards/hero-flex-2.board.css @@ -0,0 +1,57 @@ +.card { + display: flex; + flex-wrap: wrap; + max-width: 100%; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.imgBox { + flex: 1 1 300px; + /* max-width: 600px; */ +} + +.img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.contentBox { + flex: 1 1 300px; + padding: clamp(15px, 3vw, 30px); + display: flex; + flex-direction: column; + justify-content: center; /* Changed from space-between to center */ + gap: clamp(10px, 2vw, 20px); /* Added gap between elements */ +} + +.title { + margin: 0; /* Removed top margin */ + font-size: clamp(20px, 4vw, 28px); + line-height: 1.2; +} + +.description { + margin: 0; + font-size: clamp(14px, 2vw, 18px); + line-height: 1.5; + text-wrap: pretty; +} + +.addToCartButton { + padding: clamp(8px, 1.5vw, 12px) clamp(15px, 3vw, 25px); + background-color: #4caf50; + color: white; + border: none; + border-radius: 4px; + font-size: clamp(14px, 2vw, 18px); + cursor: pointer; + transition: background-color 0.3s ease; + align-self: flex-start; /* Aligns the button to the start of the flex container */ +} + +.addToCartButton:hover { + background-color: #45a049; +} \ No newline at end of file diff --git a/_codux/boards/hero-flex-2.board.tsx b/_codux/boards/hero-flex-2.board.tsx new file mode 100644 index 0000000..2cd8705 --- /dev/null +++ b/_codux/boards/hero-flex-2.board.tsx @@ -0,0 +1,31 @@ +import './hero-flex-2.board.css'; +import { createBoard } from '@wixc3/react-board'; + +export default createBoard({ + name: 'New Board', + Board: () => ( +
+
+ Delicious Margherita Pizza +
+
+

Authentic Margherita Delight

+

+ Savor the taste of Italy with our classic Margherita pizza. Made with fresh + mozzarella, ripe tomatoes, and fragrant basil on a perfectly crisp crust, + it's a timeless favorite that captures the essence of traditional + Neapolitan pizza-making. +

+ +
+
+ ), + environmentProps: { + windowWidth: 1055, + windowHeight: 1014, + }, +}); diff --git a/_codux/boards/hero-flex.board.css b/_codux/boards/hero-flex.board.css index 8a5bedb..366558c 100644 --- a/_codux/boards/hero-flex.board.css +++ b/_codux/boards/hero-flex.board.css @@ -1,4 +1,159 @@ .card { + display: flex; + flex-wrap: wrap; + max-width: 100%; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.imgBox { + flex: 1 1 300px; + /* max-width: 600px; */ +} + +.img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.contentBox { + flex: 1 1 300px; + padding: clamp(15px, 3vw, 30px); + display: flex; + flex-direction: column; + justify-content: center; /* Changed from space-between to center */ + gap: clamp(10px, 2vw, 20px); /* Added gap between elements */ +} + +.title { + margin: 0; /* Removed top margin */ + font-size: clamp(20px, 4vw, 28px); + line-height: 1.2; +} + +.description { + margin: 0; + font-size: clamp(14px, 2vw, 18px); + line-height: 1.5; + text-wrap: pretty; +} + +.addToCartButton { + padding: clamp(8px, 1.5vw, 12px) clamp(15px, 3vw, 25px); + background-color: #4caf50; + color: white; + border: none; + border-radius: 4px; + font-size: clamp(14px, 2vw, 18px); + cursor: pointer; + transition: background-color 0.3s ease; + align-self: flex-start; /* Aligns the button to the start of the flex container */ +} + +.addToCartButton:hover { + background-color: #45a049; +} + + + + + + + + + + + + +/* .root { + width: 100vw; + /* padding: 24px; */ + line-height: 1.55; + display: flex; + justify-content: center; + flex-wrap: wrap; + font-family: 'Roboto', Helvetica, Arial, sans-serif; +} + +.recipe, +.pizza-box { + display: flex; + flex-wrap: wrap; + align-items: center; +} + +.pizza-box { + flex: 3 1 30ch; + height: calc(282px + 5vw); + overflow: hidden; + + img { + flex: 2 1 20ch; + max-width: 100%; + min-height: 100%; + width: auto; + height: auto; + object-fit: cover; + object-position: 50% 50%; + /* flex: 1 1 200px; */ + /* min-width: 500px; */ + } +} + +.recipe { + /* border: 2px solid #f2f2f2; */ + border-radius: 8px; + overflow: hidden; + + &-content { + padding: 16px 32px; + /* max-width: 20ch; */ + flex: 1 1 20ch; + /* text-wrap: pretty; */ + } + + &-title { + margin: 0; + font-size: clamp(1.4em, 2.1vw, 2.1em); + font-family: 'Roboto Slab', Helvetica, Arial, sans-serif; + + a { + text-decoration: none; + color: inherit; + } + } +} + +/* Body Layout */ +* { + box-sizing: border-box; +} + +/* body { + --primary: #e05d26; + --grey: #454545; + --lightgrey: #666; + + color: var(--grey); + line-height: 1.55; + display: flex; + justify-content: center; + flex-wrap: wrap; + font-family: 'Roboto', Helvetica, Arial, sans-serif; +} */ + +.big { + width: clamp(320px, 65%, 65%); + padding: 24px; +} +.small { + width: clamp(320px, 35%, 480px); + padding: 24px; +} + +/* .card { display: flex; flex-wrap: wrap; justify-content: space-between; @@ -8,26 +163,30 @@ overflow: hidden; } .card-image { + max-height: 600px; width: 100%; - height: auto; - max-width: 100%; - order: -1; - object-fit: fill; + object-fit: cover; flex-grow: 1; flex-shrink: 1; - flex-basis: 300px; + flex-basis: 600px; + height: 100%; } .card-content { padding: 20px 20px 20px 46px; - flex: 1 1 300px; + flex: 1; + flex-basis: 400px; max-width: 100%; display: flex; flex-direction: column; row-gap: 1rem; + font-family: Arial, sans-serif; + line-height: 2.5rem; + text-wrap: pretty; } h2 { font-size: calc(6.25rem + ((1vw - 19.2px) * 4.375)); margin-bottom: 10px; + line-height: 5rem; } p { font-size: 2rem; @@ -43,4 +202,4 @@ p { border: 2px solid black; border-radius: 30px; width: fit-content; -} +} */ */ diff --git a/_codux/boards/hero-flex.board.tsx b/_codux/boards/hero-flex.board.tsx index cd086c1..2d8eed1 100644 --- a/_codux/boards/hero-flex.board.tsx +++ b/_codux/boards/hero-flex.board.tsx @@ -4,24 +4,28 @@ import './hero-flex.board.css'; export default createBoard({ name: 'HeroFlex', Board: () => ( -
- -
-

Write aTitle Here

-

- This is a space to welcome visitors to the site. Grab their attention with copy - that clearly states what the site is about, and add an engaging image or video -

- -
+
+
+
+ +
+
+

+ Gluten Free Pan Pizza +

+

+ It really is possible to make excellent gluten free pizza at home in your + own oven with our recipes and techniques. +

+
+
), environmentProps: { - windowWidth: 1124, - windowHeight: 1080, + windowWidth: 1315, + windowHeight: 726, }, }); From ebcf6760abb19e9fcb50447becf2259bead5a51a Mon Sep 17 00:00:00 2001 From: Codux Date: Sun, 13 Oct 2024 11:06:45 +0300 Subject: [PATCH 04/10] fix styling --- _codux/boards/hero-center.board.tsx | 2 +- _codux/boards/hero-flex-2.board.css | 73 +++++++++++++++-------------- _codux/boards/hero-flex-2.board.tsx | 6 +-- 3 files changed, 41 insertions(+), 40 deletions(-) diff --git a/_codux/boards/hero-center.board.tsx b/_codux/boards/hero-center.board.tsx index 3da8cd2..076138f 100644 --- a/_codux/boards/hero-center.board.tsx +++ b/_codux/boards/hero-center.board.tsx @@ -22,6 +22,6 @@ export default createBoard({ ), environmentProps: { windowHeight: 400, - windowWidth: 600, + windowWidth: 511, }, }); diff --git a/_codux/boards/hero-flex-2.board.css b/_codux/boards/hero-flex-2.board.css index cb3417c..3a79514 100644 --- a/_codux/boards/hero-flex-2.board.css +++ b/_codux/boards/hero-flex-2.board.css @@ -1,57 +1,58 @@ -.card { - display: flex; - flex-wrap: wrap; - max-width: 100%; - border-radius: 8px; - overflow: hidden; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +.root { + display: flex; + flex-wrap: wrap; + max-width: 100%; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + font-family: Arial, sans-serif; } .imgBox { - flex: 1 1 300px; - /* max-width: 600px; */ + flex: 1 1 300px; + /* max-width: 600px; */ } .img { - width: 100%; - height: 100%; - object-fit: cover; + width: 100%; + height: 100%; + object-fit: cover; } .contentBox { - flex: 1 1 300px; - padding: clamp(15px, 3vw, 30px); - display: flex; - flex-direction: column; - justify-content: center; /* Changed from space-between to center */ - gap: clamp(10px, 2vw, 20px); /* Added gap between elements */ + flex: 1 1 300px; + padding: clamp(15px, 3vw, 30px); + display: flex; + flex-direction: column; + justify-content: center; /* Changed from space-between to center */ + gap: clamp(10px, 2vw, 20px); /* Added gap between elements */ } .title { - margin: 0; /* Removed top margin */ - font-size: clamp(20px, 4vw, 28px); - line-height: 1.2; + margin: 0; /* Removed top margin */ + font-size: calc(5rem + ((1vw - 19.2px) * 3.125)); + line-height: 1.2; } .description { - margin: 0; - font-size: clamp(14px, 2vw, 18px); - line-height: 1.5; - text-wrap: pretty; + margin: 0; + font-size: clamp(14px, 2vw, 18px); + line-height: 1.5; + text-wrap: pretty; } .addToCartButton { - padding: clamp(8px, 1.5vw, 12px) clamp(15px, 3vw, 25px); - background-color: #4caf50; - color: white; - border: none; - border-radius: 4px; - font-size: clamp(14px, 2vw, 18px); - cursor: pointer; - transition: background-color 0.3s ease; - align-self: flex-start; /* Aligns the button to the start of the flex container */ + padding: clamp(8px, 1.5vw, 12px) clamp(15px, 3vw, 25px); + background-color: #000000; + border-radius: 30px; + font-size: clamp(14px, 2vw, 18px); + cursor: pointer; + transition: background-color 0.3s ease; + align-self: flex-start; /* Aligns the button to the start of the flex container */ + color: #ffffff; } .addToCartButton:hover { - background-color: #45a049; -} \ No newline at end of file + background-color: #848484; + color: #ffffff; +} diff --git a/_codux/boards/hero-flex-2.board.tsx b/_codux/boards/hero-flex-2.board.tsx index 2cd8705..b89c643 100644 --- a/_codux/boards/hero-flex-2.board.tsx +++ b/_codux/boards/hero-flex-2.board.tsx @@ -4,10 +4,10 @@ import { createBoard } from '@wixc3/react-board'; export default createBoard({ name: 'New Board', Board: () => ( -
+
Delicious Margherita Pizza @@ -25,7 +25,7 @@ export default createBoard({
), environmentProps: { - windowWidth: 1055, + windowWidth: 851, windowHeight: 1014, }, }); From 720631a552fab5e5561b8ab7d89267cf4c61d806 Mon Sep 17 00:00:00 2001 From: matan georgi Date: Sun, 13 Oct 2024 11:23:29 +0300 Subject: [PATCH 05/10] chore: remove unnecessary change --- _codux/boards/hero-center.board.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_codux/boards/hero-center.board.tsx b/_codux/boards/hero-center.board.tsx index 076138f..3da8cd2 100644 --- a/_codux/boards/hero-center.board.tsx +++ b/_codux/boards/hero-center.board.tsx @@ -22,6 +22,6 @@ export default createBoard({ ), environmentProps: { windowHeight: 400, - windowWidth: 511, + windowWidth: 600, }, }); From c31376da65ae0ab17e77ab2c5e6a258a09ec6b6e Mon Sep 17 00:00:00 2001 From: matan georgi Date: Sun, 13 Oct 2024 11:23:44 +0300 Subject: [PATCH 06/10] chore: rename of files --- _codux/boards/{hero-flex.board.css => hero-header.board.css} | 0 _codux/boards/{hero-flex.board.tsx => hero-header.board.tsx} | 2 +- _codux/boards/{hero-flex-2.board.css => hero-image.board.css} | 0 _codux/boards/{hero-flex-2.board.tsx => hero-image.board.tsx} | 2 +- 4 files changed, 2 insertions(+), 2 deletions(-) rename _codux/boards/{hero-flex.board.css => hero-header.board.css} (100%) rename _codux/boards/{hero-flex.board.tsx => hero-header.board.tsx} (97%) rename _codux/boards/{hero-flex-2.board.css => hero-image.board.css} (100%) rename _codux/boards/{hero-flex-2.board.tsx => hero-image.board.tsx} (97%) diff --git a/_codux/boards/hero-flex.board.css b/_codux/boards/hero-header.board.css similarity index 100% rename from _codux/boards/hero-flex.board.css rename to _codux/boards/hero-header.board.css diff --git a/_codux/boards/hero-flex.board.tsx b/_codux/boards/hero-header.board.tsx similarity index 97% rename from _codux/boards/hero-flex.board.tsx rename to _codux/boards/hero-header.board.tsx index 2d8eed1..14a1710 100644 --- a/_codux/boards/hero-flex.board.tsx +++ b/_codux/boards/hero-header.board.tsx @@ -1,5 +1,5 @@ import { createBoard } from '@wixc3/react-board'; -import './hero-flex.board.css'; +import './hero-header.board.css'; export default createBoard({ name: 'HeroFlex', diff --git a/_codux/boards/hero-flex-2.board.css b/_codux/boards/hero-image.board.css similarity index 100% rename from _codux/boards/hero-flex-2.board.css rename to _codux/boards/hero-image.board.css diff --git a/_codux/boards/hero-flex-2.board.tsx b/_codux/boards/hero-image.board.tsx similarity index 97% rename from _codux/boards/hero-flex-2.board.tsx rename to _codux/boards/hero-image.board.tsx index b89c643..589b2ec 100644 --- a/_codux/boards/hero-flex-2.board.tsx +++ b/_codux/boards/hero-image.board.tsx @@ -1,4 +1,4 @@ -import './hero-flex-2.board.css'; +import './hero-image.board.css'; import { createBoard } from '@wixc3/react-board'; export default createBoard({ From 0acc8697422a2b47cb660cca8d40f285bc18a847 Mon Sep 17 00:00:00 2001 From: matan georgi Date: Sun, 13 Oct 2024 11:30:42 +0300 Subject: [PATCH 07/10] chore: remove unnecessary files --- _codux/boards/hero-header.board.css | 205 ---------------------------- _codux/boards/hero-header.board.tsx | 31 ----- 2 files changed, 236 deletions(-) delete mode 100644 _codux/boards/hero-header.board.css delete mode 100644 _codux/boards/hero-header.board.tsx diff --git a/_codux/boards/hero-header.board.css b/_codux/boards/hero-header.board.css deleted file mode 100644 index 366558c..0000000 --- a/_codux/boards/hero-header.board.css +++ /dev/null @@ -1,205 +0,0 @@ -.card { - display: flex; - flex-wrap: wrap; - max-width: 100%; - border-radius: 8px; - overflow: hidden; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); -} - -.imgBox { - flex: 1 1 300px; - /* max-width: 600px; */ -} - -.img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.contentBox { - flex: 1 1 300px; - padding: clamp(15px, 3vw, 30px); - display: flex; - flex-direction: column; - justify-content: center; /* Changed from space-between to center */ - gap: clamp(10px, 2vw, 20px); /* Added gap between elements */ -} - -.title { - margin: 0; /* Removed top margin */ - font-size: clamp(20px, 4vw, 28px); - line-height: 1.2; -} - -.description { - margin: 0; - font-size: clamp(14px, 2vw, 18px); - line-height: 1.5; - text-wrap: pretty; -} - -.addToCartButton { - padding: clamp(8px, 1.5vw, 12px) clamp(15px, 3vw, 25px); - background-color: #4caf50; - color: white; - border: none; - border-radius: 4px; - font-size: clamp(14px, 2vw, 18px); - cursor: pointer; - transition: background-color 0.3s ease; - align-self: flex-start; /* Aligns the button to the start of the flex container */ -} - -.addToCartButton:hover { - background-color: #45a049; -} - - - - - - - - - - - - -/* .root { - width: 100vw; - /* padding: 24px; */ - line-height: 1.55; - display: flex; - justify-content: center; - flex-wrap: wrap; - font-family: 'Roboto', Helvetica, Arial, sans-serif; -} - -.recipe, -.pizza-box { - display: flex; - flex-wrap: wrap; - align-items: center; -} - -.pizza-box { - flex: 3 1 30ch; - height: calc(282px + 5vw); - overflow: hidden; - - img { - flex: 2 1 20ch; - max-width: 100%; - min-height: 100%; - width: auto; - height: auto; - object-fit: cover; - object-position: 50% 50%; - /* flex: 1 1 200px; */ - /* min-width: 500px; */ - } -} - -.recipe { - /* border: 2px solid #f2f2f2; */ - border-radius: 8px; - overflow: hidden; - - &-content { - padding: 16px 32px; - /* max-width: 20ch; */ - flex: 1 1 20ch; - /* text-wrap: pretty; */ - } - - &-title { - margin: 0; - font-size: clamp(1.4em, 2.1vw, 2.1em); - font-family: 'Roboto Slab', Helvetica, Arial, sans-serif; - - a { - text-decoration: none; - color: inherit; - } - } -} - -/* Body Layout */ -* { - box-sizing: border-box; -} - -/* body { - --primary: #e05d26; - --grey: #454545; - --lightgrey: #666; - - color: var(--grey); - line-height: 1.55; - display: flex; - justify-content: center; - flex-wrap: wrap; - font-family: 'Roboto', Helvetica, Arial, sans-serif; -} */ - -.big { - width: clamp(320px, 65%, 65%); - padding: 24px; -} -.small { - width: clamp(320px, 35%, 480px); - padding: 24px; -} - -/* .card { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; - width: 100%; - background-color: white; - overflow: hidden; -} -.card-image { - max-height: 600px; - width: 100%; - object-fit: cover; - flex-grow: 1; - flex-shrink: 1; - flex-basis: 600px; - height: 100%; -} -.card-content { - padding: 20px 20px 20px 46px; - flex: 1; - flex-basis: 400px; - max-width: 100%; - display: flex; - flex-direction: column; - row-gap: 1rem; - font-family: Arial, sans-serif; - line-height: 2.5rem; - text-wrap: pretty; -} -h2 { - font-size: calc(6.25rem + ((1vw - 19.2px) * 4.375)); - margin-bottom: 10px; - line-height: 5rem; -} -p { - font-size: 2rem; - color: #555; -} - -.button { - font-size: calc(2.2rem + ((1vw - 19.2px) * 1.125)); - padding-right: 20px; - padding-left: 20px; - padding-bottom: 6px; - padding-top: 6px; - border: 2px solid black; - border-radius: 30px; - width: fit-content; -} */ */ diff --git a/_codux/boards/hero-header.board.tsx b/_codux/boards/hero-header.board.tsx deleted file mode 100644 index 14a1710..0000000 --- a/_codux/boards/hero-header.board.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { createBoard } from '@wixc3/react-board'; -import './hero-header.board.css'; - -export default createBoard({ - name: 'HeroFlex', - Board: () => ( -
-
-
- -
-
-

- Gluten Free Pan Pizza -

-

- It really is possible to make excellent gluten free pizza at home in your - own oven with our recipes and techniques. -

-
-
-
- ), - environmentProps: { - windowWidth: 1315, - windowHeight: 726, - }, -}); From bafaf36fca82a12251b2101d38d4e29baeb6bfb0 Mon Sep 17 00:00:00 2001 From: matan georgi Date: Sun, 13 Oct 2024 11:31:44 +0300 Subject: [PATCH 08/10] chore: remove comments from style file --- _codux/boards/hero-image.board.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/_codux/boards/hero-image.board.css b/_codux/boards/hero-image.board.css index 3a79514..aa3689b 100644 --- a/_codux/boards/hero-image.board.css +++ b/_codux/boards/hero-image.board.css @@ -10,7 +10,6 @@ .imgBox { flex: 1 1 300px; - /* max-width: 600px; */ } .img { @@ -24,12 +23,12 @@ padding: clamp(15px, 3vw, 30px); display: flex; flex-direction: column; - justify-content: center; /* Changed from space-between to center */ - gap: clamp(10px, 2vw, 20px); /* Added gap between elements */ + justify-content: center; + gap: clamp(10px, 2vw, 20px); } .title { - margin: 0; /* Removed top margin */ + margin: 0; font-size: calc(5rem + ((1vw - 19.2px) * 3.125)); line-height: 1.2; } @@ -48,7 +47,7 @@ font-size: clamp(14px, 2vw, 18px); cursor: pointer; transition: background-color 0.3s ease; - align-self: flex-start; /* Aligns the button to the start of the flex container */ + align-self: flex-start; color: #ffffff; } From 1fdd160ce8a13323207791561e474b5a2b9a4a8d Mon Sep 17 00:00:00 2001 From: matan georgi Date: Sun, 13 Oct 2024 11:33:06 +0300 Subject: [PATCH 09/10] chore: rename board --- _codux/boards/hero-image.board.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_codux/boards/hero-image.board.tsx b/_codux/boards/hero-image.board.tsx index 589b2ec..dfcac9b 100644 --- a/_codux/boards/hero-image.board.tsx +++ b/_codux/boards/hero-image.board.tsx @@ -2,7 +2,7 @@ import './hero-image.board.css'; import { createBoard } from '@wixc3/react-board'; export default createBoard({ - name: 'New Board', + name: 'Hero Image', Board: () => (
From 17643406eae451780aa37e9e3d271fb59a7e2b84 Mon Sep 17 00:00:00 2001 From: matan georgi Date: Sun, 13 Oct 2024 11:55:19 +0300 Subject: [PATCH 10/10] fix: style and content --- _codux/boards/hero-image.board.css | 9 +++------ _codux/boards/hero-image.board.tsx | 14 ++++++-------- 2 files changed, 9 insertions(+), 14 deletions(-) diff --git a/_codux/boards/hero-image.board.css b/_codux/boards/hero-image.board.css index aa3689b..4dfb775 100644 --- a/_codux/boards/hero-image.board.css +++ b/_codux/boards/hero-image.board.css @@ -28,25 +28,22 @@ } .title { - margin: 0; - font-size: calc(5rem + ((1vw - 19.2px) * 3.125)); - line-height: 1.2; + font-size: calc(5rem + ((1vw - 20px) * 3)); } .description { - margin: 0; font-size: clamp(14px, 2vw, 18px); line-height: 1.5; text-wrap: pretty; } -.addToCartButton { +.exploreButton { padding: clamp(8px, 1.5vw, 12px) clamp(15px, 3vw, 25px); background-color: #000000; border-radius: 30px; font-size: clamp(14px, 2vw, 18px); cursor: pointer; - transition: background-color 0.3s ease; + transition: background-color 0.3s ease-out; align-self: flex-start; color: #ffffff; } diff --git a/_codux/boards/hero-image.board.tsx b/_codux/boards/hero-image.board.tsx index dfcac9b..6fb961b 100644 --- a/_codux/boards/hero-image.board.tsx +++ b/_codux/boards/hero-image.board.tsx @@ -13,19 +13,17 @@ export default createBoard({ />
-

Authentic Margherita Delight

+

Write a Title Here

- Savor the taste of Italy with our classic Margherita pizza. Made with fresh - mozzarella, ripe tomatoes, and fragrant basil on a perfectly crisp crust, - it's a timeless favorite that captures the essence of traditional - Neapolitan pizza-making. + This is a space to welcome visitors to the site. Grab their attention with copy + that clearly states what the site is about, and add an engaging image or video.

- +
), environmentProps: { - windowWidth: 851, - windowHeight: 1014, + windowWidth: 1269, + windowHeight: 760, }, });