fix: CSS padding and math overflow on small screens

Fix #3133
HugoBlox · Sep 8, 2024 · 4f621df · 4f621df
1 parent 9b7e44a
commit 4f621df
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 7 deletions.
diff --git a/modules/blox-tailwind/assets/css/components/all.css b/modules/blox-tailwind/assets/css/components/all.css
@@ -5,3 +5,4 @@
 @import "charts.css";
 @import "steps.css";
 @import "cards.css";
+@import "math.css";
diff --git a/modules/blox-tailwind/assets/css/components/math.css b/modules/blox-tailwind/assets/css/components/math.css
@@ -0,0 +1,2 @@
+/* Prevent long equations overflowing on small screens by scrolling horizontally instead. */
+.katex-display { overflow: auto hidden; }
diff --git a/modules/blox-tailwind/assets/dist/wc.min.css b/modules/blox-tailwind/assets/dist/wc.min.css
diff --git a/modules/blox-tailwind/layouts/partials/blox/collection.html b/modules/blox-tailwind/layouts/partials/blox/collection.html
@@ -82,7 +82,7 @@
 {{ $columns := $block.design.columns | default "2" }}
 
 {{ if $block.content.title }}
-<div class="flex flex-col items-center max-w-prose mx-auto gap-3 justify-center">
+<div class="flex flex-col items-center max-w-prose mx-auto gap-3 justify-center px-6 md:px-0">
 
   <div class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">
     {{ $block.content.title | emojify | $page.RenderString }}
@@ -92,7 +92,7 @@
 </div>
 {{ end }}
 
-<div class="flex flex-col items-center">
+<div class="flex flex-col items-center px-6">
 
   {{ $config := dict "columns" ($block.design.columns | default 2) "len" (len $query) "fill_image" ($block.design.fill_image | default true) }}
   {{ partial "functions/render_view" (dict "fragment" "start" "page" $block "item" . "view" $view "config" $config) }}

diff --git a/modules/blox-tailwind/layouts/partials/blox/markdown.html b/modules/blox-tailwind/layouts/partials/blox/markdown.html
@@ -8,7 +8,7 @@
 {{ $title := $block.content.title | emojify | $page.RenderString }}
 {{ $text := $block.content.text | emojify | $page.RenderString | safeHTML }}
 
-<div class="flex flex-col items-center max-w-prose mx-auto gap-3 justify-center">
+<div class="flex flex-col items-center max-w-prose mx-auto gap-3 justify-center px-6">
 
   <div class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">
     {{ $title }}

diff --git a/modules/blox-tailwind/layouts/partials/blox/resume-biography-3.html b/modules/blox-tailwind/layouts/partials/blox/resume-biography-3.html
@@ -111,7 +111,7 @@
     {{ end }}
 
     {{ with $block.content.button }}
-    <a href="{{.url}}" target="_blank" class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-primary-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"><svg class="w-3.5 h-3.5 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+    <a href="{{.url}}" target="_blank" class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-primary-700 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"><svg class="w-3.5 h-3.5 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
       <path d="M14.707 7.793a1 1 0 0 0-1.414 0L11 10.086V1.5a1 1 0 0 0-2 0v8.586L6.707 7.793a1 1 0 1 0-1.414 1.414l4 4a1 1 0 0 0 1.416 0l4-4a1 1 0 0 0-.002-1.414Z"/>
       <path d="M18 12h-2.55l-2.975 2.975a3.5 3.5 0 0 1-4.95 0L4.55 12H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Zm-3 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
     </svg> {{.text}}</a>
@@ -120,7 +120,7 @@
 
 
 
-  <div class="grid grid-cols-2 gap-4 justify-between mt-6 dark:text-gray-300">
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 justify-between mt-6 dark:text-gray-300">
 
     {{ with $person.interests }}
     <div class="">

diff --git a/modules/blox-tailwind/layouts/partials/blox/resume-skills.html b/modules/blox-tailwind/layouts/partials/blox/resume-skills.html
@@ -24,7 +24,7 @@
   {{ with $block.content.text }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
 </div>
 
-<div class="flex flex-col lg:flex-row items-center max-w-prose mx-auto gap-3">
+<div class="flex flex-col lg:flex-row items-center max-w-prose mx-auto gap-3 px-6 md:px-0">
 
   {{ range $skills }}
   {{ $color := .color | default "" }}