diff --git a/assets/css/abstracts/_index.scss b/assets/css/abstracts/_index.scss deleted file mode 100644 index 78c2c13..0000000 --- a/assets/css/abstracts/_index.scss +++ /dev/null @@ -1,5 +0,0 @@ -// -------------------------------------------------- -// ABSTRACTS (INDEX) -// -------------------------------------------------- - -@forward 'variables'; diff --git a/assets/css/base/_base.scss b/assets/css/base/_base.scss deleted file mode 100644 index 6b119df..0000000 --- a/assets/css/base/_base.scss +++ /dev/null @@ -1,80 +0,0 @@ -@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 deleted file mode 100644 index 0fff0d7..0000000 --- a/assets/css/base/_index.scss +++ /dev/null @@ -1,6 +0,0 @@ -// -------------------------------------------------- -// BASE (INDEX) -// -------------------------------------------------- - -@forward 'minireset'; -@forward 'base'; diff --git a/assets/css/main.scss b/assets/css/main.scss index 60bee4b..627492e 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -1,7 +1,128 @@ -// -------------------------------------------------- -// MAIN -// -------------------------------------------------- - +@use 'utils/minireset'; @use '@splidejs/splide/dist/css/splide-core.min'; -@use "base" as *; -@use "pages" as *; +@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; + } +} diff --git a/assets/css/pages/_home.scss b/assets/css/pages/_home.scss deleted file mode 100644 index 55ccb40..0000000 --- a/assets/css/pages/_home.scss +++ /dev/null @@ -1,58 +0,0 @@ -@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 deleted file mode 100644 index eb7d905..0000000 --- a/assets/css/pages/_index.scss +++ /dev/null @@ -1,5 +0,0 @@ -// -------------------------------------------------- -// PAGES (INDEX) -// -------------------------------------------------- - -@forward 'home'; diff --git a/assets/css/panel.scss b/assets/css/panel.scss index b53e7a0..b22746a 100644 --- a/assets/css/panel.scss +++ b/assets/css/panel.scss @@ -1,8 +1,9 @@ -// -------------------------------------------------- +// ---------------------------------------------------------------------------- // KIRBY PANEL CUSTOMIZATION -// -------------------------------------------------- +// ---------------------------------------------------------------------------- + +// Image gallery structure field gallery -// Image gallery structure field .k-field-name-image_gallery { table { @@ -15,6 +16,7 @@ } // CV writer field + .k-field-name-cv { .k-text { diff --git a/assets/css/partials/animations.scss b/assets/css/partials/animations.scss new file mode 100644 index 0000000..5a7fe5a --- /dev/null +++ b/assets/css/partials/animations.scss @@ -0,0 +1,12 @@ +// ---------------------------------------------------------------------------- +// ANIMATIONS +// ---------------------------------------------------------------------------- + +@keyframes expand-outline { + 0% { + outline-offset: 0; + } + 100% { + outline-offset: 2px; + } +} diff --git a/assets/css/abstracts/_variables.scss b/assets/css/partials/variables.scss similarity index 84% rename from assets/css/abstracts/_variables.scss rename to assets/css/partials/variables.scss index e5b0ef4..eace197 100644 --- a/assets/css/abstracts/_variables.scss +++ b/assets/css/partials/variables.scss @@ -1,6 +1,6 @@ -// -------------------------------------------------- +// ---------------------------------------------------------------------------- // VARIABLES -// -------------------------------------------------- +// ---------------------------------------------------------------------------- :root { diff --git a/assets/css/base/_minireset.css b/assets/css/utils/minireset.css similarity index 78% rename from assets/css/base/_minireset.css rename to assets/css/utils/minireset.css index 26ec2a6..2023d39 100644 --- a/assets/css/base/_minireset.css +++ b/assets/css/utils/minireset.css @@ -1,6 +1,6 @@ -/* -------------------------------------------------- +/* ---------------------------------------------------------------------------- MINIRESET V0.0.6 --------------------------------------------------- */ +---------------------------------------------------------------------------- */ html, body, diff --git a/assets/js/app.js b/assets/js/app.js index 183ed05..974e90a 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -5,42 +5,81 @@ import create from 'swiped-events'; // DATA // ---------------------------------------------------------------------------- -// const body = document.body; -const homeCarousels = document.querySelectorAll('.home__carousel'); +// 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'); // ---------------------------------------------------------------------------- // LOGIC // ---------------------------------------------------------------------------- -// 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; -// } +// UTILS -// 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', () => { +// 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; +} + +// 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') { slider.go('>'); - }); + } else if (e.detail.dir === 'right') { + slider.go('<'); + } }); } } @@ -49,4 +88,13 @@ function setUpCarousels() { // PROGRAM // ---------------------------------------------------------------------------- -setUpCarousels(); +// UTILS + +enableActivePseudoClass(); + +// SLIDER + +setUpSlider(); +mountSlider(); +changeSlideOnClick(); +changeSlideOnSwipe(); diff --git a/public/icons/apple-mail.svg b/public/icons/apple-mail.svg deleted file mode 100644 index 595c9bf..0000000 --- a/public/icons/apple-mail.svg +++ /dev/null @@ -1,18 +0,0 @@ - diff --git a/public/icons/instagram.svg b/public/icons/instagram.svg deleted file mode 100644 index e3c2906..0000000 --- a/public/icons/instagram.svg +++ /dev/null @@ -1,31 +0,0 @@ - diff --git a/public/icons/logo.svg b/public/icons/logo.svg deleted file mode 100644 index 3359217..0000000 --- a/public/icons/logo.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/site/templates/base.twig b/site/templates/base.twig index f6d42b7..c8fa421 100644 --- a/site/templates/base.twig +++ b/site/templates/base.twig @@ -32,9 +32,6 @@ {% block header %}
-
{% endblock %} @@ -43,17 +40,58 @@ {% block footer %} {% endblock %} diff --git a/site/templates/home.twig b/site/templates/home.twig index 8818363..5e4ca08 100644 --- a/site/templates/home.twig +++ b/site/templates/home.twig @@ -1,43 +1,33 @@ {% 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 %}