j1-template 2024.3.18 → 2024.3.19

data/assets/theme/j1/modules/swiperjs/css/modules/layoutExpanding.min.css

@@ -0,0 +1,251 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/theme/j1/modules/swiper/css/modules/layoutExpanding.min.css
+ # CSS styles of the J1 Template for SwiperJS v11 (layout)
+ # -----------------------------------------------------------------------------
+ #
+ # Product/Info:
+ # http://jekyll.one
+ #
+ # Copyright (C) 2025 Juergen Adams
+ #
+ # J1 Theme is licensed under MIT License.
+ # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
+ # -----------------------------------------------------------------------------
+*/
+
+/* slide styles
+-------------------------------------------------------------------------------- */
+
+:root {
+    --expanding-slide-content-bg-color: #fff;
+    --expanding-slide-content-vertical-offset: 32px;
+    --expanding-slide-content-horizontal-offset: 16px;
+    --expanding-slide-content-padding: 16px;
+    --expanding-slide-content-border-radius: 0px;
+    --expanding-slide-cover-border-radius: 0px;
+    --expanding-slide-inactive-cover-opacity: 0.5;
+    --expanding-slide-opened-translate-y: -64px;
+    --expanding-slide-cover-box-shadow: 0px 8px 16px rgba(0, 0, 0, 0);
+  /*
+    --expanding-slide-opened-cover-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+  */
+  }
+  
+.swiper-slide {
+/*  background: var(--md-gray-50); */
+    background: var(--md-gray);
+}
+.expanding-slide {
+    width: 100%;
+    height: 100%;
+}
+
+.expanding-slide-cover {
+color: #fff;
+}
+
+@media (orientation: portrait) {
+    .expanding-slide-cover img {
+        height: 40vh;
+        object-fit: cover;
+    }
+}
+
+.expanding-slide .slide-cover-title {
+    box-sizing: border-box;
+    padding: 8px 16px;
+    font-size: 24px;
+    color: #fff;
+    position: absolute;
+    left: 0;
+    top: 0px;
+    width: 100%;
+    text-align: center;
+    z-index: 10;
+    font-weight: 600;
+}
+
+.expanding-slide .slide-cover-coords {
+    padding: 8px 16px;
+    width: 100%;
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: space-between;
+    z-index: 10;
+    text-transform: uppercase;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.expanding-slide .slide-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-content: center;
+    flex-wrap: wrap;
+}
+
+.expanding-slide .slide-content-title {
+    text-align: center;
+    font-size: 16px;
+    margin-bottom: 8px;
+    font-weight: 600;
+    width: 100%;
+}
+
+.expanding-slide .slide-content-avatars {
+    display: flex;
+}
+
+.expanding-slide .slide-content-avatars img {
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    border: 4px solid #fff;
+}
+
+.expanding-slide .slide-content-avatars img + img {
+    margin-left: -16px;
+}
+
+.expanding-slide .slide-content-rating {
+    display: flex;
+}
+
+/* jadams */
+.expanding-slide .slide-content-rating img {
+    width: 80px;
+    height: 16px;
+}
+
+.expanding-slide {
+    overflow: hidden;
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0 auto;
+}
+
+.expanding-slide .swiper {
+    width: 100%;
+    height: 100%;
+    transform-style: preserve-3d;
+    transform: translate3d(0, 0, 0);
+}
+
+/* jadams, 2025-02-20: */
+/*
+.expanding-slide .swiper-slide {
+width: 600px;
+max-width: calc(100% - 32px - 32px);
+}
+*/
+
+/* jadams, DISABLED width */
+.expanding-slide .swiper-slide {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+/*  width: calc(100% - 32px); */
+}
+
+.expanding-slide-initialized .expanding-slide-content,
+.expanding-slide-initialized .expanding-slide-cover,
+.expanding-slide-initialized .expanding-slide-cover::before {
+    transition-duration: 300ms;
+}
+
+.expanding-slide-container, .expanding-slide-cover {
+    -webkit-touch-callout: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+/* jadams, changed width */
+.expanding-slide-container {
+/*  max-width: calc(100% - 32px); */
+    width: 90%;
+    max-width: 640px;
+    position: relative;
+    margin-bottom: 1.5rem;
+}
+
+.expanding-slide-cover {
+    opacity: var(--expanding-slide-inactive-cover-opacity);
+    position: relative;
+}
+
+.expanding-slide-cover img {
+    width: 100%;
+    border-radius: var(--expanding-slide-cover-border-radius);
+    display: block;
+    margin: 0;
+    position: relative;
+    z-index: 2;
+}
+
+.expanding-slide-cover::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 90%;
+    left: 0;
+    bottom: 0;
+    border-radius: var(--expanding-slide-cover-border-radius);
+    z-index: 1;
+    transform-origin: center bottom;
+    box-shadow: var(--expanding-slide-cover-box-shadow);
+}
+
+.swiper-slide.swiper-slide-active .expanding-slide-cover {
+    opacity: 1;
+    cursor: pointer;
+}
+
+.swiper-slide:not(.swiper-slide-active) .expanding-slide-cover::before {
+    box-shadow: none;
+}
+
+.swiper-slide:not(.swiper-slide-active) .expanding-slide-content {
+    opacity: 0;
+}
+
+/* jadams */
+.expanding-slide-content {
+    position: absolute;
+    box-sizing: border-box;
+    left: calc(-1 * var(--expanding-slide-content-horizontal-offset));
+    right: calc(-1 * var(--expanding-slide-content-horizontal-offset));
+    top: 0;
+    z-index: 0;
+    padding-top: calc(var(--expanding-slide-cover-height) - var(--expanding-slide-content-vertical-offset));
+    border-radius: var(--expanding-slide-content-border-radius);
+    transform: scaleX(var(--expanding-slide-scale-x)) scaleY(var(--expanding-slide-scale-y));
+    transform-origin: center top;
+    background: var(--expanding-slide-content-bg-color);
+}
+
+.expanding-slide-content-inner {
+    padding: var(--expanding-slide-content-padding);
+    box-sizing: border-box;
+}
+
+.expanding-slide-opened .expanding-slide-cover {
+    transform: translateY(var(--expanding-slide-opened-translate-y));
+}
+
+/* jadams */
+/*
+.expanding-slide-opened .expanding-slide-cover::before {
+    box-shadow: var(--expanding-slide-opened-cover-box-shadow);
+}
+*/
+
+.expanding-slide-opened .expanding-slide-content {
+    transform: scale(1) translateY(calc(var(--expanding-slide-opened-translate-y) + var(--expanding-slide-content-vertical-offset)));
+    opacity: 1;
+    background-color: antiquewhite;
+}

data/assets/theme/j1/modules/{swiper/css/modules/effectNeighbor.css → swiperjs/css/modules/layoutNeighbor.css}

@@ -1,7 +1,7 @@
 /*
  # -----------------------------------------------------------------------------
- # ~/assets/theme/j1/modules/swiper/css/modules/effectNeighbor.css
- # CSS styles of the J1 Template for SwiperJS v11 (view)
+ # ~/assets/theme/j1/modules/swiper/css/modules/layoutNeighbor.css
+ # CSS styles of the J1 Template for SwiperJS v11 (layout)
  # -----------------------------------------------------------------------------
  #
  # Product/Info:
@@ -21,26 +21,27 @@
 
 .neighbor-slider .swiper {
     width: 90%;
-    max-width: 640px;
-    height: 320px;
-    /* border-radius: 8px; effect option */
+    max-width: 540px;                                   /* effect option */
+    height: 320px;                                      /* effect option */
+    /* border-radius: 8px; */                           /* effect option */
 }
 
 .neighbor-slider .neighbor-slider-main {
     position: relative;
     z-index: 10;
-    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5); /* effect option */
+    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);      /* effect option */
 }
 
 .neighbor-slider .neighbor-slider-prev,
 .neighbor-slider .neighbor-slider-next {
-    top: 50%;
-    opacity: 0.75;  /* effect option */
     position: absolute;
-    user-select: none;
-    -webkit-user-select: none; /* Safari */
+    top: 50%;
+    /* z-index: 1; */
     cursor: pointer;
-    filter: grayscale(1); /* effect option */
+    user-select: none;
+    -webkit-user-select: none;                          /* Safari */
+    opacity: 0.75;                                      /* effect option */
+    filter: grayscale(1);                               /* effect option */
     transform: translateY(-50%) scale(1) rotateY(0deg); /* effect option (scale) */
 }
 

data/assets/theme/j1/modules/{swiper/css/modules/effectNeighbor.min.css → swiperjs/css/modules/layoutNeighbor.min.css}

@@ -1,7 +1,7 @@
 /*
  # -----------------------------------------------------------------------------
- # ~/assets/theme/j1/modules/swiper/css/modules/effectNeighbor.css
- # CSS styles of the J1 module for SwiperJS v11 (view)
+ # ~/assets/theme/j1/modules/swiper/css/modules/layoutNeighbor.css
+ # CSS styles of the J1 module for SwiperJS v11 (layout)
  # -----------------------------------------------------------------------------
  #
  # Product/Info:

data/assets/theme/j1/modules/{swiper/css/modules/effectPanorama.css → swiperjs/css/modules/layoutPanorama.css}

@@ -1,7 +1,7 @@
 /*
  # -----------------------------------------------------------------------------
- # ~/assets/theme/j1/modules/swiper/css/modules/effectPanorama.css
- # CSS styles of the J1 module for SwiperJS v11 (view)
+ # ~/assets/theme/j1/modules/swiper/css/modules/layoutPanorama.css
+ # CSS styles of the J1 module for SwiperJS v11 (layout)
  # -----------------------------------------------------------------------------
  #
  # Product/Info:

data/assets/theme/j1/modules/{swiper/css/modules/effectPanorama.min.css → swiperjs/css/modules/layoutPanorama.min.css}

@@ -1,7 +1,7 @@
 /*
  # -----------------------------------------------------------------------------
- # ~/assets/theme/j1/modules/swiper/css/modules/effectPanorama.min.css
- # CSS styles of the J1 module for SwiperJS v11 (view)
+ # ~/assets/theme/j1/modules/swiper/css/modules/layoutPanorama.min.css
+ # CSS styles of the J1 module for SwiperJS v11 (layout)
  # -----------------------------------------------------------------------------
  #
  # Product/Info:

data/assets/theme/j1/modules/swiperjs/css/modules/layoutStacked.css

@@ -0,0 +1,98 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/theme/j1/modules/swiper/css/modules/layoutStacked.css
+ # CSS styles of the J1 Template for SwiperJS v11 (layout)
+ # -----------------------------------------------------------------------------
+ #
+ # Product/Info:
+ # http://jekyll.one
+ #
+ # Copyright (C) 2025 Juergen Adams
+ #
+ # J1 Theme is licensed under MIT License.
+ # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
+ # -----------------------------------------------------------------------------
+*/
+
+:root {
+    /* actually sets slide shadow that should match background color of the element behind th slider */
+    --stacked-slider-shadow-bg-color: #000;
+    /* width of the swiper container (image) */
+    --stacked-slider-width: 265px;
+    /* height of the swiper container (image) */
+    --stacked-slider-height: 392px;
+  }
+  
+/*
+ * VW unit CSS: viewport width.
+ * Relative unit that represents a percentage of the width of the
+ * current viewport.
+ * NOTE: 1vw means 1 percent of the screen width.
+*/
+  
+@media ((orientation: portrait) and (min-width: 768px)) {
+    .stacked-slider {
+        --stacked-slider-width: 68vw;
+        --stacked-slider-height: 55vw;
+    }
+}
+  
+@media ((orientation: portrait) and (min-width: 576px)) {
+    .stacked-slider {
+        --stacked-slider-width: 68vw;
+        --stacked-slider-height: 60vw;
+    }
+}
+  
+@media ((orientation: portrait) and (max-width: 575.98px)) {
+    .stacked-slider {
+        --stacked-slider-width: 72vw;
+        --stacked-slider-height: 162vw;
+    }
+}
+
+@media ((orientation: landscape) and (min-width: 768px)) {
+    .stacked-slider {
+        --stacked-slider-width: calc(80vh / 1.1);
+        --stacked-slider-height: 80vh;
+    }
+}
+  
+@media ((orientation: landscape) and (min-width: 992px)) {
+    .stacked-slider {
+        --stacked-slider-width: calc(80vh / 1.1);
+        --stacked-slider-height: 55vh;
+    }
+}
+
+.stacked-slider {
+    display: flex;
+    overflow: hidden;
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0 auto;
+}
+
+.stacked-slider .swiper {
+    overflow: visible;
+    width: var(--stacked-slider-width);
+    height: var(--stacked-slider-height);
+}
+
+.stacked-slider .swiper-slide {
+    border-radius: 10px;
+    justify-content: center;
+    display: flex;
+}
+
+.stacked-slider .swiper-slide-shadow {
+    background: var(--stacked-slider-shadow-bg-color);
+}
+
+.stacked-slider img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+

data/assets/theme/j1/modules/swiperjs/css/modules/layoutStacked.min.css

@@ -0,0 +1,98 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/theme/j1/modules/swiper/css/modules/layoutStacked.min.css
+ # CSS styles of the J1 Template for SwiperJS v11 (layout)
+ # -----------------------------------------------------------------------------
+ #
+ # Product/Info:
+ # http://jekyll.one
+ #
+ # Copyright (C) 2025 Juergen Adams
+ #
+ # J1 Theme is licensed under MIT License.
+ # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
+ # -----------------------------------------------------------------------------
+*/
+
+:root {
+    /* actually sets slide shadow that should match background color of the element behind th slider */
+    --stacked-slider-shadow-bg-color: #000;
+    /* width of the swiper container (image) */
+    --stacked-slider-width: 265px;
+    /* height of the swiper container (image) */
+    --stacked-slider-height: 392px;
+  }
+  
+/*
+ * VW unit CSS: viewport width.
+ * Relative unit that represents a percentage of the width of the
+ * current viewport.
+ * NOTE: 1vw means 1 percent of the screen width.
+*/
+  
+@media ((orientation: portrait) and (min-width: 768px)) {
+    .stacked-slider {
+        --stacked-slider-width: 68vw;
+        --stacked-slider-height: 55vw;
+    }
+}
+  
+@media ((orientation: portrait) and (min-width: 576px)) {
+    .stacked-slider {
+        --stacked-slider-width: 68vw;
+        --stacked-slider-height: 60vw;
+    }
+}
+  
+@media ((orientation: portrait) and (max-width: 575.98px)) {
+    .stacked-slider {
+        --stacked-slider-width: 72vw;
+        --stacked-slider-height: 162vw;
+    }
+}
+
+@media ((orientation: landscape) and (min-width: 768px)) {
+    .stacked-slider {
+        --stacked-slider-width: calc(80vh / 1.1);
+        --stacked-slider-height: 80vh;
+    }
+}
+  
+@media ((orientation: landscape) and (min-width: 992px)) {
+    .stacked-slider {
+        --stacked-slider-width: calc(80vh / 1.1);
+        --stacked-slider-height: 55vh;
+    }
+}
+
+.stacked-slider {
+    display: flex;
+    overflow: hidden;
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0 auto;
+}
+
+.stacked-slider .swiper {
+    overflow: visible;
+    width: var(--stacked-slider-width);
+    height: var(--stacked-slider-height);
+}
+
+.stacked-slider .swiper-slide {
+    border-radius: 10px;
+    justify-content: center;
+    display: flex;
+}
+
+.stacked-slider .swiper-slide-shadow {
+    background: var(--stacked-slider-shadow-bg-color);
+}
+
+.stacked-slider img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+

data/assets/theme/j1/modules/{swiper/css/modules/effectThumbs.min.css → swiperjs/css/modules/layoutThumbs.css}

@@ -1,7 +1,7 @@
 /*
  # -----------------------------------------------------------------------------
- # ~/assets/theme/j1/modules/swiper/css/modules/effectThumbs.css
- # CSS styles of the J1 Template for SwiperJS v11 (view)
+ # ~/assets/theme/j1/modules/swiper/css/modules/layoutThumbs.css
+ # CSS styles of the J1 Template for SwiperJS v11 (layout)
  # -----------------------------------------------------------------------------
  #
  # Product/Info:

data/assets/theme/j1/modules/{swiper/css/modules/effectThumbs.css → swiperjs/css/modules/layoutThumbs.min.css}

@@ -1,7 +1,7 @@
 /*
  # -----------------------------------------------------------------------------
- # ~/assets/theme/j1/modules/swiper/css/modules/effectThumbs.css
- # CSS styles of the J1 Template for SwiperJS v11 (view)
+ # ~/assets/theme/j1/modules/swiper/css/modules/layoutThumbs.css
+ # CSS styles of the J1 Template for SwiperJS v11 (layout)
  # -----------------------------------------------------------------------------
  #
  # Product/Info:

data/assets/theme/j1/modules/{swiper → swiperjs}/css/swiper-bundle.css

@@ -43,6 +43,7 @@
   margin-right: auto;
   z-index: 1;
 }
+
 .swiper {
   margin-left: auto;
   margin-right: auto;