fix: CSS padding and math overflow on small screens

Fix #3133
This commit is contained in:
George Cushen 2024-09-08 18:05:30 +01:00
commit 4f621dfa3a
7 changed files with 10 additions and 7 deletions

View file

@ -5,3 +5,4 @@
@import "charts.css"; @import "charts.css";
@import "steps.css"; @import "steps.css";
@import "cards.css"; @import "cards.css";
@import "math.css";

View file

@ -0,0 +1,2 @@
/* Prevent long equations overflowing on small screens by scrolling horizontally instead. */
.katex-display { overflow: auto hidden; }

File diff suppressed because one or more lines are too long

View file

@ -82,7 +82,7 @@
{{ $columns := $block.design.columns | default "2" }} {{ $columns := $block.design.columns | default "2" }}
{{ if $block.content.title }} {{ 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"> <div class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">
{{ $block.content.title | emojify | $page.RenderString }} {{ $block.content.title | emojify | $page.RenderString }}
@ -92,7 +92,7 @@
</div> </div>
{{ end }} {{ 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) }} {{ $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) }} {{ partial "functions/render_view" (dict "fragment" "start" "page" $block "item" . "view" $view "config" $config) }}

View file

@ -8,7 +8,7 @@
{{ $title := $block.content.title | emojify | $page.RenderString }} {{ $title := $block.content.title | emojify | $page.RenderString }}
{{ $text := $block.content.text | emojify | $page.RenderString | safeHTML }} {{ $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"> <div class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">
{{ $title }} {{ $title }}

View file

@ -111,7 +111,7 @@
{{ end }} {{ end }}
{{ with $block.content.button }} {{ 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="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"/> <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> </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 }} {{ with $person.interests }}
<div class=""> <div class="">

View file

@ -24,7 +24,7 @@
{{ with $block.content.text }}<p>{{ . | markdownify | emojify }}</p>{{ end }} {{ with $block.content.text }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
</div> </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 }} {{ range $skills }}
{{ $color := .color | default "" }} {{ $color := .color | default "" }}