Logo redesign

assets/images/logo.svg

@@ -1,13 +0,0 @@
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg viewBox="0 0 384 384" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <rect width="100%" height="100%" style="fill: black; stroke-width: 0;" shape-rendering="crispEdges"></rect>
-    <rect x="0" y="0" width="128" height="128" shape-rendering="crispEdges" style="fill: none; stroke-width: 0;"></rect>
-    <rect x="128" y="0" width="128" height="128" shape-rendering="crispEdges" style="fill: white; stroke-width: 0;"></rect>
-    <rect x="256" y="0" width="128" height="128" shape-rendering="crispEdges" style="fill: none; stroke-width: 0;"></rect>
-    <rect x="0" y="128" width="128" height="128" shape-rendering="crispEdges" style="fill: none; stroke-width: 0;"></rect>
-    <rect x="128" y="128" width="128" height="128" shape-rendering="crispEdges" style="fill: none; stroke-width: 0;"></rect>
-    <rect x="256" y="128" width="128" height="128" shape-rendering="crispEdges" style="fill: white; stroke-width: 0;"></rect>
-    <rect x="0" y="256" width="128" height="128" shape-rendering="crispEdges" style="fill: white; stroke-width: 0;"></rect>
-    <rect x="128" y="256" width="128" height="128" shape-rendering="crispEdges" style="fill: white; stroke-width: 0;"></rect>
-    <rect x="256" y="256" width="128" height="128" shape-rendering="crispEdges" style="fill: white; stroke-width: 0;"></rect>
-</svg>

assets/manifest.webmanifest

@@ -10,24 +10,8 @@
     "orientation": "any",
     "icons": [
         {
-            "src": "/assets/images/logo96.png",
-            "sizes": "96x96"
-        },
-        {
-            "src": "/assets/images/logo192.png",
-            "sizes": "192x192"
-        },
-        {
-            "src": "/assets/images/logo384.png",
-            "sizes": "384x384"
-        },
-        {
-            "src": "/assets/images/logo768.png",
-            "sizes": "768x768"
-        },
-        {
-            "src": "/assets/images/logo.svg",
-            "sizes": "512x512"
+            "src": "/assets/images/logo256.png",
+            "sizes": "256x256"
         }
     ],
     "theme_color": "#000000",

assets/offline.html

@@ -16,7 +16,7 @@ comments: off
     <li>???</li>
 </ul>
 This site uses a service worker to provide a limited offline mode, but it doesn't work for everything (dynamic pages, ones requiring a bit of server logic, the comments system, pages which haven't been cached), so you are being shown this instead.
-Please enjoy the below "flappy bird" game until your connection comes back, thanks to palaiologos (click or press space).
+Please enjoy the below "flappy bird" game until your connection comes back, thanks to palaiologos and ubq323 (click or press space).
 </p>
 <!--experimental miniaturized bird (flappy) (contributed by palaiologos and tweaked by me inelegantly)-->
 <canvas style="border: 1px solid black"></canvas>

assets/sw.js

@@ -4,8 +4,8 @@ const cacheName = `${siteVersion}-v1`
 const precache = [
     offlinePage,
     "/index.html",
-    "/assets/images/logo.svg",
-    "/assets/images/icon.png",
+    "/assets/images/logo256.png",
+    //"/assets/images/icon.png",
     "/assets/js/page.js",
     "/points/index.html",
     "/points/index.js",

style.sass

@@ -14,8 +14,17 @@ nav
     background: black
 
     .logo
-        width: 1.5em
-        height: 1.5em
+        width: 1.5rem
+        height: 1.5rem
+        image-rendering: crisp-edges
+        image-rendering: pixelated
+
+    .logocont
+        display: flex
+        align-items: center
+        font-style: italic
+        color: white
+        font-size: 1.25em
 
     a, img
         margin-right: 0.5em

templates/layout.pug

@@ -11,14 +11,15 @@ html(lang="en")
         if description
             meta(name="description", content=description)
         link(rel="manifest", href="/assets/manifest.webmanifest")
-        link(rel="shortcut icon", href="/assets/images/logo96inv.png", type="image/png")
+        link(rel="shortcut icon", href="/assets/images/logo256.png", type="image/png")
         style!= css
         if comments !== "off"
             script(src=`https://${domain}/isso/js/embed.min.js`, async=true, data-isso=`https://${domain}/isso/`)
     body
         nav
-            a(href="/")
-                img.logo(src="/assets/images/logo.svg", alt="")
+            a.logocont(href="/")
+                img.logo(src="/assets/images/logo256.png", alt="osmarks.net logo")
+                .logotext osmarks
             +nav-item("/", "Index")
             +nav-item(`https://status.${domain}/`, "Status")
             +nav-item(`https://i.${domain}/`, "Images")