optimise images

index.html

@@ -8,7 +8,7 @@
 <link rel=me href=https://chitter.xyz/@niss>
 <link rel=me href=https://cohost.org/niss>
 
-<link rel=icon href=media/favicon.png>
+<link rel=icon href=media/favicon.webp>
 <link rel=stylesheet href=style/base.css>
 <link rel=stylesheet href=style/cube.css>
 <link rel=stylesheet href=style/flat.css>
@@ -20,14 +20,14 @@
 <meta property=og:title content="the gec zone">
 <meta property=og:description content="lair of the creature known as “niss”">
 <meta property=og:url content="https://yummy.cricket">
-<meta property=og:image        content=media/opengraph.png>
+<meta property=og:image        content=media/opengraph.webp>
 <meta property=og:image:width  content=400>
 <meta property=og:image:height content=400>
-<meta property=og:image        content=media/twittercard.png>
+<meta property=og:image        content=media/twittercard.webp>
 <meta property=og:image:width  content=800>
 <meta property=og:image:height content=418>
 <meta name=twitter:card  content=summary_large_image>
-<meta name=twitter:image content=media/twittercard.png>
+<meta name=twitter:image content=media/twittercard.webp>
 
 <script src=script/shuffle.js type=module></script>
 <script src=script/run.js type=module></script>
@@ -96,11 +96,11 @@
       </dl>
 
       <div id=flags>
-        <img src=media/flags/nb.png alt=non-binary title=non-binary>
+        <img src=media/flags/nb.svg alt=non-binary title=non-binary>
-        <img src=media/flags/gf.png alt=genderfluid title=genderfluid>
+        <img src=media/flags/gf.svg alt=genderfluid title=genderfluid>
-        <img src=media/flags/pan.png alt=pansexual title=pansexual>
+        <img src=media/flags/pan.svg alt=pansexual title=pansexual>
-        <img src=media/flags/quoi.png alt=quoiromantic title=quoiromantic>
+        <img src=media/flags/quoi.svg alt=quoiromantic title=quoiromantic>
-        <img src=media/flags/polyam.png alt=polyamorous title=polyamorous>
+        <img src=media/flags/polyam.svg alt=polyamorous title=polyamorous>
       </div>
     </section>
 

media/flags/gf.svg

@@ -0,0 +1,7 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'>
+<rect width='200' height='24' fill='#ff74a2'/>
+<rect width='200' height='24' y='24' fill='#fcfcfc'/>
+<rect width='200' height='24' y='48' fill='#bd17d5'/>
+<rect width='200' height='24' y='72' fill='#2b2b2b'/>
+<rect width='200' height='24' y='96' fill='#333ebc'/>
+</svg>

media/flags/nb.svg

@@ -0,0 +1,6 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'>
+<rect width='200' height='30' fill='#fcf434'/>
+<rect width='200' height='30' y='30' fill='#fcfcfc'/>
+<rect width='200' height='30' y='60' fill='#9b5bd3'/>
+<rect width='200' height='30' y='90' fill='#2b2b2b'/>
+</svg>

media/flags/pan.svg

@@ -0,0 +1,5 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'>
+<rect width='200' height='40' fill='#ff208b'/>
+<rect width='200' height='40' y='40' fill='#ffd700'/>
+<rect width='200' height='40' y='80' fill='#20b0ff'/>
+</svg>

media/flags/polyam.svg

@@ -0,0 +1,11 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'>
+<rect width='200' height='43' fill='#36e'/>
+<rect width='200' height='34' y='43' fill='#e34'/>
+<rect width='200' height='43' y='77' fill='#123'/>
+<path stroke='#fe7' stroke-width='5' fill='none' d='
+  M126,64 l-26,26 -26,-26
+  c-26,-26 0,-56 26,-22  26,-34 52,-4 26,22 z
+  M55,60
+  c0,-20 20,-28 45,0     25,28 45,20 45,0
+   0,-20 -20,-28 -45,0  -25,28 -45,20 -45,0 z' />
+</svg>

media/flags/quoi.svg

@@ -0,0 +1,6 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'>
+<rect width='200' height='30' fill='#2b2b2b'/>
+<rect width='200' height='30' y='30' fill='#8bd655'/>
+<rect width='200' height='30' y='60' fill='#69d0d5'/>
+<rect width='200' height='30' y='90' fill='#d1d1d1'/>
+</svg>

style/base.css

@@ -206,20 +206,20 @@ strong { font-weight: 700; }
 
 /* extra #cube selector for specificity */
 #cube #hello {
-  --bg-image: url(../media/wave.png);
+  --bg-image: url(../media/wave.webp);
   background:
     var(--bg-image) bottom right / auto 60% no-repeat,
     var(--base-background);
 }
 
 @media (prefers-color-scheme: dark) {
-  #cube #hello { --bg-image: url(../media/wave-neon.png); }
+  #cube #hello { --bg-image: url(../media/wave-neon.webp); }
 }
 @media (prefers-reduced-data: reduce) {
-  #cube #hello { --bg-image: url(../media/wave.webp); }
+  #cube #hello { --bg-image: url(../media/wave.l.webp); }
 }
 @media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
-  #cube #hello { --bg-image: url(../media/wave-neon.webp); }
+  #cube #hello { --bg-image: url(../media/wave-neon.l.webp); }
 }
 
 #id, #id ::selection, #flags img {
@@ -256,13 +256,13 @@ strong { font-weight: 700; }
 
 
 #activities, #activities ::selection {
-  --hue: 60deg;
+  --hue: 90deg;
   --bg-angle: -60deg;
 }
 
 #cube #activities {
-  /* height of quobl.png is 58% of width */
+  /* height of quobl.webp is 58% of width */
-  --bg-image: url(../media/quobl.png);
+  --bg-image: url(../media/quobl.webp);
   background:
     var(--bg-image) bottom left 2ex / 50% auto no-repeat local,
     var(--base-background);
@@ -270,13 +270,13 @@ strong { font-weight: 700; }
 }
 
 @media (prefers-color-scheme: dark) {
-  #cube #activities { --bg-image: url(../media/quobl-neon.png); }
+  #cube #activities { --bg-image: url(../media/quobl-neon.webp); }
 }
 @media (prefers-reduced-data: reduce) {
-  #cube #activities { --bg-image: url(../media/quobl.webp); }
+  #cube #activities { --bg-image: url(../media/quobl.l.webp); }
 }
 @media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
-  #cube #activities { --bg-image: url(../media/quobl-neon.png); }
+  #cube #activities { --bg-image: url(../media/quobl-neon.webp); }
 }
 
 #links, #links ::selection {
@@ -316,7 +316,7 @@ strong { font-weight: 700; }
 #links a:hover { text-decoration: none; }
 
 #links #gallery {
-  --icon: url(../media/favicon.png);
+  --icon: url(../media/favicon.webp);
   --fg:   hsl(280deg 38% 43%);
   --bg:   hsl(100deg 99% 81%);
   image-rendering: pixelated;
@@ -330,7 +330,7 @@ strong { font-weight: 700; }
 }
 
 #links #blog {
-  --icon: url(../media/icons/blog.png);
+  --icon: url(../media/icons/blog.webp);
   --fg: #ffeebb;
   --bg: #332255;
   /* image-rendering: pixelated; */
@@ -353,14 +353,14 @@ strong { font-weight: 700; }
 }
 
 #links #fa {
-  --icon: url(../media/icons/furaffinity.png);
+  --icon: url(../media/icons/furaffinity.webp);
   --icon-bg: #20242a;
   --bg:      #353b45;
   --fg:      white;
 }
 
 #links #da {
-  --icon: url(../media/icons/deviantart.png);
+  --icon: url(../media/icons/deviantart.webp);
   --icon-bg: #000608;
   --bg: #314537;
   --fg: #e7ede4;
@@ -374,14 +374,14 @@ strong { font-weight: 700; }
 }
 
 #links #artfight {
-  --icon: url(../media/icons/artfight.png);
+  --icon: url(../media/icons/artfight.webp);
   --icon-bg: #222222;
   --bg: #a65178;
   --fg: white;
 }
 
 #links #chitter {
-  --icon: url(../media/icons/chitter.png);
+  --icon: url(../media/icons/chitter.webp);
   --bg: #582c58;
   --icon-bg: #2c162c;
   --fg: white;
@@ -514,7 +514,7 @@ strong { font-weight: 700; }
 }
 
 #cube #six {
-  --bg-image: url(../media/kesi.png);
+  --bg-image: url(../media/kesi.webp);
   background:
     var(--bg-image) bottom right / 100% auto no-repeat,
     var(--base-background);
@@ -531,11 +531,11 @@ strong { font-weight: 700; }
 }
 
 @media (prefers-color-scheme: dark) {
-  #cube #six { --bg-image: url(../media/kesi-neon.png); }
+  #cube #six { --bg-image: url(../media/kesi-neon.webp); }
 }
 @media (prefers-reduced-data: reduce) {
-  #cube #activities { --bg-image: url(../media/kesi.webp); }
+  #cube #activities { --bg-image: url(../media/kesi.l.webp); }
 }
 @media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
-  #cube #activities { --bg-image: url(../media/kesi-neon.webp); }
+  #cube #activities { --bg-image: url(../media/kesi-neon.l.webp); }
 }