diff --git a/src/assets/script/art-slider.js b/src/assets/script/art-slider.js index b1e7d79..0a3b704 100644 --- a/src/assets/script/art-slider.js +++ b/src/assets/script/art-slider.js @@ -2,7 +2,7 @@ import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs const swiperCss = 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css'; if (!document.querySelector(`link[href*="swiper-bundle.min.css"]`)) { - const link = document.createElement('link'); + const link = document.createElement("link"); link.rel = 'stylesheet'; link.href = swiperCss; document.head.appendChild(link); @@ -20,18 +20,24 @@ class ArtsSlider extends HTMLElement { this.swiper = new Swiper(swiperContainer, { navigation: { nextEl: '.next', - prevEl: '.prev' + prevEl: '.prev', }, loop: true, speed: 300, - effect: 'fade', - fadeEffect: { crossFade: true }, + effect: 'slide', simulateTouch: false, allowTouchMove: true, autoplay: true, - grabCursor: false + grabCursor: false, + on: { + init: () => { + this.querySelector('.swiper-wrapper')?.classList.remove('carousel-track'); + this.querySelectorAll('.swiper-slide').forEach((s) => s.classList.remove('carousel-slide')); + this.classList.remove('no-js'); + }, + }, }); } } -customElements.define('arts-slider', ArtsSlider); \ No newline at end of file +customElements.define('arts-slider', ArtsSlider); diff --git a/src/assets/script/theme-switcher.js b/src/assets/script/theme-switcher.js index 2671c5c..1076a98 100644 --- a/src/assets/script/theme-switcher.js +++ b/src/assets/script/theme-switcher.js @@ -11,8 +11,9 @@ class ThemeSwitcher extends HTMLElement { if (this._buttons.length === 0) return; this._updateActiveButton(this._theme); + this._updateHighlightTheme(this._theme); - this.addEventListener('click', (e) => { + this.addEventListener("click", (e) => { const button = e.target.closest('[data-theme]'); if (!button || !button.dataset.theme) return; this.setTheme(button.dataset.theme); @@ -33,6 +34,7 @@ class ThemeSwitcher extends HTMLElement { localStorage.setItem('mlut-theme', theme); this.applyTheme(theme); this._updateActiveButton(theme); + this._updateHighlightTheme(theme); } _updateActiveButton(theme) { @@ -42,6 +44,24 @@ class ThemeSwitcher extends HTMLElement { btn.disabled = isActive; }); } + + _updateHighlightTheme(theme) { + const effectiveTheme = (theme === 'auto') + ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') + : theme; + + const lightLink = document.getElementById('hljs-light'); + const darkLink = document.getElementById('hljs-dark'); + if (!lightLink || !darkLink) return; + + if (effectiveTheme === 'dark') { + lightLink.setAttribute('media', 'not all'); + darkLink.setAttribute('media', 'all'); + } else { + lightLink.setAttribute('media', 'all'); + darkLink.setAttribute('media', 'not all'); + } + } } customElements.define('theme-switcher', ThemeSwitcher); diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss index f1a538e..36bf08a 100644 --- a/src/assets/style/style.scss +++ b/src/assets/style/style.scss @@ -252,42 +252,58 @@ html, .theme-dark { art-panel[size], .arts-masonry-cta { - min-width: 0; + min-width: 0; } @media (min-width: 768px) { - art-panel[size], - .arts-masonry-cta { - grid-column: var(--masonry-column-md); - grid-row: var(--masonry-row-md); - } + art-panel[size], + .arts-masonry-cta { + grid-column: var(--masonry-column-md); + grid-row: var(--masonry-row-md); + } } @media (min-width: 1200px) { - art-panel[size], - .arts-masonry-cta { - grid-column: var(--masonry-column-xl); - grid-row: var(--masonry-row-xl); - } + art-panel[size], + .arts-masonry-cta { + grid-column: var(--masonry-column-xl); + grid-row: var(--masonry-row-xl); + } } art-panel[size], .arts-masonry-cta { - min-width: 0; + min-width: 0; } @media (min-width: 768px) { - art-panel[size], - .arts-masonry-cta { - grid-column: var(--masonry-column-md); - grid-row: var(--masonry-row-md); - } + art-panel[size], + .arts-masonry-cta { + grid-column: var(--masonry-column-md); + grid-row: var(--masonry-row-md); + } } @media (min-width: 1200px) { - art-panel[size], - .arts-masonry-cta { - grid-column: var(--masonry-column-xl); - grid-row: var(--masonry-row-xl); - } + art-panel[size], + .arts-masonry-cta { + grid-column: var(--masonry-column-xl); + grid-row: var(--masonry-row-xl); + } +} + +.carousel-track { + display: flex; + gap: 20px; + overflow-x: auto; + overflow-y: hidden; + scroll-snap-type: x mandatory; + scroll-behavior: smooth; + -webkit-overflow-scrolling: touch; + height: 100%;; +} + +.carousel-slide { + flex: 0 0 100%; + scroll-snap-align: center; } diff --git a/src/index.ejs b/src/index.ejs index 1483f48..f8b974b 100644 --- a/src/index.ejs +++ b/src/index.ejs @@ -58,8 +58,8 @@ area: 'main'
- -