From 8049030489a8ef4c04c163078aed3016784dbfe3 Mon Sep 17 00:00:00 2001
From: loikein <wanleiqiong@gmail.com>
Date: Tue, 18 Apr 2023 23:34:31 +0100
Subject: [PATCH] address https://github.com/loikein/hugo-tufte/issues/6

---
 assets/scss/components/code-highlight.scss |  4 ++--
 assets/scss/vendor/tufte.scss              | 21 +++++++++++++++++++++
 layouts/shortcodes/figure.html             |  3 ++-
 layouts/shortcodes/youtube.html            |  7 +++++++
 4 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 layouts/shortcodes/youtube.html

diff --git a/assets/scss/components/code-highlight.scss b/assets/scss/components/code-highlight.scss
index 9225bc8..305457f 100644
--- a/assets/scss/components/code-highlight.scss
+++ b/assets/scss/components/code-highlight.scss
@@ -3,8 +3,8 @@ $ht-code-border-radius: .4em;
     width: 50%;
     overflow-x: scroll;
     // border-radius: $ht-code-border-radius;
-    margin-top: 1em;
-    margin-bottom: 1em;
+    margin-top: 1.4em;
+    margin-bottom: 1.4em;
     margin-right: 2.5%;
     margin-left: 2.5%;
     -ms-overflow-style: none;
diff --git a/assets/scss/vendor/tufte.scss b/assets/scss/vendor/tufte.scss
index 8f281e4..2c40fba 100644
--- a/assets/scss/vendor/tufte.scss
+++ b/assets/scss/vendor/tufte.scss
@@ -147,6 +147,10 @@ p {
     padding-right: 0;
     vertical-align: baseline;
     hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 4;
+    -ms-hyphenate-limit-chars: 10 3 4;
+    hyphenate-limit-chars: 10 3 4;
 }
 
 /* Chapter Epigraphs */
@@ -405,6 +409,20 @@ label.marginnote-ind {
     display: none;
 }
 
+iframe.video {
+  width: 55%;
+  margin-top: 1.4em;
+  margin-bottom: 1.4em;
+}
+
+iframe.video--16x9 {
+  aspect-ratio: 16/9;
+}
+
+iframe.video--4x3 {
+  aspect-ratio: 4/3;
+}
+
 @media (max-width: 760px) {
     label.marginnote-ind {
         display: inline;
@@ -451,4 +469,7 @@ label.marginnote-ind {
     img {
         width: 100%;
     }
+    iframe.video {
+        width: 90%;
+    }
 }
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
index 5b058ef..d9a6c89 100644
--- a/layouts/shortcodes/figure.html
+++ b/layouts/shortcodes/figure.html
@@ -1,5 +1,6 @@
 {{ $alt := .Get "alt" | default "Image" }}
 {{ $type := .Get "type" | default "normal" }}
+{{- $ind := .Get "ind" | default .Site.Params.marginNoteInd -}}
 
 <!-- get a default label just in case -->
 {{- $label := printf "%#v" (add .Ordinal 1) | printf "%s%s" "marginfig-" | printf "%s" -}}
@@ -25,7 +26,7 @@
 {{- else -}}<!--  child for margin or normal (begin) -->
 
   {{- if or (or (.Get "caption") (.Get "attr")) (eq $type "margin") -}}<!-- begin marginnote -->
-    <label for="{{ $label }}" class="margin-toggle marginnote-ind">{{ .Site.Params.marginNoteInd }}</label>
+    <label for="{{ $label }}" class="margin-toggle marginnote-ind">{{ $ind }}</label>
     <input type="checkbox" id="{{ $label }}" class="margin-toggle"/>
     <span class="marginnote">
   {{- end -}}
diff --git a/layouts/shortcodes/youtube.html b/layouts/shortcodes/youtube.html
new file mode 100644
index 0000000..2a362f6
--- /dev/null
+++ b/layouts/shortcodes/youtube.html
@@ -0,0 +1,7 @@
+{{ $id := .Get "id" | default (.Get 0) }}
+{{ $4x3 := .Get "4x3" | default "false" }}
+{{ $title := .Get "title" | default "YouTube Video" }}
+
+<iframe
+class="video {{ with $4x3 }}{{ if eq . "true" }}video--4x3{{ else }}video--16x9{{ end }}{{ end }}"
+src="https://www.youtube-nocookie.com/embed/{{ $id }}?cc_load_policy=1&cc=1{{ with .Get "start" }}&start={{ . }}{{ end }}{{ with .Get "end" }}&end={{ . }}{{ end }}" allowfullscreen title="{{ $title }}" frameborder="0" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe>