fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-23 21:02:09 +00:00
Code Issues Projects Releases Wiki Activity

Improve code blocks

Browse source 
- Support defining text in a codeblock that can be translated
- Shrink some blocks to prevent page breaks on print
This commit is contained in:
Rohan Kumar 2022-04-27 08:53:39 -07:00
parent fa10af4051
commit 371253c2dc
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
3 changed files with 18 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
content/posts/website-best-practices.gmi
View file

@ -516,8 +516,7 @@ An image, alt-text, figure caption, and transcript combine to form a complex rel
<article aria-label="comic, caption, and transcript"> <article aria-label="comic, caption, and transcript">
<h4>Infinite scrolling</h4> <h4>Infinite scrolling</h4>
<figure> <figure>
<img <img src="SRC"
src="SRC"
aria-describedby="transcript-xkcd-1309" aria-describedby="transcript-xkcd-1309"
alt="Comic: if books had infinite-scroll, we'd have to alt="Comic: if books had infinite-scroll, we'd have to
turn pages carefully or risk losing the page."> turn pages carefully or risk losing the page.">
@ -1164,20 +1163,18 @@ Finally, it's important to distinguish <kbd> from <code>, <samp>, and regular bo
Here's how I distinguish <code> and <samp>, <pre>, and <kbd> from each other and from body text. Here's how I distinguish <code> and <samp>, <pre>, and <kbd> from each other and from body text.
``` ```
code, code, kbd, samp {
kbd,
samp {
font-family: monospace, monospace; font-family: monospace, monospace;
} }
pre, pre,
:not(pre) > code { :not(pre) > code, :not(pre) > samp {
border: 1px solid; border: 1px solid;
} }
/* A black border is too harsh. */ /* Dark borders in text are too harsh */
:not(pre) > code { :not(pre) > code, :not(pre) > samp {
border-color: #aaa; border-color: #999;
} }
kbd { kbd {

19
content/posts/website-best-practices.md
View file

@ -563,8 +563,7 @@ An image, alt-text, figure caption, and transcript combine to form a complex rel
<article aria-label="comic, caption, and transcript"> <article aria-label="comic, caption, and transcript">
<h4>Infinite scrolling</h4> <h4>Infinite scrolling</h4>
<figure> <figure>
<img <img src="SRC"
src="SRC"
aria-describedby="transcript-xkcd-1309" aria-describedby="transcript-xkcd-1309"
alt="Comic: infinite-scrolling books require alt="Comic: infinite-scrolling books require
careful page-turns to avoid losing the page."> careful page-turns to avoid losing the page.">
@ -990,7 +989,7 @@ Another example: outside the Web, I prefer indenting code with tabs instead of s
Small phones typically support display rotation. When phones switch to landscape-mode, vertical space becomes precious. Fixed elements (e.g. dickbars) become a major usability hazard. Ironically, the WCAG's own interactive Techniques reference is a perfect example of how fixed elements impact usability on short screens. Small phones typically support display rotation. When phones switch to landscape-mode, vertical space becomes precious. Fixed elements (e.g. dickbars) become a major usability hazard. Ironically, the WCAG's own interactive Techniques reference is a perfect example of how fixed elements impact usability on short screens.
<figure> <figure>
{{< picture name="wcag_quickref" alt="Website with banner covering top half of screen." sf=1.75 >}} {{< picture name="wcag_quickref" alt="Website with banner covering top half of screen." sf=1.5 >}}
<figcaption> <figcaption>
When filtering criteria on [the Quickref Reference page](https://www.w3.org/WAI/WCAG22/quickref/?currentsidebar=%23col_customize&showtechniques=134%2C124&levels=a&technologies=js%2Cserver%2Csmil%2Cpdf%2Cflash%2Csl), a dickbar lists active filters. I increased the zoom level; you may have to add more filters to fill the screen with a smaller font. When filtering criteria on [the Quickref Reference page](https://www.w3.org/WAI/WCAG22/quickref/?currentsidebar=%23col_customize&showtechniques=134%2C124&levels=a&technologies=js%2Cserver%2Csmil%2Cpdf%2Cflash%2Csl), a dickbar lists active filters. I increased the zoom level; you may have to add more filters to fill the screen with a smaller font.
@ -1125,21 +1124,19 @@ Finally, it's important to distinguish `<kbd>` from `<code>`, `<samp>`, and regu
{{< codecaption lang="CSS" >}} How I distinguish `<code>` and `<samp>`, `<pre>`, and `<kbd>` from each other and from body text. {{< /codecaption >}} {{< codecaption lang="CSS" >}} How I distinguish `<code>` and `<samp>`, `<pre>`, and `<kbd>` from each other and from body text. {{< /codecaption >}}
```figure ```figure {trans1="Dark borders in text are harsh",str1="code",str2="kbd",str3="samp",str4="pre"}
code, code, kbd, samp {
kbd,
samp {
font-family: monospace, monospace; font-family: monospace, monospace;
} }
pre, pre,
:not(pre) > code { :not(pre) > code, :not(pre) > samp {
border: 1px solid; border: 1px solid;
} }
/* A black border is too harsh. */ /* Dark borders in text are harsh */
:not(pre) > code { :not(pre) > code, :not(pre) > samp {
border-color: #aaa; border-color: #999;
} }
kbd { kbd {

5
layouts/_default/_markup/render-codeblock-figure.html
View file

@ -6,7 +6,10 @@
{{- $after := printf `<var translate="yes">%s</var>` $v -}} {{- $after := printf `<var translate="yes">%s</var>` $v -}}
{{- $contents = $contents | replaceRE $v $after -}} {{- $contents = $contents | replaceRE $v $after -}}
{{- else if strings.HasPrefix $k "str" -}} {{- else if strings.HasPrefix $k "str" -}}
{{- $after := printf `<strong translate="yes">%s</strong>` $v -}} {{- $after := printf `<strong>%s</strong>` $v -}}
{{- $contents = $contents | replaceRE $v $after -}}
{{- else if strings.HasPrefix $k "trans" -}}
{{- $after := printf `<span translate="yes">%s</span>` $v -}}
{{- $contents = $contents | replaceRE $v $after -}} {{- $contents = $contents | replaceRE $v $after -}}
{{- else if and (eq $k "samp")}} {{- else if and (eq $k "samp")}}
{{- $samp = $v -}} {{- $samp = $v -}}