From 5cb10426689e2bdf0c5b524c6931f743edc3c721 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Conde?= <jcondec@protonmail.com>
Date: Sun, 3 Sep 2023 14:40:49 +0200
Subject: [PATCH] adding responsive 1

---
 package.json                       |   2 +-
 src/App.vue                        |  54 ++++++++---
 src/components/Certifications.vue  |  30 +++++--
 src/components/CoffeeFarmer.vue    |  14 ++-
 src/components/Different.vue       |  14 ++-
 src/components/DifferentBox.vue    |  19 ++--
 src/components/Employee.vue        |   6 ++
 src/components/Footer.vue          |  43 +++++++--
 src/components/Menu.vue            | 139 +++++++++++++++++++++++------
 src/components/ProductBox.vue      |   8 +-
 src/components/ProductCarousel.vue |  19 +++-
 src/components/ProductTable.vue    |   1 -
 src/style.css                      |   8 +-
 src/views/about/About.vue          |  10 +++
 src/views/social/Social.vue        |  39 +++++---
 vite.config.js                     |   1 +
 16 files changed, 322 insertions(+), 85 deletions(-)

diff --git a/package.json b/package.json
index a17be49..ff7183b 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "preview": "vite preview"
   },
diff --git a/src/App.vue b/src/App.vue
index b2de361..212c6ea 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,9 @@
   export default {
     data() {
       return {
-        stickyClass: ''
+        stickyClass: '',
+        deviceClass: this.$isMobile() ? 'mobile' : 'desktop',
+        width: window.innerWidth
       }
     },
     components: { Footer, Menu },
@@ -24,15 +26,15 @@
     },
     methods: {
       handleScroll() {
-        console.log('this.$route.name :>> ', this.$route.name);
+        const limit = 430;
         if (!pagesWithCarousel.includes(this.$route.name)) {
           this.stickyClass = 'has-sticky has-sticky-1'
           return;
         }
 
-        if (window.scrollY > 0 && window.scrollY <= 574) {
+        if (window.scrollY > 0 && window.scrollY <= limit) {
           this.stickyClass = 'has-sticky has-sticky-0';
-        } else if(window.scrollY > 574) {
+        } else if(window.scrollY > limit) {
           this.stickyClass = 'has-sticky has-sticky-1';
         } else {
           this.stickyClass = '';
@@ -43,8 +45,9 @@
 </script>
 
 <template>
-  <div class="main-container" :class="stickyClass">
-    <Menu />    
+  <div class="width">{{ width }}px {{ deviceClass }}</div>
+  <Menu :class="`${stickyClass}`" />    
+  <div class="main-container" :class="`${stickyClass} ${deviceClass}`">
     <div class="content-wrapper">
       <RouterView />
     </div>
@@ -53,8 +56,21 @@
 </template>
 
 <style lang="scss">
+  .width {
+    position: fixed;
+    top: 0;
+    right: 0;
+    background-color: white;
+    color: #121212;
+    width: 150px;
+    height: 30px;
+    z-index: 200550;
+    border-bottom-right-radius: 10px;
+    padding: 4px;
+    opacity: 0.5;
+  }
   .content-wrapper {
-    padding-top: 130px;
+    padding-top: 91px;
     background-color: #000;
   }
   .content {
@@ -71,17 +87,18 @@
     }
 
     h4 {
-      font-size: 24px;
+      font-size: 20px;
       font-weight: 500;
-      line-height: 70px;
+      font-style: italic;
+      line-height: 42px;
       text-align: center;
       padding: 72px 264px;
     }
 
     p {
-      font-weight: 500;
-      font-size: 20px;
-      line-height: 40px;
+      font-weight: 300;
+      font-size: 16px;
+      line-height: 24px;
       text-align: justify;
 
       &.centered {
@@ -89,4 +106,17 @@
       }
     }
   }
+
+  @media only screen and (max-width: 767px) {
+    .content-wrapper {
+      padding-top: 50px;
+    }
+    .content {
+      padding: 0 16px 72px;
+
+      h4 {
+        padding: 72px 0;
+      }
+    }
+  }
 </style>
diff --git a/src/components/Certifications.vue b/src/components/Certifications.vue
index 3b378cd..ae0b330 100644
--- a/src/components/Certifications.vue
+++ b/src/components/Certifications.vue
@@ -2,11 +2,11 @@
   <section class="certifications">
     <div class="right">
       <h2>{{ $t('certifications.title1') }}</h2>
-      <p class="centered"><img src="@images/image_membresias.png" /></p>
+      <p class="centered"><img class="image" src="@images/image_membresias.png" /></p>
     </div>
     <div class="left">
       <h2>{{ $t('certifications.title2') }}</h2>
-      <p class="centered"><img src="@images/Nuestros_aliados.png" /></p>
+      <p class="centered"><img class="image" src="@images/Nuestros_aliados.png" /></p>
     </div>
   </section>
 </template>
@@ -19,22 +19,40 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.header {
+h2 {
   background-color: #000;
   color: #fff;
   text-align: center;  
-  
+  padding-bottom: 26px !important;
+}
+
+.image {
+  height: 270px;
+  widows: 270px;;
 }
 
 .certifications {
-  height: 600px;
   background-color: #000;
   background-position: top left;
   background-size: contain;
-  height: 600px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items:center;
 }
 
+@media only screen and (max-width: 767px) {
+
+  h2 {
+    font-size: 24px !important;
+  }
+  .image {
+    height: 170px;
+    widows: 170px;;
+  }
+  .certifications {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
 </style>
\ No newline at end of file
diff --git a/src/components/CoffeeFarmer.vue b/src/components/CoffeeFarmer.vue
index 95a72f4..1b6d52d 100644
--- a/src/components/CoffeeFarmer.vue
+++ b/src/components/CoffeeFarmer.vue
@@ -13,7 +13,7 @@ export default {
 
 <style lang="scss" scoped>
   .coffeefarmers {
-    height: 480px;
+    height: 400px;
     background: white;
     background-image: url('@images/grains.jpg');
     background-repeat: no-repeat;
@@ -23,9 +23,9 @@ export default {
 
   h3.header {
     font-weight: 600;
-    font-size: 36px;
+    font-size: 26px;
     line-height: 58px;
-    padding: 175px 230px 0;
+    padding: 120px 230px 0;
     text-align: center;
     text-shadow: 1px 1px 10px #000;
   }
@@ -35,4 +35,12 @@ export default {
     width: 700px;
     margin: 50px auto 0;
   }
+
+  @media only screen and (max-width: 767px) {
+    h3.header {
+      font-size: 26px;
+      line-height: 36px;
+      padding: 120px 16px 0;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/Different.vue b/src/components/Different.vue
index 3043829..1d631c2 100644
--- a/src/components/Different.vue
+++ b/src/components/Different.vue
@@ -19,11 +19,11 @@ import DifferentBox from './DifferentBox.vue';
  .different {
     color: #fff;
     background-color: #000;
-    padding: 72px 0;
+    padding: 0 0 72px;
   }
 
   h2 {
-    padding: 0 150px;
+    padding-bottom: 26px !important;
     font-size: 52px;
     text-align: center;
   }
@@ -41,4 +41,14 @@ import DifferentBox from './DifferentBox.vue';
     display: flex;
     justify-content: space-between;
   }
+
+
+@media only screen and (max-width: 767px) {
+  h3 {
+    padding: 0;
+  }
+  .boxes {
+    flex-direction: column;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/DifferentBox.vue b/src/components/DifferentBox.vue
index 238c2ab..1f0703b 100644
--- a/src/components/DifferentBox.vue
+++ b/src/components/DifferentBox.vue
@@ -18,29 +18,36 @@ export default {
 <style lang="scss" scoped>
 .different-box {
   width: 280px;
-  height: 284px;
+  height: 276px;
   background: #E2CAAA;
   text-align: center;
   padding: 36px 24px 0;
 }
 .image {
-  width: 88px;
-  height: 88px;
+  width: 70px;
+  height: 70px;
 }
 .title {
-  margin-top: 24px;
+  margin-top: 16px;
   color: #603809;
   font-weight: 700;
-  font-size: 28px;
+  font-size: 20px;
+  height: 48px;
 }
 
 .description {
   margin-top: 12px;
   font-style: 400;
   font-weight: 400;
-  font-size: 20px;
+  font-size: 16px;
   line-height: 24px;
   color: #1E1E1E;
   text-align: center;
 }
+
+@media only screen and (max-width: 767px) {
+  .different-box {
+    margin: 0 auto 8px;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/Employee.vue b/src/components/Employee.vue
index a657ea6..22c261a 100644
--- a/src/components/Employee.vue
+++ b/src/components/Employee.vue
@@ -36,4 +36,10 @@ export default {
     line-height: 23.44px;
     padding: 0;
   }
+
+  @media only screen and (max-width: 767px) {
+    .role {
+      margin-top: 8px;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index f30777d..a1bd65b 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -11,14 +11,16 @@
           <a href="mailto:alejandro@tayronafoods.com" class="email"><i class="email-icon"></i>alejandro@tayronafoods.com</a>
           <a href="mailto:jose@tayronafoods.com" class="email"><i class="email-icon"></i>jose@tayronafoods.com</a>
         </p>
-        <p class="phone"><i class="phone-icon"></i>+49(0)176 321 368 59</p>
-        <p class="phone"><i class="phone-icon"></i>+49(0)152 549 389 62</p>
-        <p class="rss">
+        <div class="phones">
+          <p class="phone"><i class="phone-icon"></i>+49(0)176 321 368 59</p>
+          <p class="phone"><i class="phone-icon"></i>+49(0)152 549 389 62</p>
+        </div>
+        <!-- <p class="rss">
           <a href="#"><i class="facebook-icon"></i></a>
           <a href="#"><i class="instagram-icon"></i></a>
           <a href="#"><i class="youtube-icon"></i></a>
           <a href="#"><i class="twitter-icon"></i></a>
-        </p>
+        </p> -->
         <p class="links">
           <router-link class="link" to="/impressum">{{ $t('footer.impressum')}}</router-link>
           <router-link class="link" to="/dataprotection">{{ $t('footer.dataprotection') }}</router-link>
@@ -35,10 +37,11 @@
   footer {
     position: relative;
     color: #fff;
-    height: 492px;
     background-color: #442808;
     background-image: url('@images/footer_coffee.png');
     background-blend-mode: overlay;
+    background-position: bottom;
+    padding-bottom: 36px;
   }
 
   h5 {
@@ -93,6 +96,10 @@
     font-size: 20px;
     font-weight: 500;
 
+    .phones {
+      margin-top: 24px;
+    }
+
     .emails {
       padding: 0;
       .email {
@@ -136,4 +143,30 @@
       @include icon('@images/twitter.svg');
     }
   }
+
+  @media only screen and (max-width: 767px) {
+
+    h5 {
+      padding-top: 16px;
+    }
+    .contact-info {
+      .emails {
+        display: grid;
+        gap: 8px;
+        flex-direction: column;
+      }
+
+      p.links {
+      margin-top: 58px;
+
+      a {
+        margin-right: 20px;
+        font-size: 80%;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 85ba906..296c778 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -3,13 +3,47 @@ import LocaleSelector from './LocaleSelector.vue';
 
 export default {
   components: { LocaleSelector },
+  data() {
+    return {
+      mobileMenuOpened: false
+    }
+  },
+  methods: {
+    openMobileClick() {
+      this.mobileMenuOpened = !this.mobileMenuOpened;
+    },
+    closeMenu() {
+      this.mobileMenuOpened = false;  
+    }
+  },
 }
 
 </script>
 
 <template>
   <section class="menu">
-    <nav>
+    <nav v-if="$isMobile()">
+      <div class="menu-bar">
+        <div class="hamburger" @click="openMobileClick">
+          <div class="hamburger-line"></div>
+          <div class="hamburger-line"></div>
+          <div class="hamburger-line"></div>
+        </div>
+      </div>
+      <div class="menu-content" :class="{collapsed: !mobileMenuOpened}">
+        <div class="links">
+          <router-link class="link" @click.native="closeMenu" to="/">{{ $t('menu.home')}}</router-link>
+          <router-link class="link" @click.native="closeMenu" to="/about">{{ $t('menu.about') }}</router-link>
+          <router-link class="link" @click.native="closeMenu" to="/products">{{ $t('menu.products') }}</router-link>
+          <!-- <router-link class="link" to="/store">{{ $t('Tienda') }}</router-link> -->
+          <a href="https://tayronafoods.myshopify.com" @click.native="closeMenu" target="_blank" class="link">{{ $t('Tienda') }}</a>
+          <router-link class="link" @click.native="closeMenu" to="/social">{{ $t('menu.social') }}</router-link>
+          <router-link class="link" @click.native="closeMenu" to="/contact">{{ $t('menu.contact') }}</router-link>
+          <LocaleSelector class="link"></LocaleSelector>
+        </div>
+      </div>
+    </nav>
+    <nav v-else>
       <img class="logo" src="@images/tayrona-foods-yellow.png" />
       <div class="links">
         <router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
@@ -26,44 +60,29 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+  // @media only screen and (min-width: 768px) {
+    /* tablets and desktop */
   .menu {
     background-color: transparent;
-    height: 130px;
     position: fixed;
-    top: 0px;
-    left: 0px;
+    top: 0;
+    left: 0;
     z-index: 1000;
     width: 100%;
 
-    
-    .nav-wrapper {
-      position: relative;
-      width: 1366px;
-      height: 100%;
-      // background: #000;
-    }
-    
     nav {
       margin: 0 auto;
-      padding: 16px 50px;
+      padding: 8px 50px;
       display: grid;
       grid-template-columns: auto auto;
       background: transparent;
-      width: 1366px;
+      width: 960px;
       height: 100%;
       transition: background-color .3s ease-in-out;
 
-      .has-sticky-0 & {
-        background-color: rgba(0, 0, 0, 0.5);
-      }
-      
-      .has-sticky-1 & {
-        background-color: #000;
-      }
-
       .logo {
-        height: 100px;
-        width: 100px;;
+        height: 75px;
+        width: 75px;;
       }
 
       .links {
@@ -71,7 +90,7 @@ export default {
         align-self: center;
 
         .link {
-          margin-right: 54px;
+          margin-right: 20px;
           color: #fff;
           text-decoration: none;
 
@@ -88,8 +107,74 @@ export default {
           }
         }
       }
+    }    
+
+    &.has-sticky-0 nav{
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+      
+    &.has-sticky-1 nav{
+      background-color: #000;
+    }
+
+    .hamburger {
+      width: 70px;
+      height: 50px;
+      padding: 14px 18px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      &-line {
+        width: 100%;
+        background-color: #fff;
+        height: 2px;
+      }
+    }
+  }
+  // }
+  @media only screen and (max-width: 960px) {
+    .menu {
+      nav, .nav-wrapper {
+        width: 100%;
+        .links .link {
+          font-size: 82%;
+        }
+      }
+    }
+  }
+
+  @media only screen and (max-width: 767px) {
+    .menu {
+      &-bar {
+        width: 100%;
+      }
+      &-content {
+        color: white;
+
+        &.collapsed {
+          display: none;
+        }
+      }
+      nav {
+        display: block;
+        background-color: #000;
+        padding: 0;
+
+        .links {
+          padding: 0 8px 16px;
+          .link {
+            text-align: center;
+            display: block;
+            padding: 8px;
+            font-size: 18px;
+          }
+        }
+      }  
+
+      &.has-sticky-0 nav, &.has-sticky-1 nav{
+        background-color: #000;
+      }
     }
-    
-    
   }
 </style>
\ No newline at end of file
diff --git a/src/components/ProductBox.vue b/src/components/ProductBox.vue
index f441147..b6c202c 100644
--- a/src/components/ProductBox.vue
+++ b/src/components/ProductBox.vue
@@ -32,8 +32,8 @@ export default {
 
 <style lang="scss" scoped>
 .product-box {
-  width: 360px;
-  height: 480px;
+  width: 330px;
+  height: 450px;
   border-radius: 12px;
   background-position: top left;
   box-sizing: border-box;
@@ -75,8 +75,8 @@ export default {
   }
 
   &-image {
-    width: 360px;
-    height: 285px;
+    width: 330px;
+    height: 250px;
 
     img {
       width: 100%;
diff --git a/src/components/ProductCarousel.vue b/src/components/ProductCarousel.vue
index 65741a9..014af5a 100644
--- a/src/components/ProductCarousel.vue
+++ b/src/components/ProductCarousel.vue
@@ -1,5 +1,5 @@
 <template>
-  <Carousel class="carousel" :items-to-show="3" :wrap-around="false">
+  <Carousel class="carousel" v-bind:breakpoints="breakpoints" :items-to-show="1" :wrap-around="false">
     <Slide v-for="product in products" :key="product.name">
       <div class="carousel-item">
         <ProductBox :product="product"></ProductBox>
@@ -21,6 +21,19 @@ export default {
   props: {
     products: Array
   },
+  data: () => ({
+    // breakpoints are mobile first
+    // any settings not specified will fallback to the carousel settings
+    breakpoints: {
+     
+      // 1024 and up
+      920: {
+        itemsToShow: 2,
+        snapAlign: 'start',
+        wrapAround: false,
+      },
+    },
+  }),
   components: {
     Carousel,
     Slide,
@@ -36,8 +49,8 @@ export default {
   .carousel {
     margin-top: 32px;
     &-item {
-      min-height: 570px;
-      width: 360px;
+      height: 450px;
+      width: 330px;
       font-size: 20px;
     }
 
diff --git a/src/components/ProductTable.vue b/src/components/ProductTable.vue
index 101c6d2..9dd9da1 100644
--- a/src/components/ProductTable.vue
+++ b/src/components/ProductTable.vue
@@ -179,7 +179,6 @@ export default {
       padding: 4px 0 0 8px;
       border-right-style: solid;
       border-right-width: 3px;
-      min-width: 100px;
       flex-basis: 0px;
       flex-grow: 1;
 
diff --git a/src/style.css b/src/style.css
index 1207803..3cec73a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -42,7 +42,7 @@ body {
 }
 
 .main-container {
-  width: 1366px;
+  width: 960px;
   margin: 0 auto;;
 }
 
@@ -66,4 +66,10 @@ body {
 }
 .mt-6 {
   margin-top: 48px;
+}
+
+@media only screen and (max-width: 960px) {
+  .main-container {
+    width: 100%;
+  }
 }
\ No newline at end of file
diff --git a/src/views/about/About.vue b/src/views/about/About.vue
index af5b247..4fce256 100644
--- a/src/views/about/About.vue
+++ b/src/views/about/About.vue
@@ -35,4 +35,14 @@
       margin: 0 150px;
     }
   }
+
+  @media only screen and (max-width: 767px) {
+    .employees {
+      flex-direction: column;
+
+      .employee {
+        margin: 0 8px 32px;
+      }
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/src/views/social/Social.vue b/src/views/social/Social.vue
index 8f9ac07..d0c53a1 100644
--- a/src/views/social/Social.vue
+++ b/src/views/social/Social.vue
@@ -6,13 +6,8 @@
     <p>{{ $t('social.paragraph2') }}</p>
   </section>
   <section class="social-bottom">
-    <div class="left">
-      <p>{{ $t('social.paragraph3') }}</p>
-      <p>{{ $t('social.paragraph4') }}</p>
-    </div>
-    <div class="right">
-      <img src="@images/kid-coffee.jpg">
-    </div>
+    <img src="@images/kid-coffee.jpg">
+      <p>{{ $t('social.paragraph3') }}<br><br>{{ $t('social.paragraph4') }}</p>
   </section>
 </template>
 
@@ -26,19 +21,35 @@ import { slides } from '../../data';
     padding: 40px 98px;
     background-image: url('@images/bg_1.jpg');
     background-position: top left;
-    background-size: contain;
-    height: 600px;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    // display: grid;
+    // grid-template-columns: 1fr 1fr;
     .left {
-      padding: 52px 32px 0 0
+      padding: 0 32px 0 0
+    }
+
+    img {
+      float: right;
+      width: 50%;
+      padding: 16px
     }
     p {
       font-weight: 500;
       color: #603809;
-      font-size: 32px;
-      line-height: 50px;
+      font-size: 24px;
+      line-height: 40px;
 
     }
   }
+
+  @media only screen and (max-width: 767px) {
+    .social-bottom {
+      padding: 16px;
+
+      img {
+        float: none;
+        width: 100%;
+        padding: 0;
+      }
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index f785f65..a546e3e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,6 +6,7 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  // base: '/beta',
   resolve: {
     alias: {
       '@images': fileURLToPath(new URL('./src/assets/images',