Skip to content

fix: hero-section-slider #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
oostap1985 wants to merge 5 commits into
base: main
Choose a base branch
from
+95 −37
Open

fix: hero-section-slider #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f7d6914
fix: hero-section-slider
oostap1985 Aug 2, 2026
9ff58f6
fix: art-slider (quotation marks)
oostap1985 Aug 2, 2026
c2f4a2c
fix: art-slider and bacground code block
oostap1985 Aug 3, 2026
daf172b
fix: slider and code block and card Handwritten CSS
oostap1985 Aug 3, 2026
7314b29
fix comments after review
oostap1985 Aug 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions src/assets/script/art-slider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -20,18 +20,23 @@ 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
});

this.querySelector('.swiper-wrapper').classList.remove('carousel-track');
this.querySelectorAll('.swiper-slide').forEach(s => s.classList.remove('carousel-slide'));
this.querySelector('.prev')?.classList.remove('O0', 'Vs-h');

@mr150 mr150 Aug 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Для изменения утилит при наличии js лучше использовать соответствующий state: nojs

@oostap1985 oostap1985 Aug 4, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Сделал так:
@use 'mlut/tools' as ml with (
$jit: (
'output': 'dist/assets/style/style.min.css',
'content': ['src//*.ejs','src//.json','src/assets/script/**/.js'],
'minify': true
),
$utils-config: (
'states': (
'custom': (
'nojs': '.no-js',
)
)
)
);

@include ml.apply(('.no-js_O0', '.no-js_Vs-h'), (), true);

В разметке утилиты заменил на -nojs_O0 -nojs_Vs-h
В итоге, все ломается, вся страница. Где-то ошибаюсь?

this.querySelector('.next')?.classList.remove('O0', 'Vs-h');
}

}

customElements.define('arts-slider', ArtsSlider);
customElements.define('arts-slider', ArtsSlider);
22 changes: 21 additions & 1 deletion src/assets/script/theme-switcher.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -33,6 +34,7 @@ class ThemeSwitcher extends HTMLElement {
localStorage.setItem('mlut-theme', theme);
this.applyTheme(theme);
this._updateActiveButton(theme);
this._updateHighlightTheme(theme);
}

_updateActiveButton(theme) {
Expand All @@ -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);
76 changes: 54 additions & 22 deletions src/assets/style/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,42 +252,74 @@ 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;
padding-left: 16px;
scrollbar-width: thin;
scrollbar-color: var(--ml-brand) transparent;
}

.carousel-slide {
flex: 0 0 100%;
scroll-snap-align: center;
}

/* Chrome/Safari/Edge */
.carousel-track::-webkit-scrollbar {
height: 4px;
}

.carousel-track::-webkit-scrollbar-track {
background: transparent;
}

.carousel-track::-webkit-scrollbar-thumb {
background: var(--ml-brand);
border-radius: 4px;
}
16 changes: 8 additions & 8 deletions src/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ area: 'main'

<div class="Ps D-f Fld-c Ai-c Jc-c Gap2u Bgc-tp W100p md_W604 md_Gap4u md_M14u;0;6u lg_W100p lg_M0 lg_Gc2 lg_Gr1/4 Zi2">
<arts-slider class="D-f Ai-fs Jc-c Fl1 W100p Gap6.5u md_Gap30u lg_Gap15u xl_Gap20u xxl_Gap25u">
<button class="prev W48 Apcr1 As-c Bgc-tp Bd-n P0 Cs">
<button class="prev W48 Apcr1 As-c Bgc-tp Bd-n P0 Cs O0 Vs-h">
<svg class="Tf -Rt180d C-$brand C-$brand500_h C-$brand200_a Ts-$shortTs sm_W5.5u sm_H9u" width="17" height="29">
<use href="/assets/img/icons.svg#arrow-slider"></use>
</svg>
Expand All @@ -72,20 +72,20 @@ area: 'main'
<use href="/assets/img/decor.svg#squareDot"></use>
</svg>
<div class="W100p P0 md_P2u md_Bgc-$core400 md_Bxsd0;0;0;0.5u;$core900">
<div class="swiper W100p Bgc-tp Apcr1">
<div class="swiper-wrapper">
<div class="swiper W100p Bgc-tp Apcr1 Ov-h">
<div class="swiper-wrapper carousel-track">
<% if (filteredArts.length) { %>
<% for (let art of filteredArts) { %>
<div class="swiper-slide"><%- include(`./arts/${art.artId}.ejs`) %></div>
<div class="swiper-slide carousel-slide"><%- include(`./arts/${art.artId}.ejs`) %></div>
<% } %>
<% } else { %>
<div class="swiper-slide">there are no arts</div>
<div class="swiper-slide carousel-slide">there are no arts</div>
<% } %>
</div>
</div>
</div>
</div>
<button class="next W48 Apcr1 As-c Bgc-tp Bd-n P0 Cs">
<button class="next W48 Apcr1 As-c Bgc-tp Bd-n P0 Cs O0 Vs-h">
<svg class="C-$brand C-$brand500_h C-$brand200_a Ts-$shortTs sm_W5.5u sm_H9u" width="17" height="29">
<use href="/assets/img/icons.svg#arrow-slider"></use>
</svg>
Expand Down Expand Up @@ -332,7 +332,7 @@ area: 'main'
<%# Compactness comparison%>

<h3 class="D-n xl_D M11u;0;0 Fns4u Fnw600 Fnst-n Lnh100p Lts0 C-$accent900 Txa-c Ps Zi1">See how much more code you need in handwritten CSS to reproduce the same styles written in mlut</h3>
<h3 class="D xl_D-n M8u;0;0 Fns4u Fnw600 Fnst-n Lnh100p Lts0 C-$accent900 Txa-c">Almost all power of CSS in one utility class</h3>
<h3 class="D xl_D-n M8u;0;0 Fns4u Fnw600 Fnst-n Lnh100p Lts0 C-$accent900 Txa-c Ps Zi1">Almost all power of CSS in one utility class</h3>
<div class="D-f Fld-c Ai-c Gap16 M4.5u;0;0 P4u;3u W100p Bdrd8 Bgc-$core810 -Gdl90d,$brand50;0p,$brand100;100p md_Fld-r md_Ai-st md_Jc-c md_Gap20 md_P4u;0 md_Bgc-tp md_Bgi-n xl_M26;0;0 xl_Gap32 xl_P0 Ps Zi1">

<%# Handwritten CSS card%>
Expand Down Expand Up @@ -369,7 +369,7 @@ area: 'main'
<use href="/assets/img/decor.svg#squareDot"></use>
</svg>
</div>
<div class="D-n md_D Ps-a W66p Apcr2/3 B0 L50p Tf -Tr-50p;0 <%= comparisonCss.gradientEclipse %> <%= comparisonCss.gradientRectangle %>"></div>
<div class="D-n md_D Ps-a W98p Apcr2/3 B0 L50p Tf -Tr-50p;0 <%= comparisonCss.gradientEclipse %> <%= comparisonCss.gradientRectangle %>"></div>
<div class="D-n xl_D Ps-a T-4p R9p W384 Apcr1">
<div class="Ps-a T50p L50p Tf -Tr-50p;-70p W52p Apcr1 Bd4;s;#16348C Bdrd100p <%= decorCss.twoCircleTop %>"></div>
<div class="Ps-a T55p L50p W69 Apcr1 Bdrd100p Bd8;s;#394EB6 <%= decorCss.circle %> T15p_af L-47p_af Bgc-$brand_af"></div>
Expand Down
3 changes: 2 additions & 1 deletion src/layouts/base.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ if (it.area === "main"){
<meta name="color-scheme" content="dark light">
<link rel="stylesheet" href="/assets/style/style.min.css">
<link rel="icon" href="/assets/img/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css">
<link id="hljs-light" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css">
<link id="hljs-dark" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
Expand Down