feat: Add icon assets to website

Nodsoft · Aug 13, 2023 · 77ed2bb · 77ed2bb
1 parent 5a7eede
commit 77ed2bb
Show file tree

Hide file tree

Showing 14 changed files with 66,624 additions and 14 deletions.
diff --git a/nodsoft_moltenobsidian_web/public/android-chrome-192x192.png b/nodsoft_moltenobsidian_web/public/android-chrome-192x192.png
diff --git a/nodsoft_moltenobsidian_web/public/android-chrome-512x512.png b/nodsoft_moltenobsidian_web/public/android-chrome-512x512.png
diff --git a/nodsoft_moltenobsidian_web/public/apple-touch-icon.png b/nodsoft_moltenobsidian_web/public/apple-touch-icon.png
diff --git a/nodsoft_moltenobsidian_web/public/browserconfig.xml b/nodsoft_moltenobsidian_web/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#603cba</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/nodsoft_moltenobsidian_web/public/favicon-16x16.png b/nodsoft_moltenobsidian_web/public/favicon-16x16.png
diff --git a/nodsoft_moltenobsidian_web/public/favicon-32x32.png b/nodsoft_moltenobsidian_web/public/favicon-32x32.png
diff --git a/nodsoft_moltenobsidian_web/public/favicon.ico b/nodsoft_moltenobsidian_web/public/favicon.ico
diff --git a/nodsoft_moltenobsidian_web/public/favicon.svg b/nodsoft_moltenobsidian_web/public/favicon.svg
diff --git a/nodsoft_moltenobsidian_web/public/mstile-150x150.png b/nodsoft_moltenobsidian_web/public/mstile-150x150.png
diff --git a/nodsoft_moltenobsidian_web/public/safari-pinned-tab.svg b/nodsoft_moltenobsidian_web/public/safari-pinned-tab.svg
diff --git a/nodsoft_moltenobsidian_web/public/site.webmanifest b/nodsoft_moltenobsidian_web/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "Molten Obsidian",
+    "short_name": "Molten Obsidian",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/nodsoft_moltenobsidian_web/src/components/BaseHead.astro b/nodsoft_moltenobsidian_web/src/components/BaseHead.astro
@@ -13,7 +13,13 @@ const { title, description} = Astro.props;
 <!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="icon" href="/favicon.ico" />
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="manifest" href="/site.webmanifest">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="theme-color" content="#ffffff">
 <meta name="generator" content={Astro.generator} />
 
 <!-- Canonical URL -->

diff --git a/nodsoft_moltenobsidian_web/src/components/Sidebar.astro b/nodsoft_moltenobsidian_web/src/components/Sidebar.astro
@@ -15,6 +15,7 @@ export const manifestClient = VaultManifestClient.fromManifest(manifest as Vault
 
 <aside>
 	<h2 class="navbar-brand">
+		<img src="/android-chrome-192x192.png">
 		<a href="/">{SITE_TITLE}</a>
 	</h2>
 

diff --git a/nodsoft_moltenobsidian_web/src/components/Sidebar.astro.scss b/nodsoft_moltenobsidian_web/src/components/Sidebar.astro.scss
@@ -20,10 +20,21 @@ aside {
     display: none;
   }
 
-  .navbar-brand > a {
-    text-decoration: none;
-    color: white;
-    padding-left: 2rem;
+  .navbar-brand {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    align-items: center;
+
+    img {
+      // Fit to parent
+      width: 4rem;
+    }
+
+    a {
+      text-decoration: none;
+      color: white;
+    }
   }
 
   nav {