Skip to content

Create the robot hare art #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ramazanmak wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Create the robot hare art #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b15a564
feat: create robot-hare art
Ramazanmak Mar 14, 2026
158cbc1
Merge branch 'main' of https://github.com/mlutcss/website into refact…
Ramazanmak Mar 14, 2026
f0a1e56
refactor: change the hands of the robot hare
Ramazanmak Mar 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/_data/arts.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,9 @@
{
"artId":"clown-emoji",
"bgColor":"Bgc-$artClownEmoji"
},
{
"artId":"robot-hare",
"bgColor":"Bgc-$artRobotHare"
}
]
103 changes: 103 additions & 0 deletions src/arts/robot-hare.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<%
const css = {
ear: "H50p W22p Bgc-$robotHareYellowA Ps-a T-55p Bdrd7u Ct_af,b D_af,b Ps-a_af,b W2p_af,b Bd1;s;$robotHareYellowA_af,b T92p_af,b",
innerEar: "H70p W12p Ps-a B0 L44p Bgc-$robotHareRedA Ct_af,b D_af,b Ps-a_af,b W200p_af H70p_af Bgc-$robotHareRedA_af T15p_af L-50p_af Bdrd3u_af W400p_b H10p_b Bgc-$robotHareRedA_b T-10p_b L-150p_b",
eye: "W32p H48p Ps-a B40p Ol1;s;$robotHareBlackA -Gdrd-el;at;c,$robotHareBlackA;13p,$robotHareRedA;13p,$robotHareRedA;55p,$robotHareBlackA;55p,$robotHareBlackA;72p,$robotHareGrayA;72p",
eyebrows: "W20p H8p Bgc-$robotHareBlackA Ps-a T10p Tf",
tooth: "W15p H115p Bgc-$robotHareWhiteA Bd1;s;$robotHareBlackA",
armWrapper: "-Sz100p Ps-a T0 L0",
shoulder: "W65p H25p Ps-a R-65p T7p Bgc-$robotHareGrayC Bd1;s;$robotHareBlackA Bdtrr5u",
forearm: "H70p W26p Ps-a R-70p T7p -Gdl-180d,$robotHareGrayC;40p,$robotHareGrayA;40p,$robotHareGrayA;90p Bdtrr5u",
bracelet: "W50p H8p Ps-a T100p L25p Bgc-$robotHareGrayC",
sleeve: "W48p H26p Ps-a R-48p T6p -Gdl100d,$robotHareGrayA;86p,tp;86p",
secondSleeve: "W40p H32p Ps-a R-40p T5p Bdl1;s;$robotHareBlackA -Gdl100d,$robotHareGreenA;86p,tp;86p",
hand: "W35p H15p Ps-a R-75p T82p -Gdl180d,$robotHareGrayA;70%,tp;70% D-f Jc-c Ai-fs",
finger: "W26p H115p Bgc-$robotHareGrayA Bdblr5u Bdbrr5u",
fingerInterval: "W11p H70p Bgc-$robotHareGrayA",
leg: "W35p Apcr1 Bgc-$robotHareGrayA Ps-a T100p Bd1;s;$robotHareBlackA"
}
%>
<div class="-Sz100p Ctnn-canva Ctnt-s D-f Jc-c Ai-c -RobotHareWhiteA#e1d7cb -RobotHareGrayA#9499b9 -RobotHareGrayB#8590a4 -RobotHareGrayC#2a282d -RobotHareGreenA#b3a624 -RobotHareGreenB#121f15 -RobotHareYellowA#d0a614 -RobotHareRedA#b61c04 -RobotHareBlackA#030102">
<div class="@c:canva:apcr>=1_H100p @c:canva:apcr<=1_W100p Apcr1 Ps-r ">
<!-- Hare -->
<div class="H60p W30p Ps-a T20p L35p Bd1;s;$robotHareBlackA">
<!-- Head -->
<div class="W100p H40p Bgc-$robotHareGrayA Ps Ct_af,b D_af,b W3p_af,b H15p_af,b Bgc-$robotHareYellowA_af,b Ps-a_af,b B40p_af,b L-3p_af R-3p_b">
<!-- Ears -->
<div class="<%= css.ear %> H17p_af H22p_b L20p_af R20p_b Tf -Rt-10d L20p">
<div class="<%= css.innerEar %>"></div>
</div>
<div class="<%= css.ear %> H17p_b H20p_af L20p_af R20p_b Tf -Rt7d R20p">
<div class="<%= css.innerEar %>"></div>
</div>
<!-- Eyes -->
<div class="<%= css.eye %> L8p"></div>
<div class="<%= css.eye %> R8p"></div>
<!-- Eyebrows -->
<div class="<%= css.eyebrows %> -Rt45d L35p"></div>
<div class="<%= css.eyebrows %> -Rt-45d R35p"></div>
<div class="W4p H15p Bgc-$robotHareBlackA Ps-a T2p R48p"></div>
<!-- Nose -->
<div class="W26p H10p Ps-a B40p L37p Bgc-$robotHareBlackA">
<div class="Bgc-$robotHareWhiteA W20p H40p"></div>
</div>
<!-- Mouth -->
<div class="Bgc-$robotHareGrayA W120p H40p Bd1;s;$robotHareBlackA Ps-a L-10p B0 D-f Jc-c Ai-c">
<!-- Oral Cavity-->
<div class="W5/6 H50p Bgc-$robotHareGrayC D-f Jc-c Gap5p">
<!-- Teeth -->
<div class="<%= css.tooth %>"></div>
<div class="<%= css.tooth %>"></div>
</div>
</div>
</div>
<!-- Body -->
<div class="W100p H60p Bgc-$robotHareWhiteA Ps">
<!-- T-shirt -->
<div class="W100p Apcr1 Bd1;s;$robotHareBlackA -Bdx-n Ps">
<div class="-Sz100p -Gdl75d,$robotHareGreenA;39.5p,$robotHareBlackA;39.5p,$robotHareBlackA;40p,tp;40p Ps-a"></div>
<div class="-Sz100p -Gdl-75d,$robotHareGreenA;39.5p,$robotHareBlackA;39.5p,$robotHareBlackA;40p,tp;40p Ps-a"></div>
<div class="Ps-a -Sz14p Bdrd100p L43p T65p -Gdrd-cr;at;c,$robotHareYellowA;40p,$robotHareRedA;40p"></div>
</div>
<div class="W110p H5p Ps-a L-5p T0 Bgc-$robotHareWhiteA Bd1;s;$robotHareBlackA"></div>
<!-- Left arm -->
<div class="<%= css.armWrapper %>">
<div class="<%= css.shoulder %>"></div>
<div class="<%= css.forearm %>">
<div class="<%= css.bracelet %>"></div>
</div>
<div class="<%= css.sleeve %>"></div>
<div class="<%= css.secondSleeve %>"></div>
<div class="<%= css.hand %>">
<div class="<%= css.finger %>"></div>
<div class="<%= css.fingerInterval %>"></div>
<div class="<%= css.finger %>"></div>
<div class="<%= css.fingerInterval %>"></div>
<div class="<%= css.finger %>"></div>
</div>
</div>
<!-- Right arm-->
<div class="<%= css.armWrapper %> Tf -Sx-100p">
<div class="<%= css.shoulder %>"></div>
<div class="<%= css.forearm %>">
<div class="<%= css.bracelet %>"></div>
</div>
<div class="<%= css.sleeve %>"></div>
<div class="<%= css.secondSleeve %>"></div>
<div class="<%= css.hand %>">
<div class="<%= css.finger %>"></div>
<div class="<%= css.fingerInterval %>"></div>
<div class="<%= css.finger %>"></div>
<div class="<%= css.fingerInterval %>"></div>
<div class="<%= css.finger %>"></div>
</div>
</div>
</div>
<!-- Legs -->
<div class="W94p H10p Bgc-$robotHareGreenB M-a Ps">
<div class="<%= css.leg %> L5p"></div>
<div class="<%= css.leg %> R5p"></div>
</div>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion src/assets/script/art-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const hightlightCss = ["Bd1;s;$brand", "Bxsd1;1;10;2;$brand", "Zi40"]
const hightlightCss = ["Bd1;s;$brand", "Bxsd1;1;10;2;$brand", "Zi19"]

export class ArtPanel extends HTMLElement {
constructor() {
Expand Down
3 changes: 2 additions & 1 deletion src/assets/style/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ html{
--ml-artFlushedEmoji:#000942;
--ml-artExplodingHead:#003b2a;
--ml-artClownEmoji: #065054;
--ml-artRobotHare: #6f592b;
}
}

Expand Down Expand Up @@ -154,7 +155,7 @@ html{
--ml-artFlushedEmoji:#bfc5ff;
--ml-artExplodingHead:#9cffe5;
--ml-artClownEmoji: #10bac3;

--ml-artRobotHare: #947e4f;
}

}
Expand Down