Adicionando logo e arrumando header layout (#51)

* Adicionando logo (São Paulo BitDevs)
* Arrumando layout de header

Co-authored-by: Miguel Medeiros <[email protected]>

Author: BitCoisas

_includes/header.html

@@ -1,7 +1,10 @@
 <header class="Header">
   <div class="Header-inner">
     <div class="Header-logo">
-      <a href="{{ '/' | relative_url }}">{{ site.data.settings.title }}</a>
+      <a href="{{ '/' | relative_url }}" aria-label="{{ site.data.settings.title }}">
+        <img src="{{ '/public/images/spbitdevs-logo.svg' | relative_url }}" alt="Logo {{ site.data.settings.title }}" class="Header-logo-image">
+        <span class="Header-logo-text">{{ site.data.settings.title }}</span>
+      </a>
     </div>
     <nav class="Header-nav">
       {% for item in site.data.settings.menu %}

assets/css/_header.scss

@@ -41,25 +41,24 @@
       display: flex;
       align-items: center;
       text-decoration: none;
+      gap: 0.5rem;
     }
   }
 
   &-logo-image {
     width: 30px;
     height: auto;
-    position: absolute;
-    top: -5px;
-
-    @media (min-width: 768px) {
-      top: -2px
-    }
+    position: static;
+    margin-right: 0;
+    transform: translateY(-7px);
   }
 
   &-logo-text {
-    margin-left: 4rem;
+    margin-left: 0;
     font-size: 2.1rem;
+
     @media (min-width: 768px) {
-      margin-left: 3.25rem;
+      margin-left: 0.5rem;
     }
   }