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

pages/privacy.md

 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 }
 
 - {{ your-right-item-1[list item] Receive information about the personal data processed by us and how we process your data as well as to gain access to such data. }}
 - {{ your-right-item-2[list item] Rectify inaccurate personal data and restrict details. }}
@@ skipping 306 matching lines @@
 ###### {{ retention-communications-heading[heading] Email collection }} {: #retention-communications }
 
 {{ retention-communications-paragraph-1 Data provided by you in connection with our blog and our forum will be retained for the same time as the comment and / or your account exists. }}
 
 {{ retention-communications-paragraph-2 In general, we do not store your email address unless it’s specifically required to execute the related campaign (i.e. email signups for a newsletter or signing up to get notified about a product launch). In cases where we do store your email address, we only store it for the length of time that is needed to execute the campaign (i.e. once you’ve been notified of the launch). }}
 
 <time datetime="2018-06">{{ publication-date June 2018 }}</time>
 
 *[{{ gdpr-abbr[GDPR abbreviation] GDPR }}]: {{gdpr-abbr-dfn[General Data Protection Regulation abbreviation definition] General Data Protection Regulation }}
 *[{{ eu-abbr[EU abbreviation] EU }}]: {{eu-abbr-dfn[European Union abbreviation definition] European Union }}