fix: two styling tweaks for radius and padding on YT and code elements.

site/layouts/shortcodes/youtube.html

@@ -0,0 +1,128 @@
+{{- /*
+Renders an embedded YouTube video.
+
+@param {bool} [allowFullScreen=true] Whether the iframe element can activate full screen mode.
+@param {bool} [autoplay=false] Whether to automatically play the video. Forces mute to be true.
+@param {string} [class] The class attribute of the wrapping div element. When specified, removes the style attributes from the iframe element and its wrapping div element.
+@param {bool} [controls=true] Whether to display the video controls.
+@param {int} [end] The time, measured in seconds from the start of the video, when the player should stop playing the video.
+@param {string} [id] The video id. Optional if the id is provided as first positional argument.
+@param {string} [loading=eager] The loading attribute of the iframe element.
+@param {bool} [loop=false] Whether to indefinitely repeat the video. Ignores the start and end arguments after the first play.
+@param {bool} [mute=false] Whether to mute the video. Always true when autoplay is true.
+@param {int} [start] The time, measured in seconds from the start of the video, when the player should start playing the video.
+@param {string} [title] The title attribute of the iframe element. Defaults to "YouTube video".
+
+@returns {template.HTML}
+
+@reference https://developers.google.com/youtube/player_parameters
+
+@example {{< youtube 0RKpf3rK57I >}}
+@example {{< youtube id=0RKpf3rK57I loading=lazy start=30 >}}
+*/}}
+
+{{- $pc := .Page.Site.Config.Privacy.YouTube }}
+{{- $remoteErrID := "err-youtube-remote" }}
+{{- if not $pc.Disable }}
+  {{- with $id := or (.Get "id") (.Get 0) }}
+
+    {{- /* Set defaults. */}}
+    {{- $allowFullScreen := "allowfullscreen" }}
+    {{- $autoplay := 0 }}
+    {{- $class := "" }}
+    {{- $controls := 1 }}
+    {{- $end := 0 }}
+    {{- $loading := "eager" }}
+    {{- $loop := 0 }}
+    {{- $mute := 0 }}
+    {{- $start := 0 }}
+    {{- $title := "YouTube video" }}
+
+    {{- /* Get arguments. */}}
+    {{- if in (slice "false" false 0) ($.Get "allowFullScreen") }}
+      {{- $allowFullScreen = "" }}
+    {{- else if in (slice "true" true 1) ($.Get "allowFullScreen") }}
+      {{- $allowFullScreen = "allowfullscreen" }}
+    {{- end }}
+    {{- if in (slice "false" false 0) ($.Get "autoplay") }}
+      {{- $autoplay = 0 }}
+    {{- else if in (slice "true" true 1) ($.Get "autoplay") }}
+      {{- $autoplay = 1 }}
+    {{- end }}
+    {{- if in (slice "false" false 0) ($.Get "controls") }}
+      {{- $controls = 0 }}
+    {{- else if in (slice "true" true 1) ($.Get "controls") }}
+      {{- $controls = 1 }}
+    {{- end }}
+    {{- if in (slice "false" false 0) ($.Get "loop") }}
+      {{- $loop = 0 }}
+    {{- else if in (slice "true" true 1) ($.Get "loop") }}
+      {{- $loop = 1 }}
+    {{- end }}
+    {{- if in (slice "false" false 0) ($.Get "mute") }}
+      {{- $mute = 0 }}
+    {{- else if or (in (slice "true" true 1) ($.Get "mute")) $autoplay }}
+      {{- $mute = 1 }}
+    {{- end }}
+    {{- $class := or ($.Get "class") $class }}
+    {{- $end := or ($.Get "end") $end }}
+    {{- $loading := or ($.Get "loading") $loading }}
+    {{- $start := or ($.Get "start") $start }}
+    {{- $title := or ($.Get "title") $title }}
+
+    {{- /* Define src attribute. */}}
+    {{- $host := cond $pc.PrivacyEnhanced "www.youtube-nocookie.com" "www.youtube.com" }}
+    {{- $src := printf "https://%s/embed/%s" $host $id }}
+    {{- $params := dict
+      "autoplay" $autoplay
+      "controls" $controls
+      "end" $end
+      "mute" $mute
+      "start" $start
+      "loop" $loop
+    }}
+    {{- if $loop }}
+      {{- $params = merge $params (dict "playlist" $id) }}
+    {{- end }}
+    {{- $s := slice }}
+    {{- range $k, $v := $params }}
+      {{- $s = $s | append $k }}
+      {{- $s = $s | append $v }}
+    {{- end }}
+    {{- with querify $s }}
+      {{- $src = printf "%s?%s" $src . }}
+    {{- end }}
+
+    {{- /* Set div attributes. */}}
+    {{- $divStyle := "position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 1rem; border-radius: 4px;" }}
+    {{- if $class }}
+      {{- $divStyle = "" }}
+    {{- end }}
+
+    {{- /* Set iframe attributes. */}}
+    {{- $iframeStyle := "position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" }}
+    {{- if $class }}
+      {{- $iframeStyle = "" }}
+    {{- end }}
+    {{- $allow := "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" }}
+    {{- $referrerpolicy := "strict-origin-when-cross-origin" }}
+
+    {{- /* Render. */}}
+    <div
+      {{- with $class }} class="{{ . }}" {{- end }}
+      {{- with $divStyle }} style="{{ . | safeCSS }}" {{- end -}}
+    >
+      <iframe
+        {{- with $allow }} allow="{{ . }}" {{- end }}
+        {{- with $allowFullScreen }} allowfullscreen="{{ . }}" {{- end }}
+        {{- with $loading }} loading="{{ . }}" {{- end }}
+        {{- with $referrerpolicy }} referrerpolicy="{{ . }}" {{- end }}
+        {{- with $src }} src="{{ . }}" {{- end }}
+        {{- with $iframeStyle}} style="{{ . | safeCSS }}" {{- end }}
+        {{- with $title }} title="{{ . }}" {{- end -}}
+      ></iframe>
+    </div>
+  {{- else }}
+    {{- errorf "The %q shortcode requires an id argument. See %s" .Name .Position }}
+  {{- end }}
+{{- end }}

src/scss/_guides.scss

@@ -200,7 +200,7 @@
 	    }
 	  }
 	  figure {
-	    margin: 1rem 0;
+	    margin: 0 0 1rem;
 
 	    figcaption {
 	      h4 {