Skip to content

Commit fb22bc3

Browse files
mr150mr150
authored
Merge pull request #10 from mlutcss/refactor/update-content
Update content on the main page
2 parents 57f82e8 + b484334 commit fb22bc3

File tree

3 files changed

+52
-54
lines changed

3 files changed

+52
-54
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ jobs:
1212
steps:
1313
- name: Checkout Git repository
1414
uses: actions/checkout@v2
15-
- name: Set up Node.js
15+
- name: Set up Node.js
1616
uses: actions/setup-node@v1
1717
with:
1818
node-version: 20
@@ -21,7 +21,8 @@ jobs:
2121
- name: Build
2222
run: npm run build
2323
- name: Deploy to GH Pages
24-
uses: peaceiris/actions-gh-pages@v3
24+
uses: peaceiris/actions-gh-pages@v3
2525
with:
2626
github_token: ${{ secrets.GITHUB_TOKEN }}
27-
publish_dir: 'dist'
27+
publish_dir: 'dist'
28+
cname: 'mlut.style'

‎src/_includes/footer.ejs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<footer class="D-f Jc-c Ai-c W100p Bgc-$core850 P8u;0" >
1212
<div class="W100p sm_W60p md_W100p C-$gray200 D-f Fld-r Flw-w Jc-c md_P0;8u">
1313
<div class="W100p md_W25p P0;5u ">
14-
<p class="M0;0;5u Fns4u lg_Fns5u xl_Fns6u P0;1u">
14+
<p class="M0;0;5u Fns4u lg_Fns5u xl_Fns6u P0;1u md_Mxw16ch">
1515
<span class="Fnw-b C-$brand"> mlut </span> - make CSS exciting again!
1616
</p>
1717
</div>
@@ -64,4 +64,4 @@
6464
</p>
6565
</div>
6666
</div>
67-
</footer>
67+
</footer>

‎src/index.ejs‎

Lines changed: 46 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ area: 'main'
1919
alt="mlut logo" src="/assets/img/logo.png">
2020

2121

22-
<h1 class="Txa-c C-$accent900 Fns8u Lnh1.1 <%= heroCSS.universalMargin %> P0;1u md_Fns10u">
23-
Make CSS exciting again!
22+
<h1 class="Txa-c C-$accent900 Fns8u Lnh1.1 <%= heroCSS.universalMargin %> P0;1u Mxw22.5ch md_Fns10u">
23+
The best CSS framework for creative coding
2424
</h1>
2525

26-
<p class="C-$accent850 <%= heroCSS.universalMargin %> P0;2u Mxw750 Txa-c Fns4.4u
27-
md_Fns5.2u ">
28-
Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexity
29-
</p>
26+
<em class="D C-$accent850 <%= heroCSS.universalMargin %> P0;2u Mxw-gSm Txa-c Fns4.4u
27+
md_Fns5.2u">
28+
Make CSS exciting again!
29+
</em>
3030

3131
<div class="D-f Fld-r W100p Flw-w Jc-c Gap3u <%= heroCSS.universalMargin %> P0;5u">
3232

@@ -43,16 +43,47 @@ area: 'main'
4343
</div>
4444
</div>
4545

46+
<%# Arts section %>
47+
48+
<section id="arts" class="Bgc-$core550 W100p">
49+
<div class="D-f M-a Jc-c Ai-c Fld-c P16u;0 wrapper">
50+
<h2 class="<%= sectionHeader %> C-$accent900">
51+
When creativity meets productivity
52+
</h2>
53+
54+
<p class="C-$accent850 Txa-c P0;3u M0;0;7u Mxw47ch">
55+
Yes, you can create pure CSS art using utility classes! With mlut it is possible.
56+
</p>
57+
58+
<div class="W100p M0;0;2u Gap5u D-f Jc-c Ai-c Fld-r Flw-w">
59+
60+
<%# arts %>
61+
62+
<div class="W90p Mxw100u sm_W55p -Ctx-art -S105p_h Tf_h Tsd-$longTs Ov-h">
63+
<%- include(`./_includes/components/arts/exploding-head.ejs`)%>
64+
</div>
65+
66+
</div>
67+
68+
<div class=" Fns3.2u W100p Mxw62u H7u">
69+
<%- include('./_includes/components/link-button.ejs',{
70+
url: "/arts",
71+
text: "More arts",
72+
}) %>
73+
</div>
74+
75+
</section>
76+
4677
<%# Features section %>
4778

48-
<section id="features" class="Bgc-$core550 C-$accent900">
79+
<section id="features" class="Bgc-$core750 C-$accent900">
4980

50-
<div class="D-f M-a Jc-c Ai-c Fld-c Pt20u Pb12u wrapper">
81+
<div class="D-f M-a Jc-c Ai-c Fld-c Pt16u Pb12u wrapper">
5182
<h2 class="<%= sectionHeader %>">
5283
Key features
5384
</h2>
5485

55-
<p class="C-$accent850 Txa-c M1u;0 P0;3u Mxw750">
86+
<p class="C-$accent850 Txa-c M1u;0 P0;3u Mxw-gMd">
5687
This is a framework for enthusiasts who are as passionate about CSS and front-end development as we are!
5788
</p>
5889

@@ -87,15 +118,13 @@ area: 'main'
87118

88119
</section>
89120

90-
91-
92121
<%
93122
const card = "Mxw45gg P2u lg_P2u;5u Tsd-$longTs Tf_h -S105p_h Bdrd2u Bd1;s;$accent850"
94123
95124
const examplesCSS = {
96-
h3: "C-$brand Txa-c W90p Fns6u M0;a;9u",
125+
h3: "C-$brand Txa-c W90p Fns6u M0;a;5u",
97126
subsection:"W100p M0;0;10u",
98-
subsectionDescription:"M0;a;5u P0;5u C-$accent850 Fns4u md_Fns5u Lnh1.5 md_W80p Txa-c",
127+
subsectionDescription:"M0;a;5u P0;5u C-$accent850 Mxw62ch md_W80p Txa-c",
99128
subsectionContent:"D-f Fld-r Jc-c Flw-w Gap5u W90p M0;a;9u",
100129
wrongCard: "-Gdl120d,$wrong900,$wrong800 -Gdl120d,$wrong850,$wrong750_h",
101130
correctCard: "-Gdl120d,$correct900,$correct800 -Gdl120d,$correct850,$correct750_h",
@@ -115,7 +144,7 @@ area: 'main'
115144
}
116145
%>
117146

118-
<section id="comparison" class="Bgc-$core700 C-$accent900 Pt15u">
147+
<section id="comparison" class="Bgc-$core550 C-$accent900 Pt16u">
119148

120149
<div class="D-f M-a Jc-c Ai-c Fld-c P0 wrapper">
121150
<h2 class="<%= sectionHeader %>">
@@ -238,7 +267,7 @@ area: 'main'
238267

239268
</div>
240269

241-
<p class="<%= examplesCSS.subsectionDescription %>">
270+
<p class="<%= examplesCSS.subsectionDescription %> Mt12u">
242271
Convenient syntax for complex values, states and at-rules.
243272
</p>
244273

@@ -333,41 +362,9 @@ area: 'main'
333362
</div>
334363
</section>
335364

336-
<%# Arts section %>
337-
338-
339-
<section id="arts" class="Bgc-$core550 W100p">
340-
<div class="D-f M-a Jc-c Ai-c Fld-c P16u;0 wrapper">
341-
<h2 class="<%= sectionHeader %> C-$accent900">
342-
CSS Art
343-
</h2>
344-
345-
<p class="C-$accent850 Txa-c P0;3u M0;0;7u md_Mxw60vw lg_Mxw40vw">
346-
Yes, this is pure CSS art using utility classes! With mlut it is possible
347-
</p>
348-
349-
<div class="W100p M0;0;2u Gap5u D-f Jc-c Ai-c Fld-r Flw-w ">
350-
351-
<%# arts %>
352-
353-
<div class="W90p Mxw100u sm_W55p -Ctx-art -S105p_h Tf_h Tsd-$longTs Ov-h">
354-
<%- include(`./_includes/components/arts/exploding-head.ejs`)%>
355-
</div>
356-
357-
</div>
358-
359-
<div class=" Fns3.2u W100p Mxw62u H7u">
360-
<%- include('./_includes/components/link-button.ejs',{
361-
url: "/arts",
362-
text: "More arts",
363-
}) %>
364-
</div>
365-
366-
</section>
367-
368365
<%# Installation part %>
369366

370-
<section class="W100p P15u;0 Bgc-$core750">
367+
<section class="W100p P16u;0 Bgc-$core750">
371368
<h2 class="<%= sectionHeader%>">
372369
Installation
373370
</h2>
@@ -416,7 +413,7 @@ area: 'main'
416413
</li>
417414
</ul>
418415
</div>
419-
<div class="M0;a;9u Fns3.2u W100p Mxw62u H7u">
416+
<div class="M0;a;5u Fns3.2u W100p Mxw62u H7u">
420417
<%- include('./_includes/components/link-button.ejs',{
421418
url: "https://mlutcss.github.io/mlut/section-start.html",
422419
text: "Try now",

0 commit comments

Comments
 (0)