From 411ba001cfb2b25674a0344fb23d16a91eb35026 Mon Sep 17 00:00:00 2001 From: loikein Date: Wed, 19 Apr 2023 00:04:18 +0100 Subject: [PATCH] update example posts --- assets/scss/vendor/tufte.scss | 6 ++-- exampleSite/content/post/tufte-css.md | 4 ++- exampleSite/content/post/tufte-features.md | 38 ++++++++++++++++++++-- 3 files changed, 42 insertions(+), 6 deletions(-) diff --git a/assets/scss/vendor/tufte.scss b/assets/scss/vendor/tufte.scss index b2e91fc..f82151d 100644 --- a/assets/scss/vendor/tufte.scss +++ b/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; } diff --git a/exampleSite/content/post/tufte-css.md b/exampleSite/content/post/tufte-css.md index e1d0449..c95fea6 100644 --- a/exampleSite/content/post/tufte-css.md +++ b/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, Visual Display of Quantitative Information, 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 ``` -{{< 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. diff --git a/exampleSite/content/post/tufte-features.md b/exampleSite/content/post/tufte-features.md index 26b3cc7..100b2be 100644 --- a/exampleSite/content/post/tufte-features.md +++ b/exampleSite/content/post/tufte-features.md @@ -48,19 +48,53 @@ href="javascript:javascript:(function(){function checkFrames(w) {try {var inputs Toggle all notes {{< /button >}} +```html +{{0){for(var i=0;i}} +Toggle all notes +{{}} +``` + ### 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 +{{}} +我是一个懒人。{{}}这是一个边注。{{}} +|| +But sometimes you just have to get your hands dirty.{{}}Good numbers.{{}} +|| +読めないのか？私は大丈夫だが。 +{{}} +``` + + +### 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 +{{}} +```` + + ## Tufte features ### Marginnote and sidenote