changes
This commit is contained in:
parent
a3473ac706
commit
39f8bd82f6
10
src/App.vue
10
src/App.vue
@ -26,13 +26,13 @@
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleScroll() {
|
handleScroll() {
|
||||||
const limit = 430;
|
const limit = this.$isMobile() ? 115 : 430;
|
||||||
if (!pagesWithCarousel.includes(this.$route.name)) {
|
if (!pagesWithCarousel.includes(this.$route.name)) {
|
||||||
this.stickyClass = 'has-sticky has-sticky-1'
|
this.stickyClass = 'has-sticky has-sticky-1'
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (window.scrollY > 0 && window.scrollY <= limit) {
|
if (window.scrollY > 5 && window.scrollY <= limit) {
|
||||||
this.stickyClass = 'has-sticky has-sticky-0';
|
this.stickyClass = 'has-sticky has-sticky-0';
|
||||||
} else if(window.scrollY > limit) {
|
} else if(window.scrollY > limit) {
|
||||||
this.stickyClass = 'has-sticky has-sticky-1';
|
this.stickyClass = 'has-sticky has-sticky-1';
|
||||||
@ -45,7 +45,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="width">{{ width }}px {{ deviceClass }}</div>
|
<!-- <div class="width">{{ width }}px {{ deviceClass }}</div> -->
|
||||||
<Menu :class="`${stickyClass}`" />
|
<Menu :class="`${stickyClass}`" />
|
||||||
<div class="main-container" :class="`${stickyClass} ${deviceClass}`">
|
<div class="main-container" :class="`${stickyClass} ${deviceClass}`">
|
||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
@ -70,7 +70,7 @@
|
|||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
.content-wrapper {
|
.content-wrapper {
|
||||||
padding-top: 91px;
|
padding-top: 120px;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
@ -109,7 +109,7 @@
|
|||||||
|
|
||||||
@media only screen and (max-width: 767px) {
|
@media only screen and (max-width: 767px) {
|
||||||
.content-wrapper {
|
.content-wrapper {
|
||||||
padding-top: 50px;
|
padding-top: 115px;
|
||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
padding: 0 16px 72px;
|
padding: 0 16px 72px;
|
||||||
|
@ -29,6 +29,10 @@ export default {
|
|||||||
<div class="hamburger-line"></div>
|
<div class="hamburger-line"></div>
|
||||||
<div class="hamburger-line"></div>
|
<div class="hamburger-line"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="logo">
|
||||||
|
<img src="@images/tayrona-foods-yellow.png" alt="Tayrona Foods"/>
|
||||||
|
</div>
|
||||||
|
<div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="menu-content" :class="{collapsed: !mobileMenuOpened}">
|
<div class="menu-content" :class="{collapsed: !mobileMenuOpened}">
|
||||||
<div class="links">
|
<div class="links">
|
||||||
@ -44,7 +48,9 @@ export default {
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<nav v-else>
|
<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">
|
<div class="links">
|
||||||
<router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
|
<router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
|
||||||
<router-link class="link" to="/about">{{ $t('menu.about') }}</router-link>
|
<router-link class="link" to="/about">{{ $t('menu.about') }}</router-link>
|
||||||
@ -80,9 +86,9 @@ export default {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
transition: background-color .3s ease-in-out;
|
transition: background-color .3s ease-in-out;
|
||||||
|
|
||||||
.logo {
|
.logo img{
|
||||||
height: 75px;
|
height: 100px;
|
||||||
width: 75px;;
|
width: 100px;;
|
||||||
}
|
}
|
||||||
|
|
||||||
.links {
|
.links {
|
||||||
@ -148,6 +154,20 @@ export default {
|
|||||||
.menu {
|
.menu {
|
||||||
&-bar {
|
&-bar {
|
||||||
width: 100%;
|
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 {
|
&-content {
|
||||||
color: white;
|
color: white;
|
||||||
@ -172,9 +192,18 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.has-sticky-0 nav, &.has-sticky-1 nav{
|
&.has-sticky-0, &.has-sticky-1 {
|
||||||
|
.menu-bar {
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
opacity: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
nav {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
@ -177,7 +177,7 @@ export default {
|
|||||||
|
|
||||||
contact:{
|
contact:{
|
||||||
title: 'Contacto',
|
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',
|
paragraph2: 'Correo Electrónico',
|
||||||
paragraph3: 'info@tayronafoods.com',
|
paragraph3: 'info@tayronafoods.com',
|
||||||
paragraph4: 'alejandro@tayronafoods.com',
|
paragraph4: 'alejandro@tayronafoods.com',
|
||||||
|
@ -180,7 +180,7 @@ export default {
|
|||||||
},
|
},
|
||||||
contact:{
|
contact:{
|
||||||
title: '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',
|
paragraph2: 'Email',
|
||||||
paragraph3: 'info{\'@\'}tayronafoods.com',
|
paragraph3: 'info{\'@\'}tayronafoods.com',
|
||||||
paragraph4: 'alejandro{\'@\'}tayronafoods.com',
|
paragraph4: 'alejandro{\'@\'}tayronafoods.com',
|
||||||
|
@ -179,7 +179,7 @@ export default {
|
|||||||
|
|
||||||
contact:{
|
contact:{
|
||||||
title: 'Contacto',
|
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',
|
paragraph2: 'Correo Electrónico',
|
||||||
paragraph3: 'info{\'@\'}tayronafoods.com',
|
paragraph3: 'info{\'@\'}tayronafoods.com',
|
||||||
paragraph4: 'alejandro{\'@\'}tayronafoods.com',
|
paragraph4: 'alejandro{\'@\'}tayronafoods.com',
|
||||||
|
@ -68,6 +68,10 @@ body {
|
|||||||
margin-top: 48px;
|
margin-top: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a, .link {
|
||||||
|
color: #442808;
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 960px) {
|
@media only screen and (max-width: 960px) {
|
||||||
.main-container {
|
.main-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
<div class="contact-section">
|
<div class="contact-section">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<h1>{{ $t('contact.title') }}</h1>
|
<h1>{{ $t('contact.title') }}</h1>
|
||||||
<p>{{ $t('contact.paragraph1') }}</p>
|
<p v-html="$t('contact.paragraph1')"></p>
|
||||||
<h3>{{ $t('contact.paragraph2') }}</h3>
|
<h3>{{ $t('contact.paragraph2') }}</h3>
|
||||||
<p>{{ $t('contact.paragraph3') }}</p>
|
<p>{{ $t('contact.paragraph3') }}</p>
|
||||||
<p>{{ $t('contact.paragraph4') }}</p>
|
<p>{{ $t('contact.paragraph4') }}</p>
|
||||||
@ -12,7 +12,7 @@
|
|||||||
<p>{{ $t('contact.paragraph7') }}</p>
|
<p>{{ $t('contact.paragraph7') }}</p>
|
||||||
<p>{{ $t('contact.paragraph8') }}</p>
|
<p>{{ $t('contact.paragraph8') }}</p>
|
||||||
<h3>{{ $t('contact.paragraph9') }}</h3>
|
<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>
|
||||||
<div class="right"></div>
|
<div class="right"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -36,20 +36,28 @@ export default {
|
|||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 64px;
|
font-size: 32px;
|
||||||
line-height: 75px;
|
line-height: 75px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
margin-top: 54px;
|
margin-top: 54px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 32px;
|
font-size: 18px;
|
||||||
line-height: 38px;
|
line-height: 38px;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
font-weight: 400;
|
font-weight: 300;
|
||||||
font-size: 20px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 767px) {
|
||||||
|
.contact-section {
|
||||||
|
.left {
|
||||||
|
padding: 36px 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
Loading…
x
Reference in New Issue
Block a user