~aesthetic~

Makefile

@@ -1,7 +1,9 @@
 FONTS  = $(shell find fonts -type f)
 CSS    = style.css
 PAGES  = index.html
-IMAGES = mlem.gif icon.png star_small.png
+IMAGES = \
+  mlem.gif icon.png niss_uwu_bg.png \
+  star_small.png sparkles_large.png
 
 BUILDDIR ?= _build
 TMPDIR   ?= _tmp

index.html

@@ -18,7 +18,7 @@
       <p class='mlem-text nisse'>“mlem also”</p>
       <img src=mlem.gif alt='niss &amp; nisse'>
     </div>
-    <h2 id=big-little>
+    <h2>
       a
       <ruby>
         <b>big one</b>
@@ -50,6 +50,10 @@
   <section>
     <h2>where to find gecs</h2>
     <dl>
+      <dt>gallery
+      <dd><b>coming soon?</b>
+      <dt>code
+      <dd><a href=https://git.rhiannon.website/rhi>gitea</a>
       <dt>masto
       <dd><a href=https://cybre.space/@g>g@cybre.space</a><br>
           <a href=https://snouts.online/@g>g@snouts.online</a>

sparkles.svg

@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><metadata/><g fill="none"><path d="m0 0h32v32h-32z"/><path d="m14 15 5.5-2.5 2.5-8.5 2.5 8.5 5.5 2.5-5.5 2.5-2.5 8.5-2.5-8.5z" stroke="#000" stroke-width="4"/><path d="m4 23 3.5-1.5 1.5-5.5 1.5 5.5 3.5 1.5-3.5 1.5-1.5 5.5-1.5-5.5z" stroke="#000" stroke-width="4"/><path d="m2 7 2-1 1-4 1 4 2 1-2 1-1 4-1-4z" stroke="#000" stroke-width="4"/></g><path d="m14 15 5.5-2.5 2.5-8.5 2.5 8.5 5.5 2.5-5.5 2.5-2.5 8.5-2.5-8.5z" fill="#fdef24"/><path d="m4 23 3.5-1.5 1.5-5.5 1.5 5.5 3.5 1.5-3.5 1.5-1.5 5.5-1.5-5.5z" fill="#fdef24"/><path d="m2 7 2-1 1-4 1 4 2 1-2 1-1 4-1-4z" fill="#fdef24"/></svg>

style.css

@@ -1,6 +1,6 @@
 @import url(fonts/muller/muller.css);
 
-body {
+html {
   background:
     linear-gradient(to bottom,
         hsl(42deg,  92%,  70%) 0%,
@@ -9,10 +9,14 @@ body {
         hsl(234deg, 100%, 76%) 80% 85%,
         hsl(195deg, 100%, 67%) 98% 100%
       )
-      fixed;
+      fixed,
+    url(niss_uwu_bg.png) top center fixed;
+  background-blend-mode: hard-light;
+}
 
+body {
   font-family: 'Muller';
-  font-size: x-large;
+  font-size: 1.75rem;
   font-weight: 500;
   color: white;
   text-shadow:
@@ -20,11 +24,19 @@ body {
     -1px 1px 0 black,
     1px -1px 0 black,
     -1px -1px 0 black,
-    4px 4px 4px hsla(0, 0%, 0%, 60%);
+    4px 4px 4px hsla(0, 0%, 0%, 70%);
   text-align: center;
+  margin: 2em 0 3em;
+}
 
-  max-width: 50em;
-  margin: 24px auto 36px;
+main {
+  max-width: 35em;
+  padding: 1em;
+
+  background: hsla(0, 0%, 100%, 40%);
+  border-radius: 2em;
+  border: 3px solid hsla(0, 0%, 100%, 30%);
+  margin: 0 auto 1em;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -41,41 +53,41 @@ h1 {
   position: relative;
   height: 219px;
   width: 420px;
+  z-index: 1;
 }
 .mlem-text {
   position: absolute;
-  font-size: 24px;
   font-weight: 700;
+  margin: 0;
 }
-.niss {
-  top: -55px; left: 20px;
-}
-.nisse {
-  top: -22px; right: 0;
+.niss { bottom: 100%; left: 20px; }
+.nisse { bottom: 85%; right: 0; }
+#mlem img {
+  filter: drop-shadow(0 0 30px hsla(52deg, 85%, 95%, 75%));
+  z-index: 0;
 }
 
-#big-little {
+header {
   margin: -20pt 0 0 0;
   ruby-position: under;
 }
-#big-little rt {
+header rt {
   font-size: 60%;
   font-style: italic;
 }
-#big-little rt::before, #big-little rt::after {
+header rt::before, header rt::after {
   content: url(star_small.png);
   mix-blend-mode: overlay;
   height: 1em;
   padding: 0 0.25em;
-  vertical-align: text-bottom;
+  vertical-align: middle;
 }
 
 hr {
-  height: 3px;
-  width: 60%;
-  border: 1px solid black;
-  box-shadow: 4px 4px 2px rgba(0, 0, 0, 25%);
-  background-color: white;
+  height: 2px;
+  width: 75%;
+  background-color: hsla(0, 0%, 100%, 75%);
+  mix-blend-mode: screen;
   text-shadow: none;
   margin: 20px auto;
 }
@@ -103,6 +115,13 @@ dd {
 
 a {
   color: hsl(196deg, 100%, 85%);
-  font-weight: 700;
+  font-weight: bolder;
   text-decoration: none;
 }
+
+main h2::before, main h2::after {
+  content: url(sparkles_large.png);
+  vertical-align: middle;
+  padding: 0 0.25em;
+  mix-blend-mode: overlay;
+}