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

static/css/defaults.css

 /*!
  * This file is part of website-defaults
  * Copyright (C) 2016-present eyeo GmbH
  *
  * website-defaults is free software: you can redistribute it and/or
  * modify it under the terms of the GNU General Public License as published by
  * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
  * website-defaults is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with website-defaults.  If not, see <http://www.gnu.org/licenses/>.
  */
+.unstyled,
+.unstyled * {
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  background: none !important;
+  list-style: none !important; }
+
+.sr-only {
+  position: absolute !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: -1px !important;
+  padding: 0 !important;
+  border: 0 !important; }
+
+.bg-primary {
+  color: #fff;
+  background-color: #000; }
+
+.bg-secondary {
+  color: #eee;
+  background-color: #424242; }
+
+.bg-accent {
+  color: #e3f2fd;
+  background-color: #0d47a1; }
+
+.bg-error {
+  color: #ffebee;
+  background-color: #b71c1c; }
+
+/**
+ * Center within a responsive fixed width
+ * Use modifier classes defined in _width.scss to change said fixed width
+ */
+.container, .navbar-container {
+  width: 1140px;
+  max-width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 1em;
+  padding-left: 1em; }
+
+/** Clear without collapsed margin */
+.clearfix:after, .content:after, .navbar:after,
+.clearfix:before,
+.content:before,
+.navbar:before {
+  display: table;
+  content: " "; }
+
+.clearfix:after, .content:after, .navbar:after {
+  clear: both; }
+
+/** Align a block to the start of a line */
+.float-start {
+  float: left; }
+
+[dir="rtl"] .float-start {
+  float: right; }
+
+/** Align a block to the end of a line */
+.float-end {
+  float: right; }
+
+[dir="rtl"] .float-end {
+  float: left; }
+
+.lead {
+  font-size: 1.25em; }
+
+.text-center {
+  text-align: center; }
+
+.text-left {
+  text-align: left; }
+
+.text-right {
+  text-align: right; }
+
+.text-start {
+  text-align: left; }
+
+[dir="rtl"] .text-start {
+  text-align: right; }
+
+.text-end {
+  text-align: right; }
+
+[dir="rtl"] .text-end {
+  text-align: left; }
+
+/** Force full-width  */
+.full-width {
+  display: block;
+  width: 100%; }
+
+/** Fix a block to the width of a phone */
+.phone-width {
+  width: auto; }
+
+/** Fix a block to the width of a phablet */
+.phablet-width {
+  width: 540px; }
+
+/** Fix a block to the width of a tablet */
+.tablet-width {
+  width: 720px; }
+
+/** Fix a block to the width of a desktop */
+.desktop-width {
+  width: 960px; }
+
+/** Fix a block to the width of a large desktop */
+.large-desktop-width {
+  width: 1140px; }
+
+/*******************************************************************************
+ * Lists
+ ******************************************************************************/
+/* Horizontal List
+ ******************************************************************************/
+.horizontal-list,
+.horizontal-list li {
+  display: inline;
+  list-style: none; }
+
+.horizontal-list,
+.content .horizontal-list,
+[dir="rtl"] .horizontal-list {
+  padding: 0; }
+
+.comma-separated li::after {
+  content: ",";
+  margin-right: 0.2em; }
+
+.comma-separated li:last-child::after {
+  content: none; }
+
+/******************************************************************************
+ * Fonts
+ *****************************************************************************/
+/* cyrillic-ext
+ ******************************************************************************/
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Source Sans Pro Light"), local("SourceSansPro-Light"), url("../fonts/Source-Sans-Pro/300/cyrillic-ext.woff2") format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), url("../fonts/Source-Sans-Pro/400/cyrillic-ext.woff2") format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), url("../fonts/Source-Sans-Pro/700/cyrillic-ext.woff2") format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
+
+/* cyrillic
+******************************************************************************/
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Source Sans Pro Light"), local("SourceSansPro-Light"), url("../fonts/Source-Sans-Pro/300/cyrillic.woff2") format("woff2");
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), url("../fonts/Source-Sans-Pro/400/cyrillic.woff2") format("woff2");
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), url("../fonts/Source-Sans-Pro/700/cyrillic.woff2") format("woff2");
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
+
+/* greek-ext
+******************************************************************************/
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Source Sans Pro Light"), local("SourceSansPro-Light"), url("../fonts/Source-Sans-Pro/300/greek-ext.woff2") format("woff2");
+  unicode-range: U+1F00-1FFF; }
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), url("../fonts/Source-Sans-Pro/400/greek-ext.woff2") format("woff2");
+  unicode-range: U+1F00-1FFF; }
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), url("../fonts/Source-Sans-Pro/700/greek-ext.woff2") format("woff2");
+  unicode-range: U+1F00-1FFF; }
+
+/* greek
+******************************************************************************/
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Source Sans Pro Light"), local("SourceSansPro-Light"), url("../fonts/Source-Sans-Pro/300/greek.woff2") format("woff2");
+  unicode-range: U+0370-03FF; }
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), url("../fonts/Source-Sans-Pro/400/greek.woff2") format("woff2");
+  unicode-range: U+0370-03FF; }
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), url("../fonts/Source-Sans-Pro/700/greek.woff2") format("woff2");
+  unicode-range: U+0370-03FF; }
+
+/* vietnamese
+******************************************************************************/
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Source Sans Pro Light"), local("SourceSansPro-Light"), url("../fonts/Source-Sans-Pro/300/vietnamese.woff2") format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; }
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), url("../fonts/Source-Sans-Pro/400/vietnamese.woff2") format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; }
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), url("../fonts/Source-Sans-Pro/700/vietnamese.woff2") format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; }
+
+/* latin-ext
+******************************************************************************/
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Source Sans Pro Light"), local("SourceSansPro-Light"), url("../fonts/Source-Sans-Pro/300/latin-ext.woff2") format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), url("../fonts/Source-Sans-Pro/400/latin-ext.woff2") format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), url("../fonts/Source-Sans-Pro/700/latin-ext.woff2") format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
+
+/* latin
+******************************************************************************/
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Source Sans Pro Light"), local("SourceSansPro-Light"), url("../fonts/Source-Sans-Pro/300/latin.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; }
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), url("../fonts/Source-Sans-Pro/400/latin.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; }
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), url("../fonts/Source-Sans-Pro/700/latin.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; }
+
 /*******************************************************************************
  * CSS Reset
  ******************************************************************************/
 /* Reset margins, paddings, and font globally */
 html, body,
 h1, h2, h3, h4, h5, h6,
-a, p, span,
+a,
+.button-link, p, span,
 em, small, strong, sub, sup,
 strike, s, mark, del, ins,
 abbr, dfn,
 blockquote, q, cite,
 code, pre,
 kbd, samp, var, output, ruby,
 ol, ul, li, dl, dt, dd,
 div, section, article,
 main, aside, nav,
 header, hgroup, footer,
@@ skipping 53 matching lines @@
 q:after {
   content: "";
   content: none; }
 
 /* Share borders between adjacent cells (opinionated) */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
 /* Normalize inline content (opinionated) */
+i,
+em {
+  font-style: italic; }
+
 b,
 strong {
   font-weight: bolder; }
 
 small {
   font-size: smaller; }
 
 abbr {
   text-decoration: underline;
   cursor: help; }
 
 sup {
   position: relative;
   font-size: 75%;
   vertical-align: super; }
 
+
 a,
-a:visited {
+.button-link,
+a:visited,
+.button-link:visited {
   color: inherit;
   /* Remove the gray background on active links in IE 10. */
   background-color: transparent;
   text-decoration: none;
   /* Set default pointer regardless of href (opinionated) */
   cursor: pointer; }
 
-a:hover,
+a:hover, .button-link:hover,
 a:active,
-a:focus {
+.button-link:active,
+a:focus,
+.button-link:focus {
   text-decoration: underline; }
 
 img {
   /* Make fixed width images responsive */
   max-width: 100%;
   /* Remove the border on images inside links in IE 10-. */
   border-style: none; }
 
 /* Set correct display for hidden attribute in IE 10-  */
 [hidden] {
-  display: none; }
-
-/*******************************************************************************
- * Utilities
- ******************************************************************************/
-/* Responsive widths
- ******************************************************************************/
-/**
- * Stretch content (e.g. images) full-width
- */
-.full-width {
-  display: block;
-  width: 100%; }
-
-/**
- * Center content within a (responsive) fixed width
- */
-.container {
-  width: 1140px;
-  max-width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: 1em;
-  padding-left: 1em; }
-
-/* Device widths
- ******************************************************************************/
-.phone-width {
-  width: auto; }
-
-.phablet-width {
-  width: 540px; }
-
-.tablet-width {
-  width: 720px; }
-
-.desktop-width {
-  width: 960px; }
-
-.large-desktop-width {
-  width: 1140px; }
-
-/* Text alignment
- ******************************************************************************/
-.text-center {
-  text-align: center; }
-
-.text-left {
-  text-align: left; }
-
-.text-right {
-  text-align: right; }
-
-.text-start {
-  text-align: left; }
-
-[dir="rtl"] .text-start {
-  text-align: right; }
-
-.text-end {
-  text-align: right; }
-
-[dir="rtl"] .text-end {
-  text-align: left; }
-
-/* Floats
- ******************************************************************************/
-.float-start {
-  float: left; }
-
-[dir="rtl"] .float-start {
-  float: right; }
-
-.float-end {
-  float: right; }
-
-[dir="rtl"] .float-end {
-  float: left; }
-
-/* Clearfix
- ******************************************************************************/
-.clearfix:after, .content:after,
-.clearfix:before,
-.content:before {
-  display: table;
-  content: " "; }
-
-.clearfix:after, .content:after {
-  clear: both; }
-
-/* Screen reader only
- ******************************************************************************/
-.sr-only {
-  position: absolute;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0; }
-
-/* Unstyled elements
- ******************************************************************************/
-.unstyled,
-.unstyled *,
-.content .unstyled,
-.content .unstyled * {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: none; }
-
-.unstyled ul,
-ul.unstyled,
-.unstyled li,
-li.unstyled {
-  list-style: none; }
-
-/* Backgrounds
- ******************************************************************************/
-.bg-primary {
-  color: #fff;
-  background-color: #000; }
-
-.bg-secondary {
-  color: #eee;
-  background-color: #424242; }
-
-.bg-accent {
-  color: #e3f2fd;
-  background-color: #0d47a1; }
-
-.bg-error {
-  color: #ffebee;
-  background-color: #b71c1c; }
-
-/* Lead
- ******************************************************************************/
-.lead {
-  font-size: 1.25em; }
-
-@media (max-width: 767px) {
-  .lead {
-    font-size: 1.125em; } }
+  display: none !important; }
 
 /*******************************************************************************
  * Base styles
  ******************************************************************************/
 html {
   color: #212121;
   background-color: #fff;
-  font-family: sans-serif;
+  font-family: "Source Sans Pro", Arial, sans-serif;
   line-height: 1.5; }
 
 /*******************************************************************************
  * Content styles
  *******************************************************************************
  * 1. Document
  * 2. Headings
  * 3. Body content
  ******************************************************************************/
 .content {
@@ skipping 15 matching lines @@
     margin: 1em 0em; }
   .content h1,
   .content h2,
   .content h3,
   .content h4,
   .content h5,
   .content h6 {
     /* Margin on top **only** (opinionated) */
     margin: 2em 0em 0.5em 0em;
     /* All headings should be bold (opinionated) */
-    font-weight: 600; }
+    font-weight: 700; }
   .content h1 {
     font-size: 2em; }
   .content h2 {
     font-size: 1.5em; }
   .content h3 {
-    font-size: 1.25em; }
+    font-size: 1.15em;
+    margin-top: 1.5em; }
   .content h4 {
     font-size: 1em; }
   .content h5 {
     font-size: 0.8em; }
   .content h6 {
     font-size: 0.7em; }
-  .content a,
-  .content a:visited {
+  .content a, .content .button-link,
+  .content a:visited,
+  .content .button-link:visited {
     color: #1565c0; }
   .content hr {
     border: 1px solid #eee; }
   .content blockquote {
     padding-left: 1em;
     border-left: 5px solid #9e9e9e; }
   .content [dir="rtl"] blockquote {
     padding-right: 1em;
     padding-left: 0em;
     border-right: 5px solid #eee;
     border-left: 0px; }
   .content ol,
   .content ul {
-    padding-left: 1.5em; }
+    padding-left: 1em; }
   .content [dir="rtl"] ol,
   .content [dir="rtl"] ul {
-    padding-right: 2em;
+    padding-right: 1em;
     padding-left: 0em; }
+  @media (min-width: 960px) {
+    .content ol,
+    .content ul {
+      padding-left: 1.5em; }
+    .content [dir="rtl"] ol,
+    .content [dir="rtl"] ul {
+      padding-right: 1.5em;
+      padding-left: 0em; } }
   .content ol {
     list-style: decimal; }
   .content ul {
     list-style: disc; }
   .content li {
     margin: 0.25em 0em; }
   .content ol ol,
   .content ul ul,
   .content ol ul,
   .content ul ol {
     /* prevent double spacing lists */
     margin: 0em; }
   .content ol ol {
     list-style-type: lower-alpha; }
   .content dt {
     /* undo browser default (opinionated)*/
-    font-weight: 600; }
+    font-weight: 700; }
   .content dd {
     margin: 0.25em 0em 1em 0em; }
+  .content pre,
+  .content code {
+    font-family: monospace; }
 
 /*******************************************************************************
  * Grid component
  ******************************************************************************/
 /**
  * - .row contains one or more .column(s)
  * - .row clears .column(s)
  * - .row negates the left & right padding of it's left-most & right-most
  *   .column(s) while preserving consistent padding between .column(s)
  */
@@ skipping 38 matching lines @@
   .two-thirds {
     width: 66.666667%; } }
 
 @media (min-width: 992px) {
   .one-fourth {
     width: 25%; }
   .three-fourths {
     width: 75%; } }
 
 /*******************************************************************************
+ * Navbar component
+ ******************************************************************************/
+/* .navbar .navbar-container
+ ****************************************************************************/
+/* .navbar .navbar-branding
+ ****************************************************************************/
+.navbar-branding {
+  padding-top: 1.25em;
+  padding-bottom: 1.25em;
+  line-height: 1; }
+
+.navbar-branding img {
+  height: 2em;
+  vertical-align: text-top; }
+
+/* .navbar .toggle-navbar-collapse
+ ****************************************************************************/
+.toggle-navbar-collapse {
+  display: none;
+  padding-top: 1.5em;
+  padding-bottom: 1.5em; }
+
+.js .toggle-navbar-collapse {
+  display: block; }
+  @media (min-width: 768px) {
+    .js .toggle-navbar-collapse {
+      display: none; } }
+
+/* .navbar .navbar-collapse
+ ****************************************************************************/
+.navbar-collapse {
+  clear: both; }
+  @media (min-width: 768px) {
+    .navbar-collapse {
+      float: right;
+      clear: none; } }
+
+[dir="rtl"] .navbar-collapse {
+  float: left; }
+
+.js .navbar-collapse {
+  display: none; }
+  @media (min-width: 768px) {
+    .js .navbar-collapse {
+      display: block; } }
+
+.expanded .navbar-collapse {
+  display: block;
+  width: 100%; }
+  @media (min-width: 768px) {
+    .expanded .navbar-collapse {
+      width: auto; } }
+
+/* .navbar .navbar-nav
+ ****************************************************************************/
+.navbar .navbar-nav {
+  padding-bottom: 0.5em; }
+  @media (min-width: 768px) {
+    .navbar .navbar-nav {
+      margin-right: -0.5em;
+      margin-left: -0.5em;
+      padding-bottom: 0; } }
+
+@media (min-width: 768px) {
+  .navbar .navbar-nav li {
+    display: inline-block; } }
+
+.navbar .navbar-nav a, .navbar .navbar-nav .button-link {
+  display: block;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em; }
+  @media (min-width: 768px) {
+    .navbar .navbar-nav a, .navbar .navbar-nav .button-link {
+      padding-top: 1.5em;
+      padding-right: 0.5em;
+      padding-bottom: 1.5em;
+      padding-left: 0.5em; } }
+
+/*******************************************************************************
  * Basic forms fields
  *******************************************************************************
 
 /* 1. Reset
  ******************************************************************************/
 /* Change the font styles in all browsers (opinionated). */
 input,
 optgroup,
 select,
 textarea {
@@ skipping 53 matching lines @@
   outline-offset: -2px; }
 
 /*******************************************************************************
  * Buttons
  *******************************************************************************
 
 /* 1. Reset
  ******************************************************************************/
 button {
   margin: 0px;
+  color: inherit;
   font: inherit;
   /* Show the overflow in IE and Edge */
   overflow: visible;
   /* Remove rounded corners in Chrome 62+ */
   border-radius: 0;
   /* Remove the inheritance of text transform in Edge, Firefox, and IE. */
   text-transform: none; }
 
 /**
  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
@@ skipping 13 matching lines @@
 [type="submit"]::-moz-focus-inner {
   padding: 0px;
   border-style: none; }
 
 /* Restore the focus styles unset by the previous rule. */
 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
   outline: 1px dotted ButtonText; }
+
+/* .button-link
+ ******************************************************************************/