commit 254382589f1b6d9324a115cbd0490b1a676e46a7 Author: emma peel <emma.peel@riseup.net> Date: Thu May 13 12:11:56 2021 +0200 update contents: training slideshows --- assets/static/revealjs/dist/theme/tor.css | 31 +- content/outreach/contents.lr | 2 +- .../technical-setup/bridge/docker/contents.lr | 2 +- .../training/resources/tor-training/contents.lr | 549 +++++++++++++++++++++ flowblocks/slide.ini | 17 +- models/page.ini | 1 + models/project.ini | 51 ++ models/projects.ini | 33 ++ models/slideshow.ini | 43 ++ models/text.ini | 2 + templates/blocks/slide.html | 25 +- templates/onion-services.html | 2 +- templates/outreach-talk.html | 2 +- templates/relay-operations.html | 2 +- templates/slideshow.html | 32 +- 15 files changed, 764 insertions(+), 30 deletions(-) diff --git a/assets/static/revealjs/dist/theme/tor.css b/assets/static/revealjs/dist/theme/tor.css index 2c55510..60c6c37 100644 --- a/assets/static/revealjs/dist/theme/tor.css +++ b/assets/static/revealjs/dist/theme/tor.css @@ -23,7 +23,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba --heading-color: #683086; --heading-line-height: 1.2; --heading-letter-spacing: normal; - --heading-text-transform: uppercase; + --heading-text-transform: none; --heading-text-shadow: none; --heading-font-weight: 600; --heading1-text-shadow: none; @@ -77,7 +77,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba font-weight: 600; line-height: 1.2; letter-spacing: normal; - text-transform: uppercase; + text-transform: none; text-shadow: none; word-wrap: break-word; } @@ -301,14 +301,31 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba *********************************************/ @media print { .backgrounds { - background-color: #fff; } } + background-color: #fff; } +} +.print-pdf .footer { + display: none; +} /********************************************* * FOOTER *********************************************/ .footer { background-color: #683086; + min-height: 10%; +} + +.footer img { + position:relative; + min-height: 1.5em; + padding: 5px; +} + +.footer a { + font-size: 1.5em !important; + padding: 5px; + top: 10px; } /********************************************* @@ -325,3 +342,11 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba hr.dark { border: 5px solid #683086; } + +.order-last { + text-align: left !important; +} + +.order-first { + text-align: right !important; +} diff --git a/content/outreach/contents.lr b/content/outreach/contents.lr index cd2b5fe..9cf4a65 100644 --- a/content/outreach/contents.lr +++ b/content/outreach/contents.lr @@ -1,4 +1,4 @@ -section: Community +section: community --- section_id: outreach --- diff --git a/content/relay-operations/technical-setup/bridge/docker/contents.lr b/content/relay-operations/technical-setup/bridge/docker/contents.lr index 85ffb24..bfc1b38 100644 --- a/content/relay-operations/technical-setup/bridge/docker/contents.lr +++ b/content/relay-operations/technical-setup/bridge/docker/contents.lr @@ -9,7 +9,7 @@ body: ### 1. Deploy a container We provide a docker-compose file that helps you deploy the container. -First, [download docker-compose.yml](https://gitlab.torproject.org/torproject/anti-censorship/docker-obfs4-bridge...), and then write your bridge configuration to a new file, `.env`, which is in the same directory as `docker-compose.yml`. Here's a template: +First, [download docker-compose.yml](https://gitlab.torproject.org/torproject/anti-censorship/docker-obfs4-bridge...), and then write your bridge configuration to a new file, `.env`, which is in the same directory as `docker-compose.yml`. Here's a template: ``` # Your bridge's Tor port. diff --git a/content/training/resources/tor-training/contents.lr b/content/training/resources/tor-training/contents.lr new file mode 100644 index 0000000..50e292f --- /dev/null +++ b/content/training/resources/tor-training/contents.lr @@ -0,0 +1,549 @@ +_model: slideshow +--- +title: The Tor Network +--- +_template: slideshow.html +--- +background: white +--- +image: /static/images/onion.png +--- +slides: + +#### slide #### +title: Topics +---- +description: +- What is Tor? +- Types of relays +- Technical setup +- More about relays +- Relay diversity +- Getting help + + +#### slide #### +title: What is Tor? +---- +description: +- Tor is 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. + + +#### slide #### +title: The Tor network +---- +description: +- An open network that everyone can be a part of. +- The network is composed of different types of servers run by volunteers around the world. +- Your server will relay the Tor traffic to another server on the Internet. +- Before entering the network, your server will automatically go through the relay lifecycle. + + +#### slide #### +title: Why run a Tor 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 users (spying on more relays is harder than on a few) + + +#### slide #### +title: Types of Relays +---- +slide_layout: title-slide +---- +background_image: /static/images/onion-white.png +---- +description: +- + + +#### slide #### +title: Guard/middle (aka non-exit) relay +---- +description: +- 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 them. +- To become a guard, a middle relay has to be stable and fast (at least 2MByte/s); otherwise, it will remain a middle relay. + + +#### slide #### +title: Exit relay +---- +description: +- The exit relay is the final relay in a Tor circuit, and sends the traffic to its destination. +- That is why exit relays have the most significant legal exposure and liability of all relays. +- Before running an exit relay, talk with your local digital rights organization. +- **You should not run a Tor exit relay from your home.** + + +#### slide #### +title: Bridge +---- +description: +- A bridge is a node in the network that is not listed in the public Tor directory, making it harder for ISPs and governments to block it. +- Bridges are relatively easy, low-risk, and low bandwidth Tor relays to operate. +- And there's another special kind of bridge: Pluggable transports. These hide your Tor traffic by adding a layer of obfuscation. + + +#### slide #### +title: The lifecycle of a new relay +---- +description: +Non-exit relays go through a lifecycle of four phases (defined in 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). + + +#### slide #### +title: The lifecycle of a new relay +---- +description: +- After 68 days, if stable and fast enough, the relay will receive a **Guard flag** (steady-state guard phase). +- Read about all the phases in: <https://blog.torproject.org/lifecycle-new-relay> + + +#### slide #### +title: Relay requirements +---- +slide_layout: title-slide +---- +background_image: /static/images/onion-white.png +---- +description: +- + + +#### slide #### +title: Before we start +---- +description: +- Never run a relay without the consent of the network administrator or machine owner. + Read the Terms of Service (ToS) first, so you don’t risk losing money. +- Choose which type of relay you will host. A non-exit relay is an easy way to start helping the network. +- Read the documentation: <https://community.torproject.org/relay> + + +#### slide #### +title: Bandwidth requirements +---- +description: +- It’s recommended to have 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 running a bridge with obfs4 support. + + +#### slide #### +title: Monthly outbound traffic +---- +description: +- Relays must use at least 100 GByte of outbound/incoming traffic per month. +- If you have a metered plan, you might want to configure Tor to use only a given amount of bandwidth or monthly traffic. +- More (>2 TB/month) is better and recommended. + + +#### 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. + + +#### slide #### +title: Other requirements +---- +description: +- Memory: A <40 Mbit/s non-exit relay should have at least 512 MB of RAM available. +- Disk storage: Tor does not need much disk storage. A typical Tor relay needs less than 200 MB. + + +#### slide #### +title: Other requirements +---- +description: +- Any modern CPU should be fine. +- Uptime: Ideally, the relay runs on a server which runs 24/7. + + +#### slide #### +title: Choosing your relay hosting +---- +description: +- The Tor community team maintains GoodBadISPs – a list about the experience of running relays: <https://community.torproject.org/relay/community-resources/good-bad-isps/> +- Some providers only allow non-exit relays, so check the GoodBadISPs list before buying a service. +- Running a relay can cost anywhere between a few bucks to hundreds per month. + + +#### slide #### +title: Technical setup +---- +slide_layout: title-slide +---- +background_image: /static/images/onion-white.png +---- +description: +- + + +#### slide #### +title: Non-exit relay - Debian/Ubuntu +---- +description: +- Enable the Tor Project package repository +- Install the tor package + +``` + $ apt update && apt install tor +``` + + +#### slide #### +title: Non-exit relay - Debian/Ubuntu +---- +description: +- Add relay configuration to the `/etc/tor/torrc` file: +``` + Nickname myNiceRelay + ExitRelay 0 + SocksPort 0 + ControORPort 443 + lSocket 0 + ContactInfo tor-operator@your-emailaddress-domain + Log notice syslog +``` + + +#### slide #### +title: Non-exit relay - Debian/Ubuntu +---- +description: +- Restart the tor daemon: + +``` + $ systemctl restart tor@default +``` + + +#### slide #### +title: Non-exit relay - FreeBSD +---- +description: +- Install the tor package + +``` + pkg install tor ca_root_nss +``` + + +#### slide #### +title: Non-exit relay - FreeBSD +---- +description: + - Edit the configuration file `/usr/local/etc/tor/torrc` + +``` + Nickname myNiceRelay + ORPort 9001 + ExitRelay 0 + SocksPort 0 + ControlSocket 0 + ContactInfo tor-operator@your-emailaddress-domain + Log notice syslog +``` + + +#### slide #### +title: Non-exit relay - FreeBSD +---- +description: +- Ensure that the random_id sysctl setting is enabled: + +``` + echo "net.inet.ip.random_id=1" >> /etc/sysctl.conf + sysctl net.inet.ip.random_id=1 +``` + + +#### slide #### +title: Non-exit relay - FreeBSD +---- +description: +- Start the tor daemon and make sure it starts at boot: + +``` + sysrc tor_enable=YES + service tor start +``` + + +#### slide #### +title: Non-exit relay - FreeBSD +---- +description: + +- Optional, but recommended to get package updates faster: <https://community.torproject.org/relay/setup/guard/freebsd/> + + +#### slide #### +title: Verify that your relay works +---- +description: + +After restarting the service, verify that the log file contains the following entry: +``` + Self-testing indicates your ORPort is + reachable from the outside. + Excellent. + Publishing server descriptor. +``` + +About 3 hours after you started your relay, it should appear on Metrics portal in Relay Search. + + +#### slide #### +title: More about relays +---- +slide_layout: title-slide +---- +background_image: /static/images/onion-white.png +---- +description: +- + + +#### slide #### +title: Technical tips +---- +description: +- Enable automatic software updates. +- Backup your Tor Identity Keys. +- It's possible to limit bandwidth usage (and traffic). Check the parameters, for example, AccountingMax, AccountingRule, AccountingStart. +- If you run more than one Tor relay, you need to set the MyFamily parameter. + + +#### slide #### +title: Orchestrating +---- +description: +- Running multiple relays by hand can be challenging. +- Configuration management tools can make relay operators' lives easier: +- Ansible-relayor: <http://github.com/nusenu/ansible-relayor> + + +#### slide #### +title: Metrics +---- +description: +- Metrics portal: <https://metrics.torproject.org> +- You can search for how many relays are in the network, how many are exits, etc. +- In 2021 there are ~6,600 public relays and ~1,500 bridges. +- Check: how many relays are in your country? Who runs these relays? How diverse are they? + + +#### slide #### +title: Network diversity +---- +slide_layout: title-slide +---- +background_image: /static/images/onion-white.png +---- +description: +- + + +#### slide #### +title: Monoculture +---- +description: +- A single kernel vulnerability in GNU/Linux impacting all Tor relays could be devastating. +- Diversity of Operating System (OS): ~90% of relays are Linux. + + +#### slide #### +title: Monoculture +---- +description: +- Diversity of Autonomous Systems (AS). +- Try to avoid the following hosters: OVH SAS (AS16276), Online S.a.s. (AS12876), Hetzner Online GmbH (AS24940), DigitalOcean, LLC (AS14061). + + +#### slide #### +title: The TorBSD Diversity Project +---- +description: +- The Tor BSD Diversity Project (TDP) is an initiative seeking to extend the use of BSD Unix operating systems in the network. +- Goals: increase the number of Tor relays running BSDs; Engage the BSD community about Tor anonymity; Port Tor related programs to BSD operating systems. + + +#### slide #### +title: More about exit relays +---- +slide_layout: title-slide +---- +background_image: /static/images/onion-white.png +---- +description: +- + + +#### slide #### +title: Legal information +---- +description: +- Many countries have regulations that exclude internet service providers from liability. +- It's a good idea to consult with a lawyer or your local digital rights organization. +- Under most circumstances, you will be able to handle legal matters by having an abuse response letter. + + +#### slide #### +title: Legal resources +---- +description: +- The EFF Tor Legal FAQ: <https://community.torproject.org/relay/community-resources/eff-tor-legal-faq/> +- It's important to respond to abuse complaints in a timely manner (usually within 24 hours). +- Abuse letter templates: <https://community.torproject.org/relay/community-resources/tor-abuse-templates> + + +#### slide #### +title: Tips for running an exit relay +---- +description: +- Get a separate IP for the relay, and don’t use it for other services. +- Set up a Tor Exit Notice, so if someone checks your exit IP they'll know that it’s a Tor Exit. +- If you receive excessive complaints, consider running a Reduced Exit Policy. +- For more tips: <https://blog.torproject.org/tips-running-exit-node> + + +#### slide #### +title: Running relays with others +---- +slide_layout: title-slide +---- +background_image: /static/images/onion-white.png +---- +description: +- + + +#### slide #### +title: Running a relay with others +---- +description: +- You can work with your university department, employer or institution, or an organization like Torservers.org, Nos oignons, etc. +- Some organizations – known as Relay Associations – are solely dedicated to this purpose: <https://community.torproject.org/relay/community-resources/relay-associations/>. + + +#### slide #### +title: Relays associations +---- +description: +- It's often advised to create some type of non-profit organization. This is useful for having a bank account and shared ownership. +- The most important thing is to have a group of people (3-5 suggested to start) interested in helping. + + +#### slide #### +title: Running a relay with universities +---- +description: +- Universities are typically home to a reliable, robust, and well-equipped network. +- Many computer science departments and university libraries run relays: Massachusetts Institute of Technology, Universität Stuttgart, the University of Waterloo. + +#### slide #### +title: Running a relay with universities +---- +description: +- Read more: <https://community.torproject.org/relay/community-resources/tor-relay-universities/> + + + +#### slide #### +title: At your company or organization +---- +description: +- If you work at a Tor-friendly company or organization, that's another ideal place to run a relay. +- Companies like Brass Horn Communications, Quintex Alliance Consulting, and many others run relays. +- And organizations like Digital Courage, Access Now, Derechos Digitales, Calyx Institute, and Lebanon Libraries in New Hampshire. + + +#### slide #### +title: Bad relays +---- +slide_layout: title-slide +---- +background_image: /static/images/onion-white.png +---- +description: +- + + +#### slide #### +title: What is a bad relay? +---- +description: +- A bad relay is one that either doesn't work properly or tampers with our users' connections. That can be either through maliciousness or misconfiguration. + + +#### slide #### +title: What is a bad relay? +---- +description: +- For example: tampering with exit traffic in any way (including dropping accepted connections). Or, running HSDirs that harvest and probe .onion addresses + + +#### slide #### +title: Reporting a bad relay +---- +description: +- The "Bad relays" private working group at the Tor Project work to detect misconfigured, malicious, or suspicious relays. +- Users can report bad relays by sending an email to bad-relays@lists.torproject.org with the relay’s IP address or fingerprint, what kind of behavior you see, and any additional information needed to reproduce the issue. + + +#### slide #### +title: What happens to bad relays? +---- +description: +- After a relay is reported and behavior has been verified, the Tor Project will attempt to contact the relay operator. +- The relay will be flagged to prevent it from being used (BadExit, Invalid, Reject). +- The working group actively looks for bad relays using open source tools like exitmap, sysbilhunter. + + +#### slide #### +title: How do I get help running a Tor relay? +---- +slide_layout: title-slide +---- +background_image: /static/images/onion-white.png +---- +description: +- + + +#### slide #### +title: Getting help +---- +description: +- Read the Tor Relay documentation: + <https://community.torproject.org/relay> +- Subscribe to the tor-relays mailing list: <https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-relays> +- Join our IRC channel: #tor-relays in irc.oftc.net + + +#### slide #### +title: Thank you! +---- +slide_layout: title-slide +---- +background_image: /static/images/onion-white.png +---- +description: +- diff --git a/flowblocks/slide.ini b/flowblocks/slide.ini index 23cf3fb..78effe7 100644 --- a/flowblocks/slide.ini +++ b/flowblocks/slide.ini @@ -6,6 +6,11 @@ label = Title type = markdown translate = True +[fields.subtitle] +label = Subtitle +type = markdown +translate = True + [fields.description] label = Description type = markdown @@ -15,16 +20,24 @@ translate = True label = Image type = select source = record.attachments.images +translate = False [fields.background] label = Background color type = string +translate = False -[fields.layout] +[fields.slide_layout] label = Slide layout type = string +translate = False -[fields.background-image] +[fields.background_image] label = Background image type = string translate = False + +[fields.author] +label = Author +type = string +translate = False diff --git a/models/page.ini b/models/page.ini index 0671112..61ad278 100644 --- a/models/page.ini +++ b/models/page.ini @@ -15,6 +15,7 @@ translate = True [fields.section] label = Section type = string +translate = True [fields.cta] label = Call To Action diff --git a/models/project.ini b/models/project.ini new file mode 100644 index 0000000..0590259 --- /dev/null +++ b/models/project.ini @@ -0,0 +1,51 @@ +[model] +name = Project +label = {{ this.title }} + +[fields.title] +label = Title +type = string + +[fields.url] +label = url +type = url + +[fields.active] +label = Active +type = boolean + +[fields.completed] +label = Completed +type = boolean + +[fields.subtitle] +label = Subtitle +type = markdown + +[fields.color] +label = Color +type = string + +[fields.body] +label = body +type = markdown + +[fields.mentors] +label = Mentors +type = strings + +[fields.languages] +label = Languages +type = strings + +[fields.difficulty] +label = Difficulty Level +type = string + +[fields.html] +label = Html +type = string + +[fields.key] +label = key +type = string diff --git a/models/projects.ini b/models/projects.ini new file mode 100644 index 0000000..c09bf77 --- /dev/null +++ b/models/projects.ini @@ -0,0 +1,33 @@ +[model] +name = Projects +label = {{ this.title }} + +[fields.title] +label = Title +type = string + +[fields.section] +label = Section +type = string +translate = True + +[fields.section_id] +label = Section_id +type = string +translate = False + +[fields.body] +label = Body +type = markdown + +[fields.color] +label = Color +type = string + +[fields.html] +label = Html +type = string + +[children] +model = project +order_by = title diff --git a/models/slideshow.ini b/models/slideshow.ini new file mode 100644 index 0000000..3f2062f --- /dev/null +++ b/models/slideshow.ini @@ -0,0 +1,43 @@ +[model] +name = Slideshow +label = {{ this.title }} + +[fields.title] +label = Title +type = string +translate = True + +[fields.description] +label = Description +type = string +translate = True + +[fields.author] +label = Author +type = string +translate = False + +[fields.subtitle] +label = Subtitle +type = string +translate = True + +[fields.slides] +label = Slides +type = flow +flow_blocks = slide + +[fields.color] +label = Color +type = string +translate = False + +[fields.image] +label = image +type = string +translate = False + +[fields.background] +label = background +type = string +translate = False diff --git a/models/text.ini b/models/text.ini index 75e24ba..380668d 100644 --- a/models/text.ini +++ b/models/text.ini @@ -1,7 +1,9 @@ [model] name = Text label = Text +translate = True [fields.body] label = Body type = text +translate = True diff --git a/templates/blocks/slide.html b/templates/blocks/slide.html index 5f96574..2d89823 100644 --- a/templates/blocks/slide.html +++ b/templates/blocks/slide.html @@ -1,5 +1,20 @@ -<section data-background-color="{{ this.background }}"> - <h2>{{ this.title }}</h2> - {{ this.description }} - -</section> +{% if this.slide_layout == "title-slide" %} + <section class="title" data-background-color="white" {% if this.background_image %} data-background-image="{{ this.background_image|asseturl }}" data-background-position="right bottom" data-background-size="3em" {% endif %} > + <h3>{{ this.title }}</h3> + <hr class="dark" /> + {% if this.subtitle %} + <h4>{{ this.subtitle }}</h4> + {% endif %} + {% if this.author %} + <h5>{{ this.author }}</h5> + {% endif %} + </section> +{% else %} + <section {% if this.background != "white" %} data-background-color="{{ this.background }}" {% else %} data-background-color="white" {% endif %} > + <h2>{{ this.title }}</h2> + {{ this.description }} + {% if this.image %} + <img data-src="{{ this.image }}"> + {% endif %} + </section> +{% endif %} diff --git a/templates/onion-services.html b/templates/onion-services.html index a42891a..603d459 100644 --- a/templates/onion-services.html +++ b/templates/onion-services.html @@ -32,7 +32,7 @@ {{ _('Check out the code') }}<i class="ml-3 pt-2 fas fa-arrow-right"></i> </a> </div> - <div class="row py-5 text-center mx-auto"> + <div id="featured-onions" class="row py-5 text-center mx-auto"> <h2 class="display-4 text-primary text-center mx-auto">{{ _('Featured .onion sites') }}</h2> </div> <div class="row mx-auto"> diff --git a/templates/outreach-talk.html b/templates/outreach-talk.html index 72443f8..ce98d72 100644 --- a/templates/outreach-talk.html +++ b/templates/outreach-talk.html @@ -52,7 +52,7 @@ <span class="display-4 text-primary"> <i class="fas fa-hand-holding-heart pb-4"></i> </span> - <h2 class="card-title">{{ _('Tor software is developed by the Tor Project, a 501(c)3 nonprofit organization.') }}</h2> + <h2 class="card-title">{{ _('Tor software is developed by the Tor Project, a 501(c)(3) nonprofit organization.') }}</h2> <p class="card-text">{{ _('We build free and open source software anyone can use.') }}</p> </div> </div> diff --git a/templates/relay-operations.html b/templates/relay-operations.html index 7690b3b..1109d78 100644 --- a/templates/relay-operations.html +++ b/templates/relay-operations.html @@ -21,7 +21,7 @@ </div> <div class="row py-5 text-center mx-auto"> <h2 class="display-4 text-primary text-center mx-auto my-3">{{ _('Connect with other Relay Operators') }}</h2> - <p class="text-center">{{ _('The best resource of all is the active community of relay operators on tor-relays mailing list and on IRC #tor-relays in irc.oftc.net. ') }}</p> + <p class="text-center">{{ _('The best resource of all is the active community of relay operators on tor-relays mailing list and on IRC') }} <a href="https://webchat.oftc.net/?channels=tor-relays" target="_blank">{{_('#tor-relays') }}</a> {{ _('in irc.oftc.net.') }}</p> <a class="btn btn-lg btn-outline-primary mx-auto my-3" href="https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-relays"> {{ _('Relay Operators mailing list') }}<i class="ml-3 pt-2 fas fa-arrow-right"></i> </a> diff --git a/templates/slideshow.html b/templates/slideshow.html index f1d6065..c6b330e 100644 --- a/templates/slideshow.html +++ b/templates/slideshow.html @@ -16,24 +16,26 @@ <body> <div class="reveal"> <!-- Any section element inside of this container is displayed as a slide --> - <div class="slides"> - <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> + <div class="slides {{ bag('alternatives', this.alt, 'order') }}"> + <section> + <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> - {{ this.slides }} + {{ this.slides }} - <div class="footer"> - <div class="left"> - <a href="https://torproject.org">torproject.org</a> - </div> - <div class="right"> - <img src="{{ '/static/images/tor-logo/White.png'|asseturl }}"> + <div class="footer"> + <div class="left"> + <a href="https://torproject.org">torproject.org</a> + </div> + <div class="right"> + <img src="{{ '/static/images/tor-logo/White.png'|asseturl }}"> + </div> </div> - </div> + </section> </div> </div>