Display logo and create img directory

_config.ts

@@ -6,6 +6,8 @@ const site = lume({
   location: new URL("https://blog.deca.eco"),
 });
 
+site.copy("img");
+
 site.use(relativeUrls());
 site.use(blog());
 

_data.yml

@@ -1,5 +1,7 @@
 lang: en
 
+logo: deca-logo.png
+
 home:
   welcome: DECA PROTOCOL
   icon: favicon.png 

_includes/css/navbar.css

@@ -31,5 +31,27 @@
 }
 
 .navbar-home {
+  display: flex;
+  align-self: center;
+  align-items: center;
+  color: var(--color-foreground);
+  column-gap: 10px;
   text-decoration: none;
-}
+  font: var(--text-body-bold);
+  letter-spacing: var(--text-title-spacing);
+
+
+  & img {
+    margin-bottom: 10px;
+    width:175px;
+    height:58px;
+  }
+
+  & span {
+    @media (max-width: 820px) {
+      display: none;
+    }
+  }
+
+}
+

_includes/layouts/base.vto

@@ -13,7 +13,7 @@
     <link rel="stylesheet" href="/styles.css">
     <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="{{ metas.site }}">
     <link rel="alternate" href="/feed.json" type="application/json" title="{{ metas.site }}">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon.png">
     <link rel="canonical" href="{{ url |> url(true) }}">
     <script src="/js/main.js" type="module"></script>
     {{ it.extra_head?.join("\n") }}
@@ -22,7 +22,7 @@
     <nav class="navbar">
       <a href="/" class="navbar-home">
         {{ if it.logo }}
-          {{ it.logo }}
+          <img src="/img/{{ it.logo }}" alt="{{ metas.site }}">
         {{ else }}
           <strong>{{ metas.site }}</strong>
         {{ /if }}