update example posts

assets/scss/vendor/tufte.scss

@@ -310,7 +310,7 @@ table.fullwidth {
 
 div.table-wrapper {
     overflow-x: scroll;
-    font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif;
+    font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif, "Noto Emoji";
 }
 
 @media screen and (max-width: 760px) {
@@ -338,14 +338,14 @@ div.table-wrapper {
 }
 
 .sans {
-    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
+    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif, "Noto Emoji";
     letter-spacing: 0.03em;
 }
 
 code,
 .code,
 kbd {
-    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace, "Noto Emoji";
     font-size: 1.125rem;
     line-height: 1.42;
 }

exampleSite/content/post/tufte-css.md

@@ -123,6 +123,7 @@ Figures should try to use the `figure` element, which by default are constrained
 {{< figure
   src="https://github.com/edwardtufte/tufte-css/raw/gh-pages/img/exports-imports.png"
   caption="From Edward Tufte, <cite>Visual Display of Quantitative Information</cite>, page 92."
+  ind="⊕"
   label="mn-export-import"
   alt="Exports and Imports to and from Denmark & Norway from 1700 to 1780"
 >}}
@@ -132,6 +133,7 @@ Figures should try to use the `figure` element, which by default are constrained
   type="margin"
   label="mn-rhino"
   caption=`F.J. Cole, “The History of Albrecht Dürer’s Rhinoceros in Zooological Literature,” _Science, Medicine, and History: Essays on the Evolution of Scientific Thought and Medical Practice_ (London, 1953), ed. E. Ashworth Underwood, 337-356. From page 71 of Edward Tufte’s _Visual Explanations_.`
+  ind="⊕"
   alt="Image of a Rhinoceros"
 >}}
 But tight integration of graphics with text is central to Tufte’s work even when those graphics are ancillary to the main body of a text. In many of those cases, a margin figure may be most appropriate. To place figures in the margin, just wrap an image (or whatever) in a margin note inside a `p` tag, as seen to the right of this paragraph.
@@ -153,7 +155,7 @@ One obstacle to creating elegant figures on the web is the difficulty of handlin
 </figure>
 ```
 
-{{< youtube id=YslQ2625TR4 title="iPhone Resolution by Edward Tufte" 4x3="true" >}}
+{{< youtube id=YslQ2625TR4 title="iPhone Resolution by Edward Tufte" >}}
 
 You can use this class on a `div` instead of a `figure`, with slightly different results but the same general effect. Experiment and choose depending on your application.
 

exampleSite/content/post/tufte-features.md

@@ -48,11 +48,23 @@ href="javascript:javascript:(function(){function checkFrames(w) {try {var inputs
 Toggle all notes
 {{< /button >}}
 
+```html
+{{</* button
+style="primary"
+icon="🔄"
+href="javascript:javascript:(function(){function checkFrames(w) {try {var inputs = w.document.getElementsByTagName('input');for (var i=0; i < inputs.length; i++) {if (inputs[i].type && inputs[i].type == 'checkbox'){inputs[i].checked = !inputs[i].checked;}}} catch (e){}if(w.frames && w.frames.length>0){for(var i=0;i<w .frames.length;i++){var fr=w.frames[i];checkFrames(fr);}}}checkFrames(window);})()"
+*/>}}
+Toggle all notes
+{{</* /button */>}}
+```
+
 
 ### Cols (with `lang` option)
 
+Certain things do not work with this shortcode layout, for example, Markdown's default footnote (like `[^1]`).
+
 {{< cols "zh-Hans,en,ja" >}}
-我是一个懒人。 {{< marginnote >}}这是一个边注。在屏幕很小的时候，它有一个可以点击展开的按钮。{{< /marginnote >}}{{< marginnote ind="🐱" >}}您可以在 `config.yaml` 中修改全站指示器，也可以使用 `ind` 选项为每一个边注单独设置按钮。{{< /marginnote>}}{{< marginnote ind="⚠" >}}在这个版本中，我提升了可访问性，但不包括[用不了 `:has` 的火狐](https://caniuse.com/css-has)。{{< /marginnote>}}
+我是一个懒人。 {{< marginnote >}}这是一个边注。在屏幕很小的时候，它有一个可以点击展开的按钮。{{< /marginnote >}}{{< marginnote ind="🐱" >}}您可以在 `config.yaml` 中修改全站按钮默认设置，也可以使用 `ind` 选项为每一个边注单独设置按钮。{{< /marginnote>}}{{< marginnote ind="⚠" >}}在这个版本中，我提升了可访问性，但不包括[用不了 `:has` 的火狐](https://caniuse.com/css-has)。{{< /marginnote>}}
 ||
 But sometimes you just have to get your hands dirty.
 
@@ -61,6 +73,28 @@ This is the joy and the curse of a programmer. {{< sidenote >}}Sidenote numbers
 さらに、なんと！日本語もいけます。{{< sidenote >}}読めないのか？私は大丈夫だが。{{< /sidenote >}}
 {{< /cols >}}
 
+```html
+{{</* cols "zh-Hans,en,ja" */>}}
+我是一个懒人。{{</* marginnote */>}}这是一个边注。{{</* /marginnote */>}}
+||
+But sometimes you just have to get your hands dirty.{{</* sidenote */>}}Good numbers.{{</* /sidenote */>}}
+||
+読めないのか？私は大丈夫だが。
+{{</* /cols */>}}
+```
+
+
+### YouTube-nocookie
+
+Never again click things in the video accidentally and it opens YouTube. Oh no.
+
+{{< youtube id="YslQ2625TR4" title="iPhone Resolution by Edward Tufte" >}}
+
+```html
+{{</* youtube id="YslQ2625TR4" title="iPhone Resolution by Edward Tufte" */>}}
+````
+
+
 ## Tufte features
 
 ### Marginnote and sidenote