[feat] miscellaneous improvements

README.md

@@ -1,17 +1,19 @@
-# secureblue website
+# secureblue.io
 
-This repo contains the source files of [secureblue's static website](https://esselownitro.github.io) (provisory domain), generated using Jekyll and currently being deployed to GitHub Pages. We plan on deploying to Cloudflare Pages in the future. It is a fork of [GrapheneOS's static website project](https://github.com/GrapheneOS/grapheneos.org) and borrows HTML and CSS fragments as well as some general ideas from it, but uses a website generation workflow we consider more convenient.
+This repo contains the source files of [secureblue's static website](https://esselownitro.github.io) (provisory domain), generated using Jekyll and currently being deployed to GitHub Pages. We plan on deploying to Cloudflare Pages in the future. It is a fork of [GrapheneOS's static website project](https://github.com/GrapheneOS/grapheneos.org) and borrows pieces of HTML and CSS as well as some general ideas from it, but uses a website generation workflow we consider more convenient.
 
 ## Layout
 
-`_layouts/` stores the only layout file that wraps all pages, at the outermost level. It uses Liquid expressions to selectively include the meta elements in head, the hero banner and the page header and footer. This allows the hero banner to be displayed only in the index page, the header and meta elements to be present in every page but with slightly modified parameters depending on which page the layout wraps, and the footer to be reused as is in every page.
+`_layouts/` stores the only layout file that wraps all pages, at the outermost level. It always includes the `meta.html`, `header.html` and `footer.html` fragments, and uses Liquid expressions to include the hero banner only.
 
 ## Includes
 
-`_includes/` stores reusable HTML fragments. What follows are comments on page fragments worth commenting on.
+`_includes/` stores reusable HTML fragments. What follows are details of fragments worth commenting on.
 
-`header.html` uses Liquid expressions iterating on the `site.pages` global variable provided by Jekyll to generate its page list, instead of depending on a hard-coded list. It also adds `aria-current="page"` to a page's list entry when included in said page, highlighting it with a blue color. `site.pages` counts all files that include front matter (blocks of data wrapped between triple dashes) as pages, and in this project they are located in `content/` to keep it tidy.
+`meta.html` uses variables read from the front matter of any given page it is included in, so each page can have its correct metadata without a meta element section that is mostly repeated acroos all pages. A very minor positive side effect of this is that each markdown page has a sort of description about its purpose.
+
+`header.html` uses Liquid expressions iterating on the `site.pages` global variable provided by Jekyll to generate its page list, instead of depending on a hard-coded list. It also adds `aria-current="page"` to a page's list entry when included in said page, highlighting its text with a blue accent. `site.pages` counts all files that include front matter (blocks of data wrapped between triple dashes) as pages, which are located in `content/` in this project, to keep it tidy.
 
 # What about the rest?
 
-This document is a work in progress.
+This document is a work in progress.

_includes/header.html

@@ -22,7 +22,7 @@
     -->
     <nav id="site-menu">
         <ul>
-            <li {% if include.content == "" %}aria-current="page"{% endif %}><a href="/"><img src="/assets/secureblue.svg" alt=""/>secureblue</a></li>
+            <li {% if include.content == "" %}aria-current="page"{% endif %}><a href="/"><img src="/assets/favicon.svg" alt=""/>secureblue</a></li>
             {% for i in site.pages %}
                 {% if i.permalink != "/" %}
                     {% assign slashless_permalink = i.permalink | remove: "/" %}

_includes/hero.html

@@ -30,7 +30,7 @@ <h1><a href="#secureblue">secureblue</a></h1>
 
     <figure class="device-img">
         <img class="laptop-img" width="288" height="171" src="/assets/some-random-laptop.svg" alt=""/>
-        <img class="laptop-logo-img" width="120" height="120" src="/assets/secureblue.svg" alt=""/>
+        <img class="laptop-logo-img" width="120" height="120" src="/assets/favicon.svg" alt=""/>
     </figure>
 
 </div>

_includes/meta.html

@@ -42,12 +42,14 @@
 
 <link rel="canonical" href="https://esselownitro.github.io/{{ include.content }}"/>
 
-<link rel="icon" href="/assets/favicon.ico"/>
-<link rel="icon" sizes="any" type="image/svg+xml" href="/assets/favicon.svg"/>
-<link rel="mask-icon" href="/assets/secureblue.svg" color="#1a1a1a"/>
-<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png"/>
+<link rel="icon" type="image/png" href="/assets/favicon-96x96.png" sizes="96x96" />
+<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
+<link rel="shortcut icon" href="/assets/favicon.ico" />
+<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png" />
+<meta name="apple-mobile-web-app-title" content="secureblue" />
+<link rel="mask-icon" href="/assets/mask-icon.svg" color="#096b9f"/>
+<link rel="manifest" href="/assets/site.webmanifest" />
 
 <link rel="stylesheet" href="/assets/main.css"/>
 
-<!-- link rel="manifest" href="/manifest.webmanifest"/ -->
-<!-- link rel="license" href="/LICENSE.txt"/ -->
+<link rel="manifest" href="/manifest.webmanifest"/>

assets/manifest.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "secureblue",
+  "short_name": "secureblue",
+  "icons": [
+    {
+      "src": "/assets/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/assets/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#241f31",
+  "background_color": "#241f31",
+  "display": "standalone"
+}