Commit 43c2341d authored by sajolida's avatar sajolida

Make the new About page responsive

We're replacing Bootstrap 3 by pure CSS Flex. Yay!
parent db0b8732
@import url("common.css");
.row img {
display: block;
section {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.image {
width: 350px;
}
.text {
width: 450px;
margin-left: 50px;
}
/* Content is always ordered image → title → text in the HTML but images
* are displayed alternatively on the left and on the right on big
* screens. */
@media (min-width: 880px) {
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
}
section img {
margin-top: 100px !important;
margin-bottom: 2em;
}
......@@ -30,12 +56,10 @@ h2 {
.big {
font-size: 20px;
max-width: 420px;
}
.medium {
color: #666;
max-width: 400px;
}
.links {
......
[[!pagetemplate template="topbar.tmpl"]]
[[!meta title="How Tails works"]]
[[!meta stylesheet="bootstrap.min" rel="stylesheet" title=""]]
[[!meta stylesheet="staging/about" rel="stylesheet" title=""]]
[[!meta robots="noindex"]]
<h1>Leave no trace on the computer</h1>
<div class="row">
<section>
<div class="col-md-7">
<div class="image order-1">
<img src="https://anhdr.es/tails/img/tails_2.1_anywhere.png" alt=""/>
<p><i class="metaphor">Like a tent, you can carry Tails with you and use it anywhere.</i></p>
<!--
P7: [DONE] Does not understand the USB tent
P7: [DONE] coworking-tent le parece rebuscada
P7: [DONE] Would put the computer inside the tent
P8: [DONE] Doesn't understand the USB tent
P8: [DONE] Thinks that coworking-tent is clearer
P9: [DONE] Likes better the laptop inside the tent, the others feel like you have to hide (vs. security should be normal)
-->
</div>
<div class="text order-2">
<h2>Your secure computer anywhere</h2>
......@@ -63,28 +79,11 @@ P5: [DONE] "Instead of Win/mac" [had to be read twice, sentence structure] reads
</div>
<div class="col-md-5">
<img src="https://anhdr.es/tails/img/tails_2.1_anywhere.png" alt=""/>
<p><i class="metaphor">Like a tent, you can carry Tails with you and use it anywhere.</i></p>
<!--
P7: [DONE] Does not understand the USB tent
P7: [DONE] coworking-tent le parece rebuscada
P7: [DONE] Would put the computer inside the tent
P8: [DONE] Doesn't understand the USB tent
P8: [DONE] Thinks that coworking-tent is clearer
P9: [DONE] Likes better the laptop inside the tent, the others feel like you have to hide (vs. security should be normal)
-->
</div>
</div>
</section>
<div class="row follow">
<section>
<div class="col-md-5">
<div class="image order-2">
<img src="https://anhdr.es/tails/img/tails_2.2_amnesia.png" alt=""/>
......@@ -107,7 +106,7 @@ P8: [DONE] Doesn't understand the link between setting-up.png
</div>
<div class="col-md-7">
<div class="text order-1">
<h2>Amnesia</h2>
......@@ -141,11 +140,32 @@ P5: [WORK] This property is important, means there's no connection to the existi
</div>
</div>
</section>
<section>
<div class="image order-1">
<img src="https://anhdr.es/tails/img/tails_2.3_persistent.png" alt=""/>
<!--
XX: Add some reference between the backpack and the tent: tent in the background
P9: [DONE] Doesn't like the big safe
P11: [WORK] Prefers the backpack with chains because the backpack is your stuff and it is safe
The lock with key is too much about the key and not about your stuff
Keep it away. Don't touch it!
P12: [WORK] The key means that it is well closed
P12: [WORK] Prefers 2nd because it's more clear that it's my backpack
P12: [DONE] Doesn't like the big safe
-->
<div class="row follow">
<i class="metaphor">Like a backpack, you can store your personal things in your Persistent Storage
and use them in your tent.</i>
<div class="col-md-7">
</div>
<div class="text order-2">
<h2>Encrypted Persistent Storage</h2>
......@@ -198,38 +218,17 @@ P8: [WORK] Understands the relationship between Amnesia and Persistence
</div>
<div class="col-md-5">
<img src="https://anhdr.es/tails/img/tails_2.3_persistent.png" alt=""/>
<!--
XX: Add some reference between the backpack and the tent: tent in the background
P9: [DONE] Doesn't like the big safe
P11: [WORK] Prefers the backpack with chains because the backpack is your stuff and it is safe
The lock with key is too much about the key and not about your stuff
Keep it away. Don't touch it!
P12: [WORK] The key means that it is well closed
P12: [WORK] Prefers 2nd because it's more clear that it's my backpack
P12: [DONE] Doesn't like the big safe
-->
<i class="metaphor">Like a backpack, you can store your personal things in your Persistent Storage
and use them in your tent.</i>
</div>
</div>
</section>
<div class="row follow">
<section>
<div class="col-md-5">
<div class="image order-2">
<img src="https://anhdr.es/tails/img/tails_2.4_tools.png" alt=""/>
</div>
<div class="col-md-7">
<div class="text order-1">
<h2>Digital security toolbox</h2>
......@@ -284,13 +283,29 @@ P10: [DONE] Stumbles on 'ready-to-use'
</div>
</div>
</section>
<h1 class="follow">Leave no trace on the Internet</h1>
<div class="row">
<section>
<div class="image order-1">
<img src="https://anhdr.es/tails/img/tails_3.1_relays.png" alt=""/>
<!--
P10: Finds the bear funny
P10: Likes the bear that represents threats
P11: Likes the eyes better than the bear: all the eyes trying to spy on you but they can't
P9: [DONE] Le gusta más sin números
P12: [WONT: Contradictory feedback] Likes better the one with numbers
P12: [DONE] Gets that the image represents the Tor relays with the one with the tent, not so much with the bear
-->
</div>
<div class="col-md-7">
<div class="text order-2">
<h2>Tor for everything</h2>
......@@ -342,27 +357,11 @@ P8: [DONE] Doesn't know "relay"
</div>
<div class="col-md-5">
<img src="https://anhdr.es/tails/img/tails_3.1_relays.png" alt=""/>
<!--
P10: Finds the bear funny
P10: Likes the bear that represents threats
P11: Likes the eyes better than the bear: all the eyes trying to spy on you but they can't
P9: [DONE] Le gusta más sin números
P12: [WONT: Contradictory feedback] Likes better the one with numbers
P12: [DONE] Gets that the image represents the Tor relays with the one with the tent, not so much with the bear
-->
</div>
</div>
</section>
<div class="row follow">
<section>
<div class="col-md-5">
<div class="image order-2">
<img src="https://anhdr.es/tails/img/tails_3.2_walkietalkies.png" alt=""/>
......@@ -378,7 +377,7 @@ P12: [WORK] The card could be intercepted. The phone line could be cut.
</div>
<div class="col-md-7">
<div class="text order-1">
<h2>Avoid online surveillance and censorship</h2>
......@@ -408,11 +407,17 @@ P2: [DONE] Censorship: Tor but also something else? because Tor works very bad i
</div>
</div>
</section>
<section>
<div class="image order-1">
<div class="row follow">
<img src="https://anhdr.es/tails/img/tails_3.3_footprints.png" alt=""/>
</div>
<div class="col-md-7">
<div class="text order-2">
<h2>Avoid tracking and change identity</h2>
......@@ -441,19 +446,13 @@ P8: [DONE] Has a hard time thinking about what he could change his identity for
</div>
<div class="col-md-5">
<img src="https://anhdr.es/tails/img/tails_3.3_footprints.png" alt=""/>
</div>
</div>
</section>
<h1 class="follow">Software for freedom</h1>
<div class="row">
<section>
<div class="col-md-5">
<div class="image order-2">
<img src="https://anhdr.es/tails/img/tails_4.1_blueprint.png" alt=""/>
......@@ -472,7 +471,7 @@ P12: [DONE] Doesn't like the microscope because it's outside of the universe
</div>
<div class="col-md-7">
<div class="text order-1">
<h2>Transparency to build trust</h2>
......@@ -500,11 +499,31 @@ P7: [DONE] verify-tree.png Says that he doesn't have the skills to verify himsel
</div>
</div>
</section>
<div class="row follow">
<section>
<div class="col-md-7">
<div class="image order-1">
<img src="https://anhdr.es/tails/img/tails_4.2_bonfire.png" alt=""/>
<!--
P10: Doesn't really understand. There might be threat to the campfire: rain, etc.
P12: Fire is more about sharing but also about sharing free things, lacks something about security
There could be more contact and strength among the group
P8: [DONE] Finds more meaning in tent-gift over bee
P9: [WORK] Estas seguro y de gratis cuando estas en la montaña
P9: [WORK] Prefers the fire over the gift because it's not a material good
P11: [WORK] After doing your stuff you are save and relax with your friends
P11: [WORK] Doesn't cost anything and you are safe and free in your life
P11: [WORK] Prefer fire because it's more human, not a material thing
P12: [DONE] Gift tent is not suited for "top security"
-->
</div>
<div class="text order-2">
<h2>Top security for free</h2>
......@@ -539,31 +558,11 @@ P5: [DONE] Who's supporting you? Wants to see names/logos. [Add link]
</div>
<div class="col-md-5">
<img src="https://anhdr.es/tails/img/tails_4.2_bonfire.png" alt=""/>
<!--
P10: Doesn't really understand. There might be threat to the campfire: rain, etc.
P12: Fire is more about sharing but also about sharing free things, lacks something about security
There could be more contact and strength among the group
P8: [DONE] Finds more meaning in tent-gift over bee
P9: [WORK] Estas seguro y de gratis cuando estas en la montaña
P9: [WORK] Prefers the fire over the gift because it's not a material good
P11: [WORK] After doing your stuff you are save and relax with your friends
P11: [WORK] Doesn't cost anything and you are safe and free in your life
P11: [WORK] Prefer fire because it's more human, not a material thing
P12: [DONE] Gift tent is not suited for "top security"
-->
</div>
</div>
</section>
<div class="row follow">
<section>
<div class="col-md-5">
<div class="image order-2">
<img src="https://anhdr.es/tails/img/tails_4.3_roots.png" alt=""/>
......@@ -582,7 +581,7 @@ P11: [WORK] Prefers the trees because it's about networking (underground)
</div>
<div class="col-md-7">
<div class="text order-1">
<h2>Sharing to be stronger</h2>
......@@ -609,9 +608,9 @@ P3: [WORK] Tails is like a new generation of RedHat
</div>
</div>
</section>
<div class="row button">
<div class="button">
[[Get Tails|install]]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment