First

.gitignore

@@ -0,0 +1,7 @@
+fonts/**/*.eot
+fonts/**/*.svg
+fonts/**/*.ttf
+fonts/**/*.woff
+fonts/**/*.woff2
+_build
+_tmp

Makefile

@@ -0,0 +1,9 @@
+mlem.gif: mlem_bg.gif
+	gifsicle -U mlem_bg.gif -o mlem_bg_u.gif
+	convert -transparent '#ff9bc7' mlem_bg_u.gif mlem_t.gif
+	gifsicle --disposal=previous mlem_t.gif -o mlem.gif
+
+clean:
+	$(RM) mlem_bg_u.gif mlem_t.gif mlem.gif
+
+.PHONY: clean

fonts/muller/muller.css

@@ -0,0 +1,119 @@
+@font-face {
+    font-family: 'Muller';
+    src: url('Muller-Bold-webfont.eot');
+    src: url('Muller-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('Muller-Bold-webfont.woff2') format('woff2'),
+         url('Muller-Bold-webfont.woff') format('woff'),
+         url('Muller-Bold-webfont.ttf') format('truetype'),
+         url('Muller-Bold-webfont.svg#mullerbold') format('svg');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Muller';
+    src: url('Muller-Bold_Italic-webfont.eot');
+    src: url('Muller-Bold_Italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('Muller-Bold_Italic-webfont.woff2') format('woff2'),
+         url('Muller-Bold_Italic-webfont.woff') format('woff'),
+         url('Muller-Bold_Italic-webfont.ttf') format('truetype'),
+         url('Muller-Bold_Italic-webfont.svg#mullerbold_italic') format('svg');
+    font-weight: 600;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Muller';
+    src: url('Muller-Medium-webfont.eot');
+    src: url('Muller-Medium-webfont.eot?#iefix') format('embedded-opentype'),
+         url('Muller-Medium-webfont.woff2') format('woff2'),
+         url('Muller-Medium-webfont.woff') format('woff'),
+         url('Muller-Medium-webfont.ttf') format('truetype'),
+         url('Muller-Medium-webfont.svg#mullermedium') format('svg');
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Muller';
+    src: url('Muller-Medium_Italic-webfont.eot');
+    src: url('Muller-Medium_Italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('Muller-Medium_Italic-webfont.woff2') format('woff2'),
+         url('Muller-Medium_Italic-webfont.woff') format('woff'),
+         url('Muller-Medium_Italic-webfont.ttf') format('truetype'),
+         url('Muller-Medium_Italic-webfont.svg#mullermedium_italic') format('svg');
+    font-weight: 500;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Muller';
+    src: url('Muller-ExtraBold-webfont.eot');
+    src: url('Muller-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('Muller-ExtraBold-webfont.woff2') format('woff2'),
+         url('Muller-ExtraBold-webfont.woff') format('woff'),
+         url('Muller-ExtraBold-webfont.ttf') format('truetype'),
+         url('Muller-ExtraBold-webfont.svg#mullerextrabold') format('svg');
+    font-weight: 800;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Muller';
+    src: url('Muller-ExtraBold_Italic-webfont.eot');
+    src: url('Muller-ExtraBold_Italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('Muller-ExtraBold_Italic-webfont.woff2') format('woff2'),
+         url('Muller-ExtraBold_Italic-webfont.woff') format('woff'),
+         url('Muller-ExtraBold_Italic-webfont.ttf') format('truetype'),
+         url('Muller-ExtraBold_Italic-webfont.svg#mullerextrabold_italic') format('svg');
+    font-weight: 800;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Muller';
+    src: url('Muller-Light-webfont.eot');
+    src: url('Muller-Light-webfont.eot?#iefix') format('embedded-opentype'),
+         url('Muller-Light-webfont.woff2') format('woff2'),
+         url('Muller-Light-webfont.woff') format('woff'),
+         url('Muller-Light-webfont.ttf') format('truetype'),
+         url('Muller-Light-webfont.svg#mullerlight') format('svg');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Muller';
+    src: url('Muller-Light_Italic-webfont.eot');
+    src: url('Muller-Light_Italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('Muller-Light_Italic-webfont.woff2') format('woff2'),
+         url('Muller-Light_Italic-webfont.woff') format('woff'),
+         url('Muller-Light_Italic-webfont.ttf') format('truetype'),
+         url('Muller-Light_Italic-webfont.svg#mullerlight_italic') format('svg');
+    font-weight: 300;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Muller';
+    src: url('Muller-Regular-webfont.eot');
+    src: url('Muller-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('Muller-Regular-webfont.woff2') format('woff2'),
+         url('Muller-Regular-webfont.woff') format('woff'),
+         url('Muller-Regular-webfont.ttf') format('truetype'),
+         url('Muller-Regular-webfont.svg#muller_regularregular') format('svg');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Muller';
+    src: url('Muller-Regular_Italic-webfont.eot');
+    src: url('Muller-Regular_Italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('Muller-Regular_Italic-webfont.woff2') format('woff2'),
+         url('Muller-Regular_Italic-webfont.woff') format('woff'),
+         url('Muller-Regular_Italic-webfont.ttf') format('truetype'),
+         url('Muller-Regular_Italic-webfont.svg#mullerregular_italic') format('svg');
+    font-weight: 400;
+    font-style: italic;
+}

index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset=utf-8>
+
+<link rel=stylesheet href=style.css>
+<title>web site more like web shite haha gottem</title>
+
+<hr>
+
+<h1>so basically? <b>im gecs</b></h1>
+<div id=mlem>
+  <p class='mlem-text niss'>“mlem”</p>
+  <p class='mlem-text nisse'>“mlem also”</p>
+  <img src=mlem.gif alt='niss &amp; nisse'>
+</div>
+<h2 id=big-little>
+  a
+  <ruby><b>big one</b> <rp>(</rp><rt>niss</rt><rp>)</rp></ruby>
+  and a
+  <ruby><b>little one</b> <rp>(</rp><rt>nisse</rt><rp>)</rp></ruby>
+</h2>
+
+<hr>
+
+<h2>stats</h2>
+<dl>
+  <dt>quantity <dd>2
+  <dt>pronom
+  <dd>
+    <span title='&quot;she&quot; in real life pls!!'>she, he*</span>
+  <dt>limbs <dd>many
+  <dt>consistency <dd>soft
+</dl>
+
+<hr>
+
+<h2>where to find gecs</h2>
+<dl>
+  <dt>masto
+  <dd>
+    <a href=https://cybre.space/@g>g@cybre.space</a><br>
+    <a href=https://snouts.online/@g>g@snouts.online</a>
+  <dt>twit
+  <dd>
+    <a href=https://twitter.com/gec_ko_>@gec_ko_</a>
+</dl>

style.css

@@ -0,0 +1,101 @@
+@import url(fonts/muller/muller.css);
+
+body {
+  background:
+    linear-gradient(to bottom,
+      #f9cf6b 0%,
+      #f96b88 20% 25%,
+      #ff9bc7 40% 55%,
+      #8693ff 80% 85%,
+      #58d6ff 98% 100%)
+    fixed;
+
+  font-family: 'Muller';
+  font-size: x-large;
+  font-weight: 500;
+  color: white;
+  text-shadow:
+    1px 1px 0 black,
+    -1px 1px 0 black,
+    1px -1px 0 black,
+    -1px -1px 0 black,
+    4px 4px 2px rgba(0, 0, 0, 60%);
+  text-align: center;
+
+  max-width: 50em;
+  margin: 24px auto 36px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 600;
+  margin-top: 0;
+}
+
+h1 {
+  font-size: 200%;
+}
+
+#mlem {
+  margin: 36px auto 0;
+  position: relative;
+  height: 219px;
+  width: 420px;
+}
+.mlem-text {
+  position: absolute;
+  font-size: 24px;
+  font-weight: 700;
+}
+.niss {
+  top: -55px; left: 20px;
+}
+.nisse {
+  top: -22px; right: 0;
+}
+
+#big-little {
+  margin: -20pt 0 0 0;
+  ruby-position: under;
+}
+#big-little rt {
+  font-size: 60%;
+  font-style: italic;
+}
+#big-little rt::before, #big-little rt::after {
+  content: '—';
+}
+
+hr {
+  height: 3px;
+  width: 60%;
+  border: 1px solid black;
+  background-color: white;
+  text-shadow: none;
+  margin: 20px auto;
+}
+
+dl {
+  display: grid;
+  width: 30em;
+  margin: auto;
+  grid-template-columns: 1fr 2fr 1fr 2fr;
+  grid-row-gap: 6px;
+}
+
+dt {
+  text-align: right;
+}
+dd {
+  font-weight: 600;
+  text-align: left;
+}
+
+[title] {
+  border-bottom: 3px dotted white;
+}
+
+a {
+  color: #c9f1ff;
+  font-weight: 700;
+  text-decoration: none;
+}