Merge 843506a7f2 into 9c54b590ec

📝 Update changelog
🎨 Reformat CSS
2023-12-24 07:36:25 +11:00 · 2023-12-24 07:34:41 +11:00 · 2023-12-24 07:31:23 +11:00 · 2023-12-24 07:28:27 +11:00 · 2023-12-18 17:15:26 -05:00 · 2023-12-04 20:44:42 -06:00
6 changed files with 76 additions and 33 deletions
--- a/CHANGELOG.md
+++ b/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

--- a/assets/css/compiled/main.css
+++ b/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 */
--- a/assets/css/main.css
+++ b/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 {
--- a/exampleSite/assets/img/dark-logo.svg
+++ b/exampleSite/assets/img/dark-logo.svg
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@ -20,8 +20,8 @@ fingerprintAlgorithm = "sha256"

 [header]
  layout = "basic" # valid options: basic, hamburger, hybrid, custom
-  # logo = "img/logo.jpg"
-  # logoDark = "img/dark-logo.jpg"
+   logo = "img/logo.jpg"
+   logoDark = "img/dark-logo.svg"
  showTitle = true

 [footer]
--- a/layouts/partials/logo.html
+++ b/layouts/partials/logo.html
@ -1,32 +1,30 @@
-{{- if .Site.Params.header.logo }}
-  {{- $logo := resources.Get .Site.Params.header.logo }}
-  {{- $logo_dark := resources.Get .Site.Params.header.logoDark }}
-  {{- if $logo }}
-    <a href="{{ "" | relLangURL }}" class="mr-2">
-      <img
-        src="{{ $logo.RelPermalink }}"
-        width="{{ div $logo.Width 2 }}"
-        height="{{ div $logo.Height 2 }}"
-        class="max-h-[10rem] max-w-[10rem] object-scale-down object-left{{ if $logo_dark }} hidden dark:flex{{ end }}"
-        alt="{{ .Site.Title }}"
-      />
-      {{- if $logo_dark }}
-      <img
-        src="{{ $logo_dark.RelPermalink }}"
-        width="{{ div $logo_dark.Width 2 }}"
-        height="{{ div $logo_dark.Height 2 }}"
-        class="max-h-[10rem] max-w-[10rem] object-scale-down object-left dark:hidden"
-        alt="{{ .Site.Title }}"
-      />
-      {{- end}}
+{{- if $.Page.Site.Params.header.logo }}
+  {{- $logo := resources.Get $.Page.Site.Params.header.logo }}
+  {{- $logo_dark := resources.Get $.Page.Site.Params.header.logoDark }}
+  {{- $logoAlt := $.Page.Site.Title -}} 
+  {{- $logoClass     := "max-h-[10rem] max-w-[10rem] object-scale-down object-left flex" -}}
+  {{- $logoDarkClass := (print $logoClass " hidden dark:flex")  -}}
+  {{- if $logo_dark -}}
+    {{- $logoClass = (print $logoClass " dark:hidden" ) -}}
+  {{- end }}  
+  {{- if or $logo $logo_dark -}}
+    <a href="{{ "" | relLangURL }}" class="mr-2">  
+  {{- end }}
+  {{- with $logo }}
+    {{- partial "picture.html" (dict "img" . "alt" $logoAlt "class" $logoClass "lazy" false "webp" false ) -}}
+  {{- end -}}
+  {{- with $logo_dark }}
+    {{- partial "picture.html" (dict "img" . "alt" $logoAlt "class" $logoDarkClass "lazy" false "webp" false ) -}}
+  {{- end -}}
+  {{- if or $logo $logo_dark -}}
    </a>
  {{- end }}
 {{- end }}
-{{- if .Site.Params.header.showTitle | default true }}
+{{- if $.Page.Site.Params.header.showTitle | default true }}
  <a
    class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
    rel="me"
    href="{{ "" | relLangURL }}"
    >{{ .Site.Title | markdownify | emojify }}</a
  >
-{{- end }}
+{{- end }}
Author	SHA1	Message	Date
Wolf Noble	f0302034e0	Merge `843506a7f2` into `9c54b590ec`	2023-12-24 07:36:25 +11:00
James Panther	9c54b590ec	📝 Update changelog	2023-12-24 07:34:41 +11:00
James Panther	99618781bc	🎨 Reformat CSS	2023-12-24 07:31:23 +11:00
James Panther	928aa0ed51	🔀 Merge pull request #753 from ragibson/fix-wide-elements-breaking-layout 🐛 Add CSS overflow/wrapping on KaTeX, tables, and code sections	2023-12-24 07:28:27 +11:00
Ryan Gibson	00ac16f3ad	🐛 Add CSS overflow/wrapping on KaTeX, tables, and code sections This fixes a bug where long post elements could break out of the width of the overall page and break overall formatting or views, especially on mobile devices.	2023-12-18 17:15:26 -05:00
Wolf Noble	843506a7f2	✨ ♻️ adhesive_bandage: adapt logo partial to use picture partial to render the logo. Add SVG Gorilla to example site as functional demo.	2023-12-04 20:44:42 -06:00