Fixes the categories labels and top blank space on small screens

Category labels will wrap if too long, and the blank screen at the top is reduced to not waste too much space
mastodon · May 7, 2024 · bcdf2d2 · bcdf2d2
1 parent 3e4d25b
commit bcdf2d2
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">