valentin_le_moign
/
mahee-auffret
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modifs ordre slider, logo insta, hover header

This commit is contained in:
Valentin 2024-05-27 16:51:17 +02:00
parent 5355833a86
commit 5bec5e2c65
10 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/hover-contact-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
assets/images/hover-contact.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 60 KiB

BIN
assets/images/hover-galery-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
assets/images/hover-galery.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 47 KiB

BIN
assets/images/hover-index-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
assets/images/hover-index.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 65 KiB

BIN
assets/images/hover-shop-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
assets/images/hover-shop.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 59 KiB

39
components/Header.vue
View File

@ -62,6 +62,12 @@ export default {
width: auto;
position: relative;
margin-top: 1rem;
> .hover_el_active {
top: -100% !important;
left: -40% !important;
width: 170% !important;
height: 300% !important;
}
> a {
position: relative;
padding: 10px;
@ -69,10 +75,6 @@ export default {
z-index: 1;
}
}
h1 .hover_el_active {
left: -40% !important;
width: 170% !important;
}
h1:hover .hover_el_active,
h1.active .hover_el_active {
opacity: 1;
@ -101,10 +103,10 @@ export default {
}
.hover_el_active {
position: absolute;
top: -70%;
left: -15%;
width: 130%;
height: 240%;
top: -75%;
left: -25%;
width: 150%;
height: 250%;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
@ -113,22 +115,20 @@ export default {
transition: opacity 0.3s ease;
}
#indexActive {
background-image: url('/assets/images/hover-index.png');
background-image: url('/assets/images/hover-index-2.png');
}
#galeryActive {
background-image: url('/assets/images/hover-index.png');
left: -30%;
width: 160%;
background-image: url('/assets/images/hover-galery-2.png');
}
#shopActive {
background-image: url('/assets/images/hover-index.png');
background-image: url('/assets/images/hover-shop-2.png');
}
#contactActive {
background-image: url('/assets/images/hover-index.png');
background-image: url('/assets/images/hover-contact-2.png');
}
}
> div {
width: 3rem;
width: 2rem;
z-index: 1;
img {
padding-top: 10px;
@ -149,6 +149,10 @@ export default {
flex-direction: row;
h1 {
margin-top: 0;
> .hover_el_active {
top: -130% !important;
height: 350% !important;
}
}
ul {
margin-top: 0;
@ -157,9 +161,12 @@ export default {
}
}
}
> div > a > img {
> div {
width: 3rem;
> a > img {
padding: 10px;
}
}
}
}
</style>

2
components/Projects.vue
View File

@ -25,7 +25,7 @@
@slideChange="onSlideChange"
@swiper="onSwiper"
>
<swiper-slide v-for="content in contents" :key="content.id">
<swiper-slide v-for="content in contents.slice().reverse()" :key="content.id">
<div class="swiper-zoom-container">
<img
:src="`/imgs/large/${content.image ? content.image : content.shop_image}.webp`"