Merge 69f0e2e345 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 {

exampleSite/content/docs/hosting-deployment/index.ja.md

@@ -75,7 +75,7 @@ jobs:
 
 設定ファイルをGitHubにプッシュすると、アクションが自動的に実行されるはずです。初回は失敗するかもしれないので、GitHubリポジトリの **Settings > Pages** にアクセスして、ソースが正しいか確認してください。 `gh-pages` ブランチを使うように設定されているべきです。
 
-{{< screenshot src="github-pages-source.jpg" alt="Screen capture of GitHub Pages source" >}}
+![Screen capture of GitHub Pages source](github-pages-source.jpg?2x=true)
 
 設定が完了したら、アクションを再実行し、サイトを正しくビルドしてデプロイします。すべてが正常にデプロイされたことを確認するためにアクションログを参照することができます。
 
@@ -83,7 +83,7 @@ jobs:
 
 [Netlify](https://www.netlify.com)にデプロイするには、Netlify側に新しいデプロイサイトを作成し、ソースコードとリンクします。Netlify UIでは、ビルド設定は空白のまま、使用するドメインだけを設定する必要があります。
 
-{{< screenshot src="netlify-build-settings.jpg" alt="Screen capture of Netlify build settings" >}}
+![Screen capture of Netlify build settings](netlify-build-settings.jpg?2x=true)
 
 次に、サイト・リポジトリのルートに `netlify.toml` ファイルを作成します:
 
@@ -114,7 +114,7 @@ jobs:
 
 新しい**静的サイト**を作成し、プロジェクトのコード・リポジトリにリンクします。そして、ビルドコマンドを `hugo --gc --minify` に、公開ディレクトリを `public` に設定するだけです。
 
-{{< screenshot src="render-settings.jpg" alt="Screen capture of Render settings" >}}
+![Screen capture of Render settings](render-settings.jpg?2x=true)
 
 あなたが変更をリポジトリにプッシュするたびに、自動的にビルドとデプロイを行います。
 

exampleSite/content/docs/hosting-deployment/index.md

@@ -76,11 +76,11 @@ jobs:
 
 Push the config file to GitHub and the action should automatically run. It may fail the first time and you'll need to visit the **Settings > Pages** section of your GitHub repo to check the source is correct. It should be set to use the `gh-pages` branch.
 
-{{< screenshot src="github-pages-source.jpg" alt="Screen capture of GitHub Pages source settings" >}}
+![Screen capture of GitHub Pages source settings](github-pages-source.jpg?2x=true)
 
 You should also visit the **Settings > Actions > General** section and check that the workflow permissions allow actions to make changes to your repo.
 
-{{< screenshot src="github-workflow-permissions.jpg" alt="Screen capture of GitHub Workflow Permissions settings" >}}
+![Screen capture of GitHub Workflow Permissions settings](github-workflow-permissions.jpg?2x=true)
 
 Once the settings are configured, re-run the action and the site should build and deploy correctly. You can consult the actions log to check everything deployed successfully.
 
@@ -88,7 +88,7 @@ Once the settings are configured, re-run the action and the site should build an
 
 To deploy to [Netlify](https://www.netlify.com), create a new continuous deployment site and link it to your source code. The build settings can be left blank in the Netlify UI. You will only need to configure the domain you'll be using.
 
-{{< screenshot src="netlify-build-settings.jpg" alt="Screen capture of Netlify build settings" >}}
+![Screen capture of Netlify build settings](netlify-build-settings.jpg?2x=true)
 
 Then in the root of your site repository, create a `netlify.toml` file:
 
@@ -118,7 +118,7 @@ Deploying to [Render](https://render.com) is very straightforward and all config
 
 Create a new **Static Site** and link it to your project's code repository. Then simply configure the build command to be `hugo --gc --minify` and publish directory to be `public`.
 
-{{< screenshot src="render-settings.jpg" alt="Screen capture of Render settings" >}}
+![Screen capture of Render settings](render-settings.jpg?2x=true)
 
 The site will automatically build and deploy whenever you push a change to your repo.
 

exampleSite/content/docs/version-2/_index.ja.md

@@ -62,7 +62,7 @@ Congo 2.0の大きな変更点は、画像の自動リサイズ機能の追加
 
 今回のアップデートでは、全体的にパフォーマンスが向上している。今回のリリースの主な目的はLighthouseのスコアを向上させることで、Congoは4つの指標すべてで100点満点を獲得しました。
 
-{{< screenshot src="lighthouse.jpg" >}}
+![](lighthouse.jpg?2x=true)
 
 個々の変更点が多すぎて、ここでは紹介しきれませんが、さらに詳しく知りたい場合は、[Lighthouseのレポート](lighthouse.html)をご覧ください。実際のパフォーマンスは、サーバーの構成によって異なります。
 

exampleSite/content/docs/version-2/_index.md

@@ -62,7 +62,7 @@ Best of all there's nothing you need to change! Simply insert standard Markdown
 
 This update packs performance improvements throughout. A key objective for this release was to improve Lighthouse scores and Congo now scores a perfect 100 on all four metrics.
 
-{{< screenshot src="lighthouse.jpg" >}}
+![](lighthouse.jpg?2x=true)
 
 There's too many individual changes to highlight them here but the results speak for themselves. If you want to dig deeper, you can [view the Lighthouse report](lighthouse.html). Real world performance will vary based upon server configuration.
 

layouts/partials/picture.html

@@ -54,7 +54,7 @@
     {{ end }}
     {{ if $webp }}
       <source 
-        {{ if lt .Width 660 }}
+        {{ if or (lt .Width 660) $x2 }}
           {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
             src="{{ .RelPermalink }}"
           {{ end }}
@@ -64,17 +64,12 @@
             {{- (.Resize "660x webp").RelPermalink }} 660w
             {{ if gt .Width 1024 }}
               ,{{ (.Resize "1024x webp").RelPermalink }} 1024w
-            {{ else }}
-              {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
-                ,{{ .RelPermalink }} {{ .Width }}w
-              {{ end }}
             {{ end }}
             {{ if gt .Width 1320 }}
               ,{{ (.Resize "1320x webp").RelPermalink }} 2x
-            {{ else }}
+            {{ end }}
             {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
               ,{{ .RelPermalink }} {{ .Width }}w
-              {{ end }}
             {{ end }}"
           src="{{ (.Resize "660x webp").RelPermalink }}" 
         {{ end }}
@@ -88,7 +83,7 @@
         {{ with $class }} class="{{ . }}" {{ end }}
         {{ with $alt }} alt="{{ . }}" {{ end }}
         {{ with $lazy }} loading="lazy" decoding="async" {{ end }}
-        {{ if lt .Width 660 }}
+        {{ if or (lt .Width 660) $x2 }}
           src="{{ .RelPermalink }}"
         {{ else }}
           srcset="
@@ -96,14 +91,11 @@
           {{- (.Resize "660x").RelPermalink }} 660w
           {{ if gt .Width 1024 }}
             ,{{ (.Resize "1024x").RelPermalink }} 1024w
-          {{ else }}
-            ,{{ .RelPermalink }} {{ .Width }}w
           {{ end }}
           {{ if gt .Width 1320 }}
             ,{{ (.Resize "1320x").RelPermalink }} 2x
-          {{ else }}
-            ,{{ .RelPermalink }} {{ .Width }}w
-          {{ end }}"
+          {{ end }}
+          ,{{ .RelPermalink }} {{ .Width }}w"
           src="{{ (.Resize "660x").RelPermalink }}"
         {{ end }}
       >

layouts/shortcodes/screenshot.html

@@ -1,24 +0,0 @@
-{{ if .Get "src" }}
-  {{ $image := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}
-  <figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
-    {{- if .Get "href" -}}
-      <a href="{{ .Get "href" }}">
-    {{- end -}}
-
-    {{ $altText := "" }}
-    {{ with .Get "alt" }}
-      {{ $altText = . }}
-    {{ else }}
-      {{ $altText = (.Get "caption") | markdownify | plainify }}
-    {{ end }}
-
-    {{ partial "picture.html" (dict "img" $image "alt" $altText "x2" true) }}
-
-    {{- if .Get "href" }}</a>{{ end -}}
-    {{- if .Get "caption" -}}
-      <figcaption>
-        {{- .Get "caption" | markdownify -}}
-      </figcaption>
-    {{- end }}
-  </figure>
-{{ end }}