Skip to content

Salihbakisayer #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sabasayer wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Salihbakisayer #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c70a0d7
fix(usp-grid): 1 columns at mobile 2 columns at tablet
sabasayer Oct 4, 2023
6f8f74b
fix(usp-grid-icon): move under the text
sabasayer Oct 4, 2023
7c45297
fix(heaedings): order
sabasayer Oct 4, 2023
ac1996a
fix(section-footer): seo tap target sizes
sabasayer Oct 4, 2023
5b595c3
feat(sustainable-section): with grid layout
sabasayer Oct 4, 2023
8d1ae2f
feat(collapsible-footer): on mobile
sabasayer Oct 4, 2023
b6c1498
feat(scroll-indicator): make it work
sabasayer Oct 4, 2023
31cfdd2
fix(hero-slider): prevent text to go under header
sabasayer Oct 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 68 additions & 23 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -969,7 +969,7 @@ <h3 class="h3">New season, new fabric</h3>

<swiper-slider class="container products-slider">
<header class="container-header is-flex-md is-justified-space-between-md has-col-gap-md">
<h2 class="container-heading h4">Our products</h2>
<h3 class="container-heading h4">Our products</h3>
<a href="#" class="link underlined-offset-link visibility-hidden visibility-md--visible">Discover all</a>
</header>
<div class="container-content">
Expand Down Expand Up @@ -1317,6 +1317,48 @@ <h2 class="container-heading h4">Our products</h2>
<script src="js/swiper-slider.js" type="module"></script>
</section>

<!-- Section - Sustaniable Sourney -->

<section class="shopify-section section-sustainable">

<!-- Section styles -->
<link rel="stylesheet" href="css/section-sustainable.css" type="text/css">

<div class="container">
<div class="container-content">
<div class="is-grid">
<div class="is-col-12 is-col-6-md is-order-1 is-order-2-md">
<figure class="img img--wrapper">
<picture>
<img src="https://cdn.shopify.com/s/files/1/0550/3202/1172/files/21_07-Stoov-12._Thuiswerken_aan_keukentafel_058_BEW_RGB_LR_1_2000x1300_crop_center.jpg" alt="Socks up!"
srcset="https://cdn.shopify.com/s/files/1/0550/3202/1172/files/21_07-Stoov-12._Thuiswerken_aan_keukentafel_058_BEW_RGB_LR_1_320x208_crop_center.jpg 320w,
https://cdn.shopify.com/s/files/1/0550/3202/1172/files/21_07-Stoov-12._Thuiswerken_aan_keukentafel_058_BEW_RGB_LR_1_375x244_crop_center.jpg 375w,
https://cdn.shopify.com/s/files/1/0550/3202/1172/files/21_07-Stoov-12._Thuiswerken_aan_keukentafel_058_BEW_RGB_LR_1_400x260_crop_center.jpg 400w,
https://cdn.shopify.com/s/files/1/0550/3202/1172/files/21_07-Stoov-12._Thuiswerken_aan_keukentafel_058_BEW_RGB_LR_1_420x273_crop_center.jpg 420w,
https://cdn.shopify.com/s/files/1/0550/3202/1172/files/21_07-Stoov-12._Thuiswerken_aan_keukentafel_058_BEW_RGB_LR_1_480x312_crop_center.jpg 480w,
https://cdn.shopify.com/s/files/1/0550/3202/1172/files/21_07-Stoov-12._Thuiswerken_aan_keukentafel_058_BEW_RGB_LR_1_520x338_crop_center.jpg 520w,
https://cdn.shopify.com/s/files/1/0550/3202/1172/files/21_07-Stoov-12._Thuiswerken_aan_keukentafel_058_BEW_RGB_LR_1_640x416_crop_center.jpg 640w,
https://cdn.shopify.com/s/files/1/0550/3202/1172/files/21_07-Stoov-12._Thuiswerken_aan_keukentafel_058_BEW_RGB_LR_1_768x499_crop_center.jpg 768w,
https://cdn.shopify.com/s/files/1/0550/3202/1172/files/21_07-Stoov-12._Thuiswerken_aan_keukentafel_058_BEW_RGB_LR_1_840x546_crop_center.jpg 840w,
https://cdn.shopify.com/s/files/1/0550/3202/1172/files/21_07-Stoov-12._Thuiswerken_aan_keukentafel_058_BEW_RGB_LR_1_960x624_crop_center.jpg 960w,
https://cdn.shopify.com/s/files/1/0550/3202/1172/files/21_07-Stoov-12._Thuiswerken_aan_keukentafel_058_BEW_RGB_LR_1_1080x702_crop_center.jpg 1080w,
https://cdn.shopify.com/s/files/1/0550/3202/1172/files/21_07-Stoov-12._Thuiswerken_aan_keukentafel_058_BEW_RGB_LR_1_1200x780_crop_center.jpg 1200w" width="1200" height="1200" loading="lazy" sizes="(min-width: 1920px) 565px, (min-width: 1320px) 531px, (min-width: 768px) 481px, 100vw" title="Sustainable journey to your front door" crop="center">
</picture>
</figure>
</div>
<div class="is-col-12 is-col-6-md is-order-2 is-order-1-md section-sustainable__content">
<header>
<h3 class="h3">Sustainable journey to your front door</h3>
</header>
<div class="section-sustainable__text">
<p>We use as little plastic as possible to transport your Stoov®. Preferably not at all! If plastic packaging is nevertheless used, it is recyclable or compostable. We also pack the products as small and efficiently as possible, so that more orders fit in onve van and there is less need to drive up and down</p>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Section - Global Reviews -->
<section class="shopify-section global-reviews-section">

Expand Down Expand Up @@ -1344,7 +1386,7 @@ <h2 class="container-heading h4">Our products</h2>
<div class="review center">
<p class="review__rating h1">4.8</p>

<h2 class="review__stars">
<h3 class="review__stars">
<div class="review__stars--inner">
<svg class="icon icon-star-full icon--xs" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" viewBox="0 0 9.41 9">
<path fill="currentColor" d="M195.55,452.37a.54.54,0,0,0,.41.05.48.48,0,0,0,.32-.23.57.57,0,0,0,.08-.4l-.44-2.57,1.86-1.81A.5.5,0,0,0,198,447a.53.53,0,0,0-.12-.38.52.52,0,0,0-.36-.21l-2.57-.37-1.14-2.32a.5.5,0,0,0-.31-.28.55.55,0,0,0-.4,0,.5.5,0,0,0-.31.28l-1.14,2.32-2.57.37a.52.52,0,0,0-.36.21.57.57,0,0,0,0,.75l1.87,1.81-.44,2.57a.53.53,0,0,0,.08.4.48.48,0,0,0,.32.23.54.54,0,0,0,.41-.05l2.3-1.2Z" transform="translate(-188.55 -443.44)"/>
Expand Down Expand Up @@ -1381,8 +1423,8 @@ <h2 class="review__stars">
</div>
</div>
</div>
</h2>
<h2 class="review__heading">Excellent!</h2>
</h3>
<h4 class="review__heading">Excellent!</h4>
<div class="review__text text-desktop-lg">
<p>With 10.000+ reviews of enthusiastic Stoov® fans on Trustpilot & TrustedShops</p>
</div>
Expand All @@ -1403,7 +1445,7 @@ <h2 class="review__heading">Excellent!</h2>

<swiper-slider class="container products-slider">
<header class="container-header">
<h2 class="container-heading h4">Featured products slider</h2>
<h3 class="container-heading h4">Featured products slider</h3>
</header>
<div class="container-content">
<div class="products-slider__row">
Expand Down Expand Up @@ -1689,51 +1731,51 @@ <h2 class="container-heading h4">Featured products slider</h2>
<div class="container container--background color-scheme--accent container--block">
<div class="container-content">
<div class="is-grid">
<div class="usp__wrapper is-col-6 is-col-3-md">
<div class="usp__wrapper is-col-12 is-col-6-md is-col-3-lg">
<a class="usp__link link link--text" href="#">
<p class="usp__title text-desktop-lg weight-regular">Wireless</p>
<div class="usp__content text-sm">
<p>Your personal heating buddy whenever and wherever you need it</p>
</div>
<p class="usp__icon">
<svg class="icon icon-infrared_technology icon--xl" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" viewBox="0 0 56.7 39.5">
<path fill="currentColor" d="M24.55,20.46a.38.38,0,0,1,.38-.38h5.5l.07.05h.05a.22.22,0,0,1,.05.08h0v.07a.09.09,0,0,1,0,.07v5.39a.38.38,0,0,1-.38.38.38.38,0,0,1-.37-.37h0V21a5.6,5.6,0,0,0,.5,10.28,6.36,6.36,0,0,1,0,11.91.29.29,0,0,1-.13,0A.38.38,0,0,1,30,43a.39.39,0,0,1,.22-.49,5.61,5.61,0,0,0,0-10.51,6.34,6.34,0,0,1-1.35-11.19H24.93A.38.38,0,0,1,24.55,20.46Zm10.88.37h3.92A6.34,6.34,0,0,0,40.69,32a5.61,5.61,0,0,1,0,10.51.38.38,0,0,0,.13.73H41a6.36,6.36,0,0,0,0-11.91A5.6,5.6,0,0,1,40.45,21v4.81a.39.39,0,0,0,.31.44.39.39,0,0,0,.44-.32.24.24,0,0,0,0-.12V20.46a.09.09,0,0,0,0-.07v-.07h0a.22.22,0,0,0-.05-.08h0l-.07,0h-5.5a.39.39,0,0,0-.44.31.39.39,0,0,0,.32.44h.12Zm10.5,0h3.9a6.33,6.33,0,0,0-2.77,5.23,6.42,6.42,0,0,0,4.13,6,5.61,5.61,0,0,1,0,10.51.35.35,0,0,0,.16.67h.14a6.36,6.36,0,0,0,0-11.91A5.6,5.6,0,0,1,51,21v4.81a.39.39,0,0,0,.31.44.39.39,0,0,0,.44-.32.24.24,0,0,0,0-.12V20.32h0a.22.22,0,0,0,0-.08H46.07a.39.39,0,0,0-.44.31A.39.39,0,0,0,46,21a.24.24,0,0,0,.12,0ZM68.29,50.24,66.24,36a8.24,8.24,0,0,0-8.11-7,.39.39,0,0,0-.44.31.39.39,0,0,0,.32.44.24.24,0,0,0,.12,0,7.47,7.47,0,0,1,7.37,6.39l2,14.21a7.44,7.44,0,0,1-6.29,8.43,7.85,7.85,0,0,1-1.08.08H19.82a7.45,7.45,0,0,1-7.45-7.43,7.85,7.85,0,0,1,.08-1.08L14.5,36.14a7.47,7.47,0,0,1,7.37-6.39.39.39,0,0,0,.44-.31A.39.39,0,0,0,22,29a.24.24,0,0,0-.12,0,8.24,8.24,0,0,0-8.11,7l-2,14.21a8.2,8.2,0,0,0,7,9.29,8.92,8.92,0,0,0,1.16.08H60.18a8.19,8.19,0,0,0,8.19-8.21,7.54,7.54,0,0,0-.08-1.16Z" transform="translate(-11.68 -20.08)" />
</svg>
</p>
<p class="usp__title text-desktop-lg weight-regular">Wireless</p>
<div class="usp__content text-sm">
<p>Your personal heating buddy whenever and wherever you need it</p>
</div>
</a>
</div>
<div class="usp__wrapper is-col-6 is-col-3-md">
<div class="usp__wrapper is-col-12 is-col-6-md is-col-3-lg">
<p class="usp__title text-desktop-lg weight-regular">Save energy</p>
<div class="usp__content text-sm">
<p>Every degree lower on your thermostat saves 7% energy</p>
</div>
<p class="usp__icon">
<svg class="icon icon-dutch_design icon--xl" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" viewBox="0 0 51.52 50.76">
<path fill="currentColor" d="M65.33,24.39,55.16,15.26a1.26,1.26,0,0,0-1.7,0L43.28,24.39a1.27,1.27,0,0,0-.42.95V64.1a1.29,1.29,0,0,0,1.27,1.28H64.48a1.28,1.28,0,0,0,1.28-1.28V25.34A1.28,1.28,0,0,0,65.33,24.39ZM51,64.63V55.51a3.33,3.33,0,1,1,6.65-.36,2.16,2.16,0,0,1,0,.36v9.12Zm14-.53a.53.53,0,0,1-.53.53h-6.1V55.51a4.08,4.08,0,1,0-8.15-.4,2.67,2.67,0,0,0,0,.4v9.12h-6.1a.52.52,0,0,1-.52-.52h0V25.34a.52.52,0,0,1,.17-.39L54,15.82h0a.51.51,0,0,1,.7,0L64.83,25a.53.53,0,0,1,.18.39ZM37,22.2H35.14a.52.52,0,0,1-.52-.52h0v-2a1.27,1.27,0,0,0-1.27-1.27H31.64a.52.52,0,0,1-.52-.52h0v-2a1.27,1.27,0,0,0-1.27-1.27H22.68a1.27,1.27,0,0,0-1.27,1.27h0v2a.52.52,0,0,1-.52.52H19.18a1.27,1.27,0,0,0-1.27,1.27h0v2a.54.54,0,0,1-.52.52H15.52a1.27,1.27,0,0,0-1.28,1.26h0V64.1a1.28,1.28,0,0,0,1.28,1.28H37a1.29,1.29,0,0,0,1.27-1.28V23.47A1.27,1.27,0,0,0,37,22.2ZM22.94,64.63V55.51a3.33,3.33,0,1,1,6.65-.36,2.16,2.16,0,0,1,0,.36v9.12Zm14.59-.53a.52.52,0,0,1-.51.53H30.34V55.51a4.08,4.08,0,1,0-8.15-.4,2.67,2.67,0,0,0,0,.4v9.12H15.52A.53.53,0,0,1,15,64.1V23.47a.52.52,0,0,1,.52-.52H17.4a1.27,1.27,0,0,0,1.27-1.27h0v-2a.52.52,0,0,1,.52-.52H20.9a1.27,1.27,0,0,0,1.27-1.27h0v-2a.52.52,0,0,1,.52-.52h7.16a.52.52,0,0,1,.53.51h0v2a1.27,1.27,0,0,0,1.27,1.27h1.71a.54.54,0,0,1,.52.52v2A1.27,1.27,0,0,0,35.1,23H37a.52.52,0,0,1,.52.52h0ZM49.66,28.59A3.41,3.41,0,0,0,46.25,32v3.32a.38.38,0,0,0,.38.37h6.06a.39.39,0,0,0,.37-.37V32A3.41,3.41,0,0,0,49.66,28.59Zm2.65,6.35H47V32a2.66,2.66,0,1,1,5.31-.33,1.82,1.82,0,0,1,0,.33ZM59,28.59A3.41,3.41,0,0,0,55.55,32v3.36a.38.38,0,0,0,.38.37H62a.39.39,0,0,0,.37-.37V32A3.41,3.41,0,0,0,59,28.59Zm2.65,6.35H56.3V32a2.66,2.66,0,1,1,5.31-.33,1.82,1.82,0,0,1,0,.33Zm-12,4.93a3.41,3.41,0,0,0-3.41,3.41V46.6a.38.38,0,0,0,.38.37h6.06a.39.39,0,0,0,.37-.37V43.28a3.4,3.4,0,0,0-3.39-3.41Zm2.65,6.35H47V43.28A2.66,2.66,0,1,1,52.31,43a1.82,1.82,0,0,1,0,.33ZM59,39.87a3.41,3.41,0,0,0-3.41,3.41V46.6A.38.38,0,0,0,56,47h6a.39.39,0,0,0,.37-.37V43.28A3.41,3.41,0,0,0,59,39.87Zm2.65,6.35H56.3V43.28A2.66,2.66,0,1,1,61.61,43a1.82,1.82,0,0,1,0,.33ZM24.2,27H19.07a.38.38,0,0,0-.37.37h0v7.94a.38.38,0,0,0,.37.37H24.2a.38.38,0,0,0,.38-.37V27.38A.38.38,0,0,0,24.2,27Zm-.37,7.94H19.45V27.75h4.38ZM33.46,27H28.33a.38.38,0,0,0-.38.38v7.94a.38.38,0,0,0,.38.37h5.13a.39.39,0,0,0,.37-.37V27.38A.38.38,0,0,0,33.46,27Zm-.38,7.94H28.7V27.75h4.38ZM24.2,40.08H19.07a.36.36,0,0,0-.37.35v8a.38.38,0,0,0,.36.38H24.2a.38.38,0,0,0,.38-.38h0V40.45a.38.38,0,0,0-.37-.37ZM23.83,48H19.45V40.83h4.38Zm9.63-7.94H28.33a.38.38,0,0,0-.38.36h0v7.94a.38.38,0,0,0,.38.38h5.13a.38.38,0,0,0,.37-.38V40.45a.38.38,0,0,0-.37-.37ZM33.08,48H28.7V40.83h4.38ZM28.7,20.8a2.44,2.44,0,1,0-2.44,2.44A2.44,2.44,0,0,0,28.7,20.8Zm-2.44,1.69A1.69,1.69,0,1,1,28,20.8a1.69,1.69,0,0,1-1.74,1.69Zm30.49.1A2.44,2.44,0,1,0,54.28,25h0A2.44,2.44,0,0,0,56.75,22.59Zm-2.44,1.69A1.69,1.69,0,1,1,56,22.59h0A1.69,1.69,0,0,1,54.31,24.28Z" transform="translate(-14.24 -14.62)" />
</svg>
</p>
<p class="usp__title text-desktop-lg weight-regular">Save energy</p>
</div>
<div class="usp__wrapper is-col-12 is-col-6-md is-col-3-lg">
<p class="usp__title text-desktop-lg weight-regular">Free shipment</p>
<div class="usp__content text-sm">
<p>Every degree lower on your thermostat saves 7% energy</p>
<p>Fast & free shipping</p>
</div>
</div>
<div class="usp__wrapper is-col-6 is-col-3-md">
<p class="usp__icon">
<svg class="icon icon-shipping icon--xl" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" viewBox="0 0 63.69 43.03">
<path fill="currentColor" d="M65.79,38.61l-5.05-7.72a3.61,3.61,0,0,0-3.06-1.65H47.21V23.47a3.38,3.38,0,0,0-3.38-3.38H17a3.38,3.38,0,0,0-3.38,3.38h0v9.11H3.13a.39.39,0,0,0-.44.31.39.39,0,0,0,.32.44.24.24,0,0,0,.12,0H13.62v4.35H9.35a.38.38,0,0,0,0,.75h4.27V54A3.38,3.38,0,0,0,17,57.41h.7a6.91,6.91,0,0,0,13.61,0H49.61a6.91,6.91,0,0,0,13.62-.06,3.63,3.63,0,0,0,3.15-3.56V40.59A3.67,3.67,0,0,0,65.79,38.61ZM57.68,30a2.87,2.87,0,0,1,2.43,1.31l5,7.72c0,.08.08.16.13.23h-18V30ZM24.48,62.36A6.14,6.14,0,0,1,18.37,57a4.87,4.87,0,0,1-.06-.76,6.17,6.17,0,0,1,12.33,0,6.47,6.47,0,0,1-.05.76A6.14,6.14,0,0,1,24.48,62.36Zm6.91-6.13a6.92,6.92,0,0,0-13.83,0v.43H17A2.62,2.62,0,0,1,14.38,54V38.43H26.53a.38.38,0,0,0,0-.75H14.38V33.33h5.93a.38.38,0,0,0,0-.75H14.38V23.47A2.62,2.62,0,0,1,17,20.84H43.83a2.63,2.63,0,0,1,2.63,2.63h0V56.66H31.38C31.39,56.52,31.39,56.38,31.39,56.23Zm25,6.13A6.16,6.16,0,0,1,50.3,57h0a4.82,4.82,0,0,1,0-.76,6.17,6.17,0,0,1,12.33,0,4.57,4.57,0,0,1,0,.74h0a6.16,6.16,0,0,1-6.21,5.38Zm9.2-8.57a2.88,2.88,0,0,1-2.3,2.8v-.36a6.92,6.92,0,0,0-13.83,0v.43H47.21V40H65.56a2.88,2.88,0,0,1,.06.59Z" transform="translate(-2.69 -20.09)"/>
</svg>
</p>
<p class="usp__title text-desktop-lg weight-regular">Free shipment</p>
</div>
<div class="usp__wrapper is-col-12 is-col-6-md is-col-3-lg">
<p class="usp__title text-desktop-lg weight-regular">30 days return policy</p>
<div class="usp__content text-sm">
<p>Fast & free shipping</p>
<p>Experience our infrared heating yourself</p>
</div>
</div>
<div class="usp__wrapper is-col-6 is-col-3-md">
<p class="usp__icon">
<svg class="icon icon-hassle_free_returns icon--xl" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" viewBox="0 0 58.57 62.74">
<path fill="currentColor" d="M25.08,55a.38.38,0,0,0,.37.38h29.1a.38.38,0,0,0,.37-.38V32.27h0a.3.3,0,0,0-.05-.15h0L50.21,24.8a.37.37,0,0,0-.32-.17H30.11a.37.37,0,0,0-.32.17l-4.65,7.27h0a.3.3,0,0,0-.05.15h0Zm29.09-.37H25.83v-22H54.17ZM30.31,25.38H49.69l1.58,2.47H28.73ZM28.25,28.6h23.5l2.11,3.29H26.14Zm3.13,14.24a.37.37,0,0,1,.1-.51h0a.38.38,0,0,1,.52.11,9.54,9.54,0,0,0,16,0,.38.38,0,0,1,.52-.11.37.37,0,0,1,.12.51h0a10.29,10.29,0,0,1-17.24,0Zm-11.57-23A28.57,28.57,0,0,0,16.36,56a.37.37,0,0,1-.09.51.36.36,0,0,1-.22.07.38.38,0,0,1-.31-.16A29.29,29.29,0,0,1,55.79,15.4l-1-6.34a.37.37,0,0,1,.74-.12L56.64,16a.35.35,0,0,1-.11.32h0a.39.39,0,0,1-.41.15l-6.8,1.11h-.06a.38.38,0,0,1-.37-.31.39.39,0,0,1,.31-.43l5.92-1a28.56,28.56,0,0,0-35.31,4ZM60.72,60.78A29.29,29.29,0,0,1,24.2,64.71l1,6.23a.39.39,0,0,1-.31.43h-.06a.38.38,0,0,1-.37-.32l-1.13-7a.39.39,0,0,1,.31-.43l7-1.15a.39.39,0,0,1,.43.31.37.37,0,0,1-.3.43h0l-6,1a28.53,28.53,0,0,0,38.91-40.1.36.36,0,0,1,.09-.51h0a.35.35,0,0,1,.5.08l0,0A29.33,29.33,0,0,1,60.72,60.78Z" transform="translate(-10.73 -8.63)" />
</svg>
</p>
<p class="usp__title text-desktop-lg weight-regular">30 days return policy</p>
<div class="usp__content text-sm">
<p>Experience our infrared heating yourself</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -2156,6 +2198,9 @@ <h2 class="container-heading h4">Featured products slider</h2>
<script src="js/footer.js" defer></script>
</footer>

<script src="js/collapsible-footer.js" defer></script>
<script src="js/scroll-indicators.js" defer></script>

<script>
window.routes = {
cart_url: '/cart',
Expand Down
42 changes: 42 additions & 0 deletions src/js/collapsible-footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
let isCollapsible = false;

const toggleHidden = (element) => {
if (element.style.display === "none") element.style.display = "";
else element.style.display = "none";
};

const makeCollapsible = () => {
if (isCollapsible) return;

const footerMenus = document.querySelectorAll(
".footer-block--menu__item.level-1"
);

footerMenus.forEach((footerMenu) => {
const link = footerMenu.querySelector(".footer-block--menu__link.level-1");
const list = footerMenu.querySelector(".footer-block--menu__list.level-2");
if (link) {
link.addEventListener("click", () => {
if (isCollapsible) {
toggleHidden(list);
}
});
}
});

isCollapsible = true;
};

const mediaQuery = window.matchMedia("( max-width: 768px )");

if (mediaQuery.matches) {
makeCollapsible();
}

mediaQuery.addListener((e) => {
if (e.matches) {
makeCollapsible();
} else {
isCollapsible = false;
}
});
10 changes: 10 additions & 0 deletions src/js/scroll-indicators.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
const scrollIndicator = document.querySelector(".swiper-scroll-indicators");
const secondSection = document.querySelector(
".shopify-section.section-two-column-highlight-products"
);

if (scrollIndicator && secondSection) {
scrollIndicator.addEventListener("click", () => {
secondSection.scrollIntoView({ block: "start", behavior: "smooth" });
});
}
4 changes: 2 additions & 2 deletions src/scss/section/section-footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,8 @@
position: absolute;
right: 0;
top: 0;
width: 32px;
height: 32px;
width: 48px;
height: 48px;
padding: 0;
.icon {
width: 48px;
Expand Down
4 changes: 2 additions & 2 deletions src/scss/section/section-hero-slider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@
&__content-wrapper {
box-sizing: border-box;
// padding left/right given to avoid overlap with the "swiper navigation arrows"
padding-block: 0 rem(100);
padding-block: rem(80) rem(100) rem(100) rem(100);
@include mqmin($bp-md) {
padding-block: 0 rem(102);
padding-block: rem(80) rem(102) rem(102) rem(102);
max-width: var(--site-center-narrow);
}
&.has-navigation {
Expand Down
13 changes: 13 additions & 0 deletions src/scss/section/section-sustainable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@use '../mixins' as *;

.section-sustainable {
&__text {
margin-top: var(--spacing);
}

&__content{
@include mqmax($bp-md) {
padding:calc( var(--spacing));
}
}
}