diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..5afad8d --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,10 @@ +/* Styles für Blogpost-Zusammenfassungen */ +li.post { + margin-bottom: 1.5rem; +} + +.post-summary { + margin-top: 0.5rem; + color: #666; + font-size: 0.9rem; +} diff --git a/assets/css/gallery.css b/assets/css/gallery.css new file mode 100644 index 0000000..8007e58 --- /dev/null +++ b/assets/css/gallery.css @@ -0,0 +1,106 @@ +/* Image Gallery Styles */ +.image-gallery { + position: relative; + max-width: 100%; + margin: 20px auto; + overflow: hidden; +} + +.gallery-slider { + width: 100%; + position: relative; +} + +.slide { + display: none; + width: 100%; +} + +.slide.active { + display: block; +} + +.slide img { + width: 100%; + height: auto; + display: block; +} + +.gallery-navigation { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; +} + +.prev-slide, .next-slide { + position: absolute; + top: 50%; + transform: translateY(-50%); + color: white; + font-size: 24px; + font-weight: bold; + padding: 16px; + background-color: rgba(0, 0, 0, 0.3); + cursor: pointer; + pointer-events: auto; + border-radius: 50%; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; +} + +.prev-slide:hover, .next-slide:hover { + background-color: rgba(0, 0, 0, 0.6); +} + +.prev-slide { + left: 10px; +} + +.next-slide { + right: 10px; +} + +.gallery-indicator { + text-align: center; + margin-top: 10px; +} + +.dot { + height: 10px; + width: 10px; + margin: 0 5px; + background-color: #bbb; + border-radius: 50%; + display: inline-block; + transition: background-color 0.3s ease; + cursor: pointer; +} + +.dot.active { + background-color: #555; +} + +.slide-caption { + padding: 10px; + background-color: rgba(0, 0, 0, 0.7); + color: white; + text-align: center; + position: absolute; + bottom: 0; + left: 0; + right: 0; +} + +@media (max-width: 768px) { + .prev-slide, .next-slide { + font-size: 18px; + padding: 12px; + } +} diff --git a/assets/js/gallery.js b/assets/js/gallery.js new file mode 100644 index 0000000..e4fdd0d --- /dev/null +++ b/assets/js/gallery.js @@ -0,0 +1,65 @@ +function showSlide(galleryId, slideIndex) { + const slides = document.querySelectorAll(`#${galleryId} .slide`); + const dots = document.querySelectorAll(`#${galleryId} .dot`); + + // Hide all slides + slides.forEach(slide => { + slide.classList.remove('active'); + }); + + // Remove active class from all dots + dots.forEach(dot => { + dot.classList.remove('active'); + }); + + // Show the selected slide and activate dot + slides[slideIndex].classList.add('active'); + dots[slideIndex].classList.add('active'); +} + +function moveSlide(galleryId, direction) { + const slides = document.querySelectorAll(`#${galleryId} .slide`); + let currentIndex = 0; + + // Find current active slide + slides.forEach((slide, index) => { + if (slide.classList.contains('active')) { + currentIndex = index; + } + }); + + // Calculate new index + let newIndex = currentIndex + direction; + if (newIndex < 0) newIndex = slides.length - 1; + if (newIndex >= slides.length) newIndex = 0; + + // Show the new slide + showSlide(galleryId, newIndex); +} + +// Handle keyboard navigation +document.addEventListener('keydown', function(event) { + // Only handle if a gallery is present + const galleries = document.querySelectorAll('.image-gallery'); + if (galleries.length === 0) return; + + // Find gallery with active slide + let activeGalleryId = null; + galleries.forEach(gallery => { + const activeSlide = gallery.querySelector('.slide.active'); + if (activeSlide) { + activeGalleryId = gallery.id; + } + }); + + if (!activeGalleryId) return; + + // Left arrow + if (event.keyCode === 37) { + moveSlide(activeGalleryId, -1); + } + // Right arrow + else if (event.keyCode === 39) { + moveSlide(activeGalleryId, 1); + } +}); diff --git a/layouts/_default/list.html b/layouts/_default/list.html index b4bd1d3..604900c 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -10,6 +10,7 @@ {{- if (not (in (.Site.Params.excludedTypes | default (slice "page")) .Type)) -}}
  • {{.Title}} {{ dateFormat ":date_medium" .Date }}{{ if .Draft }} DRAFT {{ end }} +

    {{ .Summary | plainify | truncate 200 }}

    • {{- end -}} {{- end -}} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 93248ea..73b7192 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -53,6 +53,16 @@ {{ $darkstyle := resources.Get "css/dark.css" | fingerprint }} {{- end -}} + + + {{ $galleryCss := resources.Get "css/gallery.css" | minify | fingerprint }} + + {{ $galleryJs := resources.Get "js/gallery.js" | minify | fingerprint }} + + + + {{ $customstyle := resources.Get "css/custom.css" | fingerprint }} + {{- if .Site.Params.mathjax | default false -}} diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html new file mode 100644 index 0000000..81a1755 --- /dev/null +++ b/layouts/shortcodes/gallery.html @@ -0,0 +1,23 @@ +{{ $id := default (printf "gallery-%d" (now.UnixNano)) (.Get "id") }} +