From d541a7c3f6225811e0554ef67d04e3363c6f3434 Mon Sep 17 00:00:00 2001 From: Jonas Hietala Date: Thu, 23 Feb 2023 08:55:44 +0100 Subject: [PATCH 01/12] Reformat scss files --- sass/chapter.scss | 1432 +++++++++++++++++++------------------- sass/code-highlight.scss | 44 +- sass/colors.scss | 5 +- sass/fonts.scss | 186 ++--- sass/global.scss | 470 +++++++------ sass/homepage.scss | 74 +- sass/landing.scss | 794 ++++++++++----------- 7 files changed, 1520 insertions(+), 1485 deletions(-) diff --git a/sass/chapter.scss b/sass/chapter.scss index 729f989f..d04f56ba 100644 --- a/sass/chapter.scss +++ b/sass/chapter.scss @@ -2,103 +2,101 @@ $fullwidth: 1220px; $sidenote-float-width: 1280px; .chapter { - max-width: 800px; - //background-color: lightyellow; - flex: 1 1 auto; - margin: 0.5rem 1.2rem; + max-width: 800px; + //background-color: lightyellow; + flex: 1 1 auto; + margin: 0.5rem 1.2rem; } %fullwidth { - width: 100%; + width: 100%; } @media (min-width: $sidenote-float-width) { - %fullwidth { - width: $fullwidth; - } + %fullwidth { + width: $fullwidth; + } } - /* * Header */ .chapter > header { - h2 { - font-weight: normal; - font-style: italic; - font-size: 1rem; + h2 { + font-weight: normal; + font-style: italic; + font-size: 1rem; - margin-top: 0.4em; - margin-bottom: 0.8em; - } + margin-top: 0.4em; + margin-bottom: 0.8em; + } } .chapter > header > .date { - text-align: right; - font-size: 0.7rem; - margin-top: -0.2rem; - margin-bottom: 0.4rem; - @extend %sans-serif; - color: $body-font-color2; + text-align: right; + font-size: 0.7rem; + margin-top: -0.2rem; + margin-bottom: 0.4rem; + @extend %sans-serif; + color: $body-font-color2; - .published { - margin-right: 0.4rem; - } + .published { + margin-right: 0.4rem; + } } @media (min-width: $sidenote-float-width) { - .chapter > header > .date { - text-align: left; - - float: right; - margin-top: -3rem; - margin-right: -420px; - width: 380px; - .published { - display: block; - } - .update { - display: block; - } + .chapter > header > .date { + text-align: left; + + float: right; + margin-top: -3rem; + margin-right: -420px; + width: 380px; + .published { + display: block; + } + .update { + display: block; } + } } .where a { - text-decoration: none; - background: none; - text-shadow: none; + text-decoration: none; + background: none; + text-shadow: none; } .where a:hover { - text-decoration: underline; + text-decoration: underline; } .where { - font-size: 0.8rem; - @extend %sans-serif; - margin-bottom: 0.8rem; - color: $eth-dark-gray; + font-size: 0.8rem; + @extend %sans-serif; + margin-bottom: 0.8rem; + color: $eth-dark-gray; } .where .home { - @extend %sans-serif; + @extend %sans-serif; } .where .up { } .where .divider { - font-size: 0.65rem; - color: $eth-light-gray; + font-size: 0.65rem; + color: $eth-light-gray; } /* * Headers */ .chapter h2 > a:hover { - color: $body-font-color; + color: $body-font-color; } .chapter h3 > a:hover { - color: $body-font-color; + color: $body-font-color; } - /* * Lists */ @@ -106,922 +104,922 @@ $first-list-offset: -1.3rem; $list-p-margin: 0.6em; .chapter { - ul, ol { - list-style: none; - margin: 1rem 0 1rem 2em; - p { - margin-bottom: $list-p-margin; - } - } - ol { - counter-reset: foobar; - } - ol li, ul li { - margin-bottom: 0.4em; - font-size: 95%; - line-height: 1.35; - } - - ol > li::before { - @extend %sans-serif; - counter-increment: foobar; - content: counter(foobar); - color: $body-list-sym-color; - } - ul > li::before { - @extend %sans-serif; - //content: "⭑"; - //content: "~"; - //content: "≈"; - //content: "→"; - //content: "»"; - //content: "*"; - content: "•"; - //content: "†"; - color: $body-list-sym-color; - } - ul > li > p:first-child, ol > li > p:first-child { - // To avoid li signifier on a line of it's own - margin-top: $first-list-offset; - } - ul > li::before, ol > li::before { - // Avoid floats here as sidenotes may interfere - margin-left: -2em; - padding-right: 1.5em; - } + ul, + ol { + list-style: none; + margin: 1rem 0 1rem 2em; + p { + margin-bottom: $list-p-margin; + } + } + ol { + counter-reset: foobar; + } + ol li, + ul li { + margin-bottom: 0.4em; + font-size: 95%; + line-height: 1.35; + } - // Description lists - dl { - font-size: 95%; - line-height: 1.35; - margin-bottom: 1rem; - } - dl > dt { - font-weight: bold; - margin-left: 1em; - } - dl > dd { - margin-left: 2em; - margin-bottom: $list-p-margin; - } + ol > li::before { + @extend %sans-serif; + counter-increment: foobar; + content: counter(foobar); + color: $body-list-sym-color; + } + ul > li::before { + @extend %sans-serif; + //content: "⭑"; + //content: "~"; + //content: "≈"; + //content: "→"; + //content: "»"; + //content: "*"; + content: "•"; + //content: "†"; + color: $body-list-sym-color; + } + ul > li > p:first-child, + ol > li > p:first-child { + // To avoid li signifier on a line of it's own + margin-top: $first-list-offset; + } + ul > li::before, + ol > li::before { + // Avoid floats here as sidenotes may interfere + margin-left: -2em; + padding-right: 1.5em; + } + + // Description lists + dl { + font-size: 95%; + line-height: 1.35; + margin-bottom: 1rem; + } + dl > dt { + font-weight: bold; + margin-left: 1em; + } + dl > dd { + margin-left: 2em; + margin-bottom: $list-p-margin; + } } .chapter > .subnav { - margin-top: 1.5rem; - @extend %sans-serif; + margin-top: 1.5rem; + @extend %sans-serif; - .chapters { - font-size: 1.1rem; - font-weight: bold; - } + .chapters { + font-size: 1.1rem; + font-weight: bold; + } - ul { - list-style: none; - margin: 0; - } - ul > li { - font-size: 100%; - margin-left: 0.6rem; - margin-top: 0.3rem; - } - ul > li::before { - display: none; - } + ul { + list-style: none; + margin: 0; + } + ul > li { + font-size: 100%; + margin-left: 0.6rem; + margin-top: 0.3rem; + } + ul > li::before { + display: none; + } - a { - background: none; - text-shadow: none; - } - a:hover { - text-decoration: underline; - } + a { + background: none; + text-shadow: none; + } + a:hover { + text-decoration: underline; + } - .planned { - color: $planned-chapter-link; - } + .planned { + color: $planned-chapter-link; + } } - /* * Horizontal rules */ .chapter hr { - margin: 1em auto; + margin: 1em auto; - border: 0; - border-bottom: 1px solid $body-hr-color; + border: 0; + border-bottom: 1px solid $body-hr-color; } - /* * Quotes */ blockquote { - font-size: 95%; - line-height: 1.4; - margin: 2em; + font-size: 95%; + line-height: 1.4; + margin: 2em; } blockquote > footer { - font-size: 80%; - text-align: right; + font-size: 80%; + text-align: right; } blockquote > footer > cite { - font-style: italic; + font-style: italic; } blockquote .emphasis { - font-size: 80%; + font-size: 80%; } blockquote.center { - text-align: center; + text-align: center; } // Should we shut it down for small text? //blockquote > footer a:link { - //text-decoration: underline; - //background: none; - //text-shadow: none; +//text-decoration: underline; +//background: none; +//text-shadow: none; //} .epigraph { - margin: 2em 0; + margin: 2em 0; - blockquote { - font-size: 1rem; - font-style: italic; // Regular shouldn't be italic? - } - blockquote > footer { - font-style: normal; - } + blockquote { + font-size: 1rem; + font-style: italic; // Regular shouldn't be italic? + } + blockquote > footer { + font-style: normal; + } } - /* * Tables */ table { - @extend %sans-serif-tnum; - font-size: 0.95rem; - margin-bottom: 1rem; + @extend %sans-serif-tnum; + font-size: 0.95rem; + margin-bottom: 1rem; - display: block; - overflow-x: auto; - white-space: nowrap; + display: block; + overflow-x: auto; + white-space: nowrap; } -th, td { - text-align: left; - padding: 0.1em 1.5em 0.1em 0em; +th, +td { + text-align: left; + padding: 0.1em 1.5em 0.1em 0em; } // Had tons of trouble centering a table which could also // overflow on x. .centered { - display: flex; - justify-content: center; + display: flex; + justify-content: center; } - /* * Code */ -pre, code { - font-family: $code-font-family; - font-size: 0.83rem; - line-height: 1.45; +pre, +code { + font-family: $code-font-family; + font-size: 0.83rem; + line-height: 1.45; } code { - //background-color: tomato; + //background-color: tomato; } pre { - overflow-wrap: normal; - overflow: auto; + overflow-wrap: normal; + overflow: auto; - margin-bottom: 1rem; - padding: 0.4rem 0.6rem; + margin-bottom: 1rem; + padding: 0.4rem 0.6rem; } li pre { - margin-bottom: $list-p-margin; + margin-bottom: $list-p-margin; } .sidenote code { - font-size: 0.65rem; - line-height: 1.4; - //white-space: nowrap; + font-size: 0.65rem; + line-height: 1.4; + //white-space: nowrap; } - /* * Misc */ .def { - font-style: italic; + font-style: italic; } cite.book { - font-style: normal; + font-style: normal; } - /* * Side content */ .side-space { - // Serves to take up space. Inline content from the chapter is floated on top. - width: 420px; - //background-color: antiquewhite; - // Avoids swallowing clicks and interactions intended for wider images - visibility: hidden; + // Serves to take up space. Inline content from the chapter is floated on top. + width: 420px; + //background-color: antiquewhite; + // Avoids swallowing clicks and interactions intended for wider images + visibility: hidden; } .sidenote { - @extend %sans-serif; - font-size: 0.8rem; + @extend %sans-serif; + font-size: 0.8rem; } -.sidenote img, { - max-width: 100%; +.sidenote img { + max-width: 100%; } .sidenote .sidenote-number { - padding-right: 0.2rem; + padding-right: 0.2rem; } -.sidenote-number, .sidenote-label { - font-family: $sans-serif-font-family; - //vertical-align: super; - font-size: 0.7em; - display: inline-block; - //background-color: tomato; +.sidenote-number, +.sidenote-label { + font-family: $sans-serif-font-family; + //vertical-align: super; + font-size: 0.7em; + display: inline-block; + //background-color: tomato; } .sidenote .talking { - .row:before { - content: "–"; - padding-right: 0.3rem; - } + .row:before { + content: "–"; + padding-right: 0.3rem; + } } @media (max-width: $sidenote-float-width - 1) { - .sidenote { - display: block; - margin: 1em 4em 1.4em 4em !important; - - img { - display: block; - margin: 0 auto; - } - code { - max-width: 101%; - } - } - //.sidenote { background-color: lightblue; } -} -@media (min-width: $sidenote-float-width) { - .side-space { - display: block; - } - .sidenote { - float: right; - clear: right; - // Approximate adjustment for notes at the last line of a paragraph. - // Will get overridden by local styles. - margin-top: -2em; - margin-bottom: 4em; - margin-right: -420px; - width: 380px; - position: relative; - display: inline-block; - //background-color: moccasin; - } - blockquote .sidenote { - margin-right: -462px; + .sidenote { + display: block; + margin: 1em 4em 1.4em 4em !important; + + img { + display: block; + margin: 0 auto; } code { - max-width: 380px; + max-width: 101%; } - //.sidenote { background-color: pink; } + } + //.sidenote { background-color: lightblue; } +} +@media (min-width: $sidenote-float-width) { + .side-space { + display: block; + } + .sidenote { + float: right; + clear: right; + // Approximate adjustment for notes at the last line of a paragraph. + // Will get overridden by local styles. + margin-top: -2em; + margin-bottom: 4em; + margin-right: -420px; + width: 380px; + position: relative; + display: inline-block; + //background-color: moccasin; + } + blockquote .sidenote { + margin-right: -462px; + } + code { + max-width: 380px; + } + //.sidenote { background-color: pink; } } - /* * Donations */ .donations { - margin: 1rem 0; - margin-left: 0.5rem; + margin: 1rem 0; + margin-left: 0.5rem; } .donation-label { - @extend %sans-serif; - font-size: 0.9rem; - font-weight: bold; - color: $body-font-color; - cursor: pointer; - text-decoration: underline; + @extend %sans-serif; + font-size: 0.9rem; + font-weight: bold; + color: $body-font-color; + cursor: pointer; + text-decoration: underline; } .donation-label:hover { - color: $body-link-hover-color; + color: $body-link-hover-color; } .donation-toggle { - display: none; + display: none; } .donation-content { - display: none; + display: none; } .donation-toggle:checked + .donation-content { - display: block; - text-align: center; - padding-top: 0.2rem; + display: block; + text-align: center; + padding-top: 0.2rem; } .donation-content .qr { - margin-right: 0.5em; + margin-right: 0.5em; } .donation-content .address { - font-family: $triplicate; - font-size: 0.9rem; - word-wrap: break-word; + font-family: $triplicate; + font-size: 0.9rem; + word-wrap: break-word; } - /* * Images */ a.img-wrapper:link { - background: none; - text-shadow: none; + background: none; + text-shadow: none; } a.img-wrapper:hover { - @include a-background(#333); + @include a-background(#333); } - /* * Figures */ figure { - margin-bottom: 1rem; - text-align: center; + margin-bottom: 1rem; + text-align: center; - img { - max-width: 100%; - } - > figcaption { - @extend %sans-serif; - font-size: 0.9rem; - } + img { + max-width: 100%; + } + > figcaption { + @extend %sans-serif; + font-size: 0.9rem; + } } figure.fullwidth { - img { - width: 100%; - } + img { + width: 100%; + } } figure.slim { - margin: 0; + margin: 0; } figcaption.margin { - @extend %sans-serif; + @extend %sans-serif; } @media (min-width: $sidenote-float-width) { - figure.fullwidth { - width: $fullwidth; - } - figcaption.margin { - font-size: 0.8rem; - float: right; - clear: right; - margin-right: -420px; - margin-bottom: 2rem; - width: 380px; - position: relative; - display: inline-block; - text-align: left; - } - // Override the above in a fullwidth image. Not sure how to avoid this? - figure.fullwidth > figcaption.margin { - font-size: 0.9rem; - float: none; - margin: 0; - position: static; - display: block; - text-align: center; - width: 100%; - } + figure.fullwidth { + width: $fullwidth; + } + figcaption.margin { + font-size: 0.8rem; + float: right; + clear: right; + margin-right: -420px; + margin-bottom: 2rem; + width: 380px; + position: relative; + display: inline-block; + text-align: left; + } + // Override the above in a fullwidth image. Not sure how to avoid this? + figure.fullwidth > figcaption.margin { + font-size: 0.9rem; + float: none; + margin: 0; + position: static; + display: block; + text-align: center; + width: 100%; + } } figure .sidenote { - text-align: left; + text-align: left; } - /* * Misc */ .whitepaper { - display: flex; - justify-content: center; - width: 100%; - margin-bottom: 1rem; + display: flex; + justify-content: center; + width: 100%; + margin-bottom: 1rem; - a { - @extend %sans-serif; - font-size: 1.05rem; - } + a { + @extend %sans-serif; + font-size: 1.05rem; + } } .todo { - @extend %sans-serif; - font-size: 0.8rem; - margin: 1rem 1rem; + @extend %sans-serif; + font-size: 0.8rem; + margin: 1rem 1rem; - .pre { - font-weight: bold; - } - .txt { - } + .pre { + font-weight: bold; + } + .txt { + } } .story { - padding: 1rem 0; - margin: 1.5rem 0; - border-top: 1px dashed $body-hr-color; - border-bottom: 1px dashed $body-hr-color; - - .talk:before { - content: "–"; - padding-right: 0.3rem; - } - .talk:not(:first-child) { - margin-top: 0.6rem; - } + padding: 1rem 0; + margin: 1.5rem 0; + border-top: 1px dashed $body-hr-color; + border-bottom: 1px dashed $body-hr-color; - // Avoid double spacing at the bottom. - p:last-of-type { - margin-bottom: 0; - } - // Avoid ugly spacing when sidenote is placed at the end. - .sidenote:last-child { - margin-bottom: 0 !important; - } + .talk:before { + content: "–"; + padding-right: 0.3rem; + } + .talk:not(:first-child) { + margin-top: 0.6rem; + } + + // Avoid double spacing at the bottom. + p:last-of-type { + margin-bottom: 0; + } + // Avoid ugly spacing when sidenote is placed at the end. + .sidenote:last-child { + margin-bottom: 0 !important; + } } .story-talking { } - -.appendix, .error { - max-width: 600px; +.appendix, +.error { + max-width: 600px; } .fullwidth { - @extend %fullwidth; + @extend %fullwidth; } table.crypto-eval { - th, td { - padding: 0.1em 0.6em; - } - td { - text-align: left; - } - td.ths { - font-weight: bold; - text-align: center; - } - td.tds { - font-weight: bold; - } - td.poor { - background-color: $poor; - text-align: center; - } - td.good { - background-color: $good; - text-align: center; - } - td.excellent { - background-color: $excellent; - text-align: center; - } + th, + td { + padding: 0.1em 0.6em; + } + td { + text-align: left; + } + td.ths { + font-weight: bold; + text-align: center; + } + td.tds { + font-weight: bold; + } + td.poor { + background-color: $poor; + text-align: center; + } + td.good { + background-color: $good; + text-align: center; + } + td.excellent { + background-color: $excellent; + text-align: center; + } } table.legal-moral { - th, td { - padding: 0.1em 1.0em 0.1em 0.5em; - } - td { - text-align: center; - } - td.ths { - font-weight: bold; - text-align: center; - } - td.tds { - font-weight: bold; - text-align: right; - } - - .good { - background-color: $legal-moral; - } - .moral-illegal { - background-color: $illegal-moral; - } - .immoral-legal { - background-color: $legal-immoral; - } - .bad { - background-color: $illegal-immoral; - } + th, + td { + padding: 0.1em 1em 0.1em 0.5em; + } + td { + text-align: center; + } + td.ths { + font-weight: bold; + text-align: center; + } + td.tds { + font-weight: bold; + text-align: right; + } + + .good { + background-color: $legal-moral; + } + .moral-illegal { + background-color: $illegal-moral; + } + .immoral-legal { + background-color: $legal-immoral; + } + .bad { + background-color: $illegal-immoral; + } } table.address-examples { - td.ths { - font-weight: bold; - } - td.tdc { - //font-weight: bold; - } + td.ths { + font-weight: bold; + } + td.tdc { + //font-weight: bold; + } } .sans { - @extend %sans-serif; + @extend %sans-serif; } .sans-tnum { - @extend %sans-serif-tnum; + @extend %sans-serif-tnum; } .strikethrough { - text-decoration: line-through; + text-decoration: line-through; } .chapter .subscribe { - max-width: 25em; + max-width: 25em; } .money-examples .example { - width: 100%; + width: 100%; + margin-bottom: 1em; + display: flex; + + .txt { + margin: 0 0.5em; + } + + img { + flex-shrink: 0; + align-self: center; + max-width: 10em; margin-bottom: 1em; + } + h3 { + margin-top: 0; + } + .header { + font-size: 1.1rem; + @extend %sans-serif; + line-height: 1; display: flex; - - .txt { - margin: 0 0.5em; - } - - img { - flex-shrink: 0; - align-self: center; - max-width: 10em; - margin-bottom: 1em; - } - h3 { - margin-top: 0; - } - .header { - font-size: 1.1rem; - @extend %sans-serif; - line-height: 1; - display: flex; - } - .date { - margin-left: 0.5rem; - } + } + .date { + margin-left: 0.5rem; + } } .inflation-examples .example { - //margin: 0 0.5em 1em 0.5em; - margin: 1em 0; - - h3 { - margin-top: 0; - } - .header { - font-size: 1.1rem; - @extend %sans-serif; - line-height: 1; - display: flex; - } - .date { - margin-left: 0.5rem; - } - .txt { - margin-left: 0.5rem; - } + //margin: 0 0.5em 1em 0.5em; + margin: 1em 0; + + h3 { + margin-top: 0; + } + .header { + font-size: 1.1rem; + @extend %sans-serif; + line-height: 1; + display: flex; + } + .date { + margin-left: 0.5rem; + } + .txt { + margin-left: 0.5rem; + } } .wikileaks { - padding-top: 1em; - margin-bottom: 1em; - //margin: 1.5em 0; - border-top: 1px dashed $body-hr-color; - border-bottom: 1px dashed $body-hr-color; + padding-top: 1em; + margin-bottom: 1em; + //margin: 1.5em 0; + border-top: 1px dashed $body-hr-color; + border-bottom: 1px dashed $body-hr-color; } .wikileaks .entry:not(:first-child) { - margin-top: 1.5em; + margin-top: 1.5em; } .wikileaks .entry { - width: 100%; + width: 100%; - h3 { - margin-top: 0; - } - > .header { - font-size: 1.1rem; - @extend %sans-serif; - line-height: 1; - display: flex; - flex-wrap: wrap; - //margin-bottom: 0.3rem; - } - > .header > h3 { - margin-right: 0.5rem; - margin-bottom: 0.3rem; - } - > .header > .date { - margin-bottom: 0.3rem; - } - - .caution { - margin-top: 0.5em; - margin-bottom: 0.8em; - margin-left: 1em; - font-size: 90%; - } + h3 { + margin-top: 0; + } + > .header { + font-size: 1.1rem; + @extend %sans-serif; + line-height: 1; + display: flex; + flex-wrap: wrap; + //margin-bottom: 0.3rem; + } + > .header > h3 { + margin-right: 0.5rem; + margin-bottom: 0.3rem; + } + > .header > .date { + margin-bottom: 0.3rem; + } + + .caution { + margin-top: 0.5em; + margin-bottom: 0.8em; + margin-left: 1em; + font-size: 90%; + } } .snowden-leaks > li.leak > .title { - margin-top: $first-list-offset; - margin-bottom: $list-p-margin; - font-weight: bold; + margin-top: $first-list-offset; + margin-bottom: $list-p-margin; + font-weight: bold; } .wikileaks li.leak { - margin-bottom: 2em; + margin-bottom: 2em; - > .title { - margin-top: $first-list-offset; - margin-bottom: $list-p-margin; - font-weight: bold; - } + > .title { + margin-top: $first-list-offset; + margin-bottom: $list-p-margin; + font-weight: bold; + } - .transcript { - margin: 1rem 0; - padding-left: 1rem; - font-size: 95%; - line-height: 1.4; - border-left: 1px solid $body-hr-color; - } + .transcript { + margin: 1rem 0; + padding-left: 1rem; + font-size: 95%; + line-height: 1.4; + border-left: 1px solid $body-hr-color; + } } .wikileaks .transcript-wrapper { - margin: 1.5em 0; - border-top: 1px dashed $body-hr-color; - border-bottom: 1px dashed $body-hr-color; + margin: 1.5em 0; + border-top: 1px dashed $body-hr-color; + border-bottom: 1px dashed $body-hr-color; } - .wikileaks .transcript > .row { - width: 100%; - display: flex; - justify-content: flex-start; - - > .time { - margin-right: 1.5rem; - flex: none; - } - > .txt { + width: 100%; + display: flex; + justify-content: flex-start; - } + > .time { + margin-right: 1.5rem; + flex: none; + } + > .txt { + } } - - @media only screen and (min-width: 521px) { - .money-examples .example:nth-child(even) { - justify-content: space-between; - img { - order: 9; - margin-right: 0; - } + .money-examples .example:nth-child(even) { + justify-content: space-between; + img { + order: 9; + margin-right: 0; } + } } @media only screen and (max-width: 520px) { - .money-examples .example { - flex-wrap: wrap; - justify-content: flex-start; - flex-direction: column; - - .txt { - width: 100%; - order: 1; - } - img { - order: 0; - } + .money-examples .example { + flex-wrap: wrap; + justify-content: flex-start; + flex-direction: column; + + .txt { + width: 100%; + order: 1; + } + img { + order: 0; } + } } ul > li.plus:before { - font-family: $code-font-family; - content: "+"; + font-family: $code-font-family; + content: "+"; } ul > li.neg:before { - font-family: $code-font-family; - content: "-"; + font-family: $code-font-family; + content: "-"; } ul.talking > li:before { - content: "–"; + content: "–"; } .qt-tab { - padding-left: 1.2rem; + padding-left: 1.2rem; } /* * Pretty video embedding */ .video-wrapper { - //@extend %media-offset-wrapper; - //margin: 1em 0; + //@extend %media-offset-wrapper; + //margin: 1em 0; } .video-container { - position: relative; - padding-bottom: 56.25%; - padding-top: 30px; - height: 0; - overflow: hidden; + position: relative; + padding-bottom: 56.25%; + padding-top: 30px; + height: 0; + overflow: hidden; } -.video-container iframe, .video-container object, .video-container embed { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; +.video-container iframe, +.video-container object, +.video-container embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } table.address-message { - font-family: $code-font-family; - font-size: 0.71rem; - line-height: 1.45; - //font-style: italic; - .msg-char { - padding: 0 0.2em; - font-weight: bold; - } + font-family: $code-font-family; + font-size: 0.71rem; + line-height: 1.45; + //font-style: italic; + .msg-char { + padding: 0 0.2em; + font-weight: bold; + } } - /* * Legacy HN */ .hn { - font-size: 0.8rem; - font-family: Verdana; + font-size: 0.8rem; + font-family: Verdana; + color: #828282; + background-color: #f6f6ef; + margin: 1rem; + overflow-x: hidden; + white-space: nowrap; + + a:link { + text-shadow: none; + background: none; + color: #000; + } + a:visited { color: #828282; - background-color: #f6f6ef; - margin: 1rem; - overflow-x: hidden; - white-space: nowrap; - - a:link { - text-shadow: none; - background: none; - color: #000; - } - a:visited { - color:#828282; - } + } } .hn table { - font-size: 0.8rem; - font-family: Verdana; - padding: 0 0 0.2rem 0.4rem; + font-size: 0.8rem; + font-family: Verdana; + padding: 0 0 0.2rem 0.4rem; + margin: 0; + overflow-x: hidden; + white-space: nowrap; + + th, + td { margin: 0; - overflow-x: hidden; - white-space: nowrap; - - th, td { - margin: 0; - padding: 0; - } - .title { - font-size: 1em; - } - .comhead { - font-size: 0.8em; - } - .subtext { - font-size: 0.7em; - } - .comhead a:link, .subtext a:link, .subtext a:visited { - color:#828282; - } - .subtext a:hover, .comhead a:hover { - text-decoration: underline; - } - .arrow { - font-size: 0.65em; - color: #b3b3b3; - margin-left: 0.4em; - margin-right: 0.3em; - position: relative; - top: -0.12em; - cursor: pointer; - } + padding: 0; + } + .title { + font-size: 1em; + } + .comhead { + font-size: 0.8em; + } + .subtext { + font-size: 0.7em; + } + .comhead a:link, + .subtext a:link, + .subtext a:visited { + color: #828282; + } + .subtext a:hover, + .comhead a:hover { + text-decoration: underline; + } + .arrow { + font-size: 0.65em; + color: #b3b3b3; + margin-left: 0.4em; + margin-right: 0.3em; + position: relative; + top: -0.12em; + cursor: pointer; + } } .hn .header { - font-size: 0.8rem; - font-family: Verdana; - background-color: #ff6600; - margin: 0; - padding: 0; - margin-bottom: 0.4rem; - height: 1.3rem; - text-align: left; - + font-size: 0.8rem; + font-family: Verdana; + background-color: #ff6600; + margin: 0; + padding: 0; + margin-bottom: 0.4rem; + height: 1.3rem; + text-align: left; + + display: flex; + justify-content: flex-start; + align-items: center; + + .logo a { display: flex; - justify-content: flex-start; + justify-content: center; align-items: center; - - .logo a { - display: flex; - justify-content: center; - align-items: center; - } - .logo a img { - border: 1px #fff solid; - max-width: 20px; - max-height: 20px; - margin: 0 0.2rem; - } - .pagetop { - font-size: 1em; - color:#222222; - } - .pagetop a:visited { - color:#000000; - } - .hn-title { - font-weight: bold; - margin-right: 0.8em; - } + } + .logo a img { + border: 1px #fff solid; + max-width: 20px; + max-height: 20px; + margin: 0 0.2rem; + } + .pagetop { + font-size: 1em; + color: #222222; + } + .pagetop a:visited { + color: #000000; + } + .hn-title { + font-weight: bold; + margin-right: 0.8em; + } } .fractional-table-ex { - @extend %sans-serif-tnum; - font-size: 0.95rem; - margin: 1em 0 1.2em 0; + @extend %sans-serif-tnum; + font-size: 0.95rem; + margin: 1em 0 1.2em 0; - .row { - width: 100%; - display: flex; - flex-wrap: nowrap; - justify-content: center; - } - .header { - font-weight: bold; - } - .cell { - width: 5em; - text-align: center; - margin-right: 1.5em; - } + .row { + width: 100%; + display: flex; + flex-wrap: nowrap; + justify-content: center; + } + .header { + font-weight: bold; + } + .cell { + width: 5em; + text-align: center; + margin-right: 1.5em; + } } .money-visualization { - margin: 1em 0; + margin: 1em 0; } .money-visualization .block { - width: 100%; - display: flex; - justify-content: center; - flex-wrap: wrap; + width: 100%; + display: flex; + justify-content: center; + flex-wrap: wrap; - .title { - @extend %sans-serif; - font-size: 1rem; - width: 100%; - text-align: center; - } - .wrapper { - width: 100%; - text-align: center; - overflow-x: auto; - } - .wrapper.small { - margin-top: -0.4rem; - margin-bottom: -0.4rem; - } + .title { + @extend %sans-serif; + font-size: 1rem; + width: 100%; + text-align: center; + } + .wrapper { + width: 100%; + text-align: center; + overflow-x: auto; + } + .wrapper.small { + margin-top: -0.4rem; + margin-bottom: -0.4rem; + } } .money-vis-small { - background: url(/images/markets/small.png) left top no-repeat; - width: 10px; - height: 10px; - display: inline-block; + background: url(/images/markets/small.png) left top no-repeat; + width: 10px; + height: 10px; + display: inline-block; } .money-vis-big { - background: url(/images/markets/big.png) left top no-repeat; - width: 12px; - height: 12px; - display: inline-block; + background: url(/images/markets/big.png) left top no-repeat; + width: 12px; + height: 12px; + display: inline-block; } /* @@ -1077,49 +1075,51 @@ table.address-message { */ .hidden-label { - @include a-background(#333); - cursor: pointer; + @include a-background(#333); + cursor: pointer; } .hidden-label:hover { - color: $body-link-hover-color; - background: none; - shadow: none; + color: $body-link-hover-color; + background: none; + shadow: none; } .hidden-toggle { - display: none; + display: none; } .hidden-content { - display: none; - @extend %sans-serif; - font-size: 0.8rem; + display: none; + @extend %sans-serif; + font-size: 0.8rem; } .hidden-toggle:checked + .hidden-content { - display: block; - text-align: center; - padding-top: 0.2rem; + display: block; + text-align: center; + padding-top: 0.2rem; } -.flex-20, .flex-25, .flex-50, .flex-33 { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; +.flex-20, +.flex-25, +.flex-50, +.flex-33 { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; - img { - padding: 0.2em; - } + img { + padding: 0.2em; + } } .flex-20 img { - max-width: 20%; + max-width: 20%; } .flex-25 img { - max-width: 25%; + max-width: 25%; } .flex-33 img { - max-width: 33%; + max-width: 33%; } .flex-50 img { - max-width: 50%; + max-width: 50%; } - diff --git a/sass/code-highlight.scss b/sass/code-highlight.scss index 505028da..6a9404e4 100644 --- a/sass/code-highlight.scss +++ b/sass/code-highlight.scss @@ -35,20 +35,36 @@ $gb-lm-light-orange: #af3a03; $gb-lm-light-gray: #7c6f64; .highlight { - margin: 1rem 0; - border-top: 1px dashed $body-hr-color; - border-bottom: 1px dashed $body-hr-color; + margin: 1rem 0; + border-top: 1px dashed $body-hr-color; + border-bottom: 1px dashed $body-hr-color; - > pre { - padding: 0 0.6em; - margin: 1em 0; - } + > pre { + padding: 0 0.6em; + margin: 1em 0; + } - // Builtin - .nb { color: $gb-lm-light-orange; } - // Strings - .s, .s1, .s2, .sb, .sc, .sd, .sh { color: $gb-lm-light-green} - // Keywords - .k, .kc, .kd, .kn, .kp, .kr { color: $gb-lm-light-blue; } + // Builtin + .nb { + color: $gb-lm-light-orange; + } + // Strings + .s, + .s1, + .s2, + .sb, + .sc, + .sd, + .sh { + color: $gb-lm-light-green; + } + // Keywords + .k, + .kc, + .kd, + .kn, + .kp, + .kr { + color: $gb-lm-light-blue; + } } - diff --git a/sass/colors.scss b/sass/colors.scss index b90c0ecd..a1e57e48 100644 --- a/sass/colors.scss +++ b/sass/colors.scss @@ -1,7 +1,7 @@ // Common cryptocurrency colors: -$bch-green: #5DCB79; +$bch-green: #5dcb79; $bch-green2: #478559; -$btc-orange: #F59332; +$btc-orange: #f59332; $eth-light-gray: #7e8891; $eth-dark-gray: #343535; $xmr-orange: #ff6600; @@ -58,4 +58,3 @@ $illegal-moral: #b3cde3; $legal-moral: #ccebc5; $legal-immoral: #decbe4; // https://colorbrewer2.org/#type=qualitative&scheme=Pastel1&n=6 - diff --git a/sass/fonts.scss b/sass/fonts.scss index 91400460..a2a59d46 100644 --- a/sass/fonts.scss +++ b/sass/fonts.scss @@ -1,126 +1,130 @@ -$century-supra: 'century_supra_a'; +$century-supra: "century_supra_a"; @font-face { - font-family: $century-supra; - font-style: normal; - font-weight: normal; - font-stretch: normal; - font-display: auto; - src: url('/fonts/century_supra_a_regular.woff2') format('woff2'); + font-family: $century-supra; + font-style: normal; + font-weight: normal; + font-stretch: normal; + font-display: auto; + src: url("/fonts/century_supra_a_regular.woff2") format("woff2"); } @font-face { - font-family: $century-supra; - font-style: italic; - font-weight: normal; - font-stretch: normal; - font-display: auto; - src: url('/fonts/century_supra_a_italic.woff2') format('woff2'); + font-family: $century-supra; + font-style: italic; + font-weight: normal; + font-stretch: normal; + font-display: auto; + src: url("/fonts/century_supra_a_italic.woff2") format("woff2"); } @font-face { - font-family: $century-supra; - font-style: normal; - font-weight: bold; - font-stretch: normal; - font-display: auto; - src: url('/fonts/century_supra_a_bold.woff2') format('woff2'); + font-family: $century-supra; + font-style: normal; + font-weight: bold; + font-stretch: normal; + font-display: auto; + src: url("/fonts/century_supra_a_bold.woff2") format("woff2"); } @font-face { - font-family: $century-supra; - font-style: italic; - font-weight: bold; - font-stretch: normal; - font-display: auto; - src: url('/fonts/century_supra_a_bold_italic.woff2') format('woff2'); + font-family: $century-supra; + font-style: italic; + font-weight: bold; + font-stretch: normal; + font-display: auto; + src: url("/fonts/century_supra_a_bold_italic.woff2") format("woff2"); } -$concourse: 'concourse_4'; +$concourse: "concourse_4"; @font-face { - font-family: $concourse; - font-style: normal; - font-weight: normal; - font-stretch: normal; - font-display: auto; - src: url('/fonts/concourse_4_regular.woff2') format('woff2'); + font-family: $concourse; + font-style: normal; + font-weight: normal; + font-stretch: normal; + font-display: auto; + src: url("/fonts/concourse_4_regular.woff2") format("woff2"); } @font-face { - font-family: $concourse; - font-style: italic; - font-weight: normal; - font-stretch: normal; - font-display: auto; - src: url('/fonts/concourse_4_italic.woff2') format('woff2'); + font-family: $concourse; + font-style: italic; + font-weight: normal; + font-stretch: normal; + font-display: auto; + src: url("/fonts/concourse_4_italic.woff2") format("woff2"); } @font-face { - font-family: $concourse; - font-style: normal; - font-weight: bold; - font-stretch: normal; - font-display: auto; - src: url('/fonts/concourse_4_bold.woff2') format('woff2'); + font-family: $concourse; + font-style: normal; + font-weight: bold; + font-stretch: normal; + font-display: auto; + src: url("/fonts/concourse_4_bold.woff2") format("woff2"); } @font-face { - font-family: $concourse; - font-style: italic; - font-weight: bold; - font-stretch: normal; - font-display: auto; - src: url('/fonts/concourse_4_bold_italic.woff2') format('woff2'); + font-family: $concourse; + font-style: italic; + font-weight: bold; + font-stretch: normal; + font-display: auto; + src: url("/fonts/concourse_4_bold_italic.woff2") format("woff2"); } -$triplicate: 'Triplicate'; +$triplicate: "Triplicate"; @font-face { - font-family: $triplicate; - font-style: normal; - font-weight: normal; - font-stretch: normal; - font-display: auto; - src: url('/fonts/triplicate_a_code_regular.woff2') format('woff2'); + font-family: $triplicate; + font-style: normal; + font-weight: normal; + font-stretch: normal; + font-display: auto; + src: url("/fonts/triplicate_a_code_regular.woff2") format("woff2"); } @font-face { - font-family: $triplicate; - font-style: italic; - font-weight: normal; - font-stretch: normal; - font-display: auto; - src: url('/fonts/triplicate_a_code_italic.woff2') format('woff2'); + font-family: $triplicate; + font-style: italic; + font-weight: normal; + font-stretch: normal; + font-display: auto; + src: url("/fonts/triplicate_a_code_italic.woff2") format("woff2"); } @font-face { - font-family: $triplicate; - font-style: normal; - font-weight: bold; - font-stretch: normal; - font-display: auto; - src: url('/fonts/triplicate_a_code_bold.woff2') format('woff2'); + font-family: $triplicate; + font-style: normal; + font-weight: bold; + font-stretch: normal; + font-display: auto; + src: url("/fonts/triplicate_a_code_bold.woff2") format("woff2"); } @font-face { - font-family: $triplicate; - font-style: italic; - font-weight: bold; - font-stretch: normal; - font-display: auto; - src: url('/fonts/triplicate_a_code_bold_italic.woff2') format('woff2'); + font-family: $triplicate; + font-style: italic; + font-weight: bold; + font-stretch: normal; + font-display: auto; + src: url("/fonts/triplicate_a_code_bold_italic.woff2") format("woff2"); } - -$serif-font-family: $century-supra, Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; -$sans-serif-font-family: $concourse, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; -$code-font-family: $triplicate, Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; - +$serif-font-family: $century-supra, Constantia, "Lucida Bright", Lucidabright, + "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", + "Liberation Serif", Georgia, serif; +$sans-serif-font-family: $concourse, Frutiger, "Frutiger Linotype", Univers, + Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, + "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, + "Helvetica Neue", Helvetica, Arial, sans-serif; +$code-font-family: $triplicate, Consolas, "Andale Mono WT", "Andale Mono", + "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", + "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, + "Courier New", Courier, monospace; %sans-serif { - text-rendering: optimizeLegibility; - font-family: $sans-serif-font-family; - font-feature-settings: "onum" off, "kern" on; + text-rendering: optimizeLegibility; + font-family: $sans-serif-font-family; + font-feature-settings: "onum" off, "kern" on; } %sans-serif-tnum { - text-rendering: optimizeLegibility; - @extend %sans-serif; - font-feature-settings: 'kern' on, 'tnum' on; + text-rendering: optimizeLegibility; + @extend %sans-serif; + font-feature-settings: "kern" on, "tnum" on; } %serif { - text-rendering: optimizeLegibility; - font-family: $serif-font-family; - font-feature-settings: "kern" on; + text-rendering: optimizeLegibility; + font-family: $serif-font-family; + font-feature-settings: "kern" on; } - - diff --git a/sass/global.scss b/sass/global.scss index 33c0251d..e0e6c786 100644 --- a/sass/global.scss +++ b/sass/global.scss @@ -1,144 +1,147 @@ * { - // Predictable styling. - margin: 0; - padding: 0; - // Better box model, includes border in width calculations. - box-sizing: border-box; - // Flexbox overrides min-width which makes 
 not overflow properly
-    // https://weblog.west-wind.com/posts/2016/Feb/15/Flexbox-Containers-PRE-tags-and-managing-Overflow
-    min-width: 0;
+  // Predictable styling.
+  margin: 0;
+  padding: 0;
+  // Better box model, includes border in width calculations.
+  box-sizing: border-box;
+  // Flexbox overrides min-width which makes 
 not overflow properly
+  // https://weblog.west-wind.com/posts/2016/Feb/15/Flexbox-Containers-PRE-tags-and-managing-Overflow
+  min-width: 0;
 }
 
-
-
 html {
-    font-size: 22px;
-    line-height: 1.45;
+  font-size: 22px;
+  line-height: 1.45;
 }
 
 @media only screen and (max-width: 700px) {
-    html {
-        font-size: 20px;
-    }
+  html {
+    font-size: 20px;
+  }
 }
 @media only screen and (max-width: 600px) {
-    html {
-        font-size: 18px;
-    }
+  html {
+    font-size: 18px;
+  }
 }
 @media only screen and (max-width: 520px) {
-    html {
-        font-size: 16px;
-    }
+  html {
+    font-size: 16px;
+  }
 }
 
-
 /*
  * Main body
  */
 body {
-    @extend %serif;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+  @extend %serif;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 
-    color: $body-font-color;
-    background-color: $body-background-color;
+  color: $body-font-color;
+  background-color: $body-background-color;
 }
 
-
 p {
-    margin-bottom: 1em;
+  margin-bottom: 1em;
 }
 
-
 /*
  * Headers
  */
-h1, h2, h3, h4 {
-    @extend %sans-serif;
-    line-height: 1;
+h1,
+h2,
+h3,
+h4 {
+  @extend %sans-serif;
+  line-height: 1;
 }
 h1 {
-    font-size: 1.45rem;
+  font-size: 1.45rem;
 }
 h2 {
-    font-size: 1.22rem;
-    margin-top: 1.2em;
-    margin-bottom: 0.3em;
+  font-size: 1.22rem;
+  margin-top: 1.2em;
+  margin-bottom: 0.3em;
 }
 h3 {
-    font-size: 1.1rem;
-    margin-top: 1em;
-    margin-bottom: 0.3em;
+  font-size: 1.1rem;
+  margin-top: 1em;
+  margin-bottom: 0.3em;
 }
 h4 {
-    font-size: 0.91rem;
-    margin-top: 1em;
-    margin-bottom: 0.3em;
+  font-size: 0.91rem;
+  margin-top: 1em;
+  margin-bottom: 0.3em;
 }
 
-
 /*
  * Links: replicate underline that clears descenders
  * Source: https://edwardtufte.github.io/tufte-css/
  * who credits Adam Schwartz
  */
 @mixin a-text-shadow($col) {
-    text-shadow: 0.03em 0 $col, -0.03em 0 $col, 0 0.03em $col, 0 -0.03em $col,
-                 0.06em 0 $col, -0.06em 0 $col, 0.09em 0 $col, -0.09em 0 $col,
-                 0.12em 0 $col, -0.12em 0 $col, 0.15em 0 $col, -0.15em 0 $col;
+  text-shadow: 0.03em 0 $col, -0.03em 0 $col, 0 0.03em $col, 0 -0.03em $col,
+    0.06em 0 $col, -0.06em 0 $col, 0.09em 0 $col, -0.09em 0 $col, 0.12em 0 $col,
+    -0.12em 0 $col, 0.15em 0 $col, -0.15em 0 $col;
 }
 
 @mixin a-background($col) {
-    background: -webkit-linear-gradient($body-background-color, $body-background-color),
-        -webkit-linear-gradient($body-background-color, $body-background-color),
-        -webkit-linear-gradient($col, $col);
-    background: linear-gradient($body-background-color, $body-background-color),
-        linear-gradient($body-background-color, $body-background-color),
-        linear-gradient($col, $col);
-
-    $background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
-    -webkit-background-size: $background-size;
-    -moz-background-size: $background-size;
-    background-size: $background-size;
-
-    background-repeat: no-repeat, no-repeat, repeat-x;
-    @include a-text-shadow($body-background-color);
-    background-position: 0% 93%, 100% 93%, 0% 93%;
+  background: -webkit-linear-gradient(
+      $body-background-color,
+      $body-background-color
+    ),
+    -webkit-linear-gradient($body-background-color, $body-background-color),
+    -webkit-linear-gradient($col, $col);
+  background: linear-gradient($body-background-color, $body-background-color),
+    linear-gradient($body-background-color, $body-background-color),
+    linear-gradient($col, $col);
+
+  $background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
+  -webkit-background-size: $background-size;
+  -moz-background-size: $background-size;
+  background-size: $background-size;
+
+  background-repeat: no-repeat, no-repeat, repeat-x;
+  @include a-text-shadow($body-background-color);
+  background-position: 0% 93%, 100% 93%, 0% 93%;
 }
 
 a:link {
-    text-decoration: none;
-    @include a-background(#333);
+  text-decoration: none;
+  @include a-background(#333);
 }
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
-    a:link { background-position-y: 89%, 89%, 89%; }
+  a:link {
+    background-position-y: 89%, 89%, 89%;
+  }
 }
 
-a:link::selection, a:link::-moz-selection {
-    @include a-text-shadow($body-selection-color);
-    background: $body-selection-color;
+a:link::selection,
+a:link::-moz-selection {
+  @include a-text-shadow($body-selection-color);
+  background: $body-selection-color;
 }
 
-a:link, a:visited {
-    color: inherit;
+a:link,
+a:visited {
+  color: inherit;
 }
 a:hover {
-    //@include a-background($body-link-hover-color);
-    background: none;
-    shadow: none;
-    color: $body-link-hover-color;
+  //@include a-background($body-link-hover-color);
+  background: none;
+  shadow: none;
+  color: $body-link-hover-color;
 }
 a:hover.xref {
-    color: $body-xref-hover-color;
+  color: $body-xref-hover-color;
 }
 a:hover.invalid-iref {
-    color: $body-invalid-iref-hover-color;
+  color: $body-invalid-iref-hover-color;
 }
 
-
 /*
  * Selection
  */
@@ -149,225 +152,232 @@ a:hover.invalid-iref {
   background: $body-selection-color; /* Gecko Browsers */
 }
 
-
 /*
  * Prev/next nav panes
  */
 .edge-wrapper {
-    a {
-        text-decoration: none;
-        background: none;
-        text-shadow: none;
-        color: #ddd;
-    }
-    a:hover {
-        color: $body-font-color;
-        background-color: $btc-orange;
-        //background-color: $bch-green;
-        //background-color: $body-selection-color;
-    }
+  a {
+    text-decoration: none;
+    background: none;
+    text-shadow: none;
+    color: #ddd;
+  }
+  a:hover {
+    color: $body-font-color;
+    background-color: $btc-orange;
+    //background-color: $bch-green;
+    //background-color: $body-selection-color;
+  }
 }
-.prev-pan, .next-pan {
-    background-color: yellow;
-    font-size: 2.5rem;
-    text-align: center;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    width: 1.2em;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    flex-direction: column;
-
-    .content {
-        display: inline-block;
-    }
+.prev-pan,
+.next-pan {
+  background-color: yellow;
+  font-size: 2.5rem;
+  text-align: center;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 1.2em;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  flex-direction: column;
+
+  .content {
+    display: inline-block;
+  }
 }
 .prev-pan {
-    left: 0;
+  left: 0;
 }
 .next-pan {
-    right: 0;
+  right: 0;
 }
 
 @media only screen and (max-width: 1340px) {
-    .prev-pan, .next-pan {
-        width: 1em;
-        font-size: 1.2rem;
-    }
+  .prev-pan,
+  .next-pan {
+    width: 1em;
+    font-size: 1.2rem;
+  }
 }
 @media only screen and (max-width: 900px) {
-    .prev-pan, .next-pan {
-        width: 1em;
-        font-size: 1rem;
-    }
-    .edge-wrapper a {
-        color: #ccc;
-    }
+  .prev-pan,
+  .next-pan {
+    width: 1em;
+    font-size: 1rem;
+  }
+  .edge-wrapper a {
+    color: #ccc;
+  }
 }
 
-
 /*
  * Follow
  */
 .follow {
-    @extend %sans-serif;
-    margin-top: 2rem;
-    margin-bottom: 2rem;
+  @extend %sans-serif;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 }
 
 .follow > .links {
-    margin: 0.3rem;
-    font-size: 0.8rem;
+  margin: 0.3rem;
+  font-size: 0.8rem;
 }
 .follow > .wip {
-    margin: 0.3rem;
-    font-size: 0.8rem;
+  margin: 0.3rem;
+  font-size: 0.8rem;
 }
 .follow > .donate {
-    margin: 0.3rem;
-    font-size: 0.8rem;
+  margin: 0.3rem;
+  font-size: 0.8rem;
 }
-.subscribe > .email, .subscribe > .submit {
-    @extend %serif;
-    font-size: 0.75rem;
-    border: 1px solid #ddd;
-    background: $body-background-color;
-    padding: 0.5em;
+.subscribe > .email,
+.subscribe > .submit {
+  @extend %serif;
+  font-size: 0.75rem;
+  border: 1px solid #ddd;
+  background: $body-background-color;
+  padding: 0.5em;
 }
 
 .subscribe > .email:hover,
 .subscribe > .submit:hover {
-    border: 1px solid #aaa;
-    color: $body-font-color;
+  border: 1px solid #aaa;
+  color: $body-font-color;
 }
 .subscribe > .email:invalid {
-    color: $email-invalid-color;
+  color: $email-invalid-color;
 }
 .subscribe > .submit:hover {
-    color: $body-xref-hover-color;
-    cursor: pointer;
+  color: $body-xref-hover-color;
+  cursor: pointer;
 }
 .subscribe {
-    display: flex;
+  display: flex;
 }
 .subscribe > .email {
-    flex: 4;
-    margin-right: 0.2rem;
+  flex: 4;
+  margin-right: 0.2rem;
 }
 .subscribe > .submit {
-    flex: 1;
+  flex: 1;
 }
 
 .buy {
-    @extend %sans-serif;
-    margin-top: 1rem;
-    font-size: 0.9rem;
-
-    a:link {
-        text-decoration: underline;
-    }
-    a:hover {
-        text-decoration: none;
-    }
+  @extend %sans-serif;
+  margin-top: 1rem;
+  font-size: 0.9rem;
+
+  a:link {
+    text-decoration: underline;
+  }
+  a:hover {
+    text-decoration: none;
+  }
 }
 
-
 /*
  * Footer
  */
 body > footer {
-    @extend %sans-serif;
+  @extend %sans-serif;
 
-    width: 100%;
-    height: 3em;
-    margin-top: 1em;
-
-    nav {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        font-size: 0.95rem;
-
-        a:link {
-            text-decoration: none;
-            background: none;
-            text-shadow: none;
-        }
-        a:hover {
-            text-decoration: underline;
-        }
-    }
+  width: 100%;
+  height: 3em;
+  margin-top: 1em;
 
-    .follow-wrapper {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        margin-top: 1rem;
-    }
-    .follow-wrapper > .follow {
-        margin-top: 0;
-    }
+  nav {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    font-size: 0.95rem;
 
-    .prev, .parent, .home, .next {
-        margin: 0 0.3em;
-    }
-    .prev {
-        order: 1;
-    }
-    .next {
-        order: 2;
+    a:link {
+      text-decoration: none;
+      background: none;
+      text-shadow: none;
     }
-    .middle {
-        order: 0;
-        width: 100%;
-        display: flex;
-        justify-content: center;
+    a:hover {
+      text-decoration: underline;
     }
-}
-.buy-wrapper {
+  }
+
+  .follow-wrapper {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    font-size: 0.95rem;
+    margin-top: 1rem;
+  }
+  .follow-wrapper > .follow {
+    margin-top: 0;
+  }
+
+  .prev,
+  .parent,
+  .home,
+  .next {
+    margin: 0 0.3em;
+  }
+  .prev {
+    order: 1;
+  }
+  .next {
+    order: 2;
+  }
+  .middle {
+    order: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+}
+.buy-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  font-size: 0.95rem;
 
-    .buy {
-        text-align: center;
+  .buy {
+    text-align: center;
 
-        p {
-            margin-bottom: 0.4em;
-        }
+    p {
+      margin-bottom: 0.4em;
     }
+  }
 }
 .homepage-footer {
+  width: 100%;
+  //background-color: lightyellow;
+  flex: 1 1 auto;
+  margin: 0.5rem 1.2rem;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  .buy {
     width: 100%;
-    //background-color: lightyellow;
-    flex: 1 1 auto;
-    margin: 0.5rem 1.2rem;
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-
-    .buy {
-        width: 100%;
-    }
+  }
 }
 
 @media (min-width: 800px) {
-    body > footer {
-        .prev, .parent, .home, .next {
-            margin: 0 0.6em;
-        }
-        .prev {
-            order: 0;
-        }
-        .middle {
-            order: 1;
-            width: auto;
-        }
-        .next {
-            order: 2;
-        }
+  body > footer {
+    .prev,
+    .parent,
+    .home,
+    .next {
+      margin: 0 0.6em;
+    }
+    .prev {
+      order: 0;
+    }
+    .middle {
+      order: 1;
+      width: auto;
+    }
+    .next {
+      order: 2;
     }
+  }
 }
diff --git a/sass/homepage.scss b/sass/homepage.scss
index 298dbef2..53695754 100644
--- a/sass/homepage.scss
+++ b/sass/homepage.scss
@@ -1,57 +1,57 @@
 .homepage {
-    max-width: 600px;
-    margin: 0.5rem 1.2rem;
+  max-width: 600px;
+  margin: 0.5rem 1.2rem;
 }
 
 .homepage > header {
-    margin-bottom: 1em;
-    padding-bottom: 0.3em;
-    border-bottom: 0.2em solid;
+  margin-bottom: 1em;
+  padding-bottom: 0.3em;
+  border-bottom: 0.2em solid;
 
-    h1 {
-        @extend %sans-serif;
-        font-size: 2rem;
-        margin-bottom: 0.2rem;
-    }
-    h2 {
-        @extend %sans-serif;
-        font-size: 1rem;
-        font-weight: normal;
-        font-style: italic;
-        margin: 0;
-        margin-left: 0.3rem;
-        margin-bottom: 0.2rem;
-    }
+  h1 {
+    @extend %sans-serif;
+    font-size: 2rem;
+    margin-bottom: 0.2rem;
+  }
+  h2 {
+    @extend %sans-serif;
+    font-size: 1rem;
+    font-weight: normal;
+    font-style: italic;
+    margin: 0;
+    margin-left: 0.3rem;
+    margin-bottom: 0.2rem;
+  }
 }
 
 .toc section:not(:first-child) {
-    padding-top: 1.2rem;
+  padding-top: 1.2rem;
 }
 
 .toc {
-    @extend %sans-serif;
-    a {
-        text-decoration: none;
-        background: none;
-        text-shadow: none;
-    }
-    a:hover {
-        text-decoration: underline;
-    }
+  @extend %sans-serif;
+  a {
+    text-decoration: none;
+    background: none;
+    text-shadow: none;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
 }
 
 .toc h1 {
-    font-size: 1.1rem;
+  font-size: 1.1rem;
 }
 .toc ul {
-    margin-top: 0.5rem;
-    list-style: none;
+  margin-top: 0.5rem;
+  list-style: none;
 
-    li {
-        margin-left: 0.6rem;
-        margin-top: 0.3rem;
-    }
+  li {
+    margin-left: 0.6rem;
+    margin-top: 0.3rem;
+  }
 }
 .toc .planned {
-    color: $planned-chapter-link;
+  color: $planned-chapter-link;
 }
diff --git a/sass/landing.scss b/sass/landing.scss
index 72ed60db..ce8c09bc 100644
--- a/sass/landing.scss
+++ b/sass/landing.scss
@@ -84,52 +84,51 @@ $cover-dark5: #606060;
 // #606030
 // #90A860
 
-$cover-green-hl: #C0D890;
-
-
-$pink-050: #FFE0F0;
-$pink-100: #FAB8D9;
-$pink-200: #F191C1;
-$pink-300: #E668A7;
-$pink-400: #DA4A91;
-$pink-500: #C42D78;
-$pink-600: #AD2167;
-$pink-700: #9B1B5A;
+$cover-green-hl: #c0d890;
+
+$pink-050: #ffe0f0;
+$pink-100: #fab8d9;
+$pink-200: #f191c1;
+$pink-300: #e668a7;
+$pink-400: #da4a91;
+$pink-500: #c42d78;
+$pink-600: #ad2167;
+$pink-700: #9b1b5a;
 $pink-800: #781244;
-$pink-900: #5C0B33;
-
-$magenta-050: #F5E1F7;
-$magenta-100: #ECBDF2;
-$magenta-200: #CE80D9;
-$magenta-300: #BB61C7;
-$magenta-400: #AD4BB8;
-$magenta-500: #A23DAD;
-$magenta-600: #90279C;
-$magenta-700: #7C1A87;
+$pink-900: #5c0b33;
+
+$magenta-050: #f5e1f7;
+$magenta-100: #ecbdf2;
+$magenta-200: #ce80d9;
+$magenta-300: #bb61c7;
+$magenta-400: #ad4bb8;
+$magenta-500: #a23dad;
+$magenta-600: #90279c;
+$magenta-700: #7c1a87;
 $magenta-800: #671270;
-$magenta-900: #4E0754;
-
-$yellow-050: #FFFAEB;
-$yellow-100: #FCEFC7;
-$yellow-200: #F8E3A3;
-$yellow-300: #F9DA8B;
-$yellow-400: #F7D070;
-$yellow-500: #E9B949;
-$yellow-600: #C99A2E;
-$yellow-700: #A27C1A;
-$yellow-800: #7C5E10;
-$yellow-900: #513C06;
-
-$warm-grey-050: #FAF9F7;
-$warm-grey-100: #E8E6E1;
-$warm-grey-200: #D3CEC4;
-$warm-grey-300: #B8B2A7;
-$warm-grey-400: #A39E93;
-$warm-grey-500: #857F72;
-$warm-grey-600: #625D52;
-$warm-grey-700: #504A40;
-$warm-grey-800: #423D33;
-$warm-grey-900: #27241D;
+$magenta-900: #4e0754;
+
+$yellow-050: #fffaeb;
+$yellow-100: #fcefc7;
+$yellow-200: #f8e3a3;
+$yellow-300: #f9da8b;
+$yellow-400: #f7d070;
+$yellow-500: #e9b949;
+$yellow-600: #c99a2e;
+$yellow-700: #a27c1a;
+$yellow-800: #7c5e10;
+$yellow-900: #513c06;
+
+$warm-grey-050: #faf9f7;
+$warm-grey-100: #e8e6e1;
+$warm-grey-200: #d3cec4;
+$warm-grey-300: #b8b2a7;
+$warm-grey-400: #a39e93;
+$warm-grey-500: #857f72;
+$warm-grey-600: #625d52;
+$warm-grey-700: #504a40;
+$warm-grey-800: #423d33;
+$warm-grey-900: #27241d;
 
 $button-hover-color: $bch-green;
 $button-color: $yellow-300;
@@ -143,29 +142,31 @@ $large-width: 1280px;
 $small-screen: 1067px;
 
 .landing {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .landing {
-    a {
-        text-shadow: none;
-        background: none;
-        text-shadow: none;
-        text-decoration: underline;
-    }
-    a:link, a:visited, a:link:selection {
-        text-shadow: none;
-        background: none;
-        text-decoration: underline;
-    }
-    a:link {
-        color: #000;
-    }
-    a:hover {
-        color: $btc-orange;
-    }
+  a {
+    text-shadow: none;
+    background: none;
+    text-shadow: none;
+    text-decoration: underline;
+  }
+  a:link,
+  a:visited,
+  a:link:selection {
+    text-shadow: none;
+    background: none;
+    text-decoration: underline;
+  }
+  a:link {
+    color: #000;
+  }
+  a:hover {
+    color: $btc-orange;
+  }
 }
 
 .landing .books,
@@ -174,446 +175,451 @@ $small-screen: 1067px;
 .landing .header,
 .landing .faq,
 .landing .ending {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .landing .hero {
-    width: 100%;
-    background-color: $body-background-color;
-    background-color: $warm-grey-050;
+  width: 100%;
+  background-color: $body-background-color;
+  background-color: $warm-grey-050;
 }
 .landing .hero .header {
-    padding: 8px;
-    display: flex;
-    flex-wrap: wrap;
-    // margin-top: 64px;
+  padding: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  // margin-top: 64px;
 }
 .landing .hero .title {
-    margin-top: 24px;
-    max-width: 650px;
-    // background-color: red;
-    // flex: 1;
-    h1 {
-        font-size: 48px;
-        margin: 0;
-        margin-bottom: 8px;
-        // margin-bottom: 24px;
-    }
-    h2 {
-        @extend %sans-serif;
-        font-size: 24px;
-        font-weight: normal;
-        font-style: italic;
-        margin: 0;
-        margin-bottom: 24px;
-        // margin: 0;
-        // margin-left: 0.3rem;
-        // margin-bottom: 0.2rem;
-        // display: none;
-    }
-
-    .sell-it {
-        // text-align: center;
-        // padding-right: 64px;
-        // max-width: 650px;
-    }
-    .afford {
-        font-weight: bold;
-    }
+  margin-top: 24px;
+  max-width: 650px;
+  // background-color: red;
+  // flex: 1;
+  h1 {
+    font-size: 48px;
+    margin: 0;
+    margin-bottom: 8px;
+    // margin-bottom: 24px;
+  }
+  h2 {
+    @extend %sans-serif;
+    font-size: 24px;
+    font-weight: normal;
+    font-style: italic;
+    margin: 0;
+    margin-bottom: 24px;
+    // margin: 0;
+    // margin-left: 0.3rem;
+    // margin-bottom: 0.2rem;
+    // display: none;
+  }
+
+  .sell-it {
+    // text-align: center;
+    // padding-right: 64px;
+    // max-width: 650px;
+  }
+  .afford {
+    font-weight: bold;
+  }
 }
 .landing .hero .buttons {
-    width: 100%;
-    margin-top: 32px;
-    margin-bottom: 48px;
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
+  width: 100%;
+  margin-top: 32px;
+  margin-bottom: 48px;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
 }
 .landing .hero .buttons a {
-    flex: 1;
-    text-decoration: none;
-    color: inherit;
-    text-align: center;
-    background-color: $button-color;
-    border: 0;
-    border-radius: 4px;
-    font-size: 1rem;
-    padding: 12px 16px;
-    margin: 8px;
-    cursor: pointer;
-    box-shadow: 1px 1px 0px $button-shadow-color;
-    min-width: 160px;
+  flex: 1;
+  text-decoration: none;
+  color: inherit;
+  text-align: center;
+  background-color: $button-color;
+  border: 0;
+  border-radius: 4px;
+  font-size: 1rem;
+  padding: 12px 16px;
+  margin: 8px;
+  cursor: pointer;
+  box-shadow: 1px 1px 0px $button-shadow-color;
+  min-width: 160px;
 }
 .landing .hero .buttons a:hover {
-    text-decoration: none;
-    color: inherit;
-    background-color: $button-hover-color;
+  text-decoration: none;
+  color: inherit;
+  background-color: $button-hover-color;
 }
 
 .landing .hero .book {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    width: 100%;
-    img {
-        max-width: 600px;
-    }
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+  img {
+    max-width: 600px;
+  }
 }
 
 .landing .user-comments {
-    padding: 48px 0;
-    background-color: $warm-grey-050;
+  padding: 48px 0;
+  background-color: $warm-grey-050;
 }
 .landing .user-comments h1 {
-    width: 100%;
-    text-align: center;
+  width: 100%;
+  text-align: center;
 }
 .landing .user-comments blockquote {
-    // background-color: $warm-grey-050;
+  // background-color: $warm-grey-050;
 }
 
 .landing .books {
-    background-color: $warm-grey-800;
-    padding: 48px 0;
+  background-color: $warm-grey-800;
+  padding: 48px 0;
 }
 .landing .format-wrapper {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 .landing .format {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 0;
+  border-radius: 8px;
+
+  background-color: $yellow-050;
+  // border: solid 1px $yellow-100;
+  // border-radius: 8px;
+  margin-bottom: 48px;
+
+  h1 {
+    margin-bottom: 16px;
+  }
+  ul {
+    list-style: none;
+  }
+  ol li,
+  ul li {
+    margin-bottom: 0.4em;
+    font-size: 95%;
+    line-height: 1.35;
+  }
+  nav.buttons {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    padding: 0;
-    border-radius: 8px;
-
-    background-color: $yellow-050;
-    // border: solid 1px $yellow-100;
-    // border-radius: 8px;
-    margin-bottom: 48px;
+  }
+  nav.buttons a,
+  nav.buttons div.soon {
+    // flex: 1;
+    text-align: center;
+    width: 100%;
+    background-color: $button-color;
+    border: 0;
+    border-radius: 4px;
+    font-size: 1rem;
+    padding: 12px 16px;
+    // margin: 8px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    box-shadow: 1px 1px 0px $button-shadow-color;
 
-    h1 {
-        margin-bottom: 16px;
-    }
-    ul {
-        list-style: none;
-    }
-    ol li, ul li {
-        margin-bottom: 0.4em;
-        font-size: 95%;
-        line-height: 1.35;
-    }
-    nav.buttons {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-    nav.buttons a, nav.buttons div.soon {
-        // flex: 1;
-        text-align: center;
-        width: 100%;
-        background-color: $button-color;
-        border: 0;
-        border-radius: 4px;
-        font-size: 1rem;
-        padding: 12px 16px;
-        // margin: 8px;
-        margin-bottom: 8px;
-        cursor: pointer;
-        box-shadow: 1px 1px 0px $button-shadow-color;
-
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-
-        span {
-            // flex: 0;
-            width: 100%;
-        }
-    }
-    nav.buttons a:hover {
-        background-color: $button-hover-color;
-        cursor: pointer;
-    }
-    nav.buttons div.soon {
-        cursor: auto;
-        background-color: $invalid-button-color;
-        box-shadow: 1px 1px 0px $invalid-button-shadow-color;
-    }
-    nav.buttons span.spanner {
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-    nav.buttons span.spanner a {
-        flex: 1;
-    }
-    nav.buttons span.spanner a:not(:first-child) {
-        margin-left: 8px;
-    }
-    .small-emph {
-        // flex: 0;
-        // width: 100%;
-        font-size: 0.9rem;
-        font-style: italic;
-    }
-    .coming {
-        font-size: 0.9rem;
-        //font-style: italic;
-    }
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
 
-    ul.features {
-        margin-top: 24px;
-    }
-    ul.features li::before {
-        @extend %sans-serif;
-        content: "•";
-        margin-left: -20px;
-        padding-right: 8px;
-        color: $yellow-500;
-    }
-    ul.features li {
-        margin-left: 32px;
-    }
-    ul.features a, ul.features a:link {
-        text-decoration: underline;
-        cursor: pointer;
-    }
-    ul.features a:hover {
-        color: $btc-orange;
+    span {
+      // flex: 0;
+      width: 100%;
     }
+  }
+  nav.buttons a:hover {
+    background-color: $button-hover-color;
+    cursor: pointer;
+  }
+  nav.buttons div.soon {
+    cursor: auto;
+    background-color: $invalid-button-color;
+    box-shadow: 1px 1px 0px $invalid-button-shadow-color;
+  }
+  nav.buttons span.spanner {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  nav.buttons span.spanner a {
+    flex: 1;
+  }
+  nav.buttons span.spanner a:not(:first-child) {
+    margin-left: 8px;
+  }
+  .small-emph {
+    // flex: 0;
+    // width: 100%;
+    font-size: 0.9rem;
+    font-style: italic;
+  }
+  .coming {
+    font-size: 0.9rem;
+    //font-style: italic;
+  }
+
+  ul.features {
+    margin-top: 24px;
+  }
+  ul.features li::before {
+    @extend %sans-serif;
+    content: "•";
+    margin-left: -20px;
+    padding-right: 8px;
+    color: $yellow-500;
+  }
+  ul.features li {
+    margin-left: 32px;
+  }
+  ul.features a,
+  ul.features a:link {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  ul.features a:hover {
+    color: $btc-orange;
+  }
 }
 
 .landing .background {
-    display: inline-block;
-    padding-left: 24px;
+  display: inline-block;
+  padding-left: 24px;
 }
 
 .landing .format .left {
-    width: 520px;
-    margin-right: 16px;
-    padding: 16px;
+  width: 520px;
+  margin-right: 16px;
+  padding: 16px;
 
-    a, a:link, a:hover {
-        color: inherit;
-        text-decoration: none;
-        cursor: auto;
-    }
+  a,
+  a:link,
+  a:hover {
+    color: inherit;
+    text-decoration: none;
+    cursor: auto;
+  }
 }
 .landing .format .img-wrapper {
-    width: 500px;
-    border-radius: 8px;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-    background-image: url("/images/cover/front.png");
-    // padding: 8px;
+  width: 500px;
+  border-radius: 8px;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  background-image: url("/images/cover/front.png");
+  // padding: 8px;
 }
 .landing .print .img-wrapper {
-    background-image: url("/images/landing/print.png");
+  background-image: url("/images/landing/print.png");
 }
 .landing .ebook .img-wrapper {
-    background-image: url("/images/landing/ebook.png");
+  background-image: url("/images/landing/ebook.png");
 }
 .landing .pdf .img-wrapper {
-    background-image: url("/images/landing/pdf.png");
+  background-image: url("/images/landing/pdf.png");
 }
 .landing .web .img-wrapper {
-    background-image: url("/images/landing/unbanked.png");
+  background-image: url("/images/landing/unbanked.png");
 }
 
 .landing .praise {
-    max-width: $large-width;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
-    grid-gap: 4px;
+  max-width: $large-width;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+  grid-gap: 4px;
 }
 .landing .what {
-    background-color: $cover-dark3;
-    padding-top: 32px;
-    padding-bottom: 32px;
-    color: $warm-grey-100;
+  background-color: $cover-dark3;
+  padding-top: 32px;
+  padding-bottom: 32px;
+  color: $warm-grey-100;
 }
 .landing .what .head {
-    width: 100%;
-    text-align: center;
-    margin-bottom: 32px;
+  width: 100%;
+  text-align: center;
+  margin-bottom: 32px;
 }
 .landing .what .examples {
-    max-width: $large-width;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
-    grid-gap: 48px;
+  max-width: $large-width;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+  grid-gap: 48px;
 }
 .landing .what .ex {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 .landing .what .ex h2 {
-    margin: 0;
-    margin-bottom: 0.3rem;
+  margin: 0;
+  margin-bottom: 0.3rem;
 }
 .landing .what .img-wrapper {
-    width: 130px;
-    height: 130px;
-    border-radius: 65px;
-    // border-radius: 8px;
-    // float: left;
+  width: 130px;
+  height: 130px;
+  border-radius: 65px;
+  // border-radius: 8px;
+  // float: left;
 }
 .landing .what .utility .img-wrapper {
-    background-image: url("/images/landing/casino.png");
+  background-image: url("/images/landing/casino.png");
 }
 .landing .what .easy .img-wrapper {
-    background-image: url("/images/landing/huh.png");
+  background-image: url("/images/landing/huh.png");
 }
 .landing .what .concepts .img-wrapper {
-    background-image: url("/images/landing/miners.png");
+  background-image: url("/images/landing/miners.png");
 }
 .landing .what .order .img-wrapper {
-    background-image: url("/images/landing/heli.png");
+  background-image: url("/images/landing/heli.png");
 }
 .landing .what .general .img-wrapper {
-    background-image: url("/images/landing/bank.png");
+  background-image: url("/images/landing/bank.png");
 }
 .landing .what .variety .img-wrapper {
-    background-image: url("/images/landing/snowden.png");
+  background-image: url("/images/landing/snowden.png");
 }
 .landing .what .right {
-    // float: left;
-    // width: 100px;
-    flex: 1;
-    margin-left: 16px;
+  // float: left;
+  // width: 100px;
+  flex: 1;
+  margin-left: 16px;
 }
 
 .landing .faq {
-    background-color: $warm-grey-900;
-    // background-color: $cover-dark3;
-    padding: 32px 8px;
-    // color: $warm-grey-100;
-    background-color: $warm-grey-200;
+  background-color: $warm-grey-900;
+  // background-color: $cover-dark3;
+  padding: 32px 8px;
+  // color: $warm-grey-100;
+  background-color: $warm-grey-200;
 }
 .landing .faq .questions {
-    width: 100%;
+  width: 100%;
 }
 .landing .faq h1 {
-    margin-bottom: 24px;
+  margin-bottom: 24px;
 }
 .landing .faq a {
-    color: inherit;
-    text-decoration: underline;
+  color: inherit;
+  text-decoration: underline;
 }
 .landing .faq a:hover {
-    color: $btc-orange;
-    text-decoration: none;
+  color: $btc-orange;
+  text-decoration: none;
 }
 .landing .faq .questions .question-answer {
-    width: 100%;
-    margin-bottom: 32px;
+  width: 100%;
+  margin-bottom: 32px;
 }
 .landing .faq .question {
-    width: 800px;
-    margin: 0 auto;
-    font-weight: bold;
+  width: 800px;
+  margin: 0 auto;
+  font-weight: bold;
 }
 .landing .faq .answer {
-    margin: 0 auto;
-    width: 800px;
+  margin: 0 auto;
+  width: 800px;
 }
 .landing .faq .answer ul {
-    list-style: none;
-    margin: 1rem 0 1rem 0em;
-
-    > li::before {
-        @extend %sans-serif;
-        //content: "⭑";
-        //content: "~";
-        //content: "≈";
-        //content: "→";
-        //content: "»";
-        //content: "*";
-        content: "•";
-        //content: "†";
-        // color: $body-list-sym-color;
-    }
+  list-style: none;
+  margin: 1rem 0 1rem 0em;
+
+  > li::before {
+    @extend %sans-serif;
+    //content: "⭑";
+    //content: "~";
+    //content: "≈";
+    //content: "→";
+    //content: "»";
+    //content: "*";
+    content: "•";
+    //content: "†";
+    // color: $body-list-sym-color;
+  }
 }
 
 .landing .ending {
-    padding-top: 8px;
-    padding-bottom: 8px;
-    background-color: $body-background-color;
-    // color: $warm-grey-050;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  background-color: $body-background-color;
+  // color: $warm-grey-050;
 }
 .landing .ending {
-    a:link {
-        color: inherit;
-        text-decoration: underline;
-    }
-    a:hover {
-        color: $btc-orange;
-        text-decoration: none;
-    }
+  a:link {
+    color: inherit;
+    text-decoration: underline;
+  }
+  a:hover {
+    color: $btc-orange;
+    text-decoration: none;
+  }
 }
 
 @media only screen and (max-width: $small-screen) {
-    .landing .format {
-        width: 520px;
-        margin-left: 16px;
-        margin-right: 16px;
-        // padding: 16px;
-        border-radius: 8px;
-        padding: 0;
-    }
-    .landing .format .left {
-        order: 2;
-        width: 100%;
-        margin: 0;
-        padding: 16px;
-    }
-    .landing .format .img-wrapper {
-        order: 1;
-        width: 100%;
-        height: 300px;
-        border-radius: 8px;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-    .landing .what .examples {
-        display: block;
-    }
-    .landing .what .ex {
-        margin-bottom: 48px;
-    }
-    .landing .faq {
-        padding: 32px;
-    }
-    .landing .faq .questions .question-answer {
-        width: 100%;
-    }
-    .landing .faq .question,
-    .landing .faq .answer {
-        width: 100%;
-    }
-    .landing .hero .buttons a {
-        flex: 0 1 auto;
-        width: 100%;
-    }
+  .landing .format {
+    width: 520px;
+    margin-left: 16px;
+    margin-right: 16px;
+    // padding: 16px;
+    border-radius: 8px;
+    padding: 0;
+  }
+  .landing .format .left {
+    order: 2;
+    width: 100%;
+    margin: 0;
+    padding: 16px;
+  }
+  .landing .format .img-wrapper {
+    order: 1;
+    width: 100%;
+    height: 300px;
+    border-radius: 8px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .landing .what .examples {
+    display: block;
+  }
+  .landing .what .ex {
+    margin-bottom: 48px;
+  }
+  .landing .faq {
+    padding: 32px;
+  }
+  .landing .faq .questions .question-answer {
+    width: 100%;
+  }
+  .landing .faq .question,
+  .landing .faq .answer {
+    width: 100%;
+  }
+  .landing .hero .buttons a {
+    flex: 0 1 auto;
+    width: 100%;
+  }
 }
 
 @media only screen and (max-width: 520px) {
-    .landing .format {
-        width: 100%;
-    }
-    .landing .praise {
-        display: block;
-    }
-    .landing .praise blockquote {
-        margin-bottom: 48px;
-    }
+  .landing .format {
+    width: 100%;
+  }
+  .landing .praise {
+    display: block;
+  }
+  .landing .praise blockquote {
+    margin-bottom: 48px;
+  }
 }

From 6c0404a1c843a2d8e69a6fa8b054defda7f5668c Mon Sep 17 00:00:00 2001
From: Jonas Hietala 
Date: Tue, 14 Feb 2023 14:24:59 +0100
Subject: [PATCH 02/12] Set thead as a block to prevent random p insertions

---
 pollen.rkt   |  2 +-
 rkt/tags.rkt | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/pollen.rkt b/pollen.rkt
index 264f4955..6210c4e7 100644
--- a/pollen.rkt
+++ b/pollen.rkt
@@ -34,7 +34,7 @@
 
   (provide (all-defined-out))
 
-  (define block-tags (append '(img table tbody tr dt dd dl) default-block-tags))
+  (define block-tags (append '(img table thead tbody tr dt dd dl) default-block-tags))
 
   ;; Use our own publish script instead...
   ;; Ignore stuff during 'raco pollen publish'
diff --git a/rkt/tags.rkt b/rkt/tags.rkt
index b4699389..5c05a748 100644
--- a/rkt/tags.rkt
+++ b/rkt/tags.rkt
@@ -222,6 +222,19 @@
       `()
       `((class ,(string-join classes)))))
 
+(module+ test
+  (require rackunit)
+  (check-equal? (stable
+                  "Person             Swedish krona" "\n" "Sneaky Steve       7 000 SEK" "\n" "Honest Harry       1 000 SEK")
+                '(div
+                   ((class "centered"))
+                   (table
+                     ()
+                     (thead (tr (th "Person") (th "Swedish krona")))
+                     (tbody
+                       (tr (td "Sneaky Steve") (td "7 000 SEK"))
+                       (tr (td "Honest Harry") (td "1 000 SEK")))))
+                ))
 
 (define (epigraph  . txt)
   `(div ((class "epigraph"))

From a832029f575976c3f9ef206d8b21bbbf6050dacc Mon Sep 17 00:00:00 2001
From: Jonas Hietala 
Date: Tue, 14 Feb 2023 14:25:44 +0100
Subject: [PATCH 03/12] Don't keep % in href names

---
 rkt/refs.rkt | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/rkt/refs.rkt b/rkt/refs.rkt
index b18ad176..13174756 100644
--- a/rkt/refs.rkt
+++ b/rkt/refs.rkt
@@ -73,5 +73,7 @@
       (regexp-match #rx"^mailto:" x))))
 
 (define (to-name x)
-  (string-replace (string-downcase x) " " "-"))
+  (string-replace
+  (string-replace (string-downcase x) " " "-")
+  "%" ""))
 

From 47e952e6caca2e7714171d75d064c3917ab6e4d5 Mon Sep 17 00:00:00 2001
From: Jonas Hietala 
Date: Tue, 14 Feb 2023 14:26:22 +0100
Subject: [PATCH 04/12] Add id attribute to a (in addition to name)

---
 rkt/tags.rkt | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/rkt/tags.rkt b/rkt/tags.rkt
index 5c05a748..b172a022 100644
--- a/rkt/tags.rkt
+++ b/rkt/tags.rkt
@@ -165,12 +165,14 @@
 
 
 (define (subhead x)
+  (define id (to-name x))
   `(h2
-    (a [[name ,(to-name x)]] ,x)))
+    (a [[name ,id] [id ,id]] ,x)))
 
 (define (subhead3 x)
+  (define id (to-name x))
    `(h3
-     (a [[name ,(to-name x)]] ,x)))
+     (a [[name ,id] [id ,id]] ,x)))
 
 (define (li-plus . txt)
    `(li ((class "plus")) ,@txt))

From a786bb3db2ef140093e0b6d8ebd4ddaeb17b4ded Mon Sep 17 00:00:00 2001
From: Jonas Hietala 
Date: Fri, 17 Feb 2023 09:14:46 +0100
Subject: [PATCH 05/12] Proper 
 in table

---
 darknet_markets.html.pm | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/darknet_markets.html.pm b/darknet_markets.html.pm
index 69408774..68f60350 100644
--- a/darknet_markets.html.pm
+++ b/darknet_markets.html.pm
@@ -38,16 +38,13 @@ There's a concept we need to have in mind while looking at darknet markets: some
 
 Here's a table to illustrate the problem:
 
+◊(define sbr
+   `(br))
+
 ◊table-body[#:class "legal-moral"]{
-    ◊tr{◊td{}           ◊ths{Legal}                     ◊ths{Illegal}}
-    ◊tr{◊tds{Moral}     ◊good{Self defense
-                              Free speech}
-                                                        ◊mo-il{Some types of sex
-                                                               Starving child steals food}}
-    ◊tr{◊tds{Immoral}   ◊im-le{Mass surveillance
-                               Civil asset forfeiture}
-                                                        ◊bad{Slavery
-                                                             Murder}}
+    ◊tr{◊td{}           ◊ths{Legal}                                             ◊ths{Illegal}}
+    ◊tr{◊tds{Moral}     ◊good{Self defense◊|sbr|Free speech}                    ◊mo-il{Some types of sex◊|sbr|Starving child steals food}}
+    ◊tr{◊tds{Immoral}   ◊im-le{Mass surveillance◊|sbr|Civil asset forfeiture}   ◊bad{Slavery◊|sbr|Murder}}
 }
 
 It's actually quite hard to classify things as legal or illegal and moral or immoral; they both change depending on the country, the time period and who you ask. For instance most would agree that slavery is immoral and should be illegal, but it was legal and viewed as normal for thousands of years. Similarly today in the western world we take free speech for granted, but that's not the case in all countries.

From 7214f1e752aae8811995f034e197c2dbea502276 Mon Sep 17 00:00:00 2001
From: Jonas Hietala 
Date: Fri, 17 Feb 2023 09:15:23 +0100
Subject: [PATCH 06/12] More hacky fragment cleanups

---
 rkt/refs.rkt | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/rkt/refs.rkt b/rkt/refs.rkt
index 13174756..983792df 100644
--- a/rkt/refs.rkt
+++ b/rkt/refs.rkt
@@ -73,7 +73,13 @@
       (regexp-match #rx"^mailto:" x))))
 
 (define (to-name x)
-  (string-replace
-  (string-replace (string-downcase x) " " "-")
-  "%" ""))
-
+  (regexp-replace #rx"[?%#]"
+                  (string-replace (string-downcase x) " " "-")
+                  ""))
+
+(module+ test
+  (require rackunit)
+  (check-equal? (to-name "What is this?") "what-is-this")
+  (check-equal? (to-name "50%") "50")
+  (check-equal? (to-name "a#b") "ab")
+  )

From be49843fe11c3a84f3be4857699a155be3604f92 Mon Sep 17 00:00:00 2001
From: Jonas Hietala 
Date: Wed, 22 Feb 2023 11:29:11 +0100
Subject: [PATCH 07/12] Update alt text for images

And specify group role on figure and presentation role for decorative
images, according to http://diagramcenter.org/59-image-guidelines-for-epub-3.html
---
 a_defective_system.html.pm             | 14 +++++++-------
 antifragile.html.pm                    |  4 ++--
 are_cryptocurrencies_money.html.pm     |  2 +-
 challenges.html.pm                     |  6 +++---
 cryptography.html.pm                   |  2 +-
 for_the_unbanked.html.pm               |  6 +++---
 global_currency.html.pm                |  2 +-
 how_do_cryptocurrencies_work.html.pm   |  8 ++++----
 properties_of_a_cryptocurrency.html.pm |  8 ++++----
 rkt/tags.rkt                           | 24 ++++++++++++++++++++----
 separation_of_money_and_state.html.pm  |  2 +-
 timestamping_service.html.pm           |  2 +-
 tokens.html.pm                         |  4 ++--
 undesirable_businesses.html.pm         |  4 ++--
 voting.html.pm                         |  2 +-
 what_is_money.html.pm                  | 18 +++++++++---------
 16 files changed, 62 insertions(+), 46 deletions(-)

diff --git a/a_defective_system.html.pm b/a_defective_system.html.pm
index 30fd858b..a047baeb 100644
--- a/a_defective_system.html.pm
+++ b/a_defective_system.html.pm
@@ -31,17 +31,17 @@ If I did print money---a ◊strong{lot} of money---and spent it like this, what
 
 For starters, if I just kept the money without spending it, nothing would change:
 
-◊img[#:src "/images/counterfeiting1.png" #:alt "The counterfeiter can print a large stash of cash."]{
+◊img[#:src "/images/counterfeiting1.png" #:alt "The counterfeiter can print a large stash of cash, but other people would not benefit."]{
     The counterfeit money is colored yellow and the real money is green.
 }
 
 Then if I decided to buy a bunch of LEGO®, the store would get some of my money:
 
-◊img[#:src "/images/counterfeiting2.png" #:alt "The counterfeiter buys LEGO."]{}
+◊img[#:src "/images/counterfeiting2.png" #:alt "The counterfeiter buys LEGO, sharing the wealth with the store."]{}
 
 After a while the store would use the counterfeited money to pay their supplier:
 
-◊img[#:src "/images/counterfeiting3.png" #:alt "Money further trickles down to the supplier, but not to everyone."]{}
+◊img[#:src "/images/counterfeiting3.png" #:alt "Money further trickles down to the supplier, but not to everyone. The poor people did not get more money than they had before, and now they're even poorer relative to the others."]{}
 
 Who in turn will use it to buy other stuff, and in this way the counterfeited money slowly trickles out into the rest of the economy. This extra money has two important effects:
 
@@ -356,7 +356,7 @@ While taking out debt to fuel investments was only supposed to be a temporary me
 
 ◊; Actual source
 ◊; https://fred.stlouisfed.org/graph/?id=GFDEBTN,
-◊img[#:src "images/usa-debt.svg" #:link #t #:alt "The federal debt of the United States, measure in trillions of dollars, since 1966."]{
+◊img[#:src "images/usa-debt.svg" #:link #t #:alt "The federal debt of the United States figure"]{
     The ◊link[usa-national-debt]{federal debt of the United States}, measure in trillions of dollars, since 1966.  
     After the ◊link[financial_crisis]{2008 financial crisis} the amount of debt skyrocketed, signifying a shift in economic policy.  
     During the COVID-19 pandemic the debt explosively increased at a pace unseen before.
@@ -444,18 +444,18 @@ It seems like we're moving away from the original Keynesian ideas to something e
 
 There's a worrying trend in the world: ◊link[global-inequality]{global inequality is rising}. The rich get richer and the poor get... poorer.
 
-◊img[#:src "images/income-inequality-world.svg" #:link #t #:alt "Top 10% income share between 1980 and 2015."]{
+◊img[#:src "images/income-inequality-world.svg" #:link #t #:alt "World income share figure"]{
     Top 10% income share between 1980 and 2015.  
     Source ◊link[inequality-data]{World Inequality Database}.
 }
 
 The inequality is on the rise in nearly every country. If we take a closer look at the United States, it paints a gloomy picture:◊mn{report}
 
-◊img[#:src "images/income-inequality.svg" #:link #t #:alt "Income share in the United States between 1962 and 2014."]{
+◊img[#:src "images/income-inequality.svg" #:link #t #:alt "United States income share figure"]{
     Income share in the United States between 1962 and 2014.  
     Source ◊link[inequality-data]{World Inequality Database}.
 }
-◊img[#:src "images/wealth-inequality.svg" #:link #t #:alt "Net personal wealth in the United States between 1962 and 2014."]{
+◊img[#:src "images/wealth-inequality.svg" #:link #t #:alt "Net personal wealth figure"]{
     Net personal wealth in the United States between 1962 and 2014.  
     Source ◊link[inequality-data]{World Inequality Database}.
 }
diff --git a/antifragile.html.pm b/antifragile.html.pm
index 2a929f06..9b28877e 100644
--- a/antifragile.html.pm
+++ b/antifragile.html.pm
@@ -142,11 +142,11 @@ Cryptocurrencies work the same way. When a weakness is discovered developers wil
 
 While you can argue that an individual cryptocurrency is antifragile, antifragility also applies to the cryptocurrency concept itself. People like to point at the thousands of cryptocurrencies as some sort of drawback, but it's actually the opposite. Cryptocurrencies being created and then dying off en mass is good as each time one fails we might learn something new and use that to improve the survivors.
 
-◊img[#:src "/images/btc-hydra.png" #:alt "A hydra with one Bitcoin head"]{
+◊img[#:src "/images/btc-hydra.png" #:alt "A hydra with one head looking like the Bitcoin logo."]{
     Cryptocurrencies are like a Hydra.
 }
 
-◊img[#:src "/images/bch-xmr-hydra.png" #:alt "A hydra with two heads, one Bitcoin Cash and one Monero"]{
+◊img[#:src "/images/bch-xmr-hydra.png" #:alt "A hydra with three heads; one cut off, one like the Bitcoin Cash logo and one like the Monero logo."]{
    Cut off one head, two more shall take its place.
 }
 
diff --git a/are_cryptocurrencies_money.html.pm b/are_cryptocurrencies_money.html.pm
index e5aa5664..1fb2a558 100644
--- a/are_cryptocurrencies_money.html.pm
+++ b/are_cryptocurrencies_money.html.pm
@@ -203,7 +203,7 @@ We've looked at the properties---but how well do they function as money, today?
 
         The valuation is highly speculation driven and has been notoriously volatile.◊mn{sov} ◊note-pos{sov}
 
-        ◊img[#:src "images/btc-valuation.svg" #:link #t #:alt "Bitcoin closing price per month, between 2010 and 2019."]{
+        ◊img[#:src "images/btc-valuation.svg" #:link #t #:alt "Bitcoin closing price per month, between 2010 and 2020."]{
             ◊link[btc-valuation]{Bitcoin price per week up to the beginning of 2020}.  
             The price peaked in December 2017 to $19,870, and some exchanges had it even higher. A year later the price had dropped to $3,177, a drop of over 84%.
         }
diff --git a/challenges.html.pm b/challenges.html.pm
index e2d924ae..38eac703 100644
--- a/challenges.html.pm
+++ b/challenges.html.pm
@@ -97,12 +97,12 @@ Bitcoin, like most cryptocurrencies, uses a public ledger where all transactions
      "https://www.chainalysis.com/"
      "Chainalysis: The Blockchain Analysis Company"))
 
-◊img[#:src "/images/coin-tracing.png" #:alt "Paying someone with allows you to see their funds."]{
+◊img[#:src "/images/coin-tracing.png" #:alt "Image of John's address that has sent 1 BTC to the merchant and 13 BTC to another address."]{
     After the merchant receives a payment from John, the merchant can see that John has sent 13 BTC to another address, out of an initial 40 BTC.
     John appears to be quite rich.
 }
 
-◊img[#:src "/images/coin-tracing2.png" #:alt "You can trace coins back in history."]{
+◊img[#:src "/images/coin-tracing2.png" #:alt "Image of how John's 40 BTC originates from a hacked exchange."]{
     It's possible to trace coins further back in history. Here we see that John's coins come from a hacked exchange, whose address is known. It might mean John is the hacker or, more probably, that John has received ◊em{tainted} coins (coins associated with illegal behavior).
 }
 
@@ -119,7 +119,7 @@ You can explore the Bitcoin blockchain, and see all transactions and addresses,
 
 In an attempt to make Bitcoin more private "mixing" services such as ◊link[coinjoin]{CoinJoin} can be used. They work by mixing together your coins with the coins of others, in an attempt to obscure where the coins are coming from:
 
-◊img[#:src "/images/coinjoin.png" #:alt "Obfuscation by mixing coins with other addresses."]{
+◊img[#:src "/images/coinjoin.png" #:alt "Image of mixing coins by sending them to and from various addresses."]{
     A mixing service makes several addresses send to each other, in order to obfuscate the history. Although not shown here, because it would be too messy, all addresses and amounts are still visible.
 }
 
diff --git a/cryptography.html.pm b/cryptography.html.pm
index 1a9f23fd..635d936d 100644
--- a/cryptography.html.pm
+++ b/cryptography.html.pm
@@ -110,7 +110,7 @@ You ◊em{encrypt} a message by placing it in the mailbox, this way nobody but t
     This is where our mailbox metaphor breaks down a bit. It may seem that it's more inconvenient to sign a message than to encrypt one, but digitally they're both straightforward.
 }
 
-◊img[#:src "/images/encrypted_mailbox.png" #:alt "Placing a letter in the mailbox."]{
+◊img[#:src "/images/encrypted_mailbox.png" #:alt "A letter is placed in the mailbox."]{
     Placing a message inside the mailbox ensures that only the one with the key can read it.
 }
 
diff --git a/for_the_unbanked.html.pm b/for_the_unbanked.html.pm
index e92b1e44..8c7c5969 100644
--- a/for_the_unbanked.html.pm
+++ b/for_the_unbanked.html.pm
@@ -44,7 +44,7 @@ There are ◊strong{◊link[findex-report]{1.7 billion adults}} without a bank a
 ◊; #df65b0  36-60
 ◊; #dd1c77  61-80
 ◊; #980043  81-100
-◊img[#:src "images/unbanked-map.png" #:class "fullwidth" #:link #t #:alt "Adults without a bank account, 2017."]{
+◊img[#:src "images/unbanked-map.png" #:class "fullwidth" #:link #t #:alt "A world map showing the fraction of adults without a bank account in each country, 2017."]{
     Adults without a bank account, 2017.
     Source ◊link[findex-report]{Global Findex database}.
 }
@@ -63,7 +63,7 @@ Another way to look at the world is to visualize the raw number of unbanked in e
 ◊;#43a2ca   50 - 100 mil
 ◊;          100 - 150 mil (no country!)
 ◊;#0868ac   > 150 mil
-◊img[#:src "images/unbanked-count-map.png" #:class "fullwidth" #:link #t #:alt "The number of adults without a bank account, 2017."]{
+◊img[#:src "images/unbanked-count-map.png" #:class "fullwidth" #:link #t #:alt "A world map showing the number of adults without a bank account in each country, 2017."]{
     The number of adults without a bank account, 2017.
     Source ◊link[findex-report]{Global Findex database} (◊link[findex-interactive]{interactive}).
 }
@@ -81,7 +81,7 @@ The ◊link[findex-report]{Global Findex database} also tried to examine why peo
     If this is interesting to you I suggest you ◊link[findex-report]{give the report a read}. There are tons of different statistics and I only refer to a fraction of the data available.
 }
 
-◊img[#:src "images/why-unbanked.svg" #:link #t #:alt "Reported reason for adults not having a bank account, 2017."]{
+◊img[#:src "images/why-unbanked.svg" #:link #t #:alt "Reported reasons table."]{
     Reported reason for adults not having a bank account, 2017. More than one reason could be given.
     Source ◊link[findex-report]{Global Findex database}.
 }
diff --git a/global_currency.html.pm b/global_currency.html.pm
index 1b879e06..5bcddd7f 100644
--- a/global_currency.html.pm
+++ b/global_currency.html.pm
@@ -9,7 +9,7 @@
 
 ◊(clear-sidenotes)
 
-◊img[#:src "/images/global.png" #:alt "You can send coins all over the world."]{}
+◊img[#:src "/images/global.png" #:alt "You can send coins all over the world." #:decorative #t]{}
 
 Cryptocurrencies don't have any borders. They allow you to send and receive money from anywhere in the world; to bypass sanctions and border control; opt-out of local monetary policies; and use a currency that's global to an extent we've never seen before.
 
diff --git a/how_do_cryptocurrencies_work.html.pm b/how_do_cryptocurrencies_work.html.pm
index 81768f4b..1c2cae0f 100644
--- a/how_do_cryptocurrencies_work.html.pm
+++ b/how_do_cryptocurrencies_work.html.pm
@@ -83,7 +83,7 @@ For example, Sneaky Steve wants to buy a computer from Honest Harry and wants to
 What Sneaky Steve tries to do is send ◊sans-tnum{1 BTC} to the merchant, Honest Harry, and then send a copy of ◊sans-tnum{1 BTC} to his other address: ◊sans-tnum{Sneaky Steve 2}. (It's possible to have as many addresses as you want---a consequence of the permissionless nature of Bitcoin.)
 
 ◊img[#:src "/images/double-spend.png"
-     #:alt "Double spending by sending a coin to someone and back to himself."]{Sneaky Steve sends a digital coin both to Honest Harry and himself.}
+     #:alt "Double spending figure"]{Sneaky Steve sends a digital coin both to Honest Harry and himself.}
 
 If we didn't prevent this, the ledger might look like this:
 
@@ -269,7 +269,7 @@ When a miner finds a solution, she can update the ledger by adding a block to th
 
 A blockchain is what it sounds like: a chain of blocks where a new block builds on previous blocks. When a miner searches for a solution, she must target a block on a specific height---the POW problem includes a reference to the previous block and it only fits at a specific position in the chain. When a new block is added, all miners need to work on a new problem targeting that block.
 
-◊img[#:src "/images/add_block.png" #:alt "A new block is added by linking it with a POW solution."]{
+◊img[#:src "/images/add_block.png" #:alt "A new block is added by linking it to the previous block with a POW solution."]{
     The blocks in the blockchain are linked with a key obtained by solving the POW problem.
 }
 
@@ -344,7 +344,7 @@ The blockchain is duplicated, stored, and maintained by many different people; y
 What happens if two miners find a block at the same height? For example, one where Sneaky Steve sends money to Honest Harry and one where Sneaky Steve sends money to himself?
 
 ◊img[#:src "/images/double_spend_fork.png"
-     #:alt "Two blocks can be added at the same height."]{
+     #:alt "Two blocks can be added at the same height, even if they contain different transactions."]{
     Two blocks at the same height with different transactions.
 }
 
@@ -388,7 +388,7 @@ It works like this:
     }
 }
 
-◊img[#:src "/images/reversal1.png" #:alt "Sneaky Steve pays Honest Harry."]{
+◊img[#:src "/images/reversal1.png" #:alt "Sneaky Steve paying Honest Harry, and a block with two confirmations."]{
     Sneaky Steve pays Honest Harry and they wait until the transaction has two confirmations.
 }
 ◊img[#:src "/images/reversal3.png" #:alt "Honest Harry gives Sneaky Steve jeans."]{
diff --git a/properties_of_a_cryptocurrency.html.pm b/properties_of_a_cryptocurrency.html.pm
index 6f1a3b27..958265ee 100644
--- a/properties_of_a_cryptocurrency.html.pm
+++ b/properties_of_a_cryptocurrency.html.pm
@@ -41,13 +41,13 @@ The important difference between a cryptocurrency and the digital payments we ha
 
 Sending money to people via your bank isn't peer-to-peer as you rely on your bank to send it for you. VISA, PayPal, Swish, Apple Pay, and other digital payments have the same problem, all except cryptocurrencies.
 
-◊img[#:src "images/give_cash.png" #:alt "Cash is given directly from hand to hand."]{
+◊img[#:src "images/give_cash.png" #:alt "Giving cash figure"]{
     Cash is given directly from hand to hand.
 }
-◊img[#:src "images/send_bank.png" #:alt "Regular digital payments are sent through a bank or different payment processors."]{
+◊img[#:src "images/send_bank.png" #:alt "Payments through a bank figure"]{
     Regular digital payments are sent through a bank or different payment processors.
 }
-◊img[#:src "images/send_crypto.png" #:alt "Cryptocurrencies are sent directly from device to device."]{
+◊img[#:src "images/send_crypto.png" #:alt "Sent between devices figure"]{
     Cryptocurrencies are sent directly from device to device.
 }
 
@@ -87,7 +87,7 @@ Problems with counterfeit coins and bills go far back. From biting coins to test
 
 With cryptocurrencies, anyone can independently verify the integrity of the coins you send and receive. Details on how is in the ◊link[next-chapter]{next chapter} but I assure you no biting is needed. You cannot counterfeit coins and you cannot send the same coin to multiple people ◊em{(double-spend)}. This is what allows cryptocurrencies to operate without a trusted third-party.
 
-◊img[#:src "/images/double-spend.png" #:alt "Double spending by sending a coin to someone and back to himself."]{
+◊img[#:src "/images/double-spend.png" #:alt "Double spending figure"]{
     A double spending occurs when someone sends the same coin both to a merchant and back to himself.
 }
 
diff --git a/rkt/tags.rkt b/rkt/tags.rkt
index b172a022..0b85e837 100644
--- a/rkt/tags.rkt
+++ b/rkt/tags.rkt
@@ -367,11 +367,12 @@
 
 (define (img #:src src
              #:alt alt
+             #:decorative [decorative #f]
              #:title [title #f]
              #:class [c #f]
              #:margin [margin #f]
              #:link [link #f] . caption)
-  (define attrs `())
+  (define attrs `((role "group")))
   (when c
     (set! attrs (cons `(class ,c) attrs)))
   (when title
@@ -388,17 +389,32 @@
 
   `(figure
      ,attrs
-     ,(raw-img #:src src #:link link #:alt alt)
+     ,(raw-img #:src src #:link link #:alt alt #:decorative decorative)
      ,figcaption))
 
-(define (raw-img #:src src #:link [link #f] #:alt alt)
+(define (raw-img #:src src #:link [link #f] #:alt alt #:decorative [decorative #f])
+  (define attrs `((src ,(~a src)) (alt ,alt)))
+  (when decorative
+    (set! attrs (cons `(role "presentation") attrs)))
   (define img
-     `(img ((src ,(~a src)) (alt ,alt))))
+     `(img ,attrs))
   (if link
       `(a ((href ,src) (target "_blank") (class "img-wrapper"))
           ,img)
       img))
 
+(module+ test
+  (require rackunit)
+  (check-equal? (raw-img #:src "/src.png" #:alt "alt")
+                `(img ((src "/src.png") (alt "alt"))))
+  (check-equal? (raw-img #:src "/src.png" #:alt "alt" #:decorative #t)
+                `(img ((role "presentation") (src "/src.png") (alt "alt"))))
+
+  (check-equal? (img #:src "/src.png" #:alt "alt" #:decorative #t)
+                `(figure ((role "group"))
+                         (img ((role "presentation") (src "/src.png") (alt "alt")))
+                         (figcaption))))
+
 ;; FIXME rename to figcaption
 (define (decoded-figcaption . args)
   `(figcaption ,@(std-decode args)))
diff --git a/separation_of_money_and_state.html.pm b/separation_of_money_and_state.html.pm
index 6e3debd5..8eeebe18 100644
--- a/separation_of_money_and_state.html.pm
+++ b/separation_of_money_and_state.html.pm
@@ -9,7 +9,7 @@
 
 ◊(clear-sidenotes)
 
-◊img[#:src "/images/bitcoin-priest.png" #:class "slim" #:alt "A priest with a crown, holding a sword and a bag of Bitcoin."]{}
+◊img[#:src "/images/bitcoin-priest.png" #:class "slim" #:alt "A priest with a crown, holding a sword and a bag of Bitcoin." #:decorative #t]{}
 
 When I first started thinking about cryptocurrencies, I thought they were just useful for some people who couldn't use regular transactions, like buying weed or things on a darknet market. Or that it was simply a better payment system as there was no middleman to skim off large fees from all transactions. That's useful, but it didn't strike me as revolutionary.◊mn{fees}
 
diff --git a/timestamping_service.html.pm b/timestamping_service.html.pm
index f15fd592..b6f1fe2b 100644
--- a/timestamping_service.html.pm
+++ b/timestamping_service.html.pm
@@ -305,7 +305,7 @@ Let's now encode and timestamp it using the Bitcoin Cash blockchain:
 
         ◊img[#:src "images/electroncash-opreturn.png"
              #:title "Electron Cash custom OP_RETURN"
-             #:alt "Electron Cash custom OP_RETURN."]{
+             #:alt "Electron Cash OP_RETURN figure"]{
           Custom OP_RETURN using ◊link[electroncash]{Electron Cash}.
         }
 
diff --git a/tokens.html.pm b/tokens.html.pm
index 824d80b4..de43fc8f 100644
--- a/tokens.html.pm
+++ b/tokens.html.pm
@@ -207,12 +207,12 @@ I think visualizations can help us compare large amounts like these, so here's o
    `(div ((class "block"))
       (div ((class "title")) ,title)
       (div ((class "wrapper"))
-        (img ((src ,src))))))
+        (img ((src ,src) (role "presentation") (alt ,title))))))
 ◊(define (small-img title src)
    `(div ((class "block"))
       (div ((class "title")) ,title)
       (div ((class "wrapper small"))
-        (img ((src ,src))))))
+        (img ((src ,src) (role "presentation") (alt ,title))))))
 
 
 ◊; Extremely difficult to this with text, as fonts/sizes looks very different.
diff --git a/undesirable_businesses.html.pm b/undesirable_businesses.html.pm
index 32ad9c1a..bf6b6412 100644
--- a/undesirable_businesses.html.pm
+++ b/undesirable_businesses.html.pm
@@ -161,14 +161,14 @@ Therefore, most payment processors ◊link[stripe-restricted]{explicitly forbid}
 
 
 ◊img[#:src "/images/xxx-payments1.png"
-     #:alt "Payment processor doesn't want to do business with porn."]{
+     #:alt "Payment processing denied figure"]{
     Payment processors usually don't want anything to do with porn sites.
 }
 
 Instead, they have a third-party request the payment on their behalf and do some shady stuff. They can for example claim the payment is for another type of business, which isn't banned by the payment processor.
 
 ◊img[#:src "/images/xxx-payments2.png"
-     #:alt "An intermediary makes it possible for the porn business to use a payment processor."]{
+     #:alt "Payment processing ok with an intermediary figure"]{
     Another party acting as an intermediary might get accepted by the payment processor, especially if they disguise themselves.
 }
 
diff --git a/voting.html.pm b/voting.html.pm
index b251225b..46ffe745 100644
--- a/voting.html.pm
+++ b/voting.html.pm
@@ -280,7 +280,7 @@ With the tokens distributed, you could cast a vote by sending them to predetermi
     It's easy to give multiple options. For example if you want to be able to differentiate between those who don't care, and those who want to vote but not any candidate, just have an additional "blank" address voters can send to.
 }
 
-◊img[#:src "/images/voting.png" #:alt "One vote is given out to each person, who then sends it to their voting address of choice."]{
+◊img[#:src "/images/voting.png" #:alt "One vote is given out to each person by the state, who then sends it to their voting address of choice (Hillary or Trump)."]{
     Each arrow corresponds to a token transaction and the "Hillary" and "Trump" boxes are addresses. The state is responsible for issuing the voting tokens to the voters and the voters in turn send them to the address they want to vote for. In this example Hillary got 1 vote and Trump got 2, and everyone voted.
 }
 
diff --git a/what_is_money.html.pm b/what_is_money.html.pm
index 888d44f6..88ff2a28 100644
--- a/what_is_money.html.pm
+++ b/what_is_money.html.pm
@@ -40,13 +40,13 @@ First, let's look at some interesting historical examples of items that have bee
     ◊money["Shells"
            #:date "1200 B.C."
            #:img "/images/cowry.png"
-           #:alt "Sea shells."]{
+           #:alt "Sea shells"]{
         Sea shells ◊link[sea-shells]{have been used as money for centuries} and were commonly used in parts of Africa and Asia but also in other parts of the world. In West Africa, they saw ◊link[shell-usage]{significant use until the 20◊sup{th} century}.
     }
     ◊money["Coins in ancient Greece"
            #:date "500 B.C."
            #:img "images/greek_coin.png"
-           #:alt "A greek coin."]{
+           #:alt "A greek coin"]{
         The Greeks ◊link[ancient-greece-coinage]{used coins} made from precious metal like silver, bronze, and gold. They also stamped the coins with beautiful portraits for a truly modern look.
     }
     ◊money["Rai stones"
@@ -58,7 +58,7 @@ First, let's look at some interesting historical examples of items that have bee
     ◊money["A 20kg copper coin"
            #:date "1644"
            #:img "images/20kg_copper.png"
-           #:alt "A 20kg copper coin in a wheelbarrow."]{
+           #:alt "A 20kg copper coin in a wheelbarrow"]{
         Another example of---let's say interesting---form of money is ◊link[largest-coin]{the world's largest coin.} It's a copper coin weighing 20kg, issued in Sweden.
 
         Since copper was worth much less than silver, very large coins had to be made to offset the difference. At that time, coins did contain raw materials according to their value, which isn't the case today.
@@ -66,7 +66,7 @@ First, let's look at some interesting historical examples of items that have bee
     ◊money["A 100 billion mark note"
            #:date "1924"
            #:img "images/german_notes.png"
-           #:alt "A large pyramid of paper money."]{
+           #:alt "A large pyramid of paper money"]{
         Bank notes---paper money---are easy to use but they do have problems of their own. Unless kept in check, by for example ◊link[rel-gold-standard]{the gold standard}, they can be mass produced to cause ◊link[hyperinflation]{hyperinflation}.
 
         ◊link[germany-wallpaper]{This is what happened in Germany} after the first World War. They had massive debts after losing the war, so they tried to print enough money to pay off the debts.◊mn{germany-stories}
@@ -78,13 +78,13 @@ First, let's look at some interesting historical examples of items that have bee
     ◊money["Cigarettes in prison"
            #:date `("20" (sup "th") " century")
            #:img "images/prison_money.png"
-           #:alt "A cigarette."]{
+           #:alt "A cigarette"]{
         Like depicted in the movie Shawshank Redemption cigarettes are used in some prisons ◊link[prison-cigarettes]{as a form of money}. Today, some prisons have started to ban smoking, so they instead use things like ◊link[prison-stamps]{stamps} or ◊link[prison-ramen]{ramen}.
     }
     ◊money["Euro bank notes"
            #:date `("21" (sup "th") " century")
            #:img "images/bank_notes.png"
-           #:alt "Euro bank notes."]{
+           #:alt "Euro bank notes"]{
         There are many kinds of ◊em{fiat currencies},◊mn{fiat-commodity} for example, the Euro. Modern coins aren't made of valuable metal and paper notes are used for large denominations.
 
         ◊note-pos[#:top -6 #:bottom -20]{fiat-commodity}
@@ -92,13 +92,13 @@ First, let's look at some interesting historical examples of items that have bee
     ◊money["Dogecoin"
            #:date "2013"
            #:img "images/doge.png"
-           #:alt "Doge."]{
+           #:alt "Doge"]{
         Dogecoin is a cryptocurrency and while created as a "joke currency" it quickly gained popularity as a tipping tool online. You can still find merchants who accept it today for things like domain names, web hosting, VPNs, or games.
     }
     ◊money["Marbles on the school yard"
            #:date "2017"
            #:img "images/marbles.png"
-           #:alt "Two people playing with marbles."]{
+           #:alt "Two people playing with marbles"]{
         Kids on the school-yard often come up with interesting forms of money. For example, collectible card games or game components. Another example is  marbles used in a Swedish game where you win your opponents marbles. (And those with many marbles had higher status in class.)◊mn{pokemon}
 
         ◊note-pos[#:bottom -20]{pokemon}
@@ -131,7 +131,7 @@ First, let's look at some interesting historical examples of items that have bee
        [else
         ""]))
    `(div ((class "example"))
-      (img ((src ,img) (alt ,alt)))
+      (img ((src ,img) (alt ,alt) (role "presentation")))
       (div ((class "txt"))
         (div ((class "header"))
           (h3 ,title)

From 4cf75536e6590be43b9e8fb8148d1ee226d39bf2 Mon Sep 17 00:00:00 2001
From: Jonas Hietala 
Date: Wed, 22 Feb 2023 12:35:56 +0100
Subject: [PATCH 08/12] Use 
 and wrap content in 


For hopefully better semantic HTML
---
 chapter.html.p    | 29 +++++++++++++++--------------
 sass/chapter.scss |  8 ++++----
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/chapter.html.p b/chapter.html.p
index 61615336..2b0e5036 100644
--- a/chapter.html.p
+++ b/chapter.html.p
@@ -58,7 +58,7 @@
         
     
     
-      

+      

         
-        

-          
◊|title|

-          
◊|subtitle|

-          ◊(when side-space? (->html
-             `(div ((class "date"))
-                 (span ((class "published")) ,published)
-                 ,(if updated
-                      `(span ((class "updated")) ,updated)
-                      ""))))
-          
-        

+        

+          

+            
◊|title|

+            
◊|subtitle|

+            ◊(when side-space? (->html
+              `(div ((class "date"))
+                  (span ((class "published")) ,published)
+                  ,(if updated
+                        `(span ((class "updated")) ,updated)
+                        ""))))
+          

 
-        ◊(->html doc #:splice? #t)
+          ◊(->html doc #:splice? #t)
+        

 
         ◊(->html (make-section-nav #:section-header? section-chapters-headers?
                                     here))
-      

+      

 
       ◊(when side-space? (->html `(div ((class "side-space")))))
 
diff --git a/sass/chapter.scss b/sass/chapter.scss
index d04f56ba..c1201108 100644
--- a/sass/chapter.scss
+++ b/sass/chapter.scss
@@ -21,7 +21,7 @@ $sidenote-float-width: 1280px;
 /*
  * Header
  */
-.chapter > header {
+.chapter header {
   h2 {
     font-weight: normal;
     font-style: italic;
@@ -32,7 +32,7 @@ $sidenote-float-width: 1280px;
   }
 }
 
-.chapter > header > .date {
+.chapter header > .date {
   text-align: right;
   font-size: 0.7rem;
   margin-top: -0.2rem;
@@ -46,7 +46,7 @@ $sidenote-float-width: 1280px;
 }
 
 @media (min-width: $sidenote-float-width) {
-  .chapter > header > .date {
+  .chapter header > .date {
     text-align: left;
 
     float: right;
@@ -168,7 +168,7 @@ $list-p-margin: 0.6em;
   }
 }
 
-.chapter > .subnav {
+.chapter .subnav {
   margin-top: 1.5rem;
   @extend %sans-serif;
 

From 8a6042a544d19c7e40b66e04587110d6f7a962fd Mon Sep 17 00:00:00 2001
From: Jonas Hietala 
Date: Wed, 22 Feb 2023 12:51:24 +0100
Subject: [PATCH 09/12] Use section instead of div in stories and transcripts

---
 darknet_markets.html.pm               | 2 +-
 freezing_of_merchant_accounts.html.pm | 2 +-
 uncensorable_donations.html.pm        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/darknet_markets.html.pm b/darknet_markets.html.pm
index 68f60350..9ad8328c 100644
--- a/darknet_markets.html.pm
+++ b/darknet_markets.html.pm
@@ -149,7 +149,7 @@ So if none of those things are available, what can you buy on a darknet market?
 
 The following example, based on a real-life story I read a few years ago, illustrates why darknet markets aren't purely evil.
 
-◊div[#:class "story"]{
+◊section[#:class "story"]{
 
     Tom met the love of his life five years ago, when he went to get some of his teeth removed. Hardly the most romantic meeting, with her drilling into his aching teeth, but it was love at first sight.
 
diff --git a/freezing_of_merchant_accounts.html.pm b/freezing_of_merchant_accounts.html.pm
index 5c9d178b..c3c50ad9 100644
--- a/freezing_of_merchant_accounts.html.pm
+++ b/freezing_of_merchant_accounts.html.pm
@@ -30,7 +30,7 @@ This chapter continues on the same idea as the ◊link[prev]{previous one}, but
 
 Imagine coming in to work one day and having this conversion with your boss:
 
-◊div[#:class "story"]{
+◊section[#:class "story"]{
     ◊trow{I'm sorry John, but we'll pay you in 6 months.}
     ◊trow{What?}
     ◊trow{Don't worry, you'll still get your full salary, but we'll pay it in 6 months.}
diff --git a/uncensorable_donations.html.pm b/uncensorable_donations.html.pm
index b1e5980b..8b9af355 100644
--- a/uncensorable_donations.html.pm
+++ b/uncensorable_donations.html.pm
@@ -220,7 +220,7 @@ This is ◊strong{not} a glorification of WikiLeaks---they have ◊link[wikileak
             At 2019-08-28 the transcript timestamps are slightly off compared to the full video, I've tried to match them up better.
         }
 
-        ◊div[#:class "transcript-wrapper"]{
+        ◊section[#:class "transcript-wrapper"]{
 
           ◊transcript{
               02:34  He's got an RPG [Rocket Propelled Grenade]?

From dd62020b0a47726e0aea5ce81bd8de16bd03bb8a Mon Sep 17 00:00:00 2001
From: Jonas Hietala 
Date: Wed, 22 Feb 2023 12:52:11 +0100
Subject: [PATCH 10/12] Aria roles for fake table

---
 uncensorable_donations.html.pm | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/uncensorable_donations.html.pm b/uncensorable_donations.html.pm
index 8b9af355..a2735e06 100644
--- a/uncensorable_donations.html.pm
+++ b/uncensorable_donations.html.pm
@@ -589,10 +589,10 @@ This is ◊strong{not} a glorification of WikiLeaks---they have ◊link[wikileak
      (if (string=? row "\n")
        ""
        (let ((cols (string-split row "  ")))
-         `(div ((class "row"))
-            (span ((class "time")) ,(car cols))
-            (span ((class "txt")) ,@(cdr cols))))))
-   `(div ((class "transcript"))
+         `(div ((class "row") (role "row"))
+            (span ((class "time") (role "cell")) ,(car cols))
+            (span ((class "txt") (role "cell")) ,@(cdr cols))))))
+   `(div ((class "transcript") (role "grid"))
       ,@(map make-row rows)))
 
 ◊(define execution-of-children

From 2c2f66c4d691ba14d0f5d36e08a49256a260a996 Mon Sep 17 00:00:00 2001
From: Jonas Hietala 
Date: Wed, 22 Feb 2023 13:02:32 +0100
Subject: [PATCH 11/12] Add aria note role

---
 rkt/sidenotes.rkt              | 2 +-
 uncensorable_donations.html.pm | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/rkt/sidenotes.rkt b/rkt/sidenotes.rkt
index 648b5033..550ed7b2 100644
--- a/rkt/sidenotes.rkt
+++ b/rkt/sidenotes.rkt
@@ -305,7 +305,7 @@
                                    styles)))
       (string-join styles " ")))
 
-  (define attrs `((class "sidenote")))
+  (define attrs `((class "sidenote") (role "note")))
   (when (non-empty-string? styles)
     (set! attrs (append attrs
                         `((style ,styles)))))
diff --git a/uncensorable_donations.html.pm b/uncensorable_donations.html.pm
index a2735e06..4cde0fd0 100644
--- a/uncensorable_donations.html.pm
+++ b/uncensorable_donations.html.pm
@@ -195,7 +195,7 @@ This is ◊strong{not} a glorification of WikiLeaks---they have ◊link[wikileak
   ◊entry["The Chelsea Manning leaks"
          #:date "July 5, 2010"]{
 
-    ◊div[#:class "caution"]{First I must caution you: it's very easy to become numb when you read about these leaks. The sheer amount of horror is enough to overwhelm you and might cause your brain to suppress your emotions, maybe out of self-defense. But try to remember that this happened to real people---it's not just a mass of text and numbers. Please don't relegate this as just another forgettable statistic.}
+    ◊div[#:class "caution" #:role "note"]{First I must caution you: it's very easy to become numb when you read about these leaks. The sheer amount of horror is enough to overwhelm you and might cause your brain to suppress your emotions, maybe out of self-defense. But try to remember that this happened to real people---it's not just a mass of text and numbers. Please don't relegate this as just another forgettable statistic.}
 
     Chelsea Manning (formerly Bradley Manning) is a former soldier of the United States who provided WikiLeaks with nearly 750,000 military and diplomatic documents. They were released in batches and spread out over a period of time. Some of the content was absolutely shocking and caused global outrage, I've tried to pick out some notable leaks◊mn{more-leaks}:
 

From cf07d794045db05e701af87603403ae49e62257d Mon Sep 17 00:00:00 2001
From: Jonas Hietala 
Date: Wed, 22 Feb 2023 15:01:38 +0100
Subject: [PATCH 12/12] Fix sidenote tests

---
 rkt/sidenotes.rkt | 39 ++++++++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/rkt/sidenotes.rkt b/rkt/sidenotes.rkt
index 550ed7b2..58fa2626 100644
--- a/rkt/sidenotes.rkt
+++ b/rkt/sidenotes.rkt
@@ -341,21 +341,30 @@
   ;; Like including an "ignore" tag to match only against the most important things,
   ;; but that's too much work for me now. Meh.
   (define expected
-    `((p "One."
-         (span ((class "sidenote-label")) "1")
-         " Two." (span ((class "sidenote-label")) "2")
-         " Three." (span ((class "sidenote-label")) "3"))
-      (div ((class "sidenote")) (span ((class "sidenote-number")) "1")
-             "1st")
-      (div ((class "sidenote")) (span ((class "sidenote-number")) "2")
-             "2nd")
-      (ol
-        (li "a" (span ((class "sidenote-label")) "4"))
-        (li "b"))
-      (div ((class "sidenote")) (span ((class "sidenote-number")) "4")
-             "In list.")
-      (div ((class "sidenote")) (span ((class "sidenote-number")) "3")
-             "3rd")))
+  '((p
+      "One."
+      (sup ((class "sidenote-number")) "1")
+      " Two."
+      (sup ((class "sidenote-number")) "2")
+      " Three."
+      (sup ((class "sidenote-number")) "3"))
+    (aside
+      ((class "sidenote") (role "note"))
+      (sup ((class "sidenote-number")) "1")
+      "1st")
+    (aside
+      ((class "sidenote") (role "note"))
+      (sup ((class "sidenote-number")) "2")
+      "2nd")
+    (ol (li "a" (sup ((class "sidenote-number")) "4")) (li "b"))
+    (aside
+      ((class "sidenote") (role "note"))
+      (sup ((class "sidenote-number")) "4")
+      "In list.")
+    (aside
+      ((class "sidenote") (role "note"))
+      (sup ((class "sidenote-number")) "3")
+      "3rd")))
 
   (check-equal? (decode-sidenotes input) expected)
   )