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-06-03T12:22:13Z

+		                <use href="/assets/img/icons.svg#arrow-slider"></use>
+	                </svg>
+                </button>
+                <div class="Ps Fl1 P0 Mnw0 md_P44 md_Bdrd1u md_Bgc-$artFrameColor md_Bxsd0;0;0;2u;$artFrameBorder">


padding на десктопе пусть 32px будет

И на md ширине попробуй не целиком рамку, а просто какую-то подложку делать

Исправил

mr150 · 2026-06-03T12:24:54Z

+                        </div>
+                    </div>
+                </div>
+                <button class="next W48 Apcr1 Ml40 As-c Bgc-tp Bd-n P0 Cs lg_Ml80">


Отступ у кнопок на lg:xl лучше от вьюпорта сделать, а то на планшете слишком далеко от основной части

mr150 · 2026-06-03T12:33:40Z

+
+<%# Hero-section %>
+
+<div class="Ps D-f Fld-c Ai-c Mt-$headerH W100p P6u;4u;10u Bgc-$reCore800 Ov-h <%= heroCSS.vertical %> <%= heroCSS.horizontal %> md_Fld-rr md_Jc-sb md_P11p;5.5p;7p">


На md разрешении отступы и размеры недостаточно адаптированы - слишком большие. Как минимум, можно поля, часть отступов уменьшить и чуть размер заголовка

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

Еще раз: отдельные файлы с данными для редизайна не нужны

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

fix(main-page): corrections after comments

280bf58

mr150 reviewed Jun 8, 2026

View reviewed changes

		%>

		<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">


		<%# Hero-section %>

		<div class="Ps D-f Fld-c Ai-c Mt-$headerH W100p P6u;4u;10u Bgc-$reCore800 Ov-h <%= heroCSS.vertical %> <%= heroCSS.horizontal %> md_Fld-rr md_Jc-sb md_P11p;5.5p;7p">

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

Uh oh!

mr150 Jun 2, 2026 •

edited

Loading

mr150 Jun 2, 2026 •

edited

Loading