style gallery
This commit is contained in:
Julie Blanc
parent
57037fc435
commit
14438b642b
12 changed files with 388 additions and 333 deletions
|
|
@ -40,5 +40,6 @@ body{
|
||||||
|
|
||||||
main{
|
main{
|
||||||
padding-top: var(--header-h);
|
padding-top: var(--header-h);
|
||||||
// padding-bottom: 10vh;
|
min-height: calc(100vh - var(--spacing)*2);
|
||||||
|
min-height: calc(100dvh - var(--spacing)*2);
|
||||||
}
|
}
|
||||||
|
|
@ -33,6 +33,7 @@
|
||||||
|
|
||||||
--color-bg: #161616;
|
--color-bg: #161616;
|
||||||
--color-txt: #ffffff;
|
--color-txt: #ffffff;
|
||||||
|
--color-txt-light: #b9b9b9;
|
||||||
--color-accent: #00ff00;
|
--color-accent: #00ff00;
|
||||||
--color-accent-50: #e9ffe9;
|
--color-accent-50: #e9ffe9;
|
||||||
--color-accent-100: #d8fdd8;
|
--color-accent-100: #d8fdd8;
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,13 @@
|
||||||
#site-footer {
|
#site-footer {
|
||||||
background-color: black;
|
background-color: black;
|
||||||
|
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
position: relative;
|
position: relative;
|
||||||
left: calc(var(--padding-body) * -1);
|
left: calc(var(--padding-body)*-1);
|
||||||
padding: calc(var(--padding-body) * 2) var(--padding-body);
|
height: calc(var(--spacing)*2);
|
||||||
// border-top: var(--border-light);
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
p {
|
justify-content: center;
|
||||||
margin: calc(var(--spacing) * 0.5) 0;
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -16,97 +15,11 @@
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.p__small {
|
.p__small {
|
||||||
font-size: var(--fs-x-small);
|
font-size: var(--fs-x-small);
|
||||||
// margin-top: calc(var(--spacing)*0.5)
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#list-socials {
|
|
||||||
list-style: none;
|
|
||||||
columns: 2;
|
|
||||||
max-width: 500px;
|
|
||||||
margin: 0;
|
|
||||||
a {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1ch;
|
|
||||||
text-decoration: none;
|
|
||||||
height: calc(var(--spacing) * 1);
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: "↗";
|
|
||||||
color: var(--grey-300);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
position: relative;
|
|
||||||
top: -2px;
|
|
||||||
}
|
|
||||||
svg {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media #{$small} {
|
|
||||||
margin-top: calc(var(--spacing) * 2);
|
|
||||||
.footer__socials {
|
|
||||||
margin-top: calc(var(--spacing) * 1.5);
|
|
||||||
}
|
|
||||||
.footer__mentions {
|
|
||||||
margin-top: calc(var(--spacing) * 0.5);
|
|
||||||
p {
|
|
||||||
// font-size: var(--font-size);
|
|
||||||
margin-top: calc(var(--spacing) * 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media #{$small-up} {
|
|
||||||
.site-footer__container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
column-gap: calc(var(--spacing) * 2);
|
|
||||||
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer__mentions {
|
|
||||||
grid-column: span 2;
|
|
||||||
text-align: center;
|
|
||||||
p {
|
|
||||||
font-size: var(--font-size);
|
|
||||||
margin-top: calc(var(--spacing) * 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media #{$medium-up} {
|
|
||||||
.site-footer__container {
|
|
||||||
column-gap: calc(var(--spacing) * 4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media #{$small} {
|
|
||||||
.footer__mentions {
|
|
||||||
padding-top: calc(var(--spacing) * 1);
|
|
||||||
p {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@
|
||||||
--fw-bold: 600;
|
--fw-bold: 600;
|
||||||
--color-bg: #161616;
|
--color-bg: #161616;
|
||||||
--color-txt: #ffffff;
|
--color-txt: #ffffff;
|
||||||
|
--color-txt-light: #b9b9b9;
|
||||||
--color-accent: #00ff00;
|
--color-accent: #00ff00;
|
||||||
--color-accent-50: #e9ffe9;
|
--color-accent-50: #e9ffe9;
|
||||||
--color-accent-100: #d8fdd8;
|
--color-accent-100: #d8fdd8;
|
||||||
|
|
@ -79,6 +80,8 @@ body {
|
||||||
|
|
||||||
main {
|
main {
|
||||||
padding-top: var(--header-h);
|
padding-top: var(--header-h);
|
||||||
|
min-height: calc(100vh - var(--spacing) * 2);
|
||||||
|
min-height: calc(100dvh - var(--spacing) * 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav--tabs {
|
.nav--tabs {
|
||||||
|
|
@ -556,99 +559,20 @@ main {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
position: relative;
|
position: relative;
|
||||||
left: calc(var(--padding-body) * -1);
|
left: calc(var(--padding-body) * -1);
|
||||||
padding: calc(var(--padding-body) * 2) var(--padding-body);
|
height: calc(var(--spacing) * 2);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
#site-footer p {
|
#site-footer a {
|
||||||
margin: calc(var(--spacing) * 0.5) 0;
|
|
||||||
}
|
|
||||||
#site-footer p a {
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
#site-footer p a:hover {
|
#site-footer a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
#site-footer .p__small {
|
#site-footer .p__small {
|
||||||
font-size: var(--fs-x-small);
|
font-size: var(--fs-x-small);
|
||||||
}
|
text-align: center;
|
||||||
#site-footer #list-socials {
|
|
||||||
list-style: none;
|
|
||||||
-moz-columns: 2;
|
|
||||||
columns: 2;
|
|
||||||
max-width: 500px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
#site-footer #list-socials a {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1ch;
|
|
||||||
text-decoration: none;
|
|
||||||
height: calc(var(--spacing) * 1);
|
|
||||||
}
|
|
||||||
#site-footer #list-socials a::after {
|
|
||||||
content: "↗";
|
|
||||||
color: var(--grey-300);
|
|
||||||
}
|
|
||||||
#site-footer #list-socials .text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
#site-footer #list-socials .icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
position: relative;
|
|
||||||
top: -2px;
|
|
||||||
}
|
|
||||||
#site-footer #list-socials svg {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 720px) {
|
|
||||||
#site-footer {
|
|
||||||
margin-top: calc(var(--spacing) * 2);
|
|
||||||
}
|
|
||||||
#site-footer .footer__socials {
|
|
||||||
margin-top: calc(var(--spacing) * 1.5);
|
|
||||||
}
|
|
||||||
#site-footer .footer__mentions {
|
|
||||||
margin-top: calc(var(--spacing) * 0.5);
|
|
||||||
}
|
|
||||||
#site-footer .footer__mentions p {
|
|
||||||
margin-top: calc(var(--spacing) * 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (min-width: 720px) {
|
|
||||||
#site-footer .site-footer__container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
-moz-column-gap: calc(var(--spacing) * 2);
|
|
||||||
column-gap: calc(var(--spacing) * 2);
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
#site-footer .footer__mentions {
|
|
||||||
grid-column: span 2;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
#site-footer .footer__mentions p {
|
|
||||||
font-size: var(--font-size);
|
|
||||||
margin-top: calc(var(--spacing) * 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (min-width: 1080px) {
|
|
||||||
#site-footer .site-footer__container {
|
|
||||||
-moz-column-gap: calc(var(--spacing) * 4);
|
|
||||||
column-gap: calc(var(--spacing) * 4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 720px) {
|
|
||||||
#site-footer .footer__mentions {
|
|
||||||
padding-top: calc(var(--spacing) * 1);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
#site-footer .footer__mentions p {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-template=support] section {
|
[data-template=support] section {
|
||||||
|
|
@ -1016,9 +940,6 @@ body.is-fullscreen {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-template=store] main {
|
|
||||||
margin-bottom: calc(var(--spacing) * 2);
|
|
||||||
}
|
|
||||||
[data-template=store] .p__baseline-big {
|
[data-template=store] .p__baseline-big {
|
||||||
margin-top: calc(var(--spacing) * 2);
|
margin-top: calc(var(--spacing) * 2);
|
||||||
}
|
}
|
||||||
|
|
@ -1093,13 +1014,23 @@ body.is-fullscreen {
|
||||||
|
|
||||||
.section__product,
|
.section__product,
|
||||||
.store__nav {
|
.store__nav {
|
||||||
max-width: 1000px;
|
max-width: 1200px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__product,
|
||||||
|
.store__nav {
|
||||||
|
max-width: 1200px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.store__nav {
|
.store__nav {
|
||||||
padding-top: calc(var(--spacing) * 1);
|
padding-top: calc(var(--spacing) * 1);
|
||||||
|
padding-bottom: calc(var(--spacing) * 0.5);
|
||||||
|
color: var(--color-txt-light);
|
||||||
|
font-size: var(--fs-small);
|
||||||
}
|
}
|
||||||
.store__nav a {
|
.store__nav a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -1111,32 +1042,27 @@ body.is-fullscreen {
|
||||||
content: "← ";
|
content: "← ";
|
||||||
}
|
}
|
||||||
|
|
||||||
.section__product .product-gallery li {
|
.section__product .details ul {
|
||||||
list-style: none;
|
margin-left: 2ch;
|
||||||
}
|
}
|
||||||
.section__product .product-gallery figure {
|
.section__product .details ul li {
|
||||||
aspect-ratio: 1/1;
|
padding-bottom: 0.2em;
|
||||||
}
|
}
|
||||||
.section__product .product-gallery figure img {
|
|
||||||
width: 100%;
|
.product-options__list {
|
||||||
height: 100%;
|
|
||||||
-o-object-fit: contain;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
.section__product .product-options__list {
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 2ch;
|
gap: 2ch;
|
||||||
}
|
}
|
||||||
.section__product .product-options__list li {
|
.product-options__list li {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.section__product .product-options__list li input[type=radio] {
|
.product-options__list li input[type=radio] {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
.section__product .product-options__list li label {
|
.product-options__list li label {
|
||||||
font-family: var(--title);
|
font-family: var(--title);
|
||||||
font-size: var(--fs-normal);
|
font-size: var(--fs-normal);
|
||||||
height: 4ch;
|
height: 4ch;
|
||||||
|
|
@ -1150,31 +1076,87 @@ body.is-fullscreen {
|
||||||
padding-top: 0px;
|
padding-top: 0px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.section__product .product-options__list li input[type=radio]:checked + label {
|
.product-options__list li input[type=radio]:checked + label {
|
||||||
border-color: var(--color-txt);
|
border-color: var(--color-txt);
|
||||||
}
|
}
|
||||||
.section__product .product-options__list li input[type=radio]:not(:checked) + label:hover {
|
.product-options__list li input[type=radio]:not(:checked) + label:hover {
|
||||||
border-color: var(--grey-600);
|
border-color: var(--grey-600);
|
||||||
background-color: var(--grey-800);
|
background-color: var(--grey-800);
|
||||||
}
|
}
|
||||||
.section__product .hero {
|
|
||||||
margin-bottom: calc(var(--spacing) * 1);
|
.product-gallery {
|
||||||
padding-top: calc(var(--spacing) * 0.5);
|
position: relative;
|
||||||
border-top: var(--border-light);
|
aspect-ratio: 4/3;
|
||||||
}
|
}
|
||||||
.section__product .hero .p__baseline-big {
|
.product-gallery .swiper-slide {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.product-gallery .swiper-slide figure {
|
||||||
|
aspect-ratio: 4/3;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.product-gallery .swiper-slide figure img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
-o-object-fit: contain;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
.product-gallery .swiper-button-prev,
|
||||||
|
.product-gallery .swiper-button-next {
|
||||||
|
color: var(--color-txt);
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.product-gallery .swiper-button-prev:after,
|
||||||
|
.product-gallery .swiper-button-next:after {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.product-gallery .swiper-button-prev:hover,
|
||||||
|
.product-gallery .swiper-button-next:hover {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
.product-gallery .swiper-pagination {
|
||||||
|
position: relative;
|
||||||
|
margin-top: calc(var(--spacing) * 0.5);
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.product-gallery .swiper-pagination .swiper-pagination-bullet {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: var(--grey-600);
|
||||||
|
opacity: 0.5;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
.product-gallery .swiper-pagination .swiper-pagination-bullet:hover {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
.product-gallery .swiper-pagination .swiper-pagination-bullet-active {
|
||||||
|
background: var(--color-txt);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
margin-bottom: calc(var(--spacing) * 1);
|
||||||
|
padding: calc(var(--spacing) * 0.5) 0;
|
||||||
|
border-top: var(--border-light);
|
||||||
|
border-bottom: var(--border-light);
|
||||||
|
}
|
||||||
|
.hero .p__baseline-big {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.section__product .add-to-cart,
|
|
||||||
.section__product .product-options {
|
.add-to-cart {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-bottom: var(--border-light);
|
border-bottom: var(--border-light);
|
||||||
padding: calc(var(--spacing) * 0.5) 0;
|
padding: calc(var(--spacing) * 0.5) 0;
|
||||||
}
|
}
|
||||||
.section__product .product-options__label {
|
|
||||||
font-weight: 600;
|
.product-options {
|
||||||
margin-bottom: calc(var(--spacing) * 0.25);
|
border-bottom: var(--border-light);
|
||||||
|
padding: calc(var(--spacing) * 0.25) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 720px) {
|
@media screen and (max-width: 720px) {
|
||||||
|
|
@ -1185,6 +1167,7 @@ body.is-fullscreen {
|
||||||
.section__product {
|
.section__product {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
margin-bottom: 10vh;
|
||||||
}
|
}
|
||||||
.section__product .col-left {
|
.section__product .col-left {
|
||||||
display: contents;
|
display: contents;
|
||||||
|
|
@ -1208,34 +1191,39 @@ body.is-fullscreen {
|
||||||
.section__product .add-to-cart {
|
.section__product .add-to-cart {
|
||||||
order: 5;
|
order: 5;
|
||||||
}
|
}
|
||||||
|
.section__product .product-gallery {
|
||||||
|
width: 100vw;
|
||||||
|
position: relative;
|
||||||
|
left: calc(var(--padding-body) * -1);
|
||||||
|
}
|
||||||
|
.section__product .product-gallery .swiper-button-prev,
|
||||||
|
.section__product .product-gallery .swiper-button-next {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media screen and (min-width: 720px) {
|
@media screen and (min-width: 720px) {
|
||||||
.section__product {
|
.section__product {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 50% 50%;
|
grid-template-columns: 1fr 1fr;
|
||||||
aspect-ratio: 2/1;
|
gap: calc(var(--padding-body) * 2);
|
||||||
margin-top: calc(var(--spacing) * 0.5);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.section__product .col-left {
|
|
||||||
padding-right: var(--padding-body);
|
|
||||||
}
|
|
||||||
.section__product .details {
|
|
||||||
margin-bottom: calc(var(--spacing) * 3);
|
margin-bottom: calc(var(--spacing) * 3);
|
||||||
}
|
}
|
||||||
.section__product .add-to-cart,
|
.section__product .details {
|
||||||
.section__product .product-options {
|
margin-bottom: calc(var(--spacing) * 2);
|
||||||
width: calc(50% - var(--padding-body));
|
flex-grow: 1;
|
||||||
}
|
|
||||||
.section__product .add-to-cart {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 10px;
|
|
||||||
}
|
}
|
||||||
.section__product .product-options {
|
.section__product .product-options {
|
||||||
position: absolute;
|
|
||||||
bottom: calc(var(--spacing) * 2);
|
|
||||||
border-top: var(--border-light);
|
border-top: var(--border-light);
|
||||||
}
|
}
|
||||||
|
.section__product .col-left {
|
||||||
|
min-height: 100%;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.product-gallery .swiper-slide figure {
|
||||||
|
width: calc(100% - 60px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
[data-template=thanks] .thanks-page {
|
[data-template=thanks] .thanks-page {
|
||||||
min-height: 60vh;
|
min-height: 60vh;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,5 @@
|
||||||
[data-template="store"] {
|
[data-template="store"] {
|
||||||
main {
|
|
||||||
margin-bottom: calc(var(--spacing) * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p__baseline-big {
|
.p__baseline-big {
|
||||||
margin-top: calc(var(--spacing) * 2);
|
margin-top: calc(var(--spacing) * 2);
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,28 @@
|
||||||
|
.section__product,
|
||||||
|
.store__nav{
|
||||||
|
max-width: 1200px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.section__product,
|
.section__product,
|
||||||
.store__nav {
|
.store__nav {
|
||||||
max-width: 1000px;
|
max-width: 1200px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.store__nav {
|
.store__nav {
|
||||||
padding-top: calc(var(--spacing) * 1);
|
padding-top: calc(var(--spacing) * 1);
|
||||||
|
padding-bottom: calc(var(--spacing) * 0.5);
|
||||||
|
color: var(--color-txt-light);
|
||||||
|
font-size: var(--fs-small);
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -21,13 +37,80 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.section__product {
|
|
||||||
.product-gallery {
|
|
||||||
li {
|
.section__product .details {
|
||||||
list-style: none;
|
// margin-bottom: calc(var(--spacing) * 2);
|
||||||
|
|
||||||
|
ul{
|
||||||
|
margin-left: 2ch;
|
||||||
|
li{
|
||||||
|
padding-bottom: 0.2em;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.product-options__list {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
gap: 2ch;
|
||||||
|
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
input[type="radio"] {
|
||||||
|
position: fixed;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-family: var(--title);
|
||||||
|
font-size: var(--fs-normal);
|
||||||
|
height: 4ch;
|
||||||
|
width: 4ch;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: var(--border);
|
||||||
|
border-color: transparent;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 0px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"]:checked + label {
|
||||||
|
border-color: var(--color-txt);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"]:not(:checked) + label:hover {
|
||||||
|
border-color: var(--grey-600);
|
||||||
|
background-color: var(--grey-800);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.product-gallery {
|
||||||
|
position: relative;
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
|
||||||
|
.swiper-slide {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
figure {
|
figure {
|
||||||
aspect-ratio: 1/1;
|
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -37,50 +120,54 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-options__list {
|
// Swiper navigation arrows
|
||||||
list-style: none;
|
.swiper-button-prev,
|
||||||
display: flex;
|
.swiper-button-next {
|
||||||
gap: 2ch;
|
color: var(--color-txt);
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
|
||||||
li {
|
&:after {
|
||||||
position: relative;
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
input[type="radio"] {
|
&:hover {
|
||||||
position: fixed;
|
opacity: 0.7;
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
font-family: var(--title);
|
|
||||||
font-size: var(--fs-normal);
|
|
||||||
height: 4ch;
|
|
||||||
width: 4ch;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: var(--border);
|
|
||||||
border-color: transparent;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding-top: 0px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="radio"]:checked + label {
|
|
||||||
border-color: var(--color-txt);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="radio"]:not(:checked) + label:hover {
|
|
||||||
border-color: var(--grey-600);
|
|
||||||
background-color: var(--grey-800);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Swiper pagination dots
|
||||||
|
.swiper-pagination {
|
||||||
|
position: relative;
|
||||||
|
margin-top: calc(var(--spacing) * 0.5);
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
.swiper-pagination-bullet {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: var(--grey-600);
|
||||||
|
opacity: 0.5;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-pagination-bullet-active {
|
||||||
|
background: var(--color-txt);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.hero {
|
.hero {
|
||||||
margin-bottom: calc(var(--spacing) * 1);
|
margin-bottom: calc(var(--spacing) * 1);
|
||||||
padding-top: calc(var(--spacing) * 0.5);
|
padding: calc(var(--spacing) * 0.5) 0;
|
||||||
border-top: var(--border-light);
|
border-top: var(--border-light);
|
||||||
|
border-bottom: var(--border-light);
|
||||||
|
|
||||||
.p__baseline-big {
|
.p__baseline-big {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -88,18 +175,18 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.add-to-cart,
|
.add-to-cart {
|
||||||
.product-options {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-bottom: var(--border-light);
|
border-bottom: var(--border-light);
|
||||||
padding: calc(var(--spacing) * 0.5) 0;
|
padding: calc(var(--spacing) * 0.5) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-options__label {
|
.product-options {
|
||||||
font-weight: 600;
|
border-bottom: var(--border-light);
|
||||||
margin-bottom: calc(var(--spacing) * 0.25);
|
padding: calc(var(--spacing) * 0.25) 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media #{$small} {
|
@media #{$small} {
|
||||||
.store__nav a {
|
.store__nav a {
|
||||||
|
|
@ -110,6 +197,7 @@
|
||||||
.section__product {
|
.section__product {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
margin-bottom: 10vh;
|
||||||
|
|
||||||
.col-left {
|
.col-left {
|
||||||
display: contents;
|
display: contents;
|
||||||
|
|
@ -137,40 +225,47 @@
|
||||||
.add-to-cart {
|
.add-to-cart {
|
||||||
order: 5;
|
order: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.product-gallery{
|
||||||
|
width: 100vw;
|
||||||
|
position: relative;
|
||||||
|
left: calc(var(--padding-body)*-1);
|
||||||
|
|
||||||
|
.swiper-button-prev,
|
||||||
|
.swiper-button-next{ display: none; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media #{$small-up} {
|
@media #{$small-up} {
|
||||||
.section__product {
|
|
||||||
|
|
||||||
|
.section__product{
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 50% 50%;
|
grid-template-columns: 1fr 1fr;
|
||||||
aspect-ratio: 2/1;
|
gap: calc(var(--padding-body)*2);
|
||||||
|
margin-bottom: calc(var(--spacing)*3);
|
||||||
margin-top: calc(var(--spacing) * 0.5);
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.col-left {
|
|
||||||
padding-right: var(--padding-body);
|
|
||||||
}
|
|
||||||
|
|
||||||
.details {
|
.details {
|
||||||
margin-bottom: calc(var(--spacing) * 3);
|
margin-bottom: calc(var(--spacing) * 2);
|
||||||
}
|
flex-grow: 1;
|
||||||
|
|
||||||
.add-to-cart,
|
|
||||||
.product-options {
|
|
||||||
width: calc(50% - var(--padding-body));
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-to-cart {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-options {
|
.product-options {
|
||||||
position: absolute;
|
|
||||||
bottom: calc(var(--spacing) * 2);
|
|
||||||
border-top: var(--border-light);
|
border-top: var(--border-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.col-left{
|
||||||
|
min-height: 100%;
|
||||||
|
padding-bottom: 40px; //dots
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-gallery .swiper-slide figure{
|
||||||
|
width: calc(100% - 60px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
31
assets/js/product-gallery.js
Normal file
31
assets/js/product-gallery.js
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
// Initialize Swiper for product gallery
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const productGallery = document.querySelector('.product-gallery.swiper');
|
||||||
|
|
||||||
|
if (productGallery) {
|
||||||
|
const swiper = new Swiper('.product-gallery.swiper', {
|
||||||
|
// Enable loop if there are multiple slides
|
||||||
|
loop: true,
|
||||||
|
|
||||||
|
// Let CSS control the width
|
||||||
|
slidesPerView: 'auto',
|
||||||
|
|
||||||
|
// Navigation arrows
|
||||||
|
navigation: {
|
||||||
|
nextEl: '.swiper-button-next',
|
||||||
|
prevEl: '.swiper-button-prev',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Pagination dots
|
||||||
|
pagination: {
|
||||||
|
el: '.swiper-pagination',
|
||||||
|
clickable: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
// Keyboard navigation
|
||||||
|
keyboard: {
|
||||||
|
enabled: true,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -78,24 +78,52 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php if ($page->hasFiles()): ?>
|
<div class="product-gallery swiper">
|
||||||
<ul class="product-gallery">
|
<div class="swiper-wrapper">
|
||||||
<?php foreach($page->files()->sort() as $image): ?>
|
<?php
|
||||||
<li>
|
// Afficher les vraies images du produit
|
||||||
<figure>
|
$realImages = $page->hasFiles() ? $page->files()->sortBy('sort', 'asc') : [];
|
||||||
<?php snippet('picture', [
|
$imageCount = 0;
|
||||||
'file' => $image,
|
|
||||||
'alt' => $page->title()->html(),
|
// Afficher d'abord les vraies images
|
||||||
'preset' => 'product-detail',
|
foreach($realImages as $image):
|
||||||
'size' => 50,
|
$imageCount++;
|
||||||
'lazy' => false
|
?>
|
||||||
]) ?>
|
<div class="swiper-slide">
|
||||||
</figure>
|
<figure>
|
||||||
</li>
|
<?php snippet('picture', [
|
||||||
<?php endforeach ?>
|
'file' => $image,
|
||||||
</ul>
|
'alt' => $page->title()->html(),
|
||||||
<?php endif ?>
|
'preset' => 'product-detail',
|
||||||
|
'size' => 50,
|
||||||
|
'lazy' => false
|
||||||
|
]) ?>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<?php endforeach;
|
||||||
|
|
||||||
|
// Compléter avec des images temporaires si moins de 5 images
|
||||||
|
$colors = ['4ECDC4', '45B7D1', 'FFA07A', '98D8C8'];
|
||||||
|
while($imageCount < 5):
|
||||||
|
$colorIndex = $imageCount - count($realImages);
|
||||||
|
$imageCount++;
|
||||||
|
?>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<figure>
|
||||||
|
<img src="https://placehold.co/800x1000/<?= $colors[$colorIndex] ?>/ffffff?text=Image+<?= $imageCount ?>" alt="Image test <?= $imageCount ?>">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<?php endwhile; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation arrows -->
|
||||||
|
<div class="swiper-button-prev"></div>
|
||||||
|
<div class="swiper-button-next"></div>
|
||||||
|
|
||||||
|
<!-- Pagination dots -->
|
||||||
|
<div class="swiper-pagination"></div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<?php snippet('footer', ['scripts' => ['assets/js/product-size.js', 'assets/js/snipcart.js']]) ?>
|
<?php snippet('footer', ['scripts' => ['assets/js/product-size.js', 'assets/js/snipcart.js', 'assets/js/product-gallery.js']]) ?>
|
||||||
|
|
|
||||||
2
vendor/composer/autoload_psr4.php
vendored
2
vendor/composer/autoload_psr4.php
vendored
|
|
@ -16,7 +16,7 @@ return array(
|
||||||
'PHPMailer\\PHPMailer\\' => array($vendorDir . '/phpmailer/phpmailer/src'),
|
'PHPMailer\\PHPMailer\\' => array($vendorDir . '/phpmailer/phpmailer/src'),
|
||||||
'League\\ColorExtractor\\' => array($vendorDir . '/league/color-extractor/src'),
|
'League\\ColorExtractor\\' => array($vendorDir . '/league/color-extractor/src'),
|
||||||
'Laminas\\Escaper\\' => array($vendorDir . '/laminas/laminas-escaper/src'),
|
'Laminas\\Escaper\\' => array($vendorDir . '/laminas/laminas-escaper/src'),
|
||||||
'Kirby\\' => array($vendorDir . '/getkirby/composer-installer/src', $baseDir . '/kirby/src'),
|
'Kirby\\' => array($baseDir . '/kirby/src', $vendorDir . '/getkirby/composer-installer/src'),
|
||||||
'Composer\\Semver\\' => array($vendorDir . '/composer/semver/src'),
|
'Composer\\Semver\\' => array($vendorDir . '/composer/semver/src'),
|
||||||
'Base32\\' => array($vendorDir . '/christian-riesen/base32/src'),
|
'Base32\\' => array($vendorDir . '/christian-riesen/base32/src'),
|
||||||
);
|
);
|
||||||
|
|
|
||||||
4
vendor/composer/autoload_static.php
vendored
4
vendor/composer/autoload_static.php
vendored
|
|
@ -96,8 +96,8 @@ class ComposerStaticInit0b7fb803e22a45eb87e24172337208aa
|
||||||
),
|
),
|
||||||
'Kirby\\' =>
|
'Kirby\\' =>
|
||||||
array (
|
array (
|
||||||
0 => __DIR__ . '/..' . '/getkirby/composer-installer/src',
|
0 => __DIR__ . '/../..' . '/kirby/src',
|
||||||
1 => __DIR__ . '/../..' . '/kirby/src',
|
1 => __DIR__ . '/..' . '/getkirby/composer-installer/src',
|
||||||
),
|
),
|
||||||
'Composer\\Semver\\' =>
|
'Composer\\Semver\\' =>
|
||||||
array (
|
array (
|
||||||
|
|
|
||||||
12
vendor/composer/installed.php
vendored
12
vendor/composer/installed.php
vendored
|
|
@ -1,9 +1,9 @@
|
||||||
<?php return array(
|
<?php return array(
|
||||||
'root' => array(
|
'root' => array(
|
||||||
'name' => 'getkirby/plainkit',
|
'name' => 'getkirby/plainkit',
|
||||||
'pretty_version' => '5.1.4',
|
'pretty_version' => 'dev-main',
|
||||||
'version' => '5.1.4.0',
|
'version' => 'dev-main',
|
||||||
'reference' => null,
|
'reference' => '44ed53aae0b7128526b1fe9c2c66e80b18df323f',
|
||||||
'type' => 'project',
|
'type' => 'project',
|
||||||
'install_path' => __DIR__ . '/../../',
|
'install_path' => __DIR__ . '/../../',
|
||||||
'aliases' => array(),
|
'aliases' => array(),
|
||||||
|
|
@ -65,9 +65,9 @@
|
||||||
'dev_requirement' => false,
|
'dev_requirement' => false,
|
||||||
),
|
),
|
||||||
'getkirby/plainkit' => array(
|
'getkirby/plainkit' => array(
|
||||||
'pretty_version' => '5.1.4',
|
'pretty_version' => 'dev-main',
|
||||||
'version' => '5.1.4.0',
|
'version' => 'dev-main',
|
||||||
'reference' => null,
|
'reference' => '44ed53aae0b7128526b1fe9c2c66e80b18df323f',
|
||||||
'type' => 'project',
|
'type' => 'project',
|
||||||
'install_path' => __DIR__ . '/../../',
|
'install_path' => __DIR__ . '/../../',
|
||||||
'aliases' => array(),
|
'aliases' => array(),
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue