Merge f2af0198fa into 9c54b590ec

🐛 Add CSS overflow/wrapping on KaTeX, tables, and code sections

CHANGELOG.md

@@ -28,6 +28,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Fixed
 
 - Hamburger menu is not dismissed when links are clicked ([#705](https://github.com/jpanther/congo/pull/705))
+- KaTeX, table and code elements wider than the page are not formatted correctly ([#753](https://github.com/jpanther/congo/pull/753))
 
 ### Removed
 

assets/css/compiled/main.css

@@ -1188,8 +1188,8 @@ body:has(#menu-controller:checked) {
 .copy-button {
   visibility: hidden;
   position: absolute;
-  right: 0px;
   top: 0px;
+  right: 0px;
   z-index: 10;
   width: 5rem;
   cursor: pointer;
@@ -1237,6 +1237,28 @@ body:has(#menu-controller:checked) {
   opacity: 0.05;
 }
 
+/* Fix long KaTeX equations on mobile (see https://katex.org/docs/issues.html#css-customization) */
+
+.katex-display {
+  overflow: auto hidden;
+}
+
+/* Fix long tables breaking out of article on mobile */
+
+table {
+  display: block;
+  overflow: auto;
+}
+
+/* Fix long inline code sections breaking out of article on mobile */
+
+code {
+  word-wrap: break-word;
+  /* All browsers since IE 5.5+ */
+  overflow-wrap: break-word;
+  /* Renamed property in CSS3 draft spec */
+}
+
 /* -- Chroma Highlight -- */
 
 /* Background */

assets/css/main.css

@@ -67,7 +67,7 @@ body:has(#menu-controller:checked) {
 
 .toc ul,
 .toc li {
-  @apply list-none px-0 leading-snug;
+  @apply px-0 leading-snug list-none;
 }
 .toc ul ul {
   @apply ps-4;
@@ -90,7 +90,7 @@ body:has(#menu-controller:checked) {
   @apply visible;
 }
 .copy-button {
-  @apply invisible absolute right-0 top-0 z-10 w-20 cursor-pointer whitespace-nowrap rounded-bl-md rounded-tr-md bg-neutral-200 py-1 font-mono text-sm text-neutral-700 opacity-90 dark:bg-neutral-600 dark:text-neutral-200;
+  @apply absolute top-0 right-0 z-10 invisible w-20 py-1 font-mono text-sm cursor-pointer whitespace-nowrap rounded-bl-md rounded-tr-md bg-neutral-200 text-neutral-700 opacity-90 dark:bg-neutral-600 dark:text-neutral-200;
 }
 .copy-button:hover,
 .copy-button:focus,
@@ -102,23 +102,40 @@ body:has(#menu-controller:checked) {
   @apply absolute -z-10 opacity-5;
 }
 
+/* Fix long KaTeX equations on mobile (see https://katex.org/docs/issues.html#css-customization) */
+.katex-display {
+  overflow: auto hidden;
+}
+
+/* Fix long tables breaking out of article on mobile */
+table {
+  display: block;
+  overflow: auto;
+}
+
+/* Fix long inline code sections breaking out of article on mobile */
+code {
+  word-wrap: break-word; /* All browsers since IE 5.5+ */
+  overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
+}
+
 /* -- Chroma Highlight -- */
 /* Background */
 .chroma {
-  @apply rounded-md bg-neutral-50 py-3 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200;
+  @apply py-3 rounded-md bg-neutral-50 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200;
 }
 .chroma pre {
-  @apply m-0 p-0;
+  @apply p-0 m-0;
 }
 /* LineTable */
 .chroma .lntable {
-  @apply m-0 block w-auto overflow-auto text-base;
+  @apply block w-auto m-0 overflow-auto text-base;
 }
 /* LineNumbersTable */
 /* LineNumbers */
 .chroma .lnt,
 .chroma .ln {
-  @apply mr-2 px-2 text-neutral-600 dark:text-neutral-300;
+  @apply px-2 mr-2 text-neutral-600 dark:text-neutral-300;
 }
 .chroma .lntd {
   @apply p-0 align-top;
@@ -280,7 +297,7 @@ body:has(#menu-controller:checked) {
 }
 /* CommentHashbang */
 .chroma .ch {
-  @apply font-semibold italic text-neutral-500 dark:text-neutral-400;
+  @apply italic font-semibold text-neutral-500 dark:text-neutral-400;
 }
 /* GenericEmph */
 .chroma .ge {

layouts/_default/_markup/render-image.html

@@ -20,7 +20,9 @@
 
 <figure>
   {{- with $img -}}
-    {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "x2" $x2) }}
+    {{ $lazy := $.Page.Site.Params.enableImageLazyLoading | default true }}
+    {{ $webp := $.Page.Site.Params.enableImageWebp | default true }}
+    {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "x2" $x2 "lazy" $lazy "webp" $webp) }}
   {{- else -}}
     <img src="{{ .Destination | safeURL }}" alt="{{ $altText }}" class="{{ $class }}"/>
   {{- end -}}

layouts/_default/single.html

@@ -17,7 +17,8 @@
         <div class="prose">
           {{ $altText := $.Params.featureAlt | default $.Params.coverAlt | default "" }}
           {{ $class := "mb-6 -mt-4 rounded-md" }}
-          {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "lazy" false) }}
+          {{ $webp := $.Page.Site.Params.enableImageWebp | default true }}
+          {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "lazy" false "webp" $webp) }}
           {{ with $.Params.coverCaption }}
             <figcaption class="mb-6 -mt-3 text-center">{{ . | markdownify }}</figcaption>
           {{ end }}

layouts/partials/picture.html

@@ -1,8 +1,8 @@
 {{ $img := .img }}
 {{ $alt := .alt }}
 {{ $class := .class }}
-{{ $lazy := .lazy | default $.Page.Site.Params.enableImageLazyLoading | default true }}
-{{ $webp := .webp | default $.Page.Site.Params.enableImageWebp | default true }}
+{{ $lazy := .lazy }}
+{{ $webp := .webp }}
 {{ $lqip := .lqip | default false }}
 {{ $x2 := .x2 | default false }}
 

layouts/shortcodes/figure.html

@@ -18,7 +18,9 @@
     {{ with $href }}<a href="{{ . }}">{{ end }}
 
     {{- with $img -}}
-      {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class) }}
+      {{ $lazy := $.Page.Site.Params.enableImageLazyLoading | default true }}
+      {{ $webp := $.Page.Site.Params.enableImageWebp | default true }}
+      {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "lazy" $lazy "webp" $webp) }}
     {{- else -}}
       <img src="{{ $url.String }}" alt="{{ $altText }}" class="{{ $class }}"/>
     {{- end -}}

layouts/shortcodes/screenshot.html

@@ -12,7 +12,9 @@
       {{ $altText = (.Get "caption") | markdownify | plainify }}
     {{ end }}
 
-    {{ partial "picture.html" (dict "img" $image "alt" $altText "x2" true) }}
+    {{ $lazy := $.Page.Site.Params.enableImageLazyLoading | default true }}
+    {{ $webp := $.Page.Site.Params.enableImageWebp | default true }}
+    {{ partial "picture.html" (dict "img" $image "alt" $altText "x2" true "lazy" $lazy "webp" $webp) }}
 
     {{- if .Get "href" }}</a>{{ end -}}
     {{- if .Get "caption" -}}