fixed lighthouse errors

Signed-off-by: Marc Pervaz Boocha <mboocha@sudomsg.xyz>

11 files changed, 160 insertions, 119 deletions

diff --git a/.eleventy.js b/.eleventy.js
index 70755b0..27b0c01 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -76,7 +76,7 @@ module.exports = eleventyConfig => {
     eleventyConfig.addPassthroughCopy('static/')
     eleventyConfig.addPassthroughCopy('_headers')
     eleventyConfig.addPassthroughCopy('_redirects')
-    eleventyConfig.addPassthroughCopy('favicon.svg')
+    eleventyConfig.addPassthroughCopy('favicon/')
     eleventyConfig.addPassthroughCopy('favicon.ico')
 
     return {
diff --git a/favicon.ico b/favicon.ico
index 2db73db..765a709 100644
--- a/favicon.ico
+++ b/favicon.ico
diff --git a/favicon.svg b/favicon.svg
deleted file mode 100644
index d8d3254..0000000
--- a/favicon.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg version="2.0" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
-   <style>
-        path {
-            fill: black;
-        }
-        @media (prefers-color-scheme: dark) {
-            path { fill: white; }
-        }
-    </style>
- <g dominant-baseline="central" fill="#8b0000" stroke-width="1.2517" aria-label="#">
-  <path d="m138.71 12.498-16.272 64.933h38.334l16.429-64.933h25.034l-16.429 64.933h38.177v24.096h-43.967l-13.143 52.259h39.116v23.939h-45.218l-16.272 64.776h-25.034l16.429-64.776h-38.49l-16.429 64.776h-24.878l16.272-64.776h-40.368v-23.939h46.47l13.143-52.259h-41.62v-24.096h47.409l16.272-64.933zm16.272 89.028h-38.334l-13.143 52.259h38.49z"/>
- </g>
-</svg>
diff --git a/favicon/192.png b/favicon/192.png
new file mode 100644
index 0000000..b3bdcb4
--- /dev/null
+++ b/favicon/192.png
diff --git a/favicon/512.png b/favicon/512.png
new file mode 100644
index 0000000..08f4b67
--- /dev/null
+++ b/favicon/512.png
diff --git a/favicon/icon.svg b/favicon/icon.svg
new file mode 100644
index 0000000..ae95fe3
--- /dev/null
+++ b/favicon/icon.svg
@@ -0,0 +1 @@
+<svg width="1024" height="1024" version="2.0" xmlns="http://www.w3.org/2000/svg"><path d="m554.872 51.994-65.088 259.732H643.12l65.716-259.732h100.136l-65.716 259.732h152.708v96.384H720.096l-52.572 209.036h156.464v95.756H643.116l-65.088 259.104H477.892l65.716-259.104h-153.96l-65.716 259.104H224.42l65.088-259.104H128.036v-95.756h185.88l52.572-209.036h-166.48v-96.384h189.636l65.088-259.732zm65.088 356.112H466.624l-52.572 209.036h153.96z" dominant-baseline="central" fill="#8b0000" stroke-width="1.252" aria-label="#"/></svg>
\ No newline at end of file
diff --git a/src/assets/index.css b/src/assets/index.css
index 3d04fb2..bd17057 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -14,19 +14,19 @@
     main {
         flex-grow: 1;
     }
-     :any-link {
+    * :any-link {
         color: inherit;
         text-decoration: underline;
     }
-     :any-link:hover,
-     :any-link:active {
+    * :any-link:hover,
+    * :any-link:active {
         font-style: italic;
     }
     .topnav {
-        background: darkred;
+        background: rgb(139, 0, 0);
         text-decoration: none;
         font-weight: bold;
-        color: white;
+        color: rgb(255, 255, 255);
         padding: 1rem;
         font-size: 1rem;
     }
@@ -36,9 +36,7 @@
         padding-left: 0rem;
         padding-right: 0rem;
     }
-    .topnav :any-link {
-        text-decoration: none;
-    }
+    .topnav :any-link,
     .topnav :any-link:hover {
         text-decoration: none;
     }
@@ -58,18 +56,18 @@
         }
     }
     .err {
-        color: darkred;
+        color: rgb(139, 0, 0);
     }
     @media (prefers-color-scheme: dark) {
          :root {
-            background: black;
-            color: white;
+            background: rgb(0, 0, 0);
+            color: rgb(255, 255, 255);
         }
         #menu nav {
-            background: red;
+            background: rgb(255, 0, 0);
         }
         .err {
-            color: red;
+            color: rgb(255, 0, 0);
         }
     }
 }
diff --git a/src/assets/manifest.njk b/src/assets/manifest.njk
index 3942d06..350c7af 100644
--- a/src/assets/manifest.njk
+++ b/src/assets/manifest.njk
@@ -10,20 +10,29 @@ permalink: /app.webmanifest
   "id": "{{ '/' | url }}",
   "scope": "{{ '/' | url }}",
   "display": "minimal-ui",
-  "background_color": "red",
-  "theme_color": "red",
+  "background_color": "#8b0000",
+  "theme_color": "#8b0000",
   "description": "{{ metadata.description }}",
   "icons": [
     {
       "src": "{{ '/favicon.ico' | url }}",
-      "sizes": "256x256",
+      "sizes": "any",
       "type": "image/vnd.microsoft.icon"
     },
     {
-      "src": "{{ '/favicon.svg' | url }}",
+      "src": "{{ '/favicon/icon.svg' | url }}",
       "sizes": "any",
       "type": "image/svg+xml"
+    },
+    { 
+      "src": "{{ '/favicon/192.png' | url }}",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+       "src": "{{ '/favicon/512.png' | url }}",
+       "type": "image/png",
+       "sizes": "512x512" 
     }
   ]
-  
 }
diff --git a/src/assets/prism.css b/src/assets/prism.css
index 431fe8a..0dd88c2 100644
--- a/src/assets/prism.css
+++ b/src/assets/prism.css
@@ -1,130 +1,175 @@
-code[class*="language-"],pre[class*="language-"] {
-    color: #f8f8f2;
-	background: none;
-	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-	font-family: monospace;
-	font-size: 1em;
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
-	line-height: 1.5;
-	tab-size: 4;
-	hyphens: none;
+code[class*="language-"],
+pre[class*="language-"] {
+    color: rgb(248, 248, 242);
+    background: none;
+    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+    font-family: monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    tab-size: 4;
+    hyphens: none;
 }
 
+
 /* Code blocks */
+
 pre[class*="language-"] {
-	padding: 1em;
-	margin: .5em 0;
-	overflow: auto;
-	border-radius: 0.3em;
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+    border-radius: 0.3em;
 }
 
-:not(pre) > code[class*="language-"],pre[class*="language-"] {
-	background: #272822;
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+    background: rgb(39, 40, 34);
 }
 
+
 /* Inline code */
-:not(pre) > code[class*="language-"] {
-	padding: .1em;
-	border-radius: .3em;
-	white-space: normal;
+
+:not(pre)>code[class*="language-"] {
+    padding: .1em;
+    border-radius: .3em;
+    white-space: normal;
 }
 
-.token.comment,.token.prolog,.token.doctype,.token.cdata {
-	color: #8292a2;
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: rgb(130, 146, 162);
 }
 
 .token.punctuation {
-	color: #f8f8f2;
+    color: rgb(248, 248, 242);
 }
 
 .token.namespace {
-	opacity: .7;
+    opacity: .7;
 }
 
-.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted {
-	color: #f92672;
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+    color: rgb(249, 38, 114);
 }
 
-.token.boolean,.token.number {
-	color: #ae81ff;
+.token.boolean,
+.token.number {
+    color: rgb(174, 129, 255);
 }
 
-.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted {
-	color: #a6e22e;
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+    color: rgb(166, 226, 46);
 }
 
-.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable {
-	color: #f8f8f2;
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+    color: rgb(248, 248, 242);
 }
 
-.token.atrule,.token.attr-value,.token.function,.token.class-name {
-	color: #e6db74;
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+    color: rgb(230, 219, 116);
 }
 
 .token.keyword {
-	color: #66d9ef;
+    color: rgb(102, 217, 239);
 }
 
-.token.regex,.token.important {
-	color: #fd971f;
+.token.regex,
+.token.important {
+    color: rgb(253, 151, 31);
 }
 
 .token.important,
 .token.bold {
-	font-weight: bold;
+    font-weight: bold;
 }
+
 .token.italic {
-	font-style: italic;
+    font-style: italic;
 }
 
 .token.entity {
     cursor: help;
 }
 
-@media screen and (prefers-color-scheme: dark){
-    code[class*="language-"],pre[class*="language-"] {
-        color: black;
-        text-shadow: 0 1px white;
+@media screen and (prefers-color-scheme: dark) {
+    code[class*="language-"],
+    pre[class*="language-"] {
+        color: #000000;
+        text-shadow: 0 1px #ffffff;
     }
-    
-    :not(pre) > code[class*="language-"], pre[class*="language-"] {
-        background: #f5f2f0;
+     :not(pre)>code[class*="language-"],
+    pre[class*="language-"] {
+        background: rgb(245, 242, 240);
     }
-    
-    .token.comment,.token.prolog,.token.doctype,.token.cdata {
-        color: slategray;
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata {
+        color: rgb(112, 128, 144);
     }
-    
     .token.punctuation {
-        color: #999;
+        color: rgb(153, 153, 153);
     }
-    
-    .token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted {
-        color: #905;
+    .token.property,
+    .token.tag,
+    .token.boolean,
+    .token.number,
+    .token.constant,
+    .token.symbol,
+    .token.deleted {
+        color: rgb(153, 0, 85);
     }
- 
-    .token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted {
-        color: #690;
+    .token.selector,
+    .token.attr-name,
+    .token.string,
+    .token.char,
+    .token.builtin,
+    .token.inserted {
+        color: rgb(102, 153, 0);
     }
-    
-    .token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string {
-        color: #9a6e3a;
-        background: hsla(0, 0%, 100%, .5);
+    .token.operator,
+    .token.entity,
+    .token.url,
+    .language-css .token.string,
+    .style .token.string {
+        color: rgb(154, 110, 58);
+        background: rgba(255, 255, 255, 0.5);
     }
- 
-    .token.atrule,.token.attr-value,.token.keyword {
-        color: #07a;
+    .token.atrule,
+    .token.attr-value,
+    .token.keyword {
+        color: rgb(0, 118, 168);
     }
- 
-    .token.function,.token.class-name {
-        color: #DD4A68;
+    .token.function,
+    .token.class-name {
+        color: rgb(221, 75, 104);
     }
- 
-    .token.regex,.token.important,.token.variable {
-        color: #e90;
+    .token.regex,
+    .token.important,
+    .token.variable {
+        color: rgb(238, 153, 0);
     }
 }
\ No newline at end of file
diff --git a/src/assets/sw.mjs b/src/assets/sw.mjs
index 2359e0f..78d659a 100644
--- a/src/assets/sw.mjs
+++ b/src/assets/sw.mjs
@@ -4,7 +4,7 @@ const sw_cache = {
         "/index.css",
         "/prism.css",
         "/index.js",
-        "/favicon.svg",
+        "/favicon/icon.svg",
         "/offline.html",
         "/"
     ],
@@ -16,7 +16,7 @@ self.addEventListener('install', event => {
     self.skipWaiting()
     event.waitUntil((async() => {
         const cache = await self.caches.open(sw_cache.store)
-        cache.addAll(sw_cache.default)
+        return cache.addAll(sw_cache.default)
     })())
 })
 
@@ -32,16 +32,16 @@ self.addEventListener('activate', event => {
 })
 
 self.addEventListener('fetch', event => {
-    if (event.request.method != 'GET') {
-        return
-    }
+    event.respondWith((async() => {
+        if (event.request.method != 'GET') {
+            return fetch(event.request)
+        }
 
-    const req_url = new URL(event.request.url)
-    if (req_url.origin != self.location.origin) {
-        return
-    }
+        const req_url = new URL(event.request.url)
+        if (req_url.origin != self.location.origin) {
+            return fetch(event.request)
+        }
 
-    event.respondWith((async() => {
         const cacheres = await self.caches.match(event.request)
         return cacheres || (async() => {
             try {
diff --git a/src/layouts/base.njk b/src/layouts/base.njk
index 98b9c37..66492a3 100644
--- a/src/layouts/base.njk
+++ b/src/layouts/base.njk
@@ -15,10 +15,12 @@
 		<meta name="twitter:card" content="summary"></meta>
 		<meta property="og:url" content="{{ page.url | url | absoluteUrl(metadata.url) }}"/>
 		<link rel="canonical" href="{{ page.url | url | absoluteUrl(metadata.url) }}"/>
-		<link async rel="icon" href="{{ '/favicon.svg' | url }}" type="image/svg+xml">
 		<link rel="alternate" href="{{ metadata.feed | url }}" type="application/atom+xml" title="{{ metadata.title }}">
+		<link rel="icon" href="{{ '/favicon.ico' | url }}" sizes="any">
+		<link rel="icon" href="{{ '/favicon/icon.svg' | url }}" type="image/svg+xml">
+		<link rel="apple-touch-icon" href="{{ '/favicon/192.png' | url }}">
 		<link rel="manifest" href="{{ '/app.webmanifest' | url }}" crossorigin="use-credentials">
-		<meta name="theme-color" content"darkred">
+		<meta name="theme-color" content"#8b0000">
 		<link as="style" href="{{ '/index.css' | url }}" rel="stylesheet"/>
 		{% if syntaxhighlight %}<link as="style" href="{{ '/prism.css' | url }}" rel="stylesheet"/>{% endif %}
 		<script type="module" src="{{ '/index.js' | url }}"></script>