style: improve layout and formatting of code samples
Alan Pearce alan@alanpearce.eu
Sun, 05 May 2024 18:54:32 +0200
2 files changed, 21 insertions(+), 3 deletions(-)
M frontend/static/style.css → frontend/static/style.css
@@ -1,3 +1,6 @@+:root { + --preformatted: var(--code); +} form { display: flex; column-gap: 1ex; @@ -17,6 +20,17 @@ } dl { display: grid; + align-items: baseline; + grid-row-gap: 1ch; grid-template-rows: 1fr; grid-template-columns: max-content 1fr; } + +pre { + margin: unset; + padding: 1ch 1.4ch; +} + +pre:has(> code) { + background: var(--bg); +}
M frontend/templates/blocks/options.gotmpl → frontend/templates/blocks/options.gotmpl
@@ -10,16 +10,20 @@ </p> <dl> {{- with .Type }} <dt>Type</dt> - <dd>{{ . }}</dd> + <dd><code>{{ . }}</code></dd> {{- end }} {{- with .Default }} <dt>Default</dt> - <dd><code>{{ .Text }}</code></dd> + <dd> + <pre><code>{{ .Text }}</code></pre> + </dd> {{- end }} {{- with .Example }} {{- if .Text }} <dt>Example</dt> - <dd><code>{{ .Text }}</code></dd> + <dd> + <pre><code>{{ .Text }}</code></pre> + </dd> {{- end }} {{- end }} {{- with .RelatedPackages.HTML }}