update example posts

This commit is contained in:
loikein 2023-04-19 00:04:18 +01:00
parent 2ba3e7fb75
commit 411ba001cf
3 changed files with 42 additions and 6 deletions

View file

@ -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;
}

View file

@ -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ürers 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 Tuftes _Visual Explanations_.`
ind="⊕"
alt="Image of a Rhinoceros"
>}}
But tight integration of graphics with text is central to Tuftes 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.

View file

@ -48,19 +48,53 @@ 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.
This is the joy and the curse of a programmer. {{< sidenote >}}Sidenote numbers are consistent across the whole page. Good numbers.{{< /sidenote >}}
||
さらに、なんと!日本語もいけます。 {{< sidenote >}}読めないのか?私は大丈夫だが。{{< /sidenote >}}
さらに、なんと!日本語もいけます。{{< 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