feat: navbar

Author: Tony-Rome

theme/static/css/style.css

@@ -23,6 +23,7 @@ body, html, root {
 }
 
 .navbar-left {
+    width: 90%;
     display: flex;
     align-items: center;
     background-color: #578FCA;
@@ -94,7 +95,9 @@ body, html, root {
 .welcome-msg {
     text-align: center;
     align-items: center;
-    margin: 3rem 15rem;
+    margin: 3rem auto;
+    padding-right: 3rem;
+    padding-left: 3rem
 }
 
 /* Barra de búsqueda */
@@ -121,7 +124,7 @@ body, html, root {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
-    justify-content: flex-start;
+    justify-content: center;
     padding: 0;
     margin: 20px;
 }
@@ -370,18 +373,30 @@ iframe {
 
 
 @media (max-width: 1300px) {
+
+    .navbar-logo {
+        height: 40px;
+    }
+
+    .navbar-title, .cursor {
+        font-size: 3rem;
+    }
+
+
     .navbar-menu {
         flex-direction: column;
         align-items: stretch;
         gap: 1rem;
         margin: 1rem auto;
         padding: 0;
+        width: 20%;
     }
 
     .navbar-menu a {
         display: block;
-        width: 100%;
+        max-width: 100%;
         text-align: center;
+        font-size: 80%;
     }
 
     .preview-tags-container {
@@ -390,7 +405,24 @@ iframe {
 }
 
 @media (max-width: 920px) {
+
+    .navbar-logo {
+        height: 20px;
+    }
+
+    .navbar-title, .cursor {
+        font-size: 1rem;
+    }
+
     .welcome-msg-body {
         font-size: 0;
     }
+
+    .preview-summary {
+        display: none;
+    }
+
+    .navbar-menu a {
+        font-size: 60%;
+    }
 }

theme/templates/navbar.html

@@ -2,9 +2,9 @@
     <a class="left-link" href="{{ SITEURL }}/">
         <div class="navbar-left">
             <img src="{{ SITEURL }}/theme/img/pythonchile_logo.png" alt="Logo" class="navbar-logo">
-            <span class="navbar-title">El</span>
-            <span class="navbar-title">Blog</span>
-            <span class="cursor">|</span>
+            <div class="navbar-title">El</div>
+            <div class="navbar-title">Blog</div>
+            <div class="cursor">|</div>
         </div>
     </a>