◊|title|
-◊|subtitle|
- ◊(when side-space? (->html - `(div ((class "date")) - (span ((class "published")) ,published) - ,(if updated - `(span ((class "updated")) ,updated) - "")))) - -◊|title|
+◊|subtitle|
+Acknowledgments
+As usual, there is a great woman behind every idiot.
Sometimes, I’m an idiot, but it’s clear that I have a great woman in Veronica that supports me, and without her this book would’ve never seen the light of day.
A big thanks to Filip Strömbäck, who proof-read everything and provided me with tons of good feedback.
And thanks to all others who gave me supportive comments, feedback, pull requests and donations. I’m forever grateful.
+
+ 
+
+
+ To Veronica, who lights my way in darkness.
+Why cryptocurrencies?
+What they are, what they do and why they matter
+v1.0.0-◊SHORT_COMMIT
+ +The full text of this book is available online at: whycryptocurrencies.com +
+ +This is a self-published book, and if you’re curious about the creation process I wrote a few blog posts about it.
+ +Cover art by Brad Lark: blark@blark.com
+ +Copyright © 2021 Jonas Hietala.
+ +All rights reserved.
+ +ISBN: 978-91-986762-1-1
+
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/properties_of_a_cryptocurrency.html.pm b/properties_of_a_cryptocurrency.html.pm
index 6f1a3b27..96b9edd2 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.
}
@@ -111,7 +111,7 @@ As there's no trusted third-party, there's no single entity who controls the cre
The new coins are rewards for miners who secure the network, but more on that in the ◊link[next-chapter]{next chapter}.
}
-◊img[#:src "/images/emission-rates.svg" #:link #t #:alt "Bitcoin's and Monero's emission schedule."]{
+◊img[#:src "images/emission-rates.svg" #:link #t #:alt "Bitcoin's and Monero's emission schedule."]{
Bitcoin has a hard limit of 21 million bitcoins, while in Monero new coins will always be created.◊mn{bitcoin-supply}
}
diff --git a/regen-and-check-ebook b/regen-and-check-ebook
new file mode 100755
index 00000000..6b8fb122
--- /dev/null
+++ b/regen-and-check-ebook
@@ -0,0 +1,6 @@
+#!/bin/bash
+
+./rebuild
+./ebookify
+epub-check ./_ebook/why_cryptocurrencies.epub
+
diff --git a/rkt/decode.rkt b/rkt/decode.rkt
index 95e03fd0..97f5fd9c 100644
--- a/rkt/decode.rkt
+++ b/rkt/decode.rkt
@@ -10,5 +10,5 @@
(decode-elements args
#:txexpr-elements-proc decode-paragraphs
#:string-proc string-proc
- #:exclude-tags `(figure pre)))
+ #:exclude-tags `(figure pre nav)))
diff --git a/rkt/index.rkt b/rkt/index.rkt
index 55cb8716..dd005a3a 100644
--- a/rkt/index.rkt
+++ b/rkt/index.rkt
@@ -36,7 +36,7 @@
(define (make-subnav sub)
(if sub
- `(ul
+ `(ol
,@(for/list ([child (in-list sub)])
`(li ,(make-entry child))))
""))
@@ -46,10 +46,23 @@
(h1 ,(make-entry (node page)))
,(make-subnav (children page))))
+(define (page-section-toc page)
+ ;`((span ((class "section")) ,(make-entry (node page)))
+ ;,(make-subnav (children page))))
+ `(,(make-entry (node page))
+ ,(make-subnav (children page))))
+
;; Make a table of content, used on the homepage or dedicated toc page.
(define (make-toc content)
- `(nav ((class "toc"))
- ,@(map page-toc content)))
+ `(nav ((class "toc") (epub:type "toc"))
+ (hgroup ((epub:type "covertitle"))
+ (h1 ((epub:type "title")) "Why Cryptocurrencies?")
+ (h2 ((epub:type "subtitle")) "What they are, what they do and why they matter")
+ )
+ (ol
+ ,@(map (λ (x)
+ `(li ,@(page-section-toc x)))
+ content))))
;; Locate entry in table of content.
(define (toc-entry page)
diff --git a/rkt/layout.rkt b/rkt/layout.rkt
index 94f2b3d4..58bb936d 100644
--- a/rkt/layout.rkt
+++ b/rkt/layout.rkt
@@ -26,21 +26,21 @@
(value "Subscribe")))
))
-(define follow-section
- `(section((class "follow"))
- (div ((class "wip"))
- "Here are some options f you want to keep up to date:")
- ,subscription-form
- (div ((class "links"))
- "Subscribe to the " ,(link feed-url "feed")
- ", see the source on " ,(link source-code "Github")
- " or " ,(link mailto "contact me")
- ".")
- (div ((class "donate"))
- "If you appreciate this free book please consider "
- ,(link donations "donating")
- ".")
- ))
+; (define follow-section
+; `(section((class "follow"))
+; (div ((class "wip"))
+; "Here are some options f you want to keep up to date:")
+; ,subscription-form
+; (div ((class "links"))
+; "Subscribe to the " ,(link feed-url "feed")
+; ", see the source on " ,(link source-code "Github")
+; " or " ,(link mailto "contact me")
+; ".")
+; (div ((class "donate"))
+; "If you appreciate this free book please consider "
+; ,(link donations "donating")
+; ".")
+; ))
(define (abs-url url)
(format "~a/~a" root-url url))
diff --git a/rkt/links.rkt b/rkt/links.rkt
index b44be298..0de82227 100644
--- a/rkt/links.rkt
+++ b/rkt/links.rkt
@@ -7,7 +7,7 @@
;; Site links
(define root-url "https://whycryptocurrencies.com")
-(define toc-url `("/" "Table of contents"))
+(define toc-url `("/toc.xhtml" "Table of contents"))
(define feed-url
`("/feed.xml"
@@ -187,10 +187,10 @@
(ch-ref
'what_is_a_cryptocurrency.html
"What is a cryptocurrency?"))
-(define donations
- (ch-ref
- 'free.html #:ref "donations-is-a-perfect-use-for-cryptocurrencies"
- "Donations is a perfect use for cryptocurrencies"))
+; (define donations
+; (ch-ref
+; 'free.html #:ref "donations-is-a-perfect-use-for-cryptocurrencies"
+; "Donations is a perfect use for cryptocurrencies"))
(define properties_of_a_cryptocurrency
(ch-ref
@@ -416,7 +416,7 @@
"Stackexchange: How is the whitepaper decoded from the blockchain"))
(define bitcoin-pdf
- `("/files/bitcoin.pdf"
+ `("https://whycryptocurrencies.com/files/bitcoin.pdf"
"Bitcoin: A Peer-to-Peer Electronic Cash System"))
(define electroncash
diff --git a/rkt/refs.rkt b/rkt/refs.rkt
index b18ad176..983792df 100644
--- a/rkt/refs.rkt
+++ b/rkt/refs.rkt
@@ -73,5 +73,13 @@
(regexp-match #rx"^mailto:" x))))
(define (to-name x)
- (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")
+ )
diff --git a/rkt/sidenotes.rkt b/rkt/sidenotes.rkt
index 648b5033..4d46b56d 100644
--- a/rkt/sidenotes.rkt
+++ b/rkt/sidenotes.rkt
@@ -4,9 +4,10 @@
(require racket/match racket/string racket/list)
(require "string-process.rkt")
(require "decode.rkt")
+(require "refs.rkt")
(require racket/pretty)
-(provide ndef sn mn note-pos decode-sidenotes clear-sidenotes)
+(provide ndef sn mn mn2 note-pos decode-sidenotes clear-sidenotes)
(define (ref-symbol ref-in)
(string->symbol (format "nd-~a" ref-in)))
@@ -90,6 +91,17 @@
def)
(define (mn ref-in #:top [top #f] #:bottom [bottom #f])
+ ; Disable marginnotes in epub
+ ; Because we have less control over fonts, enforce sidenote refs on all notes.
+ (sn ref-in #:top top #:bottom bottom))
+ ; (define ref (ref-symbol ref-in))
+ ; (set-marginnote ref)
+ ; (set-note-top ref top)
+ ; (set-note-bottom ref bottom)
+ ; ref)
+
+(define (mn2 ref-in #:top [top #f] #:bottom [bottom #f])
+ ; Actually, in some rare cases we should use marginnotes
(define ref (ref-symbol ref-in))
(set-marginnote ref)
(set-note-top ref top)
@@ -182,7 +194,7 @@
(begin
(unless (manual-pos? note)
(set! notes-after (cons note notes-after)))
- (append (label note)
+ (append (ref-label note)
acc))]
;; Explicit note def expansion.
[note-pos-ref
@@ -282,20 +294,34 @@
(define pos-ref (ref->pos-ref (note-ref note)))
(hash-has-key? note-pos-refs pos-ref))
-(define (label note)
+(define (note-id note)
+ (to-name (format "~a" (note-ref note))))
+
+(define (aside-label note)
(define sign (note-sign note))
(if (eq? sign 'marginnote)
`()
`((sup ((class "sidenote-number")) ,(format "~a" sign)))))
+(define (ref-label note)
+ (define sign (note-sign note))
+ (if (eq? sign 'marginnote)
+ `()
+ `((a ((epub:type "noteref")
+ (class "sidenote-number")
+ (href ,(format "#~a"(note-id note))))
+ ,(format "~a" sign)))))
+
(define (expand-sidenote note)
+ (define ref (note-ref note))
+ (define id (note-id note))
(define def (note-def note))
(define top (note-top note))
(define bottom (note-bottom note))
(when (and top (not (number? top)))
- (error (format "Not a number: '~a' for sidenote '~a'~n" top (note-ref note))))
+ (error (format "Not a number: '~a' for sidenote '~a'~n" top ref)))
(when (and bottom (not (number? bottom)))
- (error (format "Not a number: '~a' for sidenote '~a'~n" bottom (note-ref note))))
+ (error (format "Not a number: '~a' for sidenote '~a'~n" bottom ref)))
(define styles
(let ((styles `()))
@@ -305,13 +331,16 @@
styles)))
(string-join styles " ")))
- (define attrs `((class "sidenote")))
- (when (non-empty-string? styles)
- (set! attrs (append attrs
- `((style ,styles)))))
+ (define attrs `((epub:type "endnote") (class "sidenote") (role "note") (id ,id)))
+ ; Remove bottom and top margins that are used for sidenote positioning.
+ ; If the reader overrides font or font size, then we will get overlap between
+ ; sidenotes. We really don't want that, so let's skip these.
+ ; (when (non-empty-string? styles)
+ ; (set! attrs (append attrs
+ ; `((style ,styles)))))
`(aside ,attrs
- ,@(label note)
+ ,@(aside-label note)
,@def))
;; A larger test to test the sidenote placement.
@@ -321,17 +350,19 @@
;; These tags are called when the chapter is parsed, and references are inserted in-place.
(define 1st (sn "1st"))
(define 2nd (sn "2nd"))
- (define 3rd (sn "3rd"))
+ (define 3rd (mn "3rd")) ; Turn marginnotes into sidenotes
(define 3rd-pos (note-pos "3rd"))
(define list-note (sn "list-note"))
+ (define 4th (mn2 "4th"))
(ndef "1st" "1st")
(ndef "2nd" "2nd")
(ndef "3rd" "3rd")
(ndef "list-note" "In list.")
+ (ndef "4th" "Margin")
(define input
- `((p "One." ,1st " Two." ,2nd " Three." ,3rd)
+ `((p "One." ,1st " Two." ,2nd " Three." ,3rd " Four." ,4th)
(ol
(li "a" ,list-note)
(li "b"))
@@ -341,21 +372,40 @@
;; 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")
+ '((p
+ "One."
+ (a ((epub:type "noteref") (class "sidenote-number") (href "#nd-1st")) "1")
+ " Two."
+ (a ((epub:type "noteref") (class "sidenote-number") (href "#nd-2nd")) "2")
+ " Three."
+ (a ((epub:type "noteref") (class "sidenote-number") (href "#nd-3rd")) "3")
+ " Four.")
+ (aside
+ ((epub:type "endnote") (class "sidenote") (role "note") (id "nd-4th"))
+ "Margin")
+ (aside
+ ((epub:type "endnote") (class "sidenote") (role "note") (id "nd-1st"))
+ (sup ((class "sidenote-number")) "1")
+ "1st")
+ (aside
+ ((epub:type "endnote") (class "sidenote") (role "note") (id "nd-2nd"))
+ (sup ((class "sidenote-number")) "2")
+ "2nd")
(ol
- (li "a" (span ((class "sidenote-label")) "4"))
+ (li
+ "a"
+ (a
+ ((epub:type "noteref") (class "sidenote-number") (href "#nd-list-note"))
+ "4"))
(li "b"))
- (div ((class "sidenote")) (span ((class "sidenote-number")) "4")
- "In list.")
- (div ((class "sidenote")) (span ((class "sidenote-number")) "3")
- "3rd")))
+ (aside
+ ((epub:type "endnote") (class "sidenote") (role "note") (id "nd-list-note"))
+ (sup ((class "sidenote-number")) "4")
+ "In list.")
+ (aside
+ ((epub:type "endnote") (class "sidenote") (role "note") (id "nd-3rd"))
+ (sup ((class "sidenote-number")) "3")
+ "3rd")))
(check-equal? (decode-sidenotes input) expected)
)
diff --git a/rkt/tags.rkt b/rkt/tags.rkt
index b4699389..3b3ba7d0 100644
--- a/rkt/tags.rkt
+++ b/rkt/tags.rkt
@@ -6,7 +6,9 @@
(require racket/match racket/string racket/list)
(require racket/format)
(require racket/runtime-path)
+(require racket/path)
(require racket/port)
+(require racket/file)
(require libuuid)
(require "decode.rkt")
(require "links.rkt")
@@ -98,6 +100,7 @@
(string=? "/" url)
(string=? "/feed.xml" url)
(string=? "/toc.html" url)
+ (string=? "/toc.xhtml" url)
(regexp-match #rx"^mailto:" url)
(ch-ref? url)
(file-ref? url)
@@ -165,12 +168,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))
@@ -222,9 +227,22 @@
`()
`((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"))
+ `(div ((class "epigraph") (epub:type "epigraph"))
,@txt))
(define (qt #:author [author #f]
@@ -352,11 +370,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
@@ -373,16 +392,51 @@
`(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 img
- `(img ((src ,(~a src)) (alt ,alt))))
- (if link
- `(a ((href ,src) (target "_blank") (class "img-wrapper"))
- ,img)
- img))
+(define (raw-img #:src src #:link [link #f] #:alt alt #:decorative [decorative #f])
+ (if (path-has-extension? src #".svg")
+ (svg-img #:src src #:alt alt #:decorative decorative)
+ (regular-img #:src src #:alt alt #:decorative decorative)))
+
+(define (svg-img #:src src #:alt alt #:decorative decorative)
+ (define content (file->lines src))
+
+ (define fallback-src
+ (let ((path (path-only src))
+ (filename (path-replace-extension (file-name-from-path src) "")))
+ (build-path path (path-add-extension filename "-fallback.png"))))
+
+ `(object
+ ((data ,src)
+ (type "image/svg+xml")
+ (class "svg-img"))
+ ,(regular-img #:src fallback-src #:alt alt #:decorative decorative)))
+
+(define (regular-img #:src src #:alt alt #:decorative decorative)
+ (define attrs `((src ,(~a src)) (alt ,alt)))
+ (when decorative
+ (set! attrs (cons `(role "presentation") attrs)))
+ `(img ,attrs))
+
+(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)))
+ (check-equal? (raw-img #:src "../images/btc-valuation.svg" #:alt "alt")
+ `(object ((data "../images/btc-valuation.svg")
+ (type "image/svg+xml")
+ (class "svg-img"))
+ (img ((src "../images/btc-valuation-fallback.png") (alt "alt")))))
+ )
;; FIXME rename to figcaption
(define (decoded-figcaption . args)
diff --git a/rkt/toc.rkt b/rkt/toc.rkt
index b60c7705..7537cbdf 100644
--- a/rkt/toc.rkt
+++ b/rkt/toc.rkt
@@ -5,12 +5,8 @@
(define toc
;; This replaces the previously hand-made pagetree in index.ptree.
;; String entries gets removed and are treated as planned chapters.
- `(eli5.html
- (about_the_book.html
- acknowledgements.html
- how_to_use.html
- free.html
- about_me.html)
+ `(about_the_book.html
+ eli5.html
(what_is_a_cryptocurrency.html
properties_of_a_cryptocurrency.html
how_do_cryptocurrencies_work.html
@@ -49,7 +45,8 @@
;"Who is Satoshi Nakamoto?"
;"Is Facebook's Libra a cryptocurrency?"
;"Further research"
- )))
+ )
+ about_me.html))
(define (in-toc? page)
(in-tree? page toc))
@@ -97,4 +94,3 @@
,@(transform-list pt)))
(define toc-pagetree (tree-to-pagetree toc))
-
diff --git a/sass/chapter.scss b/sass/chapter.scss
index 729f989f..7edaccd8 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;
+.chapter header {
+ 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;
+.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;
- .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,941 @@ $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;
+.chapter .subnav {
+ 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;
- }
+ ol {
+ list-style: none;
+ margin: 0;
+ }
+ ol > li {
+ font-size: 100%;
+ margin-left: 0.6rem;
+ margin-top: 0.3rem;
+ }
+ ol > 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;
+.sidenote,
+.sidenote > p,
+.sidenote a {
+ @extend %sans-serif;
+ font-size: 0.8rem !important;
}
-.sidenote img, {
- max-width: 100%;
+.sidenote img,
+.sidenote .svg-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,
+a.sidenote-number {
+ font-family: $sans-serif-font-family;
+ vertical-align: super;
+ font-size: 0.7em !important;
+ 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,
+ .svg-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; }
}
+.not-investment {
+ margin: 1em 0 !important;
+ font-size: 1.1rem;
+ font-weight: bold;
+ text-align: center;
+}
/*
* 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,
+ .svg-img {
+ max-width: 100%;
+ margin: 0 auto;
+ }
+ > figcaption {
+ @extend %sans-serif;
+ font-size: 0.9rem;
+ }
}
figure.fullwidth {
- img {
- width: 100%;
- }
+ img,
+ .svg-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;
+
+ .title {
+ @extend %sans-serif;
+ font-size: 1rem;
width: 100%;
- display: flex;
- justify-content: center;
- flex-wrap: wrap;
+ text-align: center;
+ }
+ .wrapper {
+ width: 100%;
+ text-align: center;
+ overflow-x: auto;
- .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;
+ img {
+ margin: 0 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 +1094,56 @@ 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%;
}
+.dedication {
+ text-align: center;
+ font-style: italic;
+}
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/fonts.scss b/sass/fonts.scss
index 91400460..e486a9b2 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/homepage.scss b/sass/homepage.scss
index 298dbef2..fbecad24 100644
--- a/sass/homepage.scss
+++ b/sass/homepage.scss
@@ -1,57 +1,66 @@
-.homepage {
- max-width: 600px;
- margin: 0.5rem 1.2rem;
+.toc {
+ max-width: 600px;
+ margin: 0.5rem 1.2rem;
}
-.homepage > header {
- margin-bottom: 1em;
- padding-bottom: 0.3em;
- border-bottom: 0.2em solid;
+.toc > hgroup {
+ 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;
+.toc > ol > li:not(:first-child) {
+ padding-top: 0.8rem;
}
.toc {
- @extend %sans-serif;
- a {
- text-decoration: none;
- background: none;
- text-shadow: none;
- }
- a:hover {
- text-decoration: underline;
- }
-}
-
-.toc h1 {
- font-size: 1.1rem;
-}
-.toc ul {
- margin-top: 0.5rem;
- list-style: none;
-
- li {
- margin-left: 0.6rem;
- margin-top: 0.3rem;
- }
-}
-.toc .planned {
- color: $planned-chapter-link;
+ @extend %sans-serif;
+ a {
+ text-decoration: none;
+ background: none;
+ text-shadow: none;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+}
+
+.toc ol {
+ list-style: none;
+}
+
+.toc > ol > li > a {
+ font-size: 1.1rem;
+ font-weight: bold;
+ @extend %sans-serif;
+ line-height: 1;
+}
+
+.toc > ol > li > ol {
+ margin-top: 0.5rem;
+ margin-bottom: 0.4rem;
+
+ > li {
+ margin-left: 0.6rem;
+ margin-top: 0.3rem;
+ }
+}
+
+.version {
+ font-style: italic;
}
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;
+ }
}
diff --git a/sass/main.scss b/sass/main.scss
index 4cd1d942..f862f71f 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -1,13 +1,12 @@
// Preparations
-@import 'fonts';
-@import 'colors';
+@import "fonts";
+@import "colors";
// Site wide
-@import 'global';
-@import 'code-highlight';
+@import "global";
+@import "code-highlight";
// Pages
-@import 'homepage';
-@import 'chapter';
-@import 'landing';
-
+@import "homepage";
+@import "chapter";
+//@import 'landing';
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..68ae4f76 100644
--- a/timestamping_service.html.pm
+++ b/timestamping_service.html.pm
@@ -55,9 +55,9 @@ Let's travel back in time and look at the site ◊link[hn]{Hacker News}, a tech
Interestingly enough Hacker News is full of people extremely skeptical of cryptocurrencies, who often comment that cryptocurrencies don't have a single legal use-case. This skepticism and misunderstanding, even from highly technical people, was one of the reasons I started writing this book.
}
-◊hn-html{
- The top three stories on ◊link[hn-wayback-ref]{Hacker News on Mars 1st, 2011} according to the Wayback Machine.
- I tried to reproduce the site appearance, but it's not pixel perfect.
+◊img[#:src "images/hn-html.png"
+ #:alt "Hacker News on Mars 1st, 2011. Any news of Bitcoin is absent."]{
+ The top three stories on ◊link[hn-wayback-ref]{Hacker News on Mars 1st, 2011} according to the Wayback Machine.
}
As long as we can trust the Wayback Machine (and I do consider them generally trustworthy) we can be fairly sure this is correct. Letting a trusted party like the Wayback Machine handle timestamping, called ◊def[trusted-timestamping]{trusted timestamping}, is a solved problem with different kinds of standards but---as the name implies---there's always the caveat of requiring a trusted party to verify the timestamps.
@@ -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/toc-template.html.p b/toc-template.html.p
index 985e10ae..2756a88e 100644
--- a/toc-template.html.p
+++ b/toc-template.html.p
@@ -1,33 +1,15 @@
◊(local-require pollen/tag)
-
+
- ◊|main-title|
-
-
+ Table of Contents
+
-
-
-
-
+
+
-
-
-
-
- ◊(->html doc #:splice #t)
-
-
-
+ ◊(->html doc #:splice #t)
diff --git a/tokens.html.pm b/tokens.html.pm
index 824d80b4..c1282d6d 100644
--- a/tokens.html.pm
+++ b/tokens.html.pm
@@ -165,15 +165,15 @@ I think visualizations can help us compare large amounts like these, so here's o
◊div[#:class "money-visualization"]{
- ◊(small-img "Jeff Bezos" "/images/markets/small.png")◊mn[#:top -3]{bezos}
+ ◊(small-img "Jeff Bezos" "/images/markets/small.png")◊mn2[#:top -3]{bezos}
- ◊(market-img "Gold" "/images/markets/gold.png")◊mn[#:top -4]{gold}
+ ◊(market-img "Gold" "/images/markets/gold.png")◊mn2[#:top -4]{gold}
- ◊(market-img "Money" "/images/markets/money.png")◊mn[#:top -5]{money}
+ ◊(market-img "Money" "/images/markets/money.png")◊mn2[#:top -5]{money}
- ◊(market-img "Derivatives" "/images/markets/derivatives.png")◊mn[#:top -22]{derivatives}
+ ◊(market-img "Derivatives" "/images/markets/derivatives.png")◊mn2[#:top -22]{derivatives}
- ◊(small-img "Bitcoin" "/images/markets/small.png")◊mn[#:top -5]{bitcoin}
+ ◊(small-img "Bitcoin" "/images/markets/small.png")◊mn2[#:top -5]{bitcoin}
}
◊ndef["bezos"]{
@@ -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/uncensorable_donations.html.pm b/uncensorable_donations.html.pm
index b1e5980b..129b1edb 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}:
@@ -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]?
@@ -308,10 +308,10 @@ This is ◊strong{not} a glorification of WikiLeaks---they have ◊link[wikileak
66 thousand innocent people dead in six years. That's like 22 World Trade center attacks (where 2,977 people died)---more than three a year. Or 31 innocent people dead every day during the six years.
}
- ◊note-pos[#:top -7]{wtc}
-
}
+ ◊note-pos[#:top -7]{wtc}
+
Countless numbers of civilians killed---while soldiers are laughing---and systematic cover-ups to hide it all.◊mn{purpose}
◊ndef["purpose"]{
@@ -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
@@ -828,9 +828,11 @@ Of course, covering up or rationalizing events isn't a U.S. only phenomena. Here
It was even forbidden to talk about them negatively.
}
- ◊li{How the Soviet Union tried to cover up the ◊link[chernobyl-accident]{Chernobyl nuclear disaster}.◊mn{chernobyl-TV} ◊note-pos{chernobyl-TV}}
+ ◊li{How the Soviet Union tried to cover up the ◊link[chernobyl-accident]{Chernobyl nuclear disaster}.◊mn{chernobyl-TV}}
}
+◊note-pos{chernobyl-TV}
+
◊ndef["dan-hitler"]{
Dan Carlin, creator of the excellent ◊link[hardcore-history]{Hardcore History} podcast, brought up an interesting question:
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)
diff --git a/zippify b/zippify
new file mode 100755
index 00000000..96a04b30
--- /dev/null
+++ b/zippify
@@ -0,0 +1,5 @@
+#!/bin/bash
+
+cd _ebook/
+zip -X0 why_cryptocurrencies.epub mimetype
+zip -Xur9D why_cryptocurrencies.epub *