diff --git a/assets/css/abstracts/_index.scss b/assets/css/abstracts/_index.scss new file mode 100644 index 0000000..78c2c13 --- /dev/null +++ b/assets/css/abstracts/_index.scss @@ -0,0 +1,5 @@ +// -------------------------------------------------- +// ABSTRACTS (INDEX) +// -------------------------------------------------- + +@forward 'variables'; diff --git a/assets/css/partials/variables.scss b/assets/css/abstracts/_variables.scss similarity index 84% rename from assets/css/partials/variables.scss rename to assets/css/abstracts/_variables.scss index eace197..e5b0ef4 100644 --- a/assets/css/partials/variables.scss +++ b/assets/css/abstracts/_variables.scss @@ -1,6 +1,6 @@ -// ---------------------------------------------------------------------------- +// -------------------------------------------------- // VARIABLES -// ---------------------------------------------------------------------------- +// -------------------------------------------------- :root { diff --git a/assets/css/base/_base.scss b/assets/css/base/_base.scss new file mode 100644 index 0000000..6b119df --- /dev/null +++ b/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%; + } + } + } +} diff --git a/assets/css/base/_index.scss b/assets/css/base/_index.scss new file mode 100644 index 0000000..0fff0d7 --- /dev/null +++ b/assets/css/base/_index.scss @@ -0,0 +1,6 @@ +// -------------------------------------------------- +// BASE (INDEX) +// -------------------------------------------------- + +@forward 'minireset'; +@forward 'base'; diff --git a/assets/css/utils/minireset.css b/assets/css/base/_minireset.css similarity index 78% rename from assets/css/utils/minireset.css rename to assets/css/base/_minireset.css index 2023d39..26ec2a6 100644 --- a/assets/css/utils/minireset.css +++ b/assets/css/base/_minireset.css @@ -1,6 +1,6 @@ -/* ---------------------------------------------------------------------------- +/* -------------------------------------------------- MINIRESET V0.0.6 ----------------------------------------------------------------------------- */ +-------------------------------------------------- */ html, body, diff --git a/assets/css/main.scss b/assets/css/main.scss index 627492e..60bee4b 100644 --- a/assets/css/main.scss +++ b/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 - -.home-section { - 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; - } -} +@use '@splidejs/splide/dist/css/splide-core.min'; +@use "base" as *; +@use "pages" as *; diff --git a/assets/css/pages/_home.scss b/assets/css/pages/_home.scss new file mode 100644 index 0000000..55ccb40 --- /dev/null +++ b/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; + } + } + } +} diff --git a/assets/css/pages/_index.scss b/assets/css/pages/_index.scss new file mode 100644 index 0000000..eb7d905 --- /dev/null +++ b/assets/css/pages/_index.scss @@ -0,0 +1,5 @@ +// -------------------------------------------------- +// PAGES (INDEX) +// -------------------------------------------------- + +@forward 'home'; diff --git a/assets/css/panel.scss b/assets/css/panel.scss index b22746a..b53e7a0 100644 --- a/assets/css/panel.scss +++ b/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 { diff --git a/assets/css/partials/animations.scss b/assets/css/partials/animations.scss deleted file mode 100644 index 5a7fe5a..0000000 --- a/assets/css/partials/animations.scss +++ /dev/null @@ -1,12 +0,0 @@ -// ---------------------------------------------------------------------------- -// ANIMATIONS -// ---------------------------------------------------------------------------- - -@keyframes expand-outline { - 0% { - outline-offset: 0; - } - 100% { - outline-offset: 2px; - } -} diff --git a/assets/js/app.js b/assets/js/app.js index 974e90a..183ed05 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -5,81 +5,42 @@ import create from 'swiped-events'; // DATA // ---------------------------------------------------------------------------- -// UTILS - -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'); +// const body = document.body; +const homeCarousels = document.querySelectorAll('.home__carousel'); // ---------------------------------------------------------------------------- // 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) { - let fontSize = parseFloat(window.getComputedStyle(body).getPropertyValue('font-size')); - return rem * fontSize; -} +// function convertRemToPixels(rem) { +// let fontSize = parseFloat(window.getComputedStyle(body).getPropertyValue('font-size')); +// return rem * fontSize; +// } -// SLIDER - -function setUpSlider() { - if (sliderSection) { - slider = new Splide('.splide', { - type: 'fade', - rewind: true, - rewindByDrag: true, - speed: 400, - width: '100vw', - height: '100vh', - arrows: false, - pagination: false, - easing: 'ease-in-out', - drag: true - }); - } -} - -function mountSlider() { - if (slider) { - 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') { +// Set up multiple Splide carousels +function setUpCarousels() { + if (homeCarousels.length) { + homeCarousels.forEach((item) => { + // Create Splide instance + let slider = new Splide(item, { + arrows: false, + drag: true, + easing: 'ease-in-out', + pagination: false, + rewind: true, + rewindByDrag: true, + role: 'undefined', + speed: 250, + type: 'fade', + width: 'auto', + }); + // Mount slider + slider.mount(); + // Change slide on click + slider.on('click', () => { slider.go('>'); - } else if (e.detail.dir === 'right') { - slider.go('<'); - } + }); }); } } @@ -88,13 +49,4 @@ function changeSlideOnSwipe() { // PROGRAM // ---------------------------------------------------------------------------- -// UTILS - -enableActivePseudoClass(); - -// SLIDER - -setUpSlider(); -mountSlider(); -changeSlideOnClick(); -changeSlideOnSwipe(); +setUpCarousels(); diff --git a/public/icons/apple-mail.svg b/public/icons/apple-mail.svg new file mode 100644 index 0000000..595c9bf --- /dev/null +++ b/public/icons/apple-mail.svg @@ -0,0 +1,18 @@ + diff --git a/public/icons/instagram.svg b/public/icons/instagram.svg new file mode 100644 index 0000000..e3c2906 --- /dev/null +++ b/public/icons/instagram.svg @@ -0,0 +1,31 @@ + diff --git a/public/icons/logo.svg b/public/icons/logo.svg new file mode 100644 index 0000000..3359217 --- /dev/null +++ b/public/icons/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/site/templates/base.twig b/site/templates/base.twig index c8fa421..f6d42b7 100644 --- a/site/templates/base.twig +++ b/site/templates/base.twig @@ -32,6 +32,9 @@ {% block header %}
+
{% endblock %} @@ -40,58 +43,17 @@ {% block footer %} {% endblock %} diff --git a/site/templates/home.twig b/site/templates/home.twig index 5e4ca08..8818363 100644 --- a/site/templates/home.twig +++ b/site/templates/home.twig @@ -1,33 +1,43 @@ {% extends "base.twig" %} {% block main %} -
+
-
+
{% for galleryItem in galleryItems %} {% if galleryItem.main_image().isNotEmpty %} {% set mainImage = galleryItem.main_image().toFile() %} -
+
{% if galleryItem.related_image().isNotEmpty %} {% set relatedImage = galleryItem.related_image().toFile() %} -
+
  • - {{ mainImage.alt_text }} + {{ mainImage.alt_text }}
  • - {{ relatedImage.alt_text }} + {{ relatedImage.alt_text }}
{% else %} - {{ mainImage.alt_text }} + {{ mainImage.alt_text }} {% endif %} {% if galleryItem.caption().isNotEmpty %} {% set caption = galleryItem.caption() %} -
{{ caption | raw }}
+
{{ caption | raw }}
{% endif %}
{% endif %}