feat(main-page): redesign using new components by oostap1985 · Pull Request #24 · mlutcss/website

oostap1985 · 2026-06-01T16:12:40Z

add redesigned base layout and includes
add new navigation and external links data
add art slider script
update arts JSON and templates (exploding-head, mushroom)
add new icons and fonts
update global styles

- add redesigned base layout and includes - add new navigation and external links data - add art slider script - update arts JSON and templates (exploding-head, mushroom) - add new icons and fonts - update global styles

mr150 · 2026-06-02T12:48:48Z

Нет смысла создавать подобные отдельный файлы на редизайн, может только в некоторых местах. Тут просто ссылки: их набор никак не влияет

mr150 · 2026-06-02T12:51:01Z

+		contentContainer: "D-f Jc-c Ai-c"
+	}
+
+	href=`href=${it.url}`


Тут что-то странное: переменная без let/const

Исправил

mr150 · 2026-06-02T12:53:41Z

 	--ml-blueGray:rgb(236, 240, 246,0.5);
 	--ml-gray200:#d1d5db;
 	--ml-gray350:#cacacaa0;
+	// redesign


В таких переменных нет смысла - меняем существующией

Исправил

mr150 · 2026-06-02T12:54:59Z

Пока не понял, зачем новый базовый шаблон

Отдельный базовый шаблон не нужен. Можно просто пока часть старых переменных оставить, чтобы другие страницы совсем не сломались

mr150 · 2026-06-02T12:57:38Z

Шрифты лучше с google fonts подключать, по крайне мере пока

Исправил

mr150 · 2026-06-02T12:59:25Z

  }
 %>
-<div class="Ctnt-s M7u;a;0 H100p Apcr1 Plci-c;c Plcc-c D-f -ExplodingOrangeA#ee980d -ExplodingOrangeB#f8c829 -ExplodingBrownA#662800 -ExplodingBrownB#6f2810 -ExplodingBrownC#9c2a00 -ExplodingBrownD#934800 -ExplodingBrownE#9b3c18 -ExplodingBrownF#a24b0b -ExplodingBrownG#f7ae48 -ExplodingBrownH#d2a55a -ExplodingBrownI#efd3ac">
+<!-- изменил у первого div M7u;a;0 -->


Комменты для ревьювера надо тут писать, а не в коде)

Исправил)

mr150 · 2026-06-02T14:54:40Z

@@ -0,0 +1,28 @@
+<%
+	 const css = {
+		buttonShape:"-Sz100p D-f Jc-c Ai-c P10 Fns16 Bdrd8 Ts-$shortTs Bd1;s;$brand",


Pixel perfect нам не нужен, поэтому в большинстве мест лучше u использовать для размеров

Исправил

mr150 · 2026-06-02T14:55:54Z

+<%
+	 const css = {
+		buttonShape:"-Sz100p D-f Jc-c Ai-c P10 Fns16 Bdrd8 Ts-$shortTs Bd1;s;$brand",
+		contentContainer: "D-f Jc-c Ai-c"


Не используется

Исправил

mr150 · 2026-06-02T14:56:22Z

+%>
+<<%= it.tag %> <%= href %>
+	class="btn <%= css.buttonShape %> <%= css.buttonColors %>">
+		<span class="<%= css.span %>">


Зачем этот span?

Исправил

mr150 · 2026-06-02T14:58:26Z

+
+<a
+	href="<%= it.link %>"
+	alt="Link to <%= it.name %>"


Ссылке не нужен alt

Исправил

mr150 · 2026-06-02T15:00:17Z

+   :c:+_Bgc-$brand :c:+_Bdc-$brand :c:+_Bgc-$reAccent900_af,b :c:+_Bxsd0;1.5u;0;0;$reAccent900_af :c:+_Bdc-n">
+</label>
+
+<label id="overlay" for="menu-toggle"


2 лейбла на 1 инпут - это что-то странное

Не исправлено

mr150 · 2026-06-02T15:00:49Z

Меняем основной хедер, отдельный шаблон не нужен

На мобильном не соответствует макету + логотип надо чуть побольше: 64px хотя бы

Исправил

mr150 · 2026-06-02T15:02:11Z

+<header class=" D-f Jc-sb Ai-c P15u;4u;2u md_P0;5.5p Bgc-$core950 Bcf -Blr0.4 Ps-f H-$headerH W100p C-$headerC Zi20">
+
+    <%# Logo %>
+	<div class="W40 H16 md_W83 md_H34">


Это наоборот делается: указываем размеры изображения, от которых зависит контейнер

Ширину логотипа сделать 116, высоту: auto

Исправил

mr150 · 2026-06-02T15:04:51Z

+    <%# Logo %>
+	<div class="W40 H16 md_W83 md_H34">
+		<a href="/" id="header-logo" class="D-f Jc-c Ai-c -Sz100p <%= it.cssHeaderLogoVisibility %> Ts-O;$shortTs">
+			<svg class="-Sz100p" alt="mlut logo">


Если логотип не перекрашивается, то его лучше просто img делать. И посмотри как сейчас href у лого реализован - надо так же

Исправил

mr150 · 2026-06-02T15:05:34Z

+%>
+
+<header class=" D-f Jc-sb Ai-c P15u;4u;2u md_P0;5.5p Bgc-$core950 Bcf -Blr0.4 Ps-f H-$headerH W100p C-$headerC Zi20">
+


Много пустых строк - не надо так. Пусть будут только между крупными блоками

mr150 · 2026-06-02T15:08:20Z

+						</li>
+					<% }%>
+				</ul>
+				<script type="module">


Это легаси - убираем)

mr150 · 2026-06-02T15:09:05Z

+  document.head.appendChild(link);
+}
+
+class ArtsSliderComponent extends HTMLElement {


Тогда уж просто ArtsSlider

Исправил

mr150 · 2026-06-02T15:11:58Z

+    <div class="D-f Fld-c Ai-c Gap4u W100p md_W80p md_Mxw350 lg_Mxw504">
+        <div class="<%= heroCSS.gradient %> md_D-n"></div>
+
+        <h1 class="D Fnf-SNPro Fns6u Fnw-b Lnh100p Lts0 M3.5u;0 Txt C-$brand Ps Zi2 md_D-n">Make CSS exciting again!</h1>


Это не h1. Посмотри, какая сейчас разметка в hero секции

И отступы (margin) по дефолту только с 1 стороны делаем: низ или верх

Исправил

mr150 · 2026-06-02T15:13:33Z

+		    <use href="/assets/img/icons.svg#twoTriangle"></use>
+	    </svg>
+        <div class="D-n md_D-f md_Fld-c Gap8">
+            <h1 class="Fnf-SNPro Fns48 M17;0 Fnw-b Lnh100p Lts0 Txt C-$brand">Make CSS exciting again!</h1>


Надо попробовать сверстать без дублирования контента. Такое только в крайнем случае делается

mr150 · 2026-06-02T15:56:21Z

+    <div class="D-n Ps-a W80p H150p T-195 L50p Tf -Tr-50p;0 <%= heroCSS.dradientDescTop %> <%= heroCSS.dradientDescBot %> md_D-f">
+        <div class="Ps-a W80p Apcr1 T0 L10p Bdrd100p -Gdl180d,$reCore400;0,$reCore450;100p Ft -Blr100"></div>
+    </div>
+    <div class="D-f Fld-c Ai-c Gap4u W100p md_W80p md_Mxw350 lg_Mxw504">


Кажется, что тут часть декора можно псевдоэлементами сделать

mr150 · 2026-06-02T15:57:02Z

+            <arts-slider class="D-f Ai-fs Fl1 W100p">
+                <button class="prev W48 Apcr1 Mr40 As-c Bgc-tp Bd-n P0 Cs lg_Mr80">
+                    <svg class="Tf -Rt180d C-$brand C-$reBrand500_h C-$reBrand600_a Ts-$shortTs" width="17" height="29">
+		                <use href="/assets/img/icons.svg#arrow-slider"></use>


Для декоративных svg лучше отдельный спрайт сделать

Сделал

mr150 · 2026-06-02T16:03:38Z

+	                </svg>
+                </button>
+            </arts-slider>
+            <span class="Fns16 Fnw-l Lnh150p Lts0 C-$reAccent850 md_Ps-a md_L50p md_B-43 md_Tf md_-Tr-50p;0">Yes, this is  CSS</span>


Suggested change

<span class="Fns16 Fnw-l Lnh150p Lts0 C-$reAccent850 md_Ps-a md_L50p md_B-43 md_Tf md_-Tr-50p;0">Yes, this is CSS</span>

<span class="Fns16 Fnw-l Lnh150p Lts0 C-$reAccent850 md_Ps-a md_L50p md_B-43 md_Tf md_-Tr-50p;0">Yes, this is pure CSS</span>

mr150 · 2026-06-02T16:06:50Z

+
+        <h1 class="D Fnf-SNPro Fns6u Fnw-b Lnh100p Lts0 M3.5u;0 Txt C-$brand Ps Zi2 md_D-n">Make CSS exciting again!</h1>
+        <div class="D-f Fld-c Ai-c Gap2u Bgc-tp W100p Ps Zi2">
+            <arts-slider class="D-f Ai-fs Fl1 W100p">


Декоративные элементы лучше не в сам art-slider, а в контейнер выше

Исправил

mr150

Чуть позже будут еще комменты

mr150 · 2026-06-03T11:43:19Z

+
+        <%- include('./burger.ejs') %>
+
+        <div class="Bgc-$core950 Ps-a R0 T-$headerH Ts-$longTs Tf -Trx101p Bd1;s;$brand Bdr-n Bdtlr3u Bdblr3u Mxw50u ^burger:c:~_-Trx0 W50vw P10u;0 md_All-ust @:h<420_P3u;0">


@:h<420 странное решение, при чем тут высота?

md_All-ust тоже выглядит сомнительно

mr150 · 2026-06-03T12:01:12Z

+                    </div>
+                </div>
+                <button class="next W48 Apcr1 Ml40 As-c Bgc-tp Bd-n P0 Cs lg_Ml80">
+                    <svg class="C-$brand C-$reBrand500_h C-$reBrand600_a Ts-$shortTs" width="17" height="29">


Кнопки надо чуть покрупнее на десктопе, а то они местами сливаются с декором

Исправил

mr150 · 2026-06-03T12:17:36Z

+                    <% for (let decor of Object.values(decorCSSArts)) { %>
+                        <div class="D-n md_D <%= decor %>"></div>
+                    <% } %>
+                    <div class="W100p P0 Bxz-bb md_P16 md_Bdrd1u md_Bgc-$artFrameColorSmall md_Bxsd0;0;0;0.5u;$artFrameBorderSmall">


Почему тут рамка через box-shadow, а не border?

Bxz-bb - нет смысла, он уже у всех стоит. border-radius тут у рамки не нужен. padding пусть 2u будет, больше не надо

Border "толстый" и забирал много пространства внутри блока, поэтому сделал через box-shadow.

mr150 · 2026-07-06T02:19:02Z

-	} else {
-		href = ''
-	}
+  const isLink = it.url && it.url !== '#0' && it.url !== '';


it.url !== '' - лишнее, ведь пустая строка и так false

mr150 · 2026-07-06T03:34:52Z

Не самое подходящее название каталога. Лучше что-то типа embedded

mr150 · 2026-07-06T03:35:35Z

+            </div>
+            <div class="D-f Ai-c Jc-c H100p P2.5u Bdrd8 Bgc-$core805">
+                <code class="Fnf-Fira;Code Fns3u Fnst-n Fnw400 Lnh150p Lts0 C-$tertiary750">
+                    <span class=""><span class="C#00ac4d">@:ah</span>_<span class="C#f04">0</span>1_<span class="C#9e54ff">h</span></span>


Пустой class нет смысла оставлять

mr150 · 2026-07-06T03:43:19Z

  </div>

-  <a href="/redesign-preview/#hero-section" class="D-n md_D-f Jc-c Ai-c <%= it.cssHeaderLogoVisibility %> Ts-O;$shortTs">
+  <a href="/redesign-preview/#hero-section" class="D-n md_D-f Jc-c Ai-c <%= it.cssHeaderLogoVisibility %> Ts-O;0.3s md_Gc1 md_Gr1/3 md_As-st">


Чтобы каждый раз не указывать duration для разных свойств, используй -Ts

mr150 · 2026-07-06T03:43:48Z

-        <div class="P10;12 xl_P10;20">
+  <div class="D-f Fld-c Jc-st Gap2u md_Gc2 md_Gr1/2 xl_Gap20">
+    <div class="D-f Ai-c Gap8 Flw md_Od2">
+        <div class="P10;10;10;12 xl_P10;10;10;20">


Зачем тут px?

mr150 · 2026-07-06T03:52:58Z

  connectedCallback() {
-    const buttons = this.querySelectorAll('[data-theme]');
-    if (buttons.length === 0) return;
+    this._activeClass = this.getAttribute("active-button") || '';


active-button - не самое подходящее название. Лучше что-то вроде active-btn-css, чтобы более единообразно. Где подразумеваются утилиты - упоминаем css в названии

mr150 · 2026-07-06T03:55:36Z

+    this._updateActiveButton(this._theme);

-    buttons.forEach(button => {
+    this._buttons.forEach(button => {


Давай тогда уж через делегирование событий сделаем, по красоте. Все равно ведь проверяем наличие атрибута

mr150 · 2026-07-06T03:56:54Z

+	}
+
+	connectedCallback() {
+		const activeClass = this.getAttribute("active-tab") || '';


Аналогичное замечание по неймингу атрибутов/переменных, где содержатсья утилиты

mr150 · 2026-07-06T04:05:05Z

+
+		if (!tabs.length || !extraSteps.length) return;
+
+		tabs.forEach((tab) => {


Тут тоже лучше на делегирование переделать, а то не очень выглядит: как цикл в цикле

mr150 · 2026-07-06T04:32:34Z

На десктопе стрелки надо больше: w32 и h48, как вариант

mr150 · 2026-07-06T04:34:15Z

Сейчас гриб тут все еще сломан. Лучше не показывать его на главной - не придется править

На sm экране арт может быть слишком огромный - нужна max-width. h1 получается слишком маленьким по сравнению с ним - не надо так

mr150 · 2026-07-06T04:35:41Z

+                </code>
+            </div>
+        </div>
+        <div class="W20 D-f Ai-c Jc-c Apcr1 Gc2 Js-c As-c">


Тут ширина лишняя - у svg задаем. И у него надо сделать: 28 и 22 размеры

mr150 · 2026-07-06T04:39:16Z

Этот бейдж не нужен - двух достаточно. Вместо него лучше копирайт перенести во вторую колонку футера, а то сейчас левая слишком большая

mr150 · 2026-07-06T04:41:02Z

+    class="W100p M5.5u;0;0 Zi1 xl_M50;0;0"
+    active-tab="Bgc-$activeTab_af"
+    >
+    <div class="W100p D-f Ai-e Jc-sb Gap4u Fns4u md_Gap6u xl_Gap16u">


Выделение по ховеру появилось - это хорошо, но все еще слишком мало заметное. Надо и текст тоже, чтобы менял цвет или подсвечивался как-то

mr150 · 2026-07-06T04:43:22Z

-    <div class="D-n xl_D Ps-a B5p R10p W250 H320">
-        <div class="Ps-a T33p L-5p W230 H135 Tf -Rt-25d -Gdl150d,tp;0;50p,$accent950;50p;100p"></div>
-        <div class="<%= decorCss.frameSquare %> T40p L59p Bgc-$core200 Bd10;s;$yellow500_af Tf -Rt57d"></div>
+    <div class="D-n xl_D Ps-a B7p R10p W18p H15p">


Размер на десктопе уже норм, но поднять надо еще чуть выше, чтобы почти наровне с нижней границей левой колонки

И этот арт можно показывать все время, пока 2 колонки есть, только уменьшать с размером экрана надо

mr150 · 2026-07-06T04:47:56Z

    }
 %>

 <%# Hero-section %>


На md разрешении абзац в секции выглядит странно: слишком большие вертикальные отступы

mr150 · 2026-07-06T04:49:21Z

 %>

-<header class=" D-f Jc-sb Ai-c Gap2u P15u;4u;2u md_P0;5.5p Bgc-$core950 Bcf -Blr0.4 Ps-f H-$headerH W100p C-$accent900 Zi20">
+<header class=" D-f Jc-sb Ai-c Gap3u P15u;4u;2u md_P0;5.5p Bgc-$core950 Bcf -Blr0.4 Ps-f H-$headerH W100p C-$accent900 Zi20">


На разрешении ниже md все еще остались лишние поля сверху

mr150 · 2026-07-06T04:51:20Z

Карточка Rich syntax уже хорошо выглядит, но надо доделать вот до такого состояния:

mr150 · 2026-07-08T19:32:49Z

Карточка Rich syntax уже хорошо выглядит, но надо доделать вот до такого состояния:

Размер шрифта кода уменьшился - надо такой же, как везде

mr150 · 2026-07-08T19:33:38Z

 	},
+	{
+		"link":"#0",
+		"text":"Showcase"


Это пока рано - потом добавим

mr150 · 2026-07-08T19:35:41Z

-    </svg>
-  </div>
+<footer id="footer" class="Ps D-f Fld-c Gap5u W100p P6u;4u Bgc-$core950 Fns4u Fnw400 Fnst-n Lnh100p Lts0 C-$accent900 md_D-g md_Gtc-a;1fr;a md_Clmg8u md_Rwg0 md_P8u xxl_P40;80">
+    <div class="Ps-a W35 Apcr1 T-3p L74p Bdrd100p Bd6;s;#16348C Zi1 <%= css.square %> md_D-n"></div>


Что с отступами произошло? В проекте же editorconfig есть - твой редактор должен его подхватывать. Там у нас табы

mr150 · 2026-07-08T19:37:08Z

-  }
+	constructor() {
+		super();
+		this._theme = localStorage.getItem("mlut-theme") || "auto";


Кавычки наоборот одинарные должны быть. Мне просто пока некогда было eslint настроить, ведь тут мало js

mr150 · 2026-07-08T19:46:31Z

-        </a>
-    </li>
-  </ul>
+    <ul class="D-f Fld-c Gap2u P0;12 M0 Lss-n md_P0 md_Gc3 md_Gr1/2 md_As-st lg_D-g lg_Gtc-mc;mc lg_Clmg8u">


xxl экране эти бейджи должны быть чуть побольше, примерно как сейчас в readme

mr150 · 2026-07-08T19:53:08Z

@@ -86,19 +86,19 @@ permalink: /redesign-preview/
                    </div>
                </div>
                <button class="next W48 Apcr1 As-c Bgc-tp Bd-n P0 Cs">


С уменьшением экрана, отступы между стрелок и рамкой должны уменьшаться (и сами стрелки тоже немного). При этом, отступ между левой и правой колонкой - хотя бы какой-то должен оставаться. Сейчас на lg экране его вообще нет

Gap между левой и правой колонкой сделал.
Также меняется расстояние между стрелками и рамкой, увеличивается размер стрелок при увеличении ширины просмотра.
На md разрешении немного увеличил размер рамки. Если не понравится, верну обратно.

mr150 · 2026-07-08T19:58:21Z

На малых экранах хедер все еще не исправлен

И мобильное меню не закрывается при переходи из него на секцию главной. А должно

oostap1985 · 2026-07-10T19:31:23Z

Привет. Пока некоторые старые файлы оставил. Позже удалю.
И еще: логику Ov-h для логотипа в header изменил так, что он исчезает, когда проскроллить до footer. Нужно ли это, пока не понимаю. Либо её вообще убрать. Сделаю как скажешь.

feat(main-page): redesign using new components

b81a3ff

- add redesigned base layout and includes - add new navigation and external links data - add art slider script - update arts JSON and templates (exploding-head, mushroom) - add new icons and fonts - update global styles

oostap1985 force-pushed the feat/65099006_main-page branch from e7e4a2e to b81a3ff Compare June 2, 2026 10:10

mr150 reviewed Jun 2, 2026

View reviewed changes

Comment thread src/_data/arts.json Outdated

mr150 reviewed Jun 2, 2026

View reviewed changes

mr150 requested changes Jun 2, 2026

View reviewed changes

mr150 reviewed Jun 3, 2026

View reviewed changes

mr150 reviewed Jul 6, 2026

View reviewed changes

mr150 requested changes Jul 6, 2026

View reviewed changes

fix: post-review corrections 2

44d5b0f

mr150 reviewed Jul 8, 2026

View reviewed changes

mr150 requested changes Jul 8, 2026

View reviewed changes

fix: post-review corrections 3

fb7f50e

		%>

		<header class=" D-f Jc-sb Ai-c P15u;4u;2u md_P0;5.5p Bgc-$core950 Bcf -Blr0.4 Ps-f H-$headerH W100p C-$headerC Zi20">

	<span class="Fns16 Fnw-l Lnh150p Lts0 C-$reAccent850 md_Ps-a md_L50p md_B-43 md_Tf md_-Tr-50p;0">Yes, this is CSS</span>
	<span class="Fns16 Fnw-l Lnh150p Lts0 C-$reAccent850 md_Ps-a md_L50p md_B-43 md_Tf md_-Tr-50p;0">Yes, this is pure CSS</span>


		<%- include('./burger.ejs') %>

		<div class="Bgc-$core950 Ps-a R0 T-$headerH Ts-$longTs Tf -Trx101p Bd1;s;$brand Bdr-n Bdtlr3u Bdblr3u Mxw50u ^burger:c:~_-Trx0 W50vw P10u;0 md_All-ust @:h<420_P3u;0">


		if (!tabs.length \|\| !extraSteps.length) return;

		tabs.forEach((tab) => {

Uh oh!

Conversation

oostap1985 commented Jun 1, 2026

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mr150 Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mr150 Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

mr150 Jun 2, 2026 •

edited

Loading

mr150 Jun 2, 2026 •

edited

Loading