Skip to content

Commit 5116aa7

Browse files
RamazanmakRamazanmak
committed
fix: change some stylistical choices
1 parent d7b0765 commit 5116aa7

File tree

5 files changed

+94
-70
lines changed

5 files changed

+94
-70
lines changed

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<h1>mlut tutorials</h1>
1111
<ul>
1212
<li><a href="basics/0">Basics</a></li>
13+
<li><a href="states/0">States</a></li>
1314
</ul>
1415
</body>
1516
</html>

‎states/-1/index.html‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<link rel="stylesheet" href="style.css">
77
<title>Document</title>
88
</head>
9-
<body class="Bgc-white C-$accent900 Fnf-mUss -ShortTsd200ms -HeaderH12u">
9+
<body class="Bgc-white C-$accent900 Fnf-mUss -ShortTsd200ms -HeaderH13u">
1010

1111
<div class="Ps-a W100p H100vh Bgc#242d34 D-f Jc-c Ai-c">
1212

@@ -15,8 +15,9 @@
1515

1616
<header class="P2u;3u H-$headerH Ps-f Mxw600 W90p Bgc#000*0.5 -Bdtrd5u Zi20">
1717
<div class="D-f Ai-str Jc-fs -Sz100p">
18+
19+
<!-- Close button-->
1820
<div class="Flg0 W10p H100p ">
19-
<!-- Close button-->
2021
<button class="btn Bd-n C-$accent900 Bgc-tp Bgc-$hover900_h H100p Apcr1 D Bdrd100p Tsd-$shortTsd">
2122
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-cc -Sz26 P0.5u Us-n">
2223
<use href="img/sprite.svg#cross"></use>
@@ -26,14 +27,14 @@
2627
</div>
2728

2829
<!-- Caption-->
29-
<div class="Flg0.9 H100p Fnw700 Fns5.5u">
30-
Edit profile
30+
<div class="Flg0.9 H100p Fnw700 Fns5.5u D-f Ai-c">
31+
<span> Edit profile</span>
3132
</div>
3233

33-
<div class="Flg0.1 H100p">
34+
<div class="Flg0.1 H100p P0.5u;0">
3435
<!-- Save button -->
35-
<button class="btn M-a Bgc-$accent900 Bgc-$hover850_h D P0 M0 C-$accent850 H100p W18u Bdrd10u Fnw600 Tsd-$shortTsd">
36-
<span class="D">
36+
<button class="btn Ml-a Bgc-$accent900 Bgc-$hover850_h D-f Ai-c Jc-c C-$accent850 H100p W18u Bdrd10u Fnw600 Tsd-$shortTsd ">
37+
<span class="Lnh100p">
3738
Save
3839
</span>
3940
</button>
@@ -83,7 +84,7 @@
8384
</div>
8485

8586
<!-- The part with the inputs -->
86-
<div class="P3u;5u_:div Tsd-$shortTsd_:label Tsd-$shortTsd_:span">
87+
<div class="Mb5u_:div P0;5u_:div Tsd-$shortTsd_:label Tsd-$shortTsd_:span">
8788

8889
<!-- Name -->
8990
<div>

‎states/-1/style.css‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -304,8 +304,8 @@ div {
304304
--ml-shortTsd: 200ms;
305305
}
306306

307-
.-HeaderH12u {
308-
--ml-headerH: 3rem;
307+
.-HeaderH13u {
308+
--ml-headerH: 3.25rem;
309309
}
310310

311311
.Ps-a {
@@ -483,28 +483,28 @@ div {
483483
flex-grow: 0.1;
484484
}
485485

486-
.Bgc-\$accent900 {
487-
background-color: var(--ml-accent900);
486+
.P0\.5u\;0 {
487+
padding: 0.125rem 0px;
488488
}
489489

490-
.Bgc-\$hover850_h:hover {
491-
background-color: var(--ml-hover850);
490+
.Ml-a {
491+
margin-left: auto;
492492
}
493493

494-
.P0 {
495-
padding: 0px;
494+
.Bgc-\$accent900 {
495+
background-color: var(--ml-accent900);
496496
}
497497

498-
.M0 {
499-
margin: 0px;
498+
.Bgc-\$hover850_h:hover {
499+
background-color: var(--ml-hover850);
500500
}
501501

502502
.C-\$accent850 {
503503
color: var(--ml-accent850);
504504
}
505505

506-
.W80p {
507-
width: 80%;
506+
.W18u {
507+
width: 4.5rem;
508508
}
509509

510510
.Bdrd10u {
@@ -515,6 +515,14 @@ div {
515515
font-weight: 600;
516516
}
517517

518+
.Lnh100p {
519+
line-height: 100%;
520+
}
521+
522+
.P0 {
523+
padding: 0px;
524+
}
525+
518526
.Ps-r {
519527
position: relative;
520528
}
@@ -611,8 +619,12 @@ div {
611619
opacity: 1;
612620
}
613621

614-
.P3u\;5u_\:div div {
615-
padding: 0.75rem 1.25rem;
622+
.Mb3u_\:div div {
623+
margin-bottom: 0.75rem;
624+
}
625+
626+
.P0\;5u_\:div div {
627+
padding: 0px 1.25rem;
616628
}
617629

618630
.Tsd-\$shortTsd_\:label label {
@@ -699,22 +711,14 @@ div {
699711
font-size: 1.25rem;
700712
}
701713

702-
.Fi-\$accent800 {
703-
fill: var(--ml-accent800);
714+
.Fi-\$accent600 {
715+
fill: var(--ml-accent600);
704716
}
705717

706718
.Tsd-ih {
707719
transition-duration: inherit;
708720
}
709721

710-
.M-a {
711-
margin: auto;
712-
}
713-
714-
.W18u {
715-
width: 4.5rem;
716-
}
717-
718-
.Fi-\$accent600 {
719-
fill: var(--ml-accent600);
722+
.Mb5u_\:div div {
723+
margin-bottom: 1.25rem;
720724
}

‎states/0/index.html‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<link rel="stylesheet" href="style.css">
77
<title>Document</title>
88
</head>
9-
<body class="Bgc-white C-$accent900 Fnf-mUss -ShortTsd200ms -HeaderH12u">
9+
<body class="Bgc-white C-$accent900 Fnf-mUss -ShortTsd200ms -HeaderH13u">
1010

1111
<div class="Ps-a W100p H100vh Bgc#242d34 D-f Jc-c Ai-c">
1212

@@ -15,8 +15,9 @@
1515

1616
<header class="P2u;3u H-$headerH Ps-f Mxw600 W90p Bgc#000*0.5 -Bdtrd5u Zi20">
1717
<div class="D-f Ai-str Jc-fs -Sz100p">
18-
<div class="Flg0 W10p H100p">
19-
<!-- Close button-->
18+
19+
<!-- Close button-->
20+
<div class="Flg0 W10p H100p ">
2021
<button class="btn Bd-n C-$accent900 Bgc-tp H100p Apcr1 D Bdrd100p Tsd-$shortTsd">
2122
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-cc -Sz26 P0.5u Us-n">
2223
<use href="img/sprite.svg#cross"></use>
@@ -26,14 +27,14 @@
2627
</div>
2728

2829
<!-- Caption-->
29-
<div class="Flg0.9 H100p Fnw700 Fns5.5u ">
30-
Edit profile
30+
<div class="Flg0.9 H100p Fnw700 Fns5.5u D-f Ai-c">
31+
<span> Edit profile</span>
3132
</div>
3233

33-
<div class="Flg0.1 H100p">
34+
<div class="Flg0.1 H100p P0.5u;0">
3435
<!-- Save button -->
35-
<button class="btn Bgc-$accent900 D P0 M0 C-$accent850 H100p W80p Bdrd10u Fnw600 Tsd-$shortTsd">
36-
<span class="D">
36+
<button class="btn Ml-a Bgc-$accent900 D-f Ai-c Jc-c C-$accent850 H100p W18u Bdrd10u Fnw600 Tsd-$shortTsd ">
37+
<span class="Lnh100p">
3738
Save
3839
</span>
3940
</button>
@@ -49,17 +50,17 @@
4950
<div class="Mt-$headerH H50u Ov-h Ps-r D-f Jc-c Ai-c Mb20u">
5051
<!-- Wallpaper-->
5152
<img src="img/wallpaper.jpg" class="D P0;1 W100p Ps-r" alt="wallpaper">
52-
<div class="Ps-a Zi2 T0 L0 -Sz100p D-f Jc-c Ai-c Gap5u Bgc-$hover400 Tsd-$shortTsd">
53+
<div class="Ps-a Zi2 T0 L0 -Sz100p D-f Jc-c Ai-c Gap5u Bgc-$hover400 Tsd-$shortTsd -Ctx-wallpaper">
5354

5455
<!-- Change wallpaper button-->
55-
<div class="Bgc-$hover400 Tsd-$shortTsd Bdrd100p P2u">
56+
<div class="Bgc-$hover400 Tsd-$shortTsd Bdrd100p P2u O0">
5657
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-cc -Sz26 P0.5u Us-n" >
5758
<use href="img/sprite.svg#photo"></use>
5859
</svg>
5960
</div>
6061

6162
<!-- Delete wallpaper button -->
62-
<div class="Bgc-$hover400 Tsd-$shortTsd Bdrd100p P2u">
63+
<div class="Bgc-$hover400 Tsd-$shortTsd Bdrd100p P2u O0">
6364
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-cc -Sz26 P0.5u Us-n" >
6465
<use href="img/sprite.svg#cross"></use>
6566
</svg>
@@ -72,67 +73,68 @@
7273
<!-- Profile photo-->
7374
<img src="img/json.jpg" class="D Bdrd100p" alt="profile-photo">
7475

75-
<div class="Ps-a T0 L0 -Sz100p Bdrd100p D-f Jc-c Ai-c Bgc-$hover200 Tsd-$shortTsd">
76+
<div class="Ps-a T0 L0 -Sz100p Bdrd100p D-f Jc-c Ai-c Bgc-$hover200 O0 Tsd-$shortTsd">
7677
<!-- Change profile photo button-->
7778
<div class="Bgc-$hover400 Tsd-$shortTsd Bdrd100p P2u">
78-
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-cc -Sz26 P0.5u Us-n" >
79+
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-cc -Sz26 P0.5u Us-n">
7980
<use href="img/sprite.svg#photo"></use>
8081
</svg>
8182
</div>
8283
</div>
8384
</div>
8485

8586
<!-- The part with the inputs -->
86-
<div class="">
87+
<div>
8788

8889
<!-- Name -->
8990
<div>
90-
<label for="name" class="D Ps-r Bd1;s;$accent600 C-$accent600 P2u ">
91-
<span class="D Mb1u ">Name</span>
91+
<label for="name" class="D Ps-r Bd1;s;$accent600 C-$accent600 Bdrd2u P2u -Ctx">
92+
<span class="D Mb1u">Name</span>
9293
<input maxlength="50" id="name" class="D W100p Bgc-tp Bd-n Ol-n C-$accent900" type="text" placeholder="" value="Json Statement">
9394
</label>
9495
</div>
9596

9697
<!-- Bio-->
9798
<div>
98-
<label for="Bio" class="D Bd1;s;$accent600 C-$accent600 P2u">
99+
<label for="Bio" class="D Bd1;s;$accent600 C-$accent600 Bdrd2u P2u -Ctx">
99100
<span class="D Mb1u">Bio</span>
101+
100102
<textarea id="Bio" class="D W100p Bgc-tp Bd-n Ol-n C-$accent900 Txw-w Rs-n" type="text" placeholder="" >A professional Frontend dev and killer-feature maker with 20 years of experience</textarea>
101103
</label>
102104
</div>
103105

104106
<!-- Location -->
105107
<div>
106-
<label for="location" class="D Bd1;s;$accent600 C-$accent600 P2u">
108+
<label for="location" class="D Bd1;s;$accent600 C-$accent600 Bdrd2u P2u -Ctx">
107109
<span class="D Mb1u">Location</span>
108110
<input maxlength="100" id="location" class="D W100p Bgc-tp Bd-n Ol-n C-$accent900" type="text" placeholder="" value="Planet Earth">
109111
</label>
110112
</div>
111113

112114
<!-- Website -->
113115
<div>
114-
<label for="website" class="D Bd1;s;$accent600 C-$accent600 P2u">
116+
<label for="website" class="D Bd1;s;$accent600 C-$accent600 Bdrd2u P2u -Ctx">
115117
<span class="D Mb1u">Website</span>
116118
<input maxlength="100" id="website" class="D W100p Bgc-tp Bd-n Ol-n C-$accent900" type="text" placeholder="" value="https://mlut.style/">
117119
</label>
118120
</div>
119121
</div>
120122

121123
<!-- Expanded bio-->
122-
<div class="">
124+
<div >
123125
<div class="D-f Ai-c Jc-sb Tsd-$shortTsd P2u;5u">
124126
<span class="D Fns5u"> Create expanded bio</span>
125-
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-$accent800 -Sz26 P0.5u Us-n Tsd-ih">
127+
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-$accent600 -Sz26 P0.5u Us-n Tsd-ih">
126128
<use href="img/sprite.svg#larger"></use>
127129
</svg>
128130
</div>
129131
</div>
130132

131133
<!-- Skills -->
132-
<div class="">
133-
<div class="D-f Ai-c Jc-sb Tsd-$shortTsd P2u;5u">
134+
<div>
135+
<div class="D-f Ai-c Jc-sb -Ctx Tsd-$shortTsd P2u;5u">
134136
<span class="D Fns5u"> Add your skills</span>
135-
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-$accent800 -Sz26 P0.5u Us-n Tsd-ih">
137+
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-$accent600 -Sz26 P0.5u Us-n Tsd-ih">
136138
<use href="img/sprite.svg#larger"></use>
137139
</svg>
138140
</div>

0 commit comments

Comments
 (0)