Fixes #88 - Made short policy lists inline and semicolon separated on privacy page

pages/privacy.md

Index: pages/privacy.md
===================================================================
--- a/pages/privacy.md
+++ b/pages/privacy.md
@@ -1,93 +1,139 @@
 title=Privacy Policy
 description=This Privacy Policy describes how we use, process and protect information that we collect from you online through our websites and our products.
 notoc=True
 
+<style>
+
+.horizontal-list.semicolon-separated

[ire, 2018/06/20 18:33:19]

See my comment below about the classes being applied to the wrong element. These
styles won't be needed if these classes were applied to the <ul> itself. 

+{
+  display: list-item;
+  list-style: inherit;
+}
+
+.horizontal-list.semicolon-separated ul
+{
+  display: inline;
+  padding: 0;
+}
+
+.horizontal-list.semicolon-separated li

[ire, 2018/06/20 18:33:19]

These styles are already covered by the .horizontal-list class

+{
+  display: inline;
+  list-style: none;
+}
+
+.semicolon-separated li:after
+{
+  content: "; ";
+}
+
+[lang="fr"] .semicolon-separated li:after
+{
+  content: " ; ";
+}
+
+.semicolon-separated li:last-of-type:after
+{
+  content: "";
+}
+
+</style>
+
 <script src="/js/address-masking.js"></script>
 
 - [{{ privacy-notice-short-link[link to heading] Privacy Notice (short version) }}](#privacy-policy-short)
 - [{{ privacy-policy-long-link[link to heading] Privacy Policy (long version) }}](#privacy-policy-long)
 
 ## {{ privacy-policy-short-heading[heading] Privacy Notice (short version) }} {: #privacy-policy-short }
 
 {{ privacy-policy-short-paragraph The following privacy notice shall provide you with a general overview about the collection, processing and use (hereinafter together referred to as "processing") of your personal data. For more information regarding our processing activities, please view our complete [Privacy Policy](#privacy-policy-long). }}
 
 ### {{ data-processed-heading[heading] What kind of personal data do we process? }} {: #data-processed }
 
 1. {{ data-processed-item-1[list item] While using our products: Adblock Plus or Adblock Browser (automatically, except for Issue Reporter) }}
     - {{ data-processed-item-2[list item] Extension updates, subscription downloads, emergency notifications: }}
+    {: .horizontal-list .semicolon-separated }

[ire, 2018/06/20 18:33:19]

NIT: These classes are being applied to the <li>, not the <ul> we're actually
trying to target. I think it's a bit weird to have the `.horizontal-list
.semicolon-separated` being applied to the element that isn't actually a
horizontal list or semicolon separated. 

[juliandoucette, 2018/06/21 12:17:59]

Ack. I'm trying to keep this page in markdown and apply this class the "markdown
way". This is the best way I've come up with. But I'm open to suggestion?

e.g. I could rename the class to .has-horizontal-list or similar as I am
targeting the child list?

         - {{ data-processed-item-3[list item] Browser version }}
         - {{ data-processed-item-4[list item] Extension version }}
         - {{ data-processed-item-5[list item] Operating system }}
         - {{ data-processed-item-6[list item] Date of last update }}
         - {{ data-processed-item-7[list item] IP address }}
         - {{ data-processed-item-8[list item] Additionally, you may manually submit the following information about a web page with a bug using the [Issue Reporter](#issue-reporter): URL, blockable items, matching filters, active filter lists (voluntary) }}
     - {{ data-processed-item-9[list item] Adblock Browser for Android }}
+    {: .horizontal-list .semicolon-separated }
         - {{ data-processed-item-10[list item] eyeo collects no data. Adblock Browser, being based on Mozilla Firefox, provides Firefox specific functionality which, however, may send data to Mozilla. }}
     - {{ data-processed-item-11[list item] Adblock Browser for iOS (automatically): }}
+    {: .horizontal-list .semicolon-separated }
         - {{ data-processed-item-12[list item] Error and crash report data: }}
             - {{ data-processed-item-13[list item] Bundle identifier, bundle version and short bundle version string of Adblock Browser for iOS }}
             - {{ data-processed-item-14[list item] Device type, CPU architecture and version of the operating system }}
             - {{ data-processed-item-15[list item] Timestamp of crash }}
             - {{ data-processed-item-16[list item] UUID }}
             - {{ data-processed-item-17[list item] Plain-text class name and message value of the exception }}
             - {{ data-processed-item-18[list item] Instruction pointer, method or function names, signal data, pointer registers and information about the loaded binary images }}
             - {{ data-processed-item-19[list item] String / function name identifying the error }}
 1. {{ data-processed-item-20[list item] While using our websites: }}
     - {{ data-processed-item-21[list item] Automatically: }}
+    {: .horizontal-list .semicolon-separated }
         - {{ data-processed-item-22[list item] IP address (stored separately) }}
         - {{ data-processed-item-23[list item] The time at which the request was made }}
         - {{ data-processed-item-24[list item] The web address accessed }}
         - {{ data-processed-item-25[list item] The browser identifier }}
         - {{ data-processed-item-26[list item] The referring page }}
         - {{ data-processed-item-32[list item] For adblock.ai only: analytics data }}
     - {{ data-processed-item-27[list item] Voluntary: }}
+    {: .horizontal-list .semicolon-separated }
         - {{ data-processed-item-28[list item] Forum registration data }}
         - {{ data-processed-item-29[list item] Email address }}
         - {{ data-processed-item-30[list item] Data you provide in comments }}
         - {{ data-processed-item-31[list item] Feedback and filter data }}
 
 ### {{ how-we-collect-heading[heading] How do we collect data? }} {: #how-we-collect-data }
 
 {{ list-of-tools[preface] List of techniques and tools we use for data collection: }}
 
 1. {{ tools-item-1[list item] In our products: }}
+{: .horizontal-list .semicolon-separated }
     - {{ tools-item-2[list item] Update checks }}
     - {{ tools-item-3[list item] Subscription downloads }}
     - {{ tools-item-4[list item] Sending issue reports }}
     - {{ tools-item-5[list item] Emergency notification checks }}
 2. {{ tools-item-6[list item] On our websites: }}
+{: .horizontal-list .semicolon-separated }
     - {{ tools-item-7[list item] Cookies, only where you can log in }}
     - {{ tools-item-8[list item] Log files }}
     - {{ tools-item-9[list item] Data, like name and / or email address, sent by you when using our forum or blog, or when sharing manually added filters }}
     - {{ tools-item-10[list item] For adblock.ai only: via Google Analytics }}
 
 ### {{ why-we-process-heading[heading] How and why do we process your data? }} {: #why-we-process-data }
 
 - {{ why-we-process-item-1[list item] In order to inform you about urgent issues in connection with our products. }}
 - {{ why-we-process-item-2[list item] To improve and to evaluate our products by processing and analyzing subscription downloads, extension updates, emergency downloads and issue reports you send to us. }}
 - {{ why-we-process-item-3[list item] For technical purposes, such as, but not limited to, preventing security attacks, to improve our website / products, to ensure website / product security. }}
 - {{ why-we-process-item-4[list item] To analyze aggregated website logs and - at adblock.ai only - analytics data, to improve our website. }}
 - {{ why-we-process-item-5[list item] For communication and assistance purposes in our forum and blog. }}
 
-### {{ what-is-legal[heading] What is the legal basis of data processing? }} {: #what-is-legal } 
+### {{ what-is-legal[heading] What is the legal basis of data processing? }} {: #what-is-legal }
 
 {{ what-is-legal We process your personal data in compliance with the European General Data Protection Regulation (Regulation (EU) 2016/679) (“GDPR”), the applicable EU laws and German national data protection laws. }}
 
-### {{ how-long[heading] How long do we keep data? }} {: #how-long } 
+### {{ how-long[heading] How long do we keep data? }} {: #how-long }
 
 1. {{ how-long-item-1[list item] For a period of 30 days: }}
+{: .horizontal-list .semicolon-separated }
     - {{ how-long-item-2[list item] Issue report data }}
     - {{ how-long-item-3[list item] Crash and error reporter data }}
-    - {{ how-long-item-4[list item] Website logs }} 
+    - {{ how-long-item-4[list item] Website logs }}
     - {{ how-long-item-5[list item] Data related to subscription downloads, extension update checks, emergency notifications }}
     - {{ how-long-item-7[list item] Google Analytics data }}
 2. {{ how-long-item-6[list item] Blog and forum data as long as the respective comment / account exists }}
 
+
 {{ how-long-paragraph **Note**: “Aggregated usage statistics” and other data without any connection to single users may be retained beyond these periods. }}
 
 ### {{ our-values-heading[heading] Our values }} {: #our-values }
 
 {{ our-values-paragraph We collect as little data as possible. As far as anonymous or pseudonymous use is possible we anonymize or pseudonymize your data. }}
 
 ### {{ your-rights-heading[heading] What rights do you have? }} {: #your-rights }