Merge pull request 'Add a new logo' (#22) from Denevola/Hyperpipe:patch-new-logo into main

Reviewed-on: https://codeberg.org/Hyperpipe/Hyperpipe/pulls/22

index.html

@@ -6,6 +6,8 @@
       http-equiv="Content-Security-Policy"
       content="default-src 'self'; img-src *; media-src * blob:; style-src 'unsafe-inline' 'self'; connect-src *" />
     <link rel="icon" href="/favicon.svg" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <meta name="msapplication-TileColor" content="#181818">
     <link rel="preconnect" href="https://cdn.jsdelivr.net" />
     <link rel="preconnect" href="https://hyperpipeapi.onrender.com" />
     <link rel="dns-prefetch" href="https://pipedapi.kavin.rocks" />

public/favicon.svg

@@ -1,5 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#ebebeba3" class="bi bi-vinyl" viewBox="0 0 16 16">
-  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-  <path d="M8 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM4 8a4 4 0 1 1 8 0 4 4 0 0 1-8 0z"/>
-  <path d="M9 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#9f9f9f"><path d="M5.097 13.097a2.904 2.904 0 0 1 5.806 0A2.905 2.905 0 0 1 8 16a2.905 2.905 0 0 1-2.903-2.903Z"/><path d="M2.194 11.618a1.614 1.614 0 1 0 2.258 1.479c0-.661-.399-1.23-.968-1.479v-4.87l3.097 2.065v-4.31l1.432-2.18 1.406 2.09v4.4l3.097-2.065v4.87a1.614 1.614 0 1 0 2.258 1.479c0-.661-.398-1.23-.968-1.479v-7.27L10.71 6.413v-2.4L7.987 0 5.29 4.116v2.297L2.194 4.348v7.27Z"/></svg>

public/manifest.json

@@ -7,8 +7,20 @@
 	"description": "Privacy respecting YouTube Music Frontend.",
 	"icons": [
 		{
-			"src": "/favicon.svg",
-			"sizes": "any"
+			"src": "/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-maskable.png",
+			"sizes": "1024x1024",
+			"type": "image/png",
+			"purpose": "maskable"
 		}
 	]
 }

src/App.vue

@@ -201,7 +201,6 @@ onMounted(() => {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
-  padding-top: 1rem;
   font-weight: normal;
   margin-bottom: 10rem;
 }

src/components/NavBar.vue

@@ -32,7 +32,12 @@ function set(page) {
 
 <template>
   <nav>
-    <h1 class="bi bi-vinyl" @click="home"></h1>
+    <h1 class="bi" @click="home">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+        <path d="M5.097 13.097a2.904 2.904 0 0 1 5.806 0A2.905 2.905 0 0 1 8 16a2.905 2.905 0 0 1-2.903-2.903Z"/>
+        <path d="M2.194 11.618a1.614 1.614 0 1 0 2.258 1.479c0-.661-.399-1.23-.968-1.479v-4.87l3.097 2.065v-4.31l1.432-2.18 1.406 2.09v4.4l3.097-2.065v4.87a1.614 1.614 0 1 0 2.258 1.479c0-.661-.398-1.23-.968-1.479v-7.27L10.71 6.413v-2.4L7.987 0 5.29 4.116v2.297L2.194 4.348v7.27Z"/>
+      </svg>
+    </h1>
 
     <div class="wrap">
       <span
@@ -67,9 +72,15 @@ nav {
   align-items: center;
 }
 h1.bi {
+  display: flex;
   font-size: calc(1.75rem + 1.5vw);
   padding-bottom: 0;
 }
+h1.bi svg {
+  width: calc(1.75rem + 1.5vw);
+  height: auto;
+  fill: currentColor;
+}
 .bi {
   font-size: calc(1rem + 1.5vw);
 }