Set up home style and Splide carousel

assets/css/abstracts/_index.scss

@@ -0,0 +1,5 @@
+// --------------------------------------------------
+// ABSTRACTS (INDEX)
+// --------------------------------------------------
+
+@forward 'variables';

assets/css/abstracts/_variables.scss

@@ -1,6 +1,6 @@
-// ----------------------------------------------------------------------------
+// --------------------------------------------------
 // VARIABLES
-// ----------------------------------------------------------------------------
+// --------------------------------------------------
 
 :root {
 

assets/css/base/_base.scss

@@ -0,0 +1,80 @@
+@use '../abstracts' as *;
+
+// --------------------------------------------------
+// BASE STYLE
+// --------------------------------------------------
+
+// Fonts and colors
+
+body {
+    font-family: var(--text-font-family);
+    font-size: var(--text-font-size);
+    line-height: var(--text-line-height);
+    color: var(--black);
+}
+
+strong {
+    font-weight: var(--bold-font-weight);
+}
+
+em {
+    font-style: italic;
+}
+
+// Link style
+
+a {
+    color: var(--black);
+    text-decoration: none;
+    transition: text-decoration 200ms ease-in-out;
+
+    &:hover,
+    &:focus,
+    &:active {
+        text-decoration: underline;
+    }
+
+    &:focus-visible {
+        outline: 1px dashed var(--black);
+        outline-offset: 2px;
+    }
+}
+
+// General layout
+
+body {
+    min-height: 100vh !important;
+
+    header {
+        position: fixed;
+        top: 0;
+
+        .header__logo {
+            width: 5rem;
+        }
+    }
+
+    main {}
+
+    footer {
+        position: fixed;
+        bottom: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        gap: 0.8rem;
+
+        .footer__link {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: var(--icon-size);
+            height: var(--icon-size);
+
+            svg {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}

assets/css/base/_index.scss

@@ -0,0 +1,6 @@
+// --------------------------------------------------
+// BASE (INDEX)
+// --------------------------------------------------
+
+@forward 'minireset';
+@forward 'base';

assets/css/base/_minireset.css

@@ -1,6 +1,6 @@
-/* ----------------------------------------------------------------------------
+/* --------------------------------------------------
 MINIRESET V0.0.6
----------------------------------------------------------------------------- */
+-------------------------------------------------- */
 
 html,
 body,

assets/css/main.scss

@@ -1,128 +1,7 @@
-@use 'utils/minireset';
+// --------------------------------------------------
-@use '@splidejs/splide/dist/css/splide-core.min';
-@use 'partials/variables' as *;
-@use 'partials/animations';
-
-// ----------------------------------------------------------------------------
-// GENERALITIES
-// ----------------------------------------------------------------------------
-
-// Fonts and colors
-
-body {
-    font-family: var(--text-font-family);
-    font-size: var(--text-font-size);
-    line-height: var(--text-line-height);
-    color: var(--black);
-}
-
-strong {
-    font-weight: var(--bold-font-weight);
-}
-
-em {
-    font-style: italic;
-}
-
-// Link style
-
-a {
-    color: var(--black);
-    text-decoration: none;
-    transition: text-decoration 200ms ease-in-out;
-
-    &:hover,
-    &:focus,
-    &:active {
-        text-decoration: underline;
-    }
-
-    &:focus-visible {
-        outline: 1px dashed var(--black);
-        outline-offset: 2px;
-        animation: expand-outline 200ms ease-in-out;
-    }
-}
-
-// General layout
-
-body {
-    min-height: 100vh;
-    overflow-x: hidden;
-}
-
-// ----------------------------------------------------------------------------
 // MAIN
-// ----------------------------------------------------------------------------
+// --------------------------------------------------
 
-// Home section
+@use '@splidejs/splide/dist/css/splide-core.min';
-
+@use "base" as *;
-.home-section {
+@use "pages" as *;
-    position: relative;
-    z-index: 1;
-    width: 100%;
-    min-height: 100vh;
-    padding: var(--sidebar-padding);
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-start;
-}
-
-.social {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0.8rem 0 0 0;
-    
-    &__link {
-        width: var(--icon-size);
-        height: var(--icon-size);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        + .social__link {
-            margin: 0 0 0 0.8rem;
-        }
-
-        svg {
-            width: 100%;
-            height: 100%;
-        }
-
-        &--white {
-
-            &:focus-visible {
-                outline: 1px dashed var(--white);
-            }
-        }
-    }
-}
-
-@media screen and (min-width: $tablet-media-query) {
-
-    .social {
-        justify-content: flex-start;
-    }
-}
-
-@media screen and (min-width: $desktop-media-query) {}
-
-// Slider section
-
-.slider-section {
-    position: fixed;
-    top: 0;
-    left: 0;
-}
-
-.splide {
-    
-    &__image {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-    }
-}

assets/css/pages/_home.scss

@@ -0,0 +1,58 @@
+@use '../abstracts' as *;
+
+// --------------------------------------------------
+// HOME STYLE
+// --------------------------------------------------
+
+.home {
+
+    .home__gallery {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 1rem;
+
+        .home__gallery-item {
+            display: table;
+            max-width: min(1280px, 100%);
+
+            .home__carousel {
+
+                &:where(.splide) {
+                    cursor: pointer;
+
+                    .splide__track {
+
+                        .splide__list {
+                            position: relative;
+
+                            .splide__slide {
+                                transform: none !important;
+
+                                &:not(.is-active) {
+                                    position: absolute;
+                                    inset: 0;
+                                }
+
+                                .splide__image {
+                                    max-height: 80vh;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .home__main-image {
+                max-height: 80vh;
+            }
+
+            .home__image-caption {
+                display: table-caption;
+                caption-side: bottom;
+                width: fit-content;
+                margin: 0.5rem auto 0;
+            }
+        }
+    }
+}

assets/css/pages/_index.scss

@@ -0,0 +1,5 @@
+// --------------------------------------------------
+// PAGES (INDEX)
+// --------------------------------------------------
+
+@forward 'home';

assets/css/panel.scss

@@ -1,9 +1,8 @@
-// ----------------------------------------------------------------------------
+// --------------------------------------------------
 // KIRBY PANEL CUSTOMIZATION
-// ----------------------------------------------------------------------------
+// --------------------------------------------------
-
-//  Image gallery structure field gallery
 
+//  Image gallery structure field
 .k-field-name-image_gallery {
 
     table {
@@ -16,7 +15,6 @@
 }
 
 // CV writer field
-
 .k-field-name-cv {
 
     .k-text {

assets/css/partials/animations.scss

@@ -1,12 +0,0 @@
-// ----------------------------------------------------------------------------
-// ANIMATIONS
-// ----------------------------------------------------------------------------
-
-@keyframes expand-outline {
-    0% {
-        outline-offset: 0;
-    }
-    100% {
-        outline-offset: 2px;
-    }
-}

assets/js/app.js

@@ -5,81 +5,42 @@ import create from 'swiped-events';
 // DATA
 // ----------------------------------------------------------------------------
 
-// UTILS
+// const body = document.body;
-
+const homeCarousels = document.querySelectorAll('.home__carousel');
-const body = document.body;
-
-// SLIDER
-
-const homeSection = document.querySelector('.home-section');
-const sliderSection = document.querySelector('.slider-section');
-let slider;
-const slides = document.querySelectorAll('.splide__slide');
 
 // ----------------------------------------------------------------------------
 // LOGIC
 // ----------------------------------------------------------------------------
 
-// UTILS
-
-// Enable CSS :active pseudo-class in Safari Mobile
-function enableActivePseudoClass() {
-    document.addEventListener("touchstart", function() {},false);
-}
-
 // Convert rem to pixels by getting font-size CSS property
-function convertRemToPixels(rem) {
+// function convertRemToPixels(rem) {
-    let fontSize = parseFloat(window.getComputedStyle(body).getPropertyValue('font-size'));
+//     let fontSize = parseFloat(window.getComputedStyle(body).getPropertyValue('font-size'));
-    return rem * fontSize;
+//     return rem * fontSize;
-}
+// }
 
-// SLIDER
+// Set up multiple Splide carousels
-
+function setUpCarousels() {
-function setUpSlider() {
+    if (homeCarousels.length) {
-    if (sliderSection) {
+        homeCarousels.forEach((item) => {
-        slider = new Splide('.splide', {
+            // Create Splide instance
-            type: 'fade',
+            let slider = new Splide(item, {
-            rewind: true,
+                arrows: false,
-            rewindByDrag: true,
+                drag: true,
-            speed: 400,
+                easing: 'ease-in-out',
-            width: '100vw',
+                pagination: false,
-            height: '100vh',
+                rewind: true,
-            arrows: false,
+                rewindByDrag: true,
-            pagination: false,
+                role: 'undefined',
-            easing: 'ease-in-out',
+                speed: 250,
-            drag: true
+                type: 'fade',
-        });
+                width: 'auto',
-    }
+            });
-}
+            // Mount slider
-
+            slider.mount();
-function mountSlider() {
+            // Change slide on click
-    if (slider) {
+            slider.on('click', () => {
-        slider.mount();
-    }
-}
-
-function changeSlideOnClick() {
-    if (homeSection && slider) {
-        homeSection.addEventListener('click', function(e) {
-            if (!e.target.closest('.navigation__link') && !e.target.closest('.social__link')) {
-                if (e.clientX >= window.innerWidth / 2) {
-                    slider.go('>');
-                } else {
-                    slider.go('<');
-                }
-            }
-        });
-    }
-}
-
-function changeSlideOnSwipe() {
-    if (homeSection && slider) {
-        homeSection.addEventListener('swiped', function(e) {
-            if (e.detail.dir === 'left') {
                 slider.go('>');
-            } else if (e.detail.dir === 'right') {
+            });
-                slider.go('<');
-            }
         });
     }
 }
@@ -88,13 +49,4 @@ function changeSlideOnSwipe() {
 // PROGRAM
 // ----------------------------------------------------------------------------
 
-// UTILS
+setUpCarousels();
-
-enableActivePseudoClass();
-
-// SLIDER
-
-setUpSlider();
-mountSlider();
-changeSlideOnClick();
-changeSlideOnSwipe();

public/icons/logo.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 3814 1912" xmlns="http://www.w3.org/2000/svg">
+	<g transform="matrix(1, 0, 0, -1, 1426.537109, 1153.771606)">
+		<path style="fill:none;stroke:#000;stroke-width:93.54299927;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
+		<path style="fill:none;stroke:#fff;stroke-width:8.50399971;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
+	</g>
+</svg>

site/templates/base.twig

@@ -32,6 +32,9 @@
 
     {% block header %}
         <header>
+            <div class="header__logo">
+                {{ svg('icons/logo.svg') | raw }}
+            </div>
         </header>
     {% endblock %}
 

site/templates/home.twig

@@ -1,33 +1,43 @@
 {% extends "base.twig" %}
 
 {% block main %}
-    <main>
+    <main class="home">
 
-        <section class="gallery" aria-label="{{ site.title }}'s artwork gallery">
+        <section class="home__gallery"
+                 aria-label="{{ site.title }}'s artwork gallery">
             {% for galleryItem in galleryItems %}
                 {% if galleryItem.main_image().isNotEmpty %}
                     {% set mainImage = galleryItem.main_image().toFile() %}
-                    <figure class="gallery__item">
+                    <figure class="home__gallery-item">
                         {% if galleryItem.related_image().isNotEmpty %}
                             {% set relatedImage = galleryItem.related_image().toFile() %}
-                            <div class="splide">
+                            <div class="home__carousel splide">
                                 <div class="splide__track">
                                     <ul class="splide__list">
                                         <li class="splide__slide">
-                                            <img class="splide__image" src="{{ mainImage.url }}" srcset="{{ mainImage.srcset() }}" alt="{{ mainImage.alt_text }}">
+                                            <img class="splide__image"
+                                             src="{{ mainImage.url }}"
+                                             srcset="{{ mainImage.srcset() }}"
+                                             alt="{{ mainImage.alt_text }}">
                                         </li>
                                         <li class="splide__slide">
-                                            <img class="splide__image" src="{{ relatedImage.url }}" srcset="{{ relatedImage.srcset() }}" alt="{{ relatedImage.alt_text }}">
+                                            <img class="splide__image"
+                                             src="{{ relatedImage.url }}"
+                                             srcset="{{ relatedImage.srcset() }}"
+                                             alt="{{ relatedImage.alt_text }}">
                                         </li>
                                     </ul>
                                 </div>
                             </div>
                         {% else %}
-                            <img class="gallery__main-image" src="{{ mainImage.url }}" srcset="{{ mainImage.srcset() }}" alt="{{ mainImage.alt_text }}">
+                            <img class="home__main-image"
+                                 src="{{ mainImage.url }}"
+                                 srcset="{{ mainImage.srcset() }}"
+                                 alt="{{ mainImage.alt_text }}">
                         {% endif %}
                         {% if galleryItem.caption().isNotEmpty %}
                             {% set caption = galleryItem.caption() %}
-                            <figcaption class="gallery__caption">{{ caption | raw  }}</figcaption>
+                            <figcaption class="home__image-caption">{{ caption | raw  }}</figcaption>
                         {% endif %}
                     </figure>
                 {% endif %}