diff --git a/.github/workflows/pipeline.yaml b/.github/workflows/pipeline.yaml index e46c3c6..9fc9861 100644 --- a/.github/workflows/pipeline.yaml +++ b/.github/workflows/pipeline.yaml @@ -27,7 +27,7 @@ jobs: if [[ ${{ github.ref_name }} == 'main' ]]; then latest=$develop else - latest=$(git describe --tags --exact-match --abbrev=0) + latest=$(git describe --tags --abbrev=0) fi echo "LATEST=$latest" >> $GITHUB_OUTPUT @@ -125,6 +125,7 @@ jobs: cp *.php build/ cp screenshot.png build/ cp assets/ build/ -r + cp scripts/ build/ -r cp LICENSE build/ - name: Generate artifact name id: generate_artifact_name diff --git a/404.php b/404.php index c47c5c2..4c5c622 100644 --- a/404.php +++ b/404.php @@ -1,26 +1,19 @@
-
+
-

-
+

Nichts gefunden!

+
-

-
+

Es scheint, als ob hier nicht zu finden ist.

+

Hast du bereits in den Hütten nachgeschaut?

+
- - + + \ No newline at end of file diff --git a/assets/icons/arrow-right.afdesign b/assets/icons/arrow-right.afdesign new file mode 100644 index 0000000..0a7a916 Binary files /dev/null and b/assets/icons/arrow-right.afdesign differ diff --git a/assets/icons/arrow-right.svg b/assets/icons/arrow-right.svg new file mode 100644 index 0000000..b254cd8 --- /dev/null +++ b/assets/icons/arrow-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/carousel.scss b/css/carousel.scss new file mode 100644 index 0000000..dba1da4 --- /dev/null +++ b/css/carousel.scss @@ -0,0 +1,161 @@ +.preview-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba($color-secondary-light, 0.3); + z-index: 9997; + justify-content: center; + align-items: center; + + .preview-overlay__close { + position: absolute; + top: 0; + right: 0; + width: 100vw; + height: 100vh; + } + .preview-overlay__close-icon { + position: absolute; + top: 1rem; + right: 1rem; + width: 2rem; + height: 2rem; + z-index: 9998; + cursor: pointer; + fill: $color-background; + } + img { + max-width: 90%; + max-height: 90%; + z-index: 9999; + } +} +.carousel { + --carousel-width: 800px; + width: var(--carousel-width); + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1rem; + + @media only screen and (max-width: 991px) { + --carousel-width: 90vw; + .carousel__preview { + width: 100% !important; + flex-direction: column; + align-items: center; + + img { + height: 300px; + max-width: 100%; + } + } + } + .carousel__preview { + margin: 0; + width: calc(100% - 1rem); + gap: 1rem; + display: flex; + justify-content: flex-start; + + img { + height: 450px; + max-width: 100%; + object-fit: cover; + cursor: pointer; + } + figcaption { + display: flex; + justify-content: flex-end; + align-items: flex-start; + flex-direction: column; + + p { + width: 100%; + margin: 0; + padding: 0; + } + } + } + .carousel__nav { + position: relative; + display: flex; + justify-content: flex-start; + align-items: center; + max-width: 100%; + overflow: hidden; + + // &::before, + // &::after { + // z-index: 1; + // position: absolute; + // display: block; + // content: ""; + // top: 0; + // height: 100%; + // width: calc(var(--carousel-width) / var(--amount-carousel-images) / 4); + // } + // &::before { + // left: 0; + // background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)); + // } + // &::after { + // right: 0; + // background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)); + // } + .carousel__img { + --image-sizing: calc( + (var(--carousel-width) - (var(--amount-carousel-images) - 1) * 1rem) / var(--amount-carousel-images) + ); + transform: translateX(calc(var(--carousel-width) * var(--slider-index) * -1 - var(--slider-index) * 1rem)); + transition: transform 0.3s ease-in-out; + width: var(--image-sizing); + height: var(--image-sizing); + aspect-ratio: 1 / 1; + cursor: pointer; + margin-right: 1rem; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + + &.carousel__img--active::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: calc(100% - 2 * 0.2rem); + height: calc(100% - 2 * 0.2rem); + border: 0.2rem solid $color-accent; + } + } + .carousel__button { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 2.5rem; + height: 2.5rem; + cursor: pointer; + z-index: 10; + outline: none; + border: none; + background-position: center; + background-size: 50%; + background-repeat: no-repeat; + background-color: rgba($color-background, 0.3); + filter: invert(1); + + &:hover { + background-color: rgba($color-background, 0.6); + } + &.carousel__button--prev { + left: 0; + } + &.carousel__button--next { + right: 0; + } + } + } +} diff --git a/css/footer.scss b/css/footer.scss index e3685d0..7ab6247 100644 --- a/css/footer.scss +++ b/css/footer.scss @@ -1,6 +1,7 @@ h2.farewell { width: 100vw; text-align: center; + margin-top: $size-xxl; } @mixin navigation-styling() { @@ -138,7 +139,7 @@ h2.farewell { flex-wrap: wrap; } .logo { - width: 400px; + width: 75%; } } .wrapper-right { @@ -147,14 +148,12 @@ h2.farewell { max-width: 100vw; margin-top: 40px; padding: 0 $padding; - flex-direction: row; + flex-direction: column; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; + gap: $size-md; - .button-wrapper { - margin-left: 40px; - } .legal { width: calc(100% - 2 * $padding); } diff --git a/css/header.scss b/css/header.scss index 85e9911..cb5198f 100644 --- a/css/header.scss +++ b/css/header.scss @@ -6,10 +6,17 @@ justify-content: space-between; align-items: center; padding: $size-md $size-xl; - background-color: rgba($color-background, 0.5); - backdrop-filter: blur(8px); + background-color: transparent; + backdrop-filter: unset; + transition: + background-color 0.3s ease-in-out, + backdrop-filter 0.3s ease-in-out; z-index: 99; + &:hover { + background-color: rgba($color-background, 0.5) !important; + backdrop-filter: blur(8px) !important; + } .site-logo { max-width: 280px; diff --git a/css/layout.scss b/css/layout.scss index ff839e8..d5171d7 100644 --- a/css/layout.scss +++ b/css/layout.scss @@ -45,12 +45,17 @@ width: 60%; height: auto; border-radius: 8px; + + @media only screen and (max-width: 575px) { + width: 100%; + } } figcaption { margin-top: $size-xs; color: $color-secondary-light; max-width: 50%; width: fit-content; + text-align: center; } } } diff --git a/css/not-found.scss b/css/not-found.scss new file mode 100644 index 0000000..7bd28b9 --- /dev/null +++ b/css/not-found.scss @@ -0,0 +1,8 @@ +.not-found { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: $size-xxl; + padding: 25vh 0; +} diff --git a/css/page.scss b/css/page.scss index 680fb9a..4097fc5 100644 --- a/css/page.scss +++ b/css/page.scss @@ -6,7 +6,7 @@ main.page-design { section { &.hero-section { - height: 600px; + height: 750px; width: 100%; display: flex; justify-content: center; @@ -35,29 +35,67 @@ main.page-design { left: 0; height: 100%; width: 100%; - background-color: rgba($color-background, 0.3); + background-color: rgba($color-background, 0.2); } } - &:not(.hero-section) { + &.content-section { + width: calc(100% - 2 * $size-xl); display: flex; + flex-direction: column; justify-content: center; align-items: center; - flex-direction: column; - padding: 48px; + margin: 4rem 0 0; + padding: 0 $size-xl; - h2 { - font-size: $size-xxl; - margin-bottom: 1em; + @mixin content-section-title-left-right-styling { + justify-content: center; + align-items: flex-start; + gap: $size-xxl; + + h2 { + margin-bottom: 0; + text-align: right; + } + } + &.content-section--title-left { + flex-direction: row; + @include content-section-title-left-right-styling; } - div { + &.content-section--title-right { + flex-direction: row-reverse; + @include content-section-title-left-right-styling; + text-align: left; + } + .content-section__content { display: flex; + flex-direction: column; justify-content: center; align-items: center; - gap: 48px; + max-width: 60ch; + + & > div { + display: flex; + justify-content: center; + align-items: flex-start; + flex-direction: column; + } } - p { - width: fit-content; - max-width: 70ch; + h2 { + margin-bottom: $size-lg; + } + + @media only screen and (max-width: 991px) { + &.content-section--title-left { + flex-direction: column; + align-items: center; + gap: $size-md; + } + &.content-section--title-right { + flex-direction: column; + justify-content: center; + align-items: center; + gap: $size-md; + } } } } diff --git a/functions.php b/functions.php index 9bf9379..4c134a8 100644 --- a/functions.php +++ b/functions.php @@ -18,6 +18,10 @@ function huettenbau_oberi_theme_customize_register($wp_customize) 'title' => __('Main Page', 'huettenbau-oberi-theme'), 'priority' => 30, )); + $wp_customize->add_section('huettenbau-oberi-carousel-settings', array( + 'title' => __('Carousel Settings', 'huettenbau-oberi-theme'), + 'priority' => 40, + )); // Add a setting $wp_customize->add_setting('huettenbau-oberi-page-hero-span', array( @@ -127,6 +131,30 @@ function huettenbau_oberi_theme_customize_register($wp_customize) 'settings' => 'huettenbau-oberi-page-section4-text', 'type' => 'text', )); + + for ($i = 1; $i <= 20; $i++) { + // Image + $wp_customize->add_setting('huettenbau-oberi-page-carousel-image' . $i, array( + 'default' => '', + 'sanitize_callback' => 'esc_url_raw', + )); + $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'huettenbau-oberi-page-carousel-image' . $i . '-control', array( + 'label' => __('Image ' . $i, 'huettenbau-oberi-theme'), + 'section' => 'huettenbau-oberi-carousel-settings', + 'settings' => 'huettenbau-oberi-page-carousel-image' . $i, + ))); + + // Caption Text + $wp_customize->add_setting('huettenbau-oberi-page-carousel-image' . $i . '-caption-text', array( + 'default' => __('Example Caption', 'huettenbau-oberi-theme'), + )); + $wp_customize->add_control('huettenbau-oberi-page-carousel-image' . $i . '-caption-text-control', array( + 'label' => __('', 'huettenbau-oberi-theme'), + 'section' => 'huettenbau-oberi-carousel-settings', + 'settings' => 'huettenbau-oberi-page-carousel-image' . $i . '-caption-text', + 'type' => 'text', + )); + } } add_action('customize_register', 'huettenbau_oberi_theme_customize_register'); @@ -138,6 +166,8 @@ function huettenbau_oberi_theme_customize_register_enqueue() $internal_link_icon = esc_url(get_parent_theme_file_uri('assets/icons/internal-icon.svg')); $external_link_icon = esc_url(get_parent_theme_file_uri('assets/icons/external-icon.svg')); $download_link_icon = esc_url(get_parent_theme_file_uri('assets/icons/download-icon.svg')); + $next_icon = esc_url(get_parent_theme_file_uri('assets/icons/arrow-right.svg')); + $previous_icon = esc_url(get_parent_theme_file_uri('assets/icons/arrow-left.svg')); $link_icons_css = " section.hero-section { @@ -159,8 +189,17 @@ function huettenbau_oberi_theme_customize_register_enqueue() p a.link-download-after::after { background-image: url('{$download_link_icon}'); } + + button.carousel__button--prev { + background-image: url('{$previous_icon}'); + } + button.carousel__button--next { + background-image: url('{$next_icon}'); + } "; wp_add_inline_style('huettenbau-oberi-theme', $link_icons_css); + wp_enqueue_script('carousel', get_template_directory_uri() . '/scripts/carousel.js', array(), false, true); + wp_enqueue_script('header', get_template_directory_uri() . '/scripts/header.js', array(), false, true); } add_action('wp_enqueue_scripts', 'huettenbau_oberi_theme_customize_register_enqueue'); diff --git a/header.php b/header.php index d867776..9fcb3ee 100644 --- a/header.php +++ b/header.php @@ -9,6 +9,14 @@ +
+
+ + + + +
"; + continue; + } + if ($imgUrl === '') { + continue; + } + $images .= "
"; + } + return " +
+
+ \"\" +
+

+
+
+
+ + " . $images . " + +
+
+ "; +} + +?>
- -

+ +

+

-
+

- Section Text

', 'huettenbau-oberi-theme')); ?> +
+ Section Text

', 'huettenbau-oberi-theme')); ?> +
-
+

- Section Text

', 'huettenbau-oberi-theme')); ?> +
+ Section Text

', 'huettenbau-oberi-theme')); ?> +
-
+
+ +
+

- Section Text

', 'huettenbau-oberi-theme')); ?> +
+ Section Text

', 'huettenbau-oberi-theme')); ?> +
-
+

- Section Text

', 'huettenbau-oberi-theme')); ?> +
+ Section Text

', 'huettenbau-oberi-theme')); ?> +
\ No newline at end of file diff --git a/scripts/carousel.js b/scripts/carousel.js new file mode 100644 index 0000000..fe81fb3 --- /dev/null +++ b/scripts/carousel.js @@ -0,0 +1,131 @@ +const disableButtonIfUnnecessary = (carousel) => { + const nav = carousel.querySelector('.carousel__nav'); + const previousButton = nav.querySelector('.carousel__button--prev') + const nextButton = nav.querySelector('.carousel__button--next') + const imgAmount = carousel.querySelectorAll('.carousel__img').length; + + const maxItems = parseInt(/\d+/.exec(carousel.getAttribute('style'))[0]); + + if (imgAmount <= maxItems) { + previousButton.style = 'display: none'; + nextButton.style = 'display: none'; + } else { + previousButton.style = 'display: initial'; + nextButton.style = 'display: initial'; + } +} + +const setupButtons = (carousel) => { + const nav = carousel.querySelector('.carousel__nav'); + const imgAmount = carousel.querySelectorAll('.carousel__img').length; + + nav.querySelector('.carousel__button--prev').addEventListener('click', _ => { + const maxItems = parseInt(/\d+/.exec(carousel.getAttribute('style'))[0]); + const maxIndex = Math.ceil(imgAmount / maxItems) - 1; + const index = parseInt(/\d+/.exec(nav.getAttribute('style'))[0]); + if (index === 0) { + nav.style = `--slider-index: ${maxIndex}`; + return + }; + nav.style = `--slider-index: ${index - 1}`; + }); + nav.querySelector('.carousel__button--next').addEventListener('click', _ => { + const maxItems = parseInt(/\d+/.exec(carousel.getAttribute('style'))[0]); + const maxIndex = Math.ceil(imgAmount / maxItems) - 1; + const index = parseInt(/\d+/.exec(nav.getAttribute('style'))[0]); + if (index === maxIndex) { + nav.style = `--slider-index: 0`; + return + } + nav.style = `--slider-index: ${index + 1}`; + }); + + disableButtonIfUnnecessary(carousel); +} + +const setupImageSelection = (carousel) => { + const figureImg = carousel.querySelector('.carousel__preview img'); + const figureCaption = carousel.querySelector('.carousel__preview figcaption p'); + const images = carousel.querySelectorAll('.carousel__img'); + + images.forEach(image => { + image.addEventListener('click', _ => { + if (image.classList.contains('carousel__img--active')) return; + images.forEach(img => img.classList.remove('carousel__img--active')); + image.classList.add('carousel__img--active'); + + figureImg.src = image.getAttribute('src'); + figureImg.alt = image.getAttribute('caption'); + figureCaption.textContent = image.getAttribute('caption'); + }); + }); +} + +const toggleOverlay = (enable = false) => { + const overlay = document.querySelector('.preview-overlay'); + if (!enable) { + overlay.style = 'display: none'; + return; + }; + overlay.style = 'display: flex'; +} + +const setupImagePreviewOverlay = (carousel) => { + const figureImg = carousel.querySelector('.carousel__preview img'); + const figureCaption = carousel.querySelector('.carousel__preview figcaption'); + const overlayCloseBg = document.querySelector('.preview-overlay__close'); + const overlayCloseIcon = document.querySelector('.preview-overlay__close-icon'); + const overlayImg = document.querySelector('.preview-overlay__img'); + + figureImg.addEventListener('click', _ => { + toggleOverlay(true); + overlayImg.src = figureImg.src; + overlayImg.alt = figureCaption.textContent; + }); + overlayCloseBg.addEventListener('click', _ => toggleOverlay()); + overlayCloseIcon.addEventListener('click', _ => toggleOverlay()); +} + +const setupInitPreview = (carousel) => { + const figureImg = carousel.querySelector('.carousel__preview img'); + const figureCaption = carousel.querySelector('.carousel__preview figcaption p'); + const images = carousel.querySelectorAll('.carousel__img'); + + figureImg.src = images[0].getAttribute('src'); + figureImg.alt = images[0].getAttribute('caption'); + figureCaption.textContent = images[0].getAttribute('caption'); + images[0].classList.add('carousel__img--active'); +} + +const initCarousels = _ => { + document.querySelectorAll('.carousel').forEach(carousel => { + setupButtons(carousel); + setupInitPreview(carousel); + setupImageSelection(carousel); + setupImagePreviewOverlay(carousel); + }); +} + +const onBodyResize = _ => { + const carousels = document.querySelectorAll('.carousel'); + carousels.forEach(carousel => { + if (window.innerWidth <= 639) { + carousel.style = '--amount-carousel-images: 3;'; + } else if (window.innerWidth <= 767) { + carousel.style = '--amount-carousel-images: 4;'; + } else if (window.innerWidth <= 991) { + carousel.style = '--amount-carousel-images: 5;'; + } else { + carousel.style = '--amount-carousel-images: 6;'; + } + + disableButtonIfUnnecessary(carousel); + }); +} + +document.addEventListener('DOMContentLoaded', _ => { + initCarousels(); + onBodyResize() +}); + +window.addEventListener("resize", onBodyResize); diff --git a/scripts/header.js b/scripts/header.js new file mode 100644 index 0000000..a337536 --- /dev/null +++ b/scripts/header.js @@ -0,0 +1,16 @@ +document.addEventListener('DOMContentLoaded', _ => { + const header = document.querySelector('.site-header'); + const heroSection = document.querySelector('.page-design section.hero-section'); + + if (heroSection !== null) + heroSection.style = `margin-top: -${header.clientHeight}px;`; + + window.addEventListener('scroll', _ => { + if (window.scrollY == 0) { + header.style = 'background-color: transparent; backdrop-filter: unset;'; + } else { + header.style.backgroundColor = 'rgba(255, 255, 255, 0.5)'; + header.style.backdropFilter = 'blur(8px)'; + } + }); +}); \ No newline at end of file diff --git a/style.scss b/style.scss index b4d4fa9..e5c0584 100644 --- a/style.scss +++ b/style.scss @@ -116,3 +116,5 @@ a { @import "./css/layout.scss"; @import "./css/page.scss"; @import "./css/footer.scss"; +@import "./css/carousel.scss"; +@import "./css/not-found.scss";