Merge pull request #10 from renchap/fix-header

Fixes the categories labels and top blank space on small screens
mastodon · May 7, 2024 · e14383f · e14383f
2 parents 3e4d25b + bcdf2d2
commit e14383f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/themes/mastodon/layouts/_default/baseof.html b/themes/mastodon/layouts/_default/baseof.html
@@ -19,7 +19,7 @@
   {{ end }}
 </head>
 <body>
-  <div class="bg-white py-24 sm:py-32">
+  <div class="bg-white py-12 sm:py-32">
     <div class="mx-auto max-w-7xl px-6 lg:px-8">
       {{ block "content" . }}{{ end }}
 

diff --git a/themes/mastodon/layouts/_default/single.html b/themes/mastodon/layouts/_default/single.html
@@ -1,16 +1,18 @@
 {{ define "content" }}
   <article class="h-entry">
     <header class="max-w-prose mx-auto relative">
-      <div class="flex items-center gap-x-4 text-xs mb-8">
+      <div class="flex flex-wrap items-center gap-x-4 text-xs mb-8">
         <a href="/" class="inline-flex items-center font-bold text-blurple-600 hover:underline hover:text-blurple-500">{{ partial "svg.html" "arrow-small-left" }} Back</a>
 
         <time class="text-gray-500 dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">
           {{ .Date.Format "Jan 2, 2006" }}
         </time>
 
-        {{ range .Params.categories }}
-          <a class="relative z-10 rounded-full bg-nightshade-50 text-nightshade-900 px-3 py-1.5 font-medium hover:text-nightshade-600" href="{{ "/categories/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
-        {{ end }}
+        <div class="flex flex-wrap items-center gap-x-4">
+          {{ range .Params.categories }}
+            <a class="relative z-10 rounded-full bg-nightshade-50 text-nightshade-900 px-3 py-1.5 font-medium hover:text-nightshade-600 whitespace-nowrap" href="{{ "/categories/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
+          {{ end }}
+        </div>
       </div>
 
       <h1 class="p-name text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">