fix texts for mobile

cyberflaneuse · Mar 24, 2017 · d57b0e3 · d57b0e3
1 parent f46d9b9
commit d57b0e3
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 20 deletions.
diff --git a/amtrex.css b/amtrex.css
@@ -6,19 +6,18 @@
 }
 
 .yellow {
-    padding: 40px 140px;
-    padding-right: 320px;
+    padding: 40px 0;
     text-align: justify;
 }
 
 .quote {
+    background: -webkit-linear-gradient(top left, #FFFFCC, yellow);
     background: linear-gradient(to bottom right, #FFFFCC, yellow); /* Standard syntax */
     font-family: 'Monospace';
     font-style: italic;
     font-weight: 500;
     font-style: italic;
     font-size: 18px;
-    line-height: 1.7;
 }
 
 .source {
@@ -41,3 +40,13 @@
 .footer {
     border-top: black 1px solid;
 }
+
+@media (min-width: @screen-sm-min) {
+    .yellow {
+        padding: 40px 140px;
+        padding-right: 320px;
+    }
+    .quote {
+        line-height: 1.7;
+    }
+}
diff --git a/pugs/what-to-do.pug b/pugs/what-to-do.pug
@@ -1,32 +1,32 @@
 .container.first
     h2 What you might do
-    p.text I'll take it simple: 
+    p.text I'll take it simple:
         a(href="https://www.ublock.org/" target="_blank") install ublock (a kind of adblocker) and disable it only for news websites
         |.
 
 .container
     h2 What the companies might do for your protection
-    p.text The companies have only a partial fault, they are in a Nation in which a gag order can force them to cooperate. A anticipated advice list was the one 
+    p.text The companies have only a partial fault, they are in a Nation in which a gag order can force them to cooperate. A anticipated advice list was the one
         a(href='https://www.eff.org/deeplinks/2016/11/tech-companies-fix-these-technical-issues-its-too-late') EFF made when Trump was still president Elected
         |.
     h3 Some practical question for their employees:
     ul.text
         li How easy is it to link the collected profiles to a phone number (and to a physical ID)? Can you minimize your data collected into groups of users instead of keeping personal behavior&apos;s history? We will assume you are keeping individual personal profile unless otherwise stated.
-        li The access itself to such website creates 
+        li The access itself to such website creates
             a(href='https://www.teachprivacy.com/sensitive-data-different-definitions-privacy-law/', target='_blank') sensitive data
             |; Would be appropriate treat all users navigating in those sites
             b as if
-            |  they have 
+            |  they have
             a(href='https://en.wikipedia.org/wiki/Do_Not_Track', target='_blank') Do Not Track
-            |  enabled (Note: 
+            |  enabled (Note:
             a(href="http://abcnews.go.com/Technology/wireStory/facebook-data-surveillance-46104496") Facebook gave a nice declaration of intent
-            |; Indeed they display a 
+            |; Indeed they display a
             a(href="https://theintercept.com/2017/03/02/palantir-provides-the-engine-for-donald-trumps-deportation-machine/") different style compared to Palantir
             |, but still, technical solutions like the end2end deployment gives a measurable security, words are nice but words don't protect against Intelligence infiltrating Facebook nor against National Security Letters)
         li Can you disclose the amount and the kind of metadata you collect? considering these data describe societal behavior, knowing who has more metadata is in the public interest.
-        li If your company, ever got any request of user selection based on their religious beliefs: send a tip off to the investigative journalists of 
+        li If your company, ever got any request of user selection based on their religious beliefs: send a tip off to the investigative journalists of
             a(href='https://www.propublica.org/article/how-to-leak-to-propublica', target='_blank') ProPublica
-            | , they wrote this 
+            | , they wrote this
             a(href='https://www.propublica.org/article/facebook-lets-advertisers-exclude-users-by-race', target='_blank') story on racial profiling performed by Facebook
             | : but how many other companies can do the same?
         li Have you ever been compromised? do you have any mechanism that might prevent unfaithful employee or remote attacker to steal profile based data from your server? We have to assume you are not protected if not otherwise stated.
@@ -39,9 +39,9 @@
             | ? Forward them the requests above, they will rather listen to a friend like you than a website like us.
         li
             b Protect yourself
-            | : check it out how reduce your 
+            | : check it out how reduce your
             a(href='https://myshadow.org/prevent-online-tracking') Digital Shadow
-            | , or look at 
+            | , or look at
             a(href='http://www.internetsociety.org/your-digital-footprint/what-is') these videos of Internet Society
             |  if you want know more.
         li
@@ -50,13 +50,13 @@
 
 .container
     h2 F.A.Q.
-    p.lighter
+    p.text
         b How do we found the trackers?
-        |  this analysis is done with the same approach used by 
+        |  this analysis is done with the same approach used by
         a(href='https://webtransparency.cs.princeton.edu/webcensus/', target='_blank') Princeton University WebCensus
-        |  done 1 year ago. The technology used is the advancement of 
+        |  done 1 year ago. The technology used is the advancement of
         a(href='https://trackography.org') Trackography
-        | , now 
+        | , now
         a(href='https://invi.sible.link') invi.sible.link
         | . The process of attribution between third party trackers → company name → company nation is quite manual, slow, and open to mistakes.
     p.text

diff --git a/scaffolding.css b/scaffolding.css
@@ -73,15 +73,16 @@ h1, h2, h3, h4, h5 {
 }
 
 .firstcontent {
-    padding-top: 70px;
+    padding-top: 200px;
 }
 
 .text {
     font-family: 'Work Sans', sans-serif;
+    text-align: justify;
 }
 
 .text, .nav-tabs.nav-justified {
-    width: 55%;
+    width: 100%;
 }
 
 .nav-tabs.nav-justified {
@@ -103,7 +104,7 @@ img {
 }
 
 .first {
-    margin-top: 140px;
+    margin-top: 200px;
 }
 
 ul.text li {
@@ -123,3 +124,16 @@ p.text a {
     font-weight: bold;
     text-decoration: underline;
 }
+
+@media (min-width: @screen-sm-min) {
+    .firstcontent {
+        padding-top: 70px;
+    }
+    .text, .nav-tabs.nav-justified {
+        width: 55%;
+        text-align: left;
+    }
+    .first {
+        margin-top: 140px;
+    }
+}