steven-y-e
/
friends-of-mineral-town
1
0
Fork 0
Code Issues Pull Requests Releases Activity

feat(index.html): the page 

decorated with mister hooly, rendered entirely in html/css
pull/2/head
steven 2020-11-30 12:20:29 -05:00
parent c0b73e1893
commit 5dd0d0ab42
1 changed files with 652 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

652
public/index.html 100644
View File

@ -0,0 +1,652 @@
<html>
<head>
<title>friends of mineral town</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
#title {
width: 35%;
float: left;
word-spacing: 100vw;
}
#projects {
width: 35%;
float: left;
padding-bottom: 4em;
}
#footer {
width: 35%;
float: left;
}
/* pixel art */
.pixel {
width: 6px;
height: 6px;
float: left;
}
#mister-hooly {
position: fixed;
top: 24px;
right: 12px;
/* 22 width canvas */
width: 132px;
}
.mh-a {
background: #506077;
}
.mh-b {
background: #6798bf;
}
.mh-c {
background: #bfe8f7;
}
.mh-d {
background: #e0f0f8;
}
.mh-e {
background: #86c0f6;
}
.mh-f {
background: #f8f8f8;
}
.mh-g {
background: #895010;
}
.mh-h {
background: #f8f834;
}
.mh-i {
background: #f9c066;
}
.mh-j {
background: #d9881b;
}
.mh-k {
background: #380166;
}
.mh-l {
background: #fa5877;
}
.mh-m {
background: #ca384f;
}
/* breakpoint at 700px: */
@media screen and (max-width: 700px) {
#title, #projects, #footer {
width: 100%;
}
}
</style>
</head>
<body>
<div id="title">
<h1>friends of mineral town</h1>
</div>
<div id="projects">
<h2>where i live</h2>
<h3><a href="https://homo.casa">homo.casa</a></h3>
<p>a personal server for my home network</p>
</div>
<div id="footer">
<h4>hand-made by steven ye in 2020</h4>
</div>
<div id="mister-hooly">
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-a"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-d"></div>
<div class="pixel mh-d"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-a"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-d"></div>
<div class="pixel mh-d"></div>
<div class="pixel mh-d"></div>
<div class="pixel mh-d"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-a"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-d"></div>
<div class="pixel mh-d"></div>
<div class="pixel mh-d"></div>
<div class="pixel mh-d"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-a"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-d"></div>
<div class="pixel mh-d"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-a"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-a"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-a"></div>
<div class="pixel"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-f"></div>
<div class="pixel mh-f"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-f"></div>
<div class="pixel mh-f"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-h"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-f"></div>
<div class="pixel mh-f"></div>
<div class="pixel mh-f"></div>
<div class="pixel mh-f"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-f"></div>
<div class="pixel mh-f"></div>
<div class="pixel mh-f"></div>
<div class="pixel mh-f"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-h"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-h"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-f"></div>
<div class="pixel mh-f"></div>
<div class="pixel mh-f"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-f"></div>
<div class="pixel mh-f"></div>
<div class="pixel mh-f"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-h"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-h"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-c"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-h"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-i"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-i"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-i"></div>
<div class="pixel mh-i"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-i"></div>
<div class="pixel mh-i"></div>
<div class="pixel mh-g"></div>
<div class="pixel"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-i"></div>
<div class="pixel mh-i"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-e"></div>
<div class="pixel mh-b"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-i"></div>
<div class="pixel mh-i"></div>
<div class="pixel mh-g"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-i"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-a"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-m"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-i"></div>
<div class="pixel mh-g"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-m"></div>
<div class="pixel mh-l"></div>
<div class="pixel mh-l"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-m"></div>
<div class="pixel mh-l"></div>
<div class="pixel mh-m"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-l"></div>
<div class="pixel mh-l"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-j"></div>
<div class="pixel mh-j"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-j"></div>
<div class="pixel mh-j"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-j"></div>
<div class="pixel mh-j"></div>
<div class="pixel mh-j"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-j"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-m"></div>
<div class="pixel mh-l"></div>
<div class="pixel mh-l"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-j"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-j"></div>
<div class="pixel mh-j"></div>
<div class="pixel mh-j"></div>
<div class="pixel mh-g"></div>
<div class="pixel"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-j"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-j"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-m"></div>
<div class="pixel mh-l"></div>
<div class="pixel mh-l"></div>
<div class="pixel mh-l"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-j"></div>
<div class="pixel mh-j"></div>
<div class="pixel mh-g"></div>
<div class="pixel"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-j"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-l"></div>
<div class="pixel mh-l"></div>
<div class="pixel mh-l"></div>
<div class="pixel mh-l"></div>
<div class="pixel mh-l"></div>
<div class="pixel mh-k"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel mh-g"></div>
<div class="pixel mh-g"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel mh-k"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
</div>
</body>
</html>