Compare commits

...

6 Commits

Author SHA1 Message Date
stereobooster 09fc648c0e
Merge f2af0198fa into 9c54b590ec 2023-12-24 07:36:55 +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
stereobooster f2af0198fa fix bug in picture with params 2023-11-29 14:51:44 +01:00
8 changed files with 61 additions and 14 deletions

View File

@ -28,6 +28,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
### Fixed ### Fixed
- Hamburger menu is not dismissed when links are clicked ([#705](https://github.com/jpanther/congo/pull/705)) - 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 ### Removed

View File

@ -1188,8 +1188,8 @@ body:has(#menu-controller:checked) {
.copy-button { .copy-button {
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
right: 0px;
top: 0px; top: 0px;
right: 0px;
z-index: 10; z-index: 10;
width: 5rem; width: 5rem;
cursor: pointer; cursor: pointer;
@ -1237,6 +1237,28 @@ body:has(#menu-controller:checked) {
opacity: 0.05; 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 -- */ /* -- Chroma Highlight -- */
/* Background */ /* Background */

View File

@ -67,7 +67,7 @@ body:has(#menu-controller:checked) {
.toc ul, .toc ul,
.toc li { .toc li {
@apply list-none px-0 leading-snug; @apply px-0 leading-snug list-none;
} }
.toc ul ul { .toc ul ul {
@apply ps-4; @apply ps-4;
@ -90,7 +90,7 @@ body:has(#menu-controller:checked) {
@apply visible; @apply visible;
} }
.copy-button { .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:hover,
.copy-button:focus, .copy-button:focus,
@ -102,23 +102,40 @@ body:has(#menu-controller:checked) {
@apply absolute -z-10 opacity-5; @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 -- */ /* -- Chroma Highlight -- */
/* Background */ /* Background */
.chroma { .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 { .chroma pre {
@apply m-0 p-0; @apply p-0 m-0;
} }
/* LineTable */ /* LineTable */
.chroma .lntable { .chroma .lntable {
@apply m-0 block w-auto overflow-auto text-base; @apply block w-auto m-0 overflow-auto text-base;
} }
/* LineNumbersTable */ /* LineNumbersTable */
/* LineNumbers */ /* LineNumbers */
.chroma .lnt, .chroma .lnt,
.chroma .ln { .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 { .chroma .lntd {
@apply p-0 align-top; @apply p-0 align-top;
@ -280,7 +297,7 @@ body:has(#menu-controller:checked) {
} }
/* CommentHashbang */ /* CommentHashbang */
.chroma .ch { .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 */ /* GenericEmph */
.chroma .ge { .chroma .ge {

View File

@ -20,7 +20,9 @@
<figure> <figure>
{{- with $img -}} {{- 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 -}} {{- else -}}
<img src="{{ .Destination | safeURL }}" alt="{{ $altText }}" class="{{ $class }}"/> <img src="{{ .Destination | safeURL }}" alt="{{ $altText }}" class="{{ $class }}"/>
{{- end -}} {{- end -}}

View File

@ -17,7 +17,8 @@
<div class="prose"> <div class="prose">
{{ $altText := $.Params.featureAlt | default $.Params.coverAlt | default "" }} {{ $altText := $.Params.featureAlt | default $.Params.coverAlt | default "" }}
{{ $class := "mb-6 -mt-4 rounded-md" }} {{ $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 }} {{ with $.Params.coverCaption }}
<figcaption class="mb-6 -mt-3 text-center">{{ . | markdownify }}</figcaption> <figcaption class="mb-6 -mt-3 text-center">{{ . | markdownify }}</figcaption>
{{ end }} {{ end }}

View File

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

View File

@ -18,7 +18,9 @@
{{ with $href }}<a href="{{ . }}">{{ end }} {{ with $href }}<a href="{{ . }}">{{ end }}
{{- with $img -}} {{- 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 -}} {{- else -}}
<img src="{{ $url.String }}" alt="{{ $altText }}" class="{{ $class }}"/> <img src="{{ $url.String }}" alt="{{ $altText }}" class="{{ $class }}"/>
{{- end -}} {{- end -}}

View File

@ -12,7 +12,9 @@
{{ $altText = (.Get "caption") | markdownify | plainify }} {{ $altText = (.Get "caption") | markdownify | plainify }}
{{ end }} {{ 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 "href" }}</a>{{ end -}}
{{- if .Get "caption" -}} {{- if .Get "caption" -}}