📱 Reflow some elements at smaller screen sizes

layouts/partials/author.html

@@ -9,7 +9,7 @@
       </div>
     {{ end }}
     {{ with .Site.Author.links }}
-      <div class="flex text-lg text-gray-400 dark:text-gray-500">
+      <div class="flex flex-wrap text-lg text-gray-400 dark:text-gray-500">
         {{ range $links := . }}
           {{ range $name, $url := $links }}
             <a

layouts/partials/header.html

@@ -3,9 +3,9 @@
     <a class="hover:underline" rel="me" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
   </div>
   <nav>
-    <ul class="flex list-none">
+    <ul class="flex flex-col list-none sm:flex-row">
       {{ range .Site.Menus.main }}
-        <li class="mr-7 last:mr-0">
+        <li class="text-right sm:mr-7 sm:last:mr-0">
           <a class="hover:underline" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
         </li>
       {{ end }}