Feature/37 mobile screen header (#38)

* hide side name on small screens #37

* make nav buttons smaller on mobile screens #37

---------

Co-authored-by: Naomi Eliasar <naomi@omnimap.nl>

src/brazil_blog/static/css/brazil_blog_compiled.css

@@ -2302,6 +2302,10 @@ select {
     width: auto;
   }
 
+  .md\:inline-block {
+    display: inline-block;
+  }
+
   .md\:max-w-5xl {
     max-width: 64rem;
   }
@@ -2318,6 +2322,11 @@ select {
     align-items: flex-end;
   }
 
+  .md\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
   .md\:gap-2 {
     gap: 0.5rem;
   }

src/brazil_blog/templates/includes/header.html

@@ -11,15 +11,15 @@
                 {% picture site_logo format-{webp,avif,jpeg} fill-64x64 bgcolor-3730a3 class="inline-block rounded-full" %}
             </a>
             <a href="/"
-                class="text-black hover:text-black no-underline hover:underline decoration-4 underline-offset-4 decoration-wavy">
+                class="hidden md:inline-block text-black hover:text-black no-underline hover:underline decoration-4 underline-offset-4 decoration-wavy">
                 <h1 class="text-3xl font-bold">{{ site_name }}</h1>
             </a>
         </div>
         <ul class="flex items-center gap-3">
             {% for menuitem in site_root.get_children.live.in_menu %}
             <li>
                 <a href="{% pageurl menuitem %}" class="text-white hover:text-blue-800 transition-colors">
-                    {{ menuitem.title }}
+                    <span class="text-sm md:text-base"> {{ menuitem.title }} </span>
                 </a>
             </li>
             {% endfor %}