arhuako/tayronafoods-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
José Conde 2023-09-04 12:56:05 +02:00
parent a3473ac706
commit 39f8bd82f6
7 changed files with 61 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.vue
View File

@ -26,13 +26,13 @@
},
methods: {
handleScroll() {
const limit = 430;
const limit = this.$isMobile() ? 115 : 430;
if (!pagesWithCarousel.includes(this.$route.name)) {
this.stickyClass = 'has-sticky has-sticky-1'
return;
}
if (window.scrollY > 0 && window.scrollY <= limit) {
if (window.scrollY > 5 && window.scrollY <= limit) {
this.stickyClass = 'has-sticky has-sticky-0';
} else if(window.scrollY > limit) {
this.stickyClass = 'has-sticky has-sticky-1';
@ -45,7 +45,7 @@
</script>
<template>
<div class="width">{{ width }}px {{ deviceClass }}</div>
<!-- <div class="width">{{ width }}px {{ deviceClass }}</div> -->
<Menu :class="`${stickyClass}`" />
<div class="main-container" :class="`${stickyClass} ${deviceClass}`">
<div class="content-wrapper">
@ -70,7 +70,7 @@
opacity: 0.5;
}
.content-wrapper {
padding-top: 91px;
padding-top: 120px;
background-color: #000;
}
.content {
@ -109,7 +109,7 @@
@media only screen and (max-width: 767px) {
.content-wrapper {
padding-top: 50px;
padding-top: 115px;
}
.content {
padding: 0 16px 72px;

41
src/components/Menu.vue
View File

@ -29,6 +29,10 @@ export default {
<div class="hamburger-line"></div>
<div class="hamburger-line"></div>
</div>
<div class="logo">
<img src="@images/tayrona-foods-yellow.png" alt="Tayrona Foods"/>
</div>
<div></div>
</div>
<div class="menu-content" :class="{collapsed: !mobileMenuOpened}">
<div class="links">
@ -44,7 +48,9 @@ export default {
</div>
</nav>
<nav v-else>
<img class="logo" src="@images/tayrona-foods-yellow.png" />
<div class="logo">
<img src="@images/tayrona-foods-yellow.png" alt="Tayrona Foods"/>
</div>
<div class="links">
<router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
<router-link class="link" to="/about">{{ $t('menu.about') }}</router-link>
@ -80,9 +86,9 @@ export default {
height: 100%;
transition: background-color .3s ease-in-out;
.logo {
height: 75px;
width: 75px;;
.logo img{
height: 100px;
width: 100px;;
}
.links {
@ -148,6 +154,20 @@ export default {
.menu {
&-bar {
width: 100%;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
height: 115px;
transition: height .2s ease-out;
.logo, .hamburger {
justify-self: center;
align-self: center;
}
.logo {
opacity: 1;
transition: opacity .2s ease-out;
}
}
&-content {
color: white;
@ -172,8 +192,17 @@ export default {
}
}
&.has-sticky-0 nav, &.has-sticky-1 nav{
background-color: #000;
&.has-sticky-0, &.has-sticky-1 {
.menu-bar {
height: 50px;
}
.logo {
opacity: 0;
overflow: hidden;
}
nav {
background-color: #000;
}
}
}
}

2
src/i18n/de.js
View File

@ -177,7 +177,7 @@ export default {
contact:{
title: 'Contacto',
paragraph1: 'Si está interesado o tiene alguna pregunta, ¡contáctenos!',
paragraph1: 'Si está interesado o tiene alguna pregunta, <a class="link" href="https://tayronafoods.myshopify.com/pages/contact" target="_blank">¡contáctenos!</a>',
paragraph2: 'Correo Electrónico',
paragraph3: 'info@tayronafoods.com',
paragraph4: 'alejandro@tayronafoods.com',

2
src/i18n/en.js
View File

@ -180,7 +180,7 @@ export default {
},
contact:{
title: 'Contact',
paragraph1:'If you are interested or have any questions, please contact us!',
paragraph1:'If you are interested or have any questions, please <a class="link" href="https://tayronafoods.myshopify.com/pages/contact" target="_blank">contact us!</a>',
paragraph2: 'Email',
paragraph3: 'info{\'@\'}tayronafoods.com',
paragraph4: 'alejandro{\'@\'}tayronafoods.com',

2
src/i18n/es.js
View File

@ -179,7 +179,7 @@ export default {
contact:{
title: 'Contacto',
paragraph1: 'Si está interesado o tiene alguna pregunta, ¡contáctenos!',
paragraph1: 'Si está interesado o tiene alguna pregunta, <a class="link" href="https://tayronafoods.myshopify.com/pages/contact" target="_blank">¡contáctenos!</a>',
paragraph2: 'Correo Electrónico',
paragraph3: 'info{\'@\'}tayronafoods.com',
paragraph4: 'alejandro{\'@\'}tayronafoods.com',

4
src/style.css
View File

@ -68,6 +68,10 @@ body {
margin-top: 48px;
}
a, .link {
color: #442808;
}
@media only screen and (max-width: 960px) {
.main-container {
width: 100%;

20
src/views/contact/Contact.vue
View File

@ -3,7 +3,7 @@
<div class="contact-section">
<div class="left">
<h1>{{ $t('contact.title') }}</h1>
<p>{{ $t('contact.paragraph1') }}</p>
<p v-html="$t('contact.paragraph1')"></p>
<h3>{{ $t('contact.paragraph2') }}</h3>
<p>{{ $t('contact.paragraph3') }}</p>
<p>{{ $t('contact.paragraph4') }}</p>
@ -12,7 +12,7 @@
<p>{{ $t('contact.paragraph7') }}</p>
<p>{{ $t('contact.paragraph8') }}</p>
<h3>{{ $t('contact.paragraph9') }}</h3>
<p>{{ $t('contact.paragraph10') }}</p>
<p><a href="https://www.instagram.com/tayrona_foods" target="">Instagram</a></p>
</div>
<div class="right"></div>
</div>
@ -36,20 +36,28 @@ export default {
h1 {
font-weight: 400;
font-size: 64px;
font-size: 32px;
line-height: 75px;
}
h3 {
margin-top: 54px;
font-weight: 400;
font-size: 32px;
font-size: 18px;
line-height: 38px;
}
p {
font-weight: 400;
font-size: 20px;
font-weight: 300;
font-size: 16px;
line-height: 24px;
}
}
@media only screen and (max-width: 767px) {
.contact-section {
.left {
padding: 36px 16px;
}
}
}
</style>