refine figure

assets/scss/components/code-highlight.scss

@@ -29,6 +29,8 @@ $ht-code-border-radius: .4em;
 
         &::before{
             content: "> ";
+            // font-family: "Noto Emoji";
+            font-family: inherit;
             position: absolute;
             left: 0;
             color: #111;
@@ -65,7 +67,7 @@ $ht-code-border-radius: .4em;
 
 
 @media screen and (max-width: 760px) {
-    .highlight .chroma {
+    .highlight {
         width: 90%;
     }
 }

assets/scss/vendor/tufte.scss

@@ -310,13 +310,12 @@ div.table-wrapper {
 }
 
 @media screen and (max-width: 760px) {
+    h2,
+    h3,
     p,
     footer {
         width: 90%;
     }
-    pre.code {
-        width: 87.5%;
-    }
     ul {
         width: 85%;
     }

layouts/shortcodes/figure.html

@@ -1,47 +1,57 @@
+{{ $alt := .Get "alt" | default "Image" }}
 {{ $type := .Get "type" | default "normal" }}
 
-<!-- begin figure tag -->
+<!-- get a default label just in case -->
-{{ if not (eq $type "margin") }}
+{{- $label := printf "%#v" (add .Ordinal 1) | printf "%s%s" "marginfig-" | printf "%s" -}}
-  {{ if eq $type "full" }}
+{{- if .Get "label" -}}
-    <figure class="fullwidth">
+{{- $label = .Get "label" -}}
-  {{ else }}
+{{- end -}}
-    <figure {{ with .Get "class" }} class="{{ . }}"{{ end }}>
-  {{ end }}
-{{ end }}
 
-<!-- begin inner elements -->
+<!-- begin figure tag -->
-{{ if eq $type "full" }}
+{{- if not (eq $type "margin") -}}
+  {{ if eq $type "full" }}<!-- full -->
+    <figure class="fullwidth">
+  {{ else }}<!-- normal -->
+    <figure {{ with .Get "class" }}class="{{ . }}"{{ end }}>
+  {{ end }}
+{{- end -}}
+
+<!-- begin child elements -->
+{{- if eq $type "full" -}}<!-- child for full -->
   {{ with .Get "link" }}<a href="{{ . }}">{{ end }}
-  <img src="{{ .Get "src" }}" {{ with .Get "alt"}}alt="{{ . }}"{{ end }}>
+  <img src="{{ .Get "src" }}" alt="{{ $alt }}">
   {{ if .Get "link" }}</a>{{ end }}
   <figcaption>
-{{ else }}{{/* margin or normal */}}
+{{- else -}}<!--  child for margin or normal (begin) -->
-  <label for="{{ .Get "label" }}" class="margin-toggle marginnote-ind">{{ .Site.Params.marginNoteInd }}</label>
+
-  <input type="checkbox" id="{{ .Get "label" }}" class="margin-toggle"/>
+  {{- if or (or (.Get "caption") (.Get "attr")) (eq $type "margin") -}}<!-- begin marginnote -->
-  <span class="marginnote">
+    <label for="{{ $label }}" class="margin-toggle marginnote-ind">{{ .Site.Params.marginNoteInd }}</label>
-  {{ if eq $type "margin" }}
+    <input type="checkbox" id="{{ $label }}" class="margin-toggle"/>
+    <span class="marginnote">
+  {{- end -}}
+
+  {{- if eq $type "margin" -}}<!-- margin image inside marginnote -->
     {{ with .Get "link" }}<a href="{{ . }}">{{ end }}
-    <img src="{{ .Get "src" }}" {{ with .Get "alt"}}alt="{{ . }}"{{ end }}>
+    <img src="{{ .Get "src" }}" alt="{{ $alt }}">
     {{ if .Get "link" }}</a>{{ end }}
-  {{ end }}
+  {{- end -}}
-{{ end }}
 
-{{ with .Get "title"}}<strong>{{ . }} </strong>{{ end}}
+{{- end -}}<!--  child for margin or normal (end) -->
-{{ with .Get "caption"}}{{ . }}{{ end }}
-{{ with .Get "attrlink"}}<a href="{{ .}}">{{ end }}
-{{ with .Get "attr" }}{{ . }}{{ end }}
-{{ if .Get "attrlink" }}</a>{{ end }}
 
-<!-- end inner elements -->
+{{ with .Get "title"}}<strong>{{ . | markdownify }}. </strong>{{ end}}
-{{ if eq $type "full" }}
+{{ with .Get "caption"}}{{ . | markdownify }}{{ end }}
+{{ with .Get "attr" }}{{ . | markdownify }}.{{ end }}
+
+<!-- end child elements -->
+{{ if eq $type "full" }}<!-- end full -->
   </figcaption>
-{{ else }}
+{{ else }}<!--  end margin or normal -->
-  </span>
+  {{- if or (or (.Get "caption") (.Get "attr")) (eq $type "margin") -}}</span>{{- end -}}<!-- end marginnote -->
 {{ end }}
 
-{{ if ( eq $type "normal" ) }}
+{{ if (eq $type "normal") }}
   {{ with .Get "link" }}<a href="{{ . }}">{{ end }}
-  <img src="{{ .Get "src" }}" {{ with .Get "alt"}}alt="{{ . }}"{{ end }}>
+  <img src="{{ .Get "src" }}" alt="{{ $alt }}">
   {{ if .Get "link" }}</a>{{ end }}
 {{ end }}
 

layouts/shortcodes/marginnote.html

@@ -1,7 +1,7 @@
-{{- $marginnoteDomIdSuffix := (add .Ordinal 1) -}}
+{{- $label := (add .Ordinal 1) -}}
 {{- $ind := .Get "ind" | default .Site.Params.marginNoteInd -}}
-<label for="marginnote-{{ $marginnoteDomIdSuffix }}" class="margin-toggle marginnote-ind">{{ $ind }}</label>
+<label for="marginnote-{{ $label }}" class="margin-toggle marginnote-ind">{{ $ind }}</label>
-<input type="checkbox" id="marginnote-{{ $marginnoteDomIdSuffix }}" class="margin-toggle"/>
+<input type="checkbox" id="marginnote-{{ $label }}" class="margin-toggle"/>
 <span class="marginnote">
 {{ .Inner | markdownify}}
 </span>

layouts/shortcodes/sidenote.html

@@ -3,9 +3,9 @@
 {{- else -}}
 {{- $.Page.Scratch.Set "sidenoteCounter" 1 -}}
 {{- end -}}
-{{- $sidenoteDomIdSuffix := $.Page.Scratch.Get "sidenoteCounter" -}}
+{{- $label := $.Page.Scratch.Get "sidenoteCounter" -}}
-<label for="sidenote-{{ $sidenoteDomIdSuffix }}" class="margin-toggle sidenote-number">({{ $sidenoteDomIdSuffix }})</label>
+<label for="sidenote-{{ $label }}" class="margin-toggle sidenote-number">({{ $label }})</label>
-<input type="checkbox" id="sidenote-{{ $sidenoteDomIdSuffix }}" class="margin-toggle"/>
+<input type="checkbox" id="sidenote-{{ $label }}" class="margin-toggle"/>
 <span class="sidenote">
-<span class="sidenote-number">({{ $sidenoteDomIdSuffix }})</span>{{ .Inner | markdownify }}
+<span class="sidenote-number">({{ $label }})</span>{{ .Inner | markdownify }}
 </span>