change upload command

Makefile

@@ -1,11 +1,12 @@
 FONTS  = $(shell find fonts -type f)
 CSS    = style.css where.css
 PAGES  = index.html where.html pubkey.txt
-IMAGES = $(patsubst %,images/%, \
+MEDIA  = $(patsubst %,media/%, \
     mlem.gif mlem_static.png icon.svg \
     niss_uwu_bg_dim.png niss_uwu_bg.png \
     info.svg star.svg sparkles.svg 18_plus.svg \
     cybre.png donphan.png types.png dragncool.svg \
+    niss-nisse.mp3 niss-nisse.ogg \
   )
 
 BUILDDIR ?= _build
@@ -18,11 +19,14 @@ REMOTE_DIR ?= yummy
 
 all: build
 
-build: $(patsubst %,$(BUILDDIR)/%,$(FONTS) $(CSS) $(PAGES) $(IMAGES))
+build: $(patsubst %,$(BUILDDIR)/%,$(FONTS) $(CSS) $(PAGES) $(MEDIA))
 
 upload: build
-	@rsync -rPLzh --delete -e 'ssh -l $(REMOTE_USER) -i $(IDFILE)' \
-	  $(BUILDDIR)/ $(HOST):$(REMOTE_DIR)/
+	@rsync --recursive --partial --progress --copy-links \
+	       --compress --human-readable --hard-links --size-only \
+	       --delete --delete-after \
+	       --rsh='ssh -l $(REMOTE_USER) -i $(IDFILE)' \
+	       $(BUILDDIR)/ $(HOST):$(REMOTE_DIR)/
 
 $(BUILDDIR)/%: %
 	@echo $*

fonts/breezesans/breezesans.css

@@ -1,64 +0,0 @@
-@font-face {
-  src: url(100.ttf);
-  font-family: 'BreezeSans';
-  font-weight: 100;
-}
-
-@font-face {
-  src: url(100c.ttf);
-  font-family: 'BreezeSans';
-  font-weight: 100;
-  font-stretch: condensed;
-}
-
-@font-face {
-  src: url(300.ttf);
-  font-family: 'BreezeSans';
-  font-weight: 300;
-}
-
-@font-face {
-  src: url(300c.ttf);
-  font-family: 'BreezeSans';
-  font-weight: 300;
-  font-stretch: condensed;
-}
-
-@font-face {
-  src: url(400.ttf);
-  font-family: 'BreezeSans';
-  font-weight: 400;
-}
-
-@font-face {
-  src: url(400c.ttf);
-  font-family: 'BreezeSans';
-  font-weight: 400;
-  font-stretch: condensed;
-}
-
-@font-face {
-  src: url(600.ttf);
-  font-family: 'BreezeSans';
-  font-weight: 600;
-}
-
-@font-face {
-  src: url(600c.ttf);
-  font-family: 'BreezeSans';
-  font-weight: 600;
-  font-stretch: condensed;
-}
-
-@font-face {
-  src: url(700.ttf);
-  font-family: 'BreezeSans';
-  font-weight: 700;
-}
-
-@font-face {
-  src: url(700c.ttf);
-  font-family: 'BreezeSans';
-  font-weight: 700;
-  font-stretch: condensed;
-}

fonts/noto/noto.css

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: NotoSans;
+  font-weight: 900;
+  src:
+    local('Noto Sans Black'),
+    url(NotoSans-Black.ttf) format('ttf');
+}
+

index.html

@@ -9,7 +9,7 @@
 <link rel=me href=https://twitter.com/2_gecs>
 <link rel=me href=https://twitter.com/squishygecs>
 
-<link rel=icon href=images/icon.svg>
+<link rel=icon href=media/icon.svg>
 
 <link rel=stylesheet href=style.css>
 <title>web site more like web shite haha gottem</title>
@@ -21,8 +21,8 @@
       <p class='mlem-text niss'>“mlem”</p>
       <p class='mlem-text nisse'>“mlem also”</p>
       <picture>
-        <source srcset=images/mlem_static.png media='(prefers-reduced-motion)'>
-        <img src=images/mlem.gif alt='— the gecs'>
+        <source srcset=media/mlem_static.png media='(prefers-reduced-motion)'>
+        <img src=media/mlem.gif alt='— the gecs'>
       </picture>
     </div>
     <p>
@@ -46,7 +46,17 @@
   <section>
     <h2>stats</h2>
     <dl>
-      <dt> how to say  <dd> <span class=ipa>nıs</span>, <span class=ipa>nısə</span>
+      <dt> how to say
+      <dd>
+        <a id=soundlink href=#>
+          <span class=ipa>nɪs</span>, <span class=ipa>nɪsə</span>
+        </a>
+        <audio id=miku>
+          <source src=media/niss-nisse.mp3 type=audio/mpeg>
+          <source src=media/niss-nisse.ogg type=audio/ogg>
+          (<a href=media/niss-nisse.mp3>listen</a>)
+        </audio>
+
       <dt> prons       <dd title='she for niss, he for nisse'> it or they
       <dt> quantity    <dd> 2
       <dt> limbs       <dd> many
@@ -56,7 +66,18 @@
   </section>
 </main>
 
+<script>
+window.addEventListener('DOMContentLoaded', () => {
+  let link = document.getElementById('soundlink');
+  let miku = document.getElementById('miku');
+  if (typeof miku.play == 'function') {
+    link.addEventListener('click', e => { miku.play(); e.preventDefault(); });
+  }
+});
+</script>
+
 <!--
-  mutant standard emoji by dzuk: 👉 https://mutant.tech 👈
-  (licensed cc-by-nc-sa 4.0)
+  - mutant standard emoji by dzuk: 👉 https://mutant.tech 👈
+    (licensed cc-by-nc-sa 4.0)
+  - miku recorded by @derFisch
 -->

style.css

@@ -1,5 +1,5 @@
 @import url(fonts/muller/muller.css);
-@import url(fonts/breezesans/breezesans.css);
+@import url(fonts/noto/noto.css);
 
 body {
   --gradient:
@@ -11,7 +11,7 @@ body {
         hsl(195deg, 100%, 67%),
         hsl(155deg, 70%,  62%)
       );
-  --bg-image: url(images/niss_uwu_bg.png);
+  --bg-image: url(media/niss_uwu_bg.png);
   --size: 1.75rem;
   --weight: 600;
 
@@ -127,7 +127,7 @@ dd {
     text-decoration-thickness: 2px;
   }
   [title]::after {
-    content: url(images/info.svg);
+    content: url(media/info.svg);
     display: inline-block;
     width: 0.75em; height: 0.75em;
     vertical-align: text-top;
@@ -162,8 +162,8 @@ a:hover {
   content: var(--around-image);
 }
 
-rt { --around-image: url(images/star.svg); }
-h1, h2 { --around-image: url(images/sparkles.svg); }
+rt { --around-image: url(media/star.svg); }
+h1, h2 { --around-image: url(media/sparkles.svg); }
 
 
 .emojo {
@@ -173,7 +173,8 @@ h1, h2 { --around-image: url(images/sparkles.svg); }
 
 
 .ipa {
-  font-family: BreezeSans;
+  font-family: NotoSans;
+  font-weight: 900;
   font-size: 90%;
 }
 
@@ -225,7 +226,7 @@ h1, h2 { --around-image: url(images/sparkles.svg); }
           hsl(195deg, 60%, 44%),
           hsl(155deg, 60%, 55%)
         );
-    --bg-image: url(images/niss_uwu_bg_dim.png);
+    --bg-image: url(media/niss_uwu_bg_dim.png);
   }
 
   main {

where.html

@@ -2,7 +2,7 @@
 <html lang=en>
 <meta charset=utf-8>
 
-<link rel=icon href=images/icon.svg>
+<link rel=icon href=media/icon.svg>
 <link rel=stylesheet href=where.css>
 
 <title>where to find gecs</title>
@@ -19,29 +19,29 @@
     <dt> fedi
     <dd>
       <a href=https://cybre.space/@g>
-        <img src=images/cybre.png alt='' class='at outline'>
+        <img src=media/cybre.png alt='' class='at outline'>
         g@cybre.space
       </a> <br>
       <a href=https://donphan.social/@g>
-        <img src=images/donphan.png alt='' class=at>
+        <img src=media/donphan.png alt='' class=at>
         g@donphan.social
       </a> <br>
       <a href=https://types.pl/@g>
-        <img src=images/types.png alt='' class='at outline'>
+        <img src=media/types.png alt='' class='at outline'>
         g@types.pl
       </a>
 
     <dt> twitter
     <dd> <a href=https://twitter.com/2_gecs>@2_gecs</a>
 
-    <dt> <img src=images/18_plus.svg alt=lewd class=emojo> fedi
+    <dt> <img src=media/18_plus.svg alt=lewd class=emojo> fedi
     <dd>
       <a href=https://cybre.space/@g>
-        <img src=images/dragncool.svg alt='' class='at outline'>
+        <img src=media/dragncool.svg alt='' class='at outline'>
         g@scalie.business
       </a>
 
-    <dt> <img src=images/18_plus.svg alt=lewd class=emojo> twitter
+    <dt> <img src=media/18_plus.svg alt=lewd class=emojo> twitter
     <dd> <a href=https://twitter.com/squishygecs>@squishygecs</a>
 
     <dt> telegram