commit 74b84108b2a86e89bb72c511bb734ced856fe00c Author: hiro hiro@torproject.org Date: Mon Mar 15 18:12:44 2021 +0100
Edit template and slides --- assets/static/images/onion-white.png | Bin 0 -> 41138 bytes assets/static/images/onion.jpg | Bin 0 -> 3911 bytes assets/static/images/onion.png | Bin 0 -> 41071 bytes assets/static/revealjs/dist/theme/tor.css | 37 +++++- .../training/resources/tor-training/contents.lr | 126 +++++++++++++++++---- flowblocks/slide.ini | 9 ++ templates/blocks/slide.html | 8 ++ templates/slideshow.html | 7 +- 8 files changed, 160 insertions(+), 27 deletions(-)
diff --git a/assets/static/images/onion-white.png b/assets/static/images/onion-white.png new file mode 100644 index 0000000..f8daf6a Binary files /dev/null and b/assets/static/images/onion-white.png differ diff --git a/assets/static/images/onion.jpg b/assets/static/images/onion.jpg new file mode 100644 index 0000000..d728622 Binary files /dev/null and b/assets/static/images/onion.jpg differ diff --git a/assets/static/images/onion.png b/assets/static/images/onion.png new file mode 100644 index 0000000..ce6dcdf Binary files /dev/null and b/assets/static/images/onion.png differ diff --git a/assets/static/revealjs/dist/theme/tor.css b/assets/static/revealjs/dist/theme/tor.css index 31b0054..2c55510 100644 --- a/assets/static/revealjs/dist/theme/tor.css +++ b/assets/static/revealjs/dist/theme/tor.css @@ -20,7 +20,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba --block-margin: 20px; --heading-margin: 0 0 20px 0; --heading-font: Source Sans Pro, Helvetica, sans-serif; - --heading-color: #59316B; + --heading-color: #683086; --heading-line-height: 1.2; --heading-letter-spacing: normal; --heading-text-transform: uppercase; @@ -32,7 +32,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba --heading3-size: 1.3em; --heading4-size: 1em; --code-font: monospace; - --link-color: #59316B; + --link-color: #683086; --link-color-hover: #9400ff; --selection-background-color: #98bdef; --selection-color: #fff; } @@ -72,7 +72,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba .reveal h5, .reveal h6 { margin: 0 0 20px 0; - color: #59316B; + color: #683086; font-family: "Source Sans Pro", Helvetica, sans-serif; font-weight: 600; line-height: 1.2; @@ -244,6 +244,10 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba .reveal img { margin: 20px 0; }
+.reveal hr { + border: 5px solid #fff; +} + /********************************************* * LINKS *********************************************/ @@ -275,6 +279,10 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba border-color: #2a76dd; box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+ +.title div { + background-position: 85% 85% !important; +} /********************************************* * NAVIGATION CONTROLS *********************************************/ @@ -294,3 +302,26 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba @media print { .backgrounds { background-color: #fff; } } + +/********************************************* + * FOOTER + *********************************************/ + +.footer { + background-color: #683086; +} + +/********************************************* + * OVERRIDES + *********************************************/ + +.slides { + text-align: left !important; +} +.title { + text-align: center; +} + +hr.dark { + border: 5px solid #683086; +} diff --git a/content/training/resources/tor-training/contents.lr b/content/training/resources/tor-training/contents.lr index c37e94b..16254df 100644 --- a/content/training/resources/tor-training/contents.lr +++ b/content/training/resources/tor-training/contents.lr @@ -1,32 +1,21 @@ _model: slideshow --- -title: Tor Presentation +title: The Tor Network --- _template: slideshow.html --- -subtitle: Teach your community about using Tor ---- -author: Community Team ---- background: white --- -image: /static/images/onion-bg.png +image: /static/images/onion.png --- slides:
-#### slide #### -title: Hello Slideshow ----- -description: Test slides ----- -background: white - #### slide #### title: Topics ---- description:
-- What’s Tor? +- What' s Tor? - Types of relays - Technical setup - More about relays @@ -43,7 +32,7 @@ description: - Tor is a free software and an open network - Mitigates against tracking, surveillance and censorship - Run by a US non-profit and volunteers from all over the world -- It’s Tor, not TOR +- It' s Tor, not TOR
---- background: white @@ -71,13 +60,108 @@ By running a Tor relay you can help make the Tor network: background: white
#### slide #### -title: Why run a Tor relay? +title: Types of Relays +---- +layout: title +---- +background-image: /static/images/onion-white.png + +#### slide #### +title: Guard/middle (aka non-exit) relay ---- description: -By running a Tor relay you can help make the Tor network: -- faster (and therefore more usable) -- more robust against attacks -- more stable in case of outages -- safer for its users (spying on more relays is harder than on a few) +- A guard is the first relay in the chain of 3 relays building a Tor circuit. +- A middle relay is neither a guard nor an exit, but acts as the second hop between the two. +- To become a guard, a relay has to be stable and fast (at least 2MByte/s) otherwise it will remain a middle relay. +---- +background: white + +#### slide #### +title: Exit relay +---- +description: +- The exit relay is the final relay in a Tor circuit, the one that sends traffic out its destination. +- That's why exit relays have the greatest legal exposure and liability of all the relays. +- Before running an exit relay, check it with your local digital rights organization. +- **You should not run a Tor exit relay from your home** +---- +background: white + +#### slide #### +title: Bridge +---- +description: +- A bridge is a node in the network that isn't listed in the public Tor directory, which make it harder for ISPs and governments to block it. +- Bridges are relatively easy, low-risk and low bandwidth Tor nodes to operate. +- And there's another special kind of bridge: Pluggable transports. It hides your tor traffic by adding an additional layer of obfuscation. +---- +background: white + +#### slide #### +title: The lifecycle of a new relay +---- +description: +Non-exit relays pass by a lifecycle of four phases (defined by days): +- Days 0-3: the unmeasured phase +- Days 3-8: network authorities start the remote measurement phase (the ramp-up guard phase) +- Days 8-68: guard phase (where load counter intuitively drops and then rises higher) +---- +background: white + +#### slide #### +title: The lifecycle of a new relay +---- +description: +- And after 68 days, if the relay is stable and fast enough, it receives a Guard flag (steady-state guard phase). +- Exit relays also have a lifecycle more or less similar. +- Read about all the phases in: [https://blog.torproject.org/lifecycle-new-relay%5D(https://blog.torproject.o...) +---- +background: white + +#### slide #### +title: Relay requirements +---- +layout: title +---- +background-image: /static/images/onion-white.png + +#### slide #### +title: Before we start +---- +description: +- Never run a relay without the consent of network administrator or machine owner. Read the Terms of Service (ToS) first, so you don’t lose money. +- Choose which type of relay you will host. Non-exit relay is a easy way to start helping the network. +- Read the documentation: [https://torproject.org/tor-relays%5D(https://torproject.org/tor-relays) +---- +background: white + +#### slide #### +title: Bandwidth requirements +---- +description: +- At least 16 Mbit/s (Mbps) upload and download bandwidth available for Tor. More is better. +- The minimum requirements for a relay are 10 Mbit/s (Mbps). +- If you have less than 10 Mbit/s but at least 1 Mbit/s we recommend you run a bridge with obfs4 support. +---- +background: white + +#### slide #### +title: Monthly outbound traffic +---- +description: +- It is required to use a minimum of 100 GByte of outbound/incoming traffic per month. +- If you have a metered plan you might want to configure tor to only use a given amount of bandwidth or monthly traffic. +- More (>2 TB/month) is better and recommended +---- +background: white + +#### slide #### +title: Public IPv4 address +---- +description: +- Every relay needs a public IPv4 address - either directly on the host (preferred) or via NAT and port forwarding. +- The IPv4 address is not required to be static but static IP addresses are preferred. +- Your IPv4 address should remain unchanged for at least 3 hours (network consensus). +- You can only run two Tor relays per public IPv4. ---- background: white diff --git a/flowblocks/slide.ini b/flowblocks/slide.ini index 97b1b6b..23cf3fb 100644 --- a/flowblocks/slide.ini +++ b/flowblocks/slide.ini @@ -19,3 +19,12 @@ source = record.attachments.images [fields.background] label = Background color type = string + +[fields.layout] +label = Slide layout +type = string + +[fields.background-image] +label = Background image +type = string +translate = False diff --git a/templates/blocks/slide.html b/templates/blocks/slide.html index 5f96574..e0421ea 100644 --- a/templates/blocks/slide.html +++ b/templates/blocks/slide.html @@ -1,5 +1,13 @@ +{% if this.layout == "title" %} +<section class="title" data-background-color="white" data-background-image="{{ this.image|asseturl }}" data-background-position="right bottom" data-background-size="3em"> + <h3>{{ this.title }}</h3> + <hr class="dark" /> + <h4>{{ this.subtitle }}</h4> +</section> +{% else %} <section data-background-color="{{ this.background }}"> <h2>{{ this.title }}</h2> {{ this.description }}
</section> +{% endif %} diff --git a/templates/slideshow.html b/templates/slideshow.html index 260c123..f1d6065 100644 --- a/templates/slideshow.html +++ b/templates/slideshow.html @@ -17,9 +17,10 @@ <div class="reveal"> <!-- Any section element inside of this container is displayed as a slide --> <div class="slides"> - <section data-background-color="{{ this.background }}" data-background-image="{{ this.image|asseturl }}" data-background-position="bottom right" data-background-size="3em"> - <h1>{{ this.title }}</h1> - <h2>{{ this.subtitle }}</h2> + <section class="title" data-background-color="#683086" data-background-image="{{ this.image|asseturl }}" data-background-position="right bottom" data-background-size="3em"> + <h3>{{ this.title }}</h3> + <hr /> + <h4>{{ this.subtitle }}</h4> <p>{{ this.author }}</p> </section>