chore: add marpme's logo to page

marpme · Oct 30, 2023 · 5b436d4 · 5b436d4
1 parent c602625
commit 5b436d4
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 15 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -4,12 +4,9 @@ import DarkModeToggle from "./DarkModeToggle.astro";
 ---
 
 <header>
-  <a
-    class="unset absolute z-10 left-[50%] -top-[100rem] translate-x-[-50%] bg-white text-black px-8 py-2 focus:top-[initial]"
-    href="#main"
-  >
-    Skip to content
-  </a>
+  <div class="logo">
+    <img alt="marpme's logo" src="/logo.svg" width="32px" />
+  </div>
   <nav>
     <section class="text-text-bold">
       <ul class="unset flex gap-4 [&>li]:p-0">
@@ -50,9 +47,15 @@ import DarkModeToggle from "./DarkModeToggle.astro";
     grid-area: header;
     display: grid;
     align-items: center;
-    grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(
-        0,
-        max-content
-      );
+    grid-template-columns:
+      minmax(0, max-content) minmax(0, 1fr)
+      minmax(0, max-content) minmax(0, max-content);
+  }
+
+  .logo {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    margin-inline-end: 2rem;
   }
 </style>
diff --git a/src/layouts/Favicon.astro b/src/layouts/Favicon.astro
@@ -1,12 +1,13 @@
 ---
-/* 
+/*
   Not a layout. Just a component used in layouts.
 */
 ---
+
 <meta name="theme-color" content="#ffffff" />
 
-<!-- 
-  This is an example. 
-  Use https://realfavicongenerator.net to generate the icons and manifest. 
+<!--
+  This is an example.
+  Use https://realfavicongenerator.net to generate the icons and manifest.
 -->
-<link href="/favicon.ico" rel="shortcut icon" />
+<link href="/logo.svg" rel="shortcut icon" />