Skip to content

Commit e7e4a2e

Browse files
oostap1985oostap1985
committed
feat(main-page): redesign using new components
- 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
1 parent 5994fd0 commit e7e4a2e

18 files changed

Lines changed: 491 additions & 11 deletions

‎src/_data/arts.json‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,47 @@
11
[
22
{
33
"artId":"ghost",
4-
"bgColor":"Bgc-$artGhost"
4+
"bgColor":"Bgc-$artGhost",
5+
"showSlider": true
56
},
67
{
78
"artId":"flushed-emoji",
8-
"bgColor":"Bgc-$artFlushedEmoji"
9+
"bgColor":"Bgc-$artFlushedEmoji",
10+
"showSlider": true
911
},
1012
{
1113
"artId":"penrose-triangle",
12-
"bgColor":"Bgc-$artPenroseTriangle"
14+
"bgColor":"Bgc-$artPenroseTriangle",
15+
"showSlider": true
1316
},
1417
{
1518
"artId":"exploding-head",
16-
"bgColor":"Bgc-$artExplodingHead"
19+
"bgColor":"Bgc-$artExplodingHead",
20+
"showSlider": true
1721
},
1822
{
1923
"artId":"clown-emoji",
20-
"bgColor":"Bgc-$artClownEmoji"
24+
"bgColor":"Bgc-$artClownEmoji",
25+
"showSlider": true
2126
},
2227
{
2328
"artId":"mushroom",
24-
"bgColor":"Bgc-$artMushroom"
29+
"bgColor":"Bgc-$artMushroom",
30+
"showSlider": true
2531
},
2632
{
2733
"artId":"robot-hare",
28-
"bgColor":"Bgc-$artRobotHare"
34+
"bgColor":"Bgc-$artRobotHare",
35+
"showSlider": true
2936
},
3037
{
3138
"artId":"funny-cake",
32-
"bgColor":"Bgc-$artFunnyCake"
39+
"bgColor":"Bgc-$artFunnyCake",
40+
"showSlider": false
3341
},
3442
{
3543
"artId":"cat",
36-
"bgColor":"Bgc-$artCat"
44+
"bgColor":"Bgc-$artCat",
45+
"showSlider": false
3746
}
3847
]

‎src/_data/extLinksRedesign.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
[
2+
{
3+
"name":"X",
4+
"icon":"xcom",
5+
"link":"https://x.com/mlutcss"
6+
},
7+
{
8+
"name":"Github",
9+
"icon":"github",
10+
"link":"https://github.com/mlutcss/mlut"
11+
}
12+
]

‎src/_data/navLinksRedesign.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
[
2+
{
3+
"link":"#0",
4+
"text":"Features"
5+
},
6+
{
7+
"link":"/arts",
8+
"text":"Art"
9+
},
10+
{
11+
"link":"#0",
12+
"text":"Showcase"
13+
},
14+
{
15+
"link":"https://docs.mlut.style/",
16+
"text":"Docs"
17+
},
18+
{
19+
"link":"https://play.mlut.style/",
20+
"text":"Sandbox"
21+
}
22+
]

‎src/_includes/redesign/components/link-button.ejs‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<%
2+
const css = {
3+
buttonShape:"-Sz100p D-f Jc-c Ai-c P10 Fns16 Bdrd8 Ts-$shortTs Bd1;s;$brand",
4+
contentContainer: "D-f Jc-c Ai-c"
5+
}
6+
7+
href=`href=${it.url}`
8+
9+
if (it.variant === 'brand') {
10+
css.buttonColors = "Bgc-$brand Bgc-$reBrand500_h Bgc-$reBrand600_a";
11+
css.span = "Lnh100p Lts0 C#fff";
12+
} else {
13+
css.buttonColors = "Bgc-$btnBg100 Bgc-$btnBg200_h Bgc-$btnBg300_a";
14+
css.span = "Lnh100p Lts0 C#22141A";
15+
}
16+
17+
if (!it.tag) {
18+
it.tag = 'a'
19+
} else {
20+
href = ''
21+
}
22+
%>
23+
<<%= it.tag %> <%= href %>
24+
class="btn <%= css.buttonShape %> <%= css.buttonColors %>">
25+
<span class="<%= css.span %>">
26+
<%= it.text %>
27+
</span>
28+
</<%= it.tag %>>

‎src/_includes/redesign/components/sm-link.ejs‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<%
2+
if(it.name === "X") {
3+
css.width = "24",
4+
css.height = "24"
5+
} else {
6+
css.width = "26",
7+
css.height = "26"
8+
}
9+
%>
10+
11+
<a
12+
href="<%= it.link %>"
13+
alt="Link to <%= it.name %>"
14+
target="_blank"
15+
class="-Ctx-logo Ps -Sz32 D-f Jc-c Ai-c"
16+
>
17+
<svg
18+
class="Fi-$reAccent900 Fio1 ^logo:h:_Fi-$brand Ts-$shortTs"
19+
width="<%= css.width %>"
20+
height="<%= css.height %>"
21+
>
22+
<use href="/assets/img/icons.svg#<%= it.icon %>"></use>
23+
</svg>
24+
</a>

‎src/_includes/redesign/header/burger.ejs‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<input type="checkbox" id="menu-toggle" hidden
2+
class="-Ctx-burger Zi5 md_D-n">
3+
4+
<label for="menu-toggle"
5+
class="D md_D-n P1u Bd-n Bdrd1u H90p Apcr1 Ps-r Bgc-n Zi5 Tsd-$transD
6+
D_af,b Ct_af,b W4u_af,b H0.5u_af,b M0;0;1u_af,b Bgc-$reAccent900_af,b Zi10_af,b Bdrd2u_af,b
7+
Bxsd0;1.5u;0;0;$reAccent900_af
8+
:c:+_Bgc-$brand :c:+_Bdc-$brand :c:+_Bgc-$reAccent900_af,b :c:+_Bxsd0;1.5u;0;0;$reAccent900_af :c:+_Bdc-n">
9+
</label>
10+
11+
<label id="overlay" for="menu-toggle"
12+
class="Ps-a W100vw Tsd-$transD H100vh T0 R0 D-n Bgc-n :c:~_D :c:~_Bgc#000*60p md_D-n">
13+
</label>

‎src/_includes/redesign/header/header.ejs‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<%
2+
const css = {
3+
navLinkDesktop: "md_Txd-n md_C-$brand_h Ts-$shortTs",
4+
navLinkMobile: "C-$reAccent900 Txd-n C-$brand_a Pb2u Bdb1;s;$brand md_Bdb-n",
5+
navLi: "md_Pb0 md_Bd-n md_M10"
6+
}
7+
%>
8+
9+
<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">
10+
11+
<%# Logo %>
12+
<div class="W40 H16 md_W83 md_H34">
13+
<a href="/" id="header-logo" class="D-f Jc-c Ai-c -Sz100p <%= it.cssHeaderLogoVisibility %> Ts-O;$shortTs">
14+
<svg class="-Sz100p" alt="mlut logo">
15+
<use href="/assets/img/icons.svg#header-logo"></use>
16+
</svg>
17+
</a>
18+
</div>
19+
20+
<%# Menu %>
21+
<div class="D-f Fld-r Jc-fe md_D-f md_Jc-e md_Gap8u md_Fns-$headerFns">
22+
23+
<%- include('./burger.ejs') %>
24+
25+
<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">
26+
<nav class="M0;0;9u md_M0">
27+
<h2 class="P0;5u M0;0;7u Txa-r C-$brand md_D-n @:h<420_M0;0;4u"> Menu </h2>
28+
<ul id="nav-menu" class="C-$reAccent900 H40p D-f Jc-c Fld-c Gap6u P0;5u Txa-r Fns4u Lsst-n M0 md_Fld-r md_Jc-sb md_P0 md_H100p md_Gap8u md_Txa-c md_Fns3u @:h<420:w<gMd_Fld-r @:h<420:w<gMd_Flw-w @:h<420:w<gMd_Jc-fe">
29+
<% for (let navLink of it.navLinksRedesign) {%>
30+
<li class=" <%= css.navLi %>">
31+
<a href="<%= navLink.link %>" class="<%= css.navLinkMobile %> <%= css.navLinkDesktop %>">
32+
<%= navLink.text %>
33+
</a>
34+
</li>
35+
<% }%>
36+
</ul>
37+
<script type="module">
38+
if(window.location.href.includes('productradar')) {
39+
const navMenu = document.getElementById('nav-menu');
40+
const newItem = navMenu.lastElementChild.cloneNode(true);
41+
const link = newItem.firstElementChild;
42+
43+
link.textContent = 'Вебинар';
44+
link.href = 'https://forms.gle/GjneTZGWHkeCavev5';
45+
link.setAttribute('target', 'blank');
46+
link.classList.add('Fnw-b');
47+
navMenu.appendChild(newItem);
48+
}
49+
</script>
50+
</nav>
51+
52+
<%# External links %>
53+
<div>
54+
<h2 class="P0;5u Txa-r M0;0;3u C-$brand md_D-n @:h<420_M0;0;4u"> Find us</h2>
55+
<div class="D-f Fld-r Jc-fe Ai-c Gap3u P0;5u H8u md_D-n">
56+
<% for (let extLink of it.extLinksRedesign) {%>
57+
<%- include('../components/sm-link.ejs',{
58+
icon: `${extLink.icon}`,
59+
link: `${extLink.link}`,
60+
name: `${extLink.name}`
61+
}) %>
62+
<% }%>
63+
</div>
64+
</div>
65+
</div>
66+
67+
<%# Desktop links %>
68+
<div class="Ai-c Jc-sb P1u;2.5u D-n md_D-f md_Gap8u md_P0">
69+
<% for (let extLink of it.extLinksRedesign) { %>
70+
<%- include('../components/sm-link.ejs',{
71+
icon: `${extLink.icon}`,
72+
link: `${extLink.link}`,
73+
name: `${extLink.name}`
74+
}) %>
75+
<% } %>
76+
</div>
77+
</div>
78+
79+
</header>

‎src/arts/exploding-head.ejs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
artLayer: "W100p Apcr1 Bdrd100p Ps-a"
1010
}
1111
%>
12-
<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">
12+
<!-- изменил у первого div M7u;a;0 -->
13+
<div class="Ctnt-s H100p Apcr1 M1u;a;0 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">
1314
<!-- Head -->
1415
<div class="Apcr1 Bdrd100p @c:apcr>=1/1_H80p @c:apcr<=1/1_W80p M-a Ps-r">
1516
<!-- Back of the head parts -->

‎src/arts/mushroom.ejs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
<div class="-Sz100p Ctnt-s D-f Jc-c Ai-c -MushroomBrown#ad511c -MushroomRed#fc0522 -MushroomBlue#51dbc4 -MushroomBody#fffac7 -MushroomGreen#819e49 -MushroomDarkGreen#072b09 -MushroomBlack#000 -MushroomPink#e57e8a -MushroomWhite#fff -MushroomYellow#ece74f Ov-h">
1414
<!-- Frame -->
15-
<div class="@c:apcr>=1_H85p @c:apcr<=1_W85p Apcr1 Ps-r Bd1u;s;$mushroomBlack -Gdl0d,$mushroomGreen;40p,$mushroomBlack;40p;41p,$mushroomBlue;41p;100p">
15+
<div class="@c:apcr>=1_H80p @c:apcr<=1_W80p Apcr1 Ps-r Bd1u;s;$mushroomBlack -Gdl0d,$mushroomGreen;40p,$mushroomBlack;40p;41p,$mushroomBlue;41p;100p">
1616
<div class="<%= css.mushroomShadow %>"></div>
1717
<!-- mushroom body -->
1818
<div class="Ps-a T27p L12p W70p Apcr3/2 Bd1u;s;$mushroomBlack Bdt-tp Bdrd40p;60p;40p;60p/65p;65p;35p;35p Bgc-$mushroomBody Bxsd-i;-1u;-3u;5u;2u;$mushroomBrown">

‎src/assets/img/icons.svg‎

Lines changed: 16 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)