From 34e148b9239cae9f451be2789996f1af189b052a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 20 Oct 2021 10:35:04 +0200
Subject: [PATCH] Refactor CSS for internal pages

---
 branding/locales/html/de/code-of-conduct.html | 60 ++++++++++++++++-
 branding/locales/html/de/data-privacy.html    | 60 ++++++++++++++++-
 branding/locales/html/de/donate.html          | 60 ++++++++++++++++-
 branding/locales/html/de/faq.html             | 67 ++++++++++++++++++-
 branding/locales/html/de/imprint.html         | 60 ++++++++++++++++-
 branding/locales/html/de/organization.html    | 60 ++++++++++++++++-
 branding/locales/html/de/support.html         | 60 ++++++++++++++++-
 .../locales/html/de/terms-and-conditions.html | 61 ++++++++++++++++-
 branding/locales/html/en/code-of-conduct.html | 60 ++++++++++++++++-
 branding/locales/html/en/data-privacy.html    | 60 ++++++++++++++++-
 branding/locales/html/en/donate.html          | 60 ++++++++++++++++-
 branding/locales/html/en/faq.html             | 67 ++++++++++++++++++-
 branding/locales/html/en/imprint.html         | 60 ++++++++++++++++-
 branding/locales/html/en/organization.html    | 60 ++++++++++++++++-
 branding/locales/html/en/support.html         | 60 ++++++++++++++++-
 .../locales/html/en/terms-and-conditions.html | 60 ++++++++++++++++-
 16 files changed, 927 insertions(+), 48 deletions(-)

diff --git a/branding/locales/html/de/code-of-conduct.html b/branding/locales/html/de/code-of-conduct.html
index ba039b5..c4538e3 100644
--- a/branding/locales/html/de/code-of-conduct.html
+++ b/branding/locales/html/de/code-of-conduct.html
@@ -1,6 +1,60 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<p>Ich bin der Inhalt vom Verhaltenskodex.</p>
-<br>
-<p>Neu gebrandet …</p>
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social Staging
+  </h2>
+  <h3>
+    Präambel
+  </h3>
+  <p>
+    Ich bin der Inhalt vom Verhaltenskodex.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
diff --git a/branding/locales/html/de/data-privacy.html b/branding/locales/html/de/data-privacy.html
index a00b03c..104d183 100644
--- a/branding/locales/html/de/data-privacy.html
+++ b/branding/locales/html/de/data-privacy.html
@@ -1,6 +1,60 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<p>Das hier wäre der Inhalt der Datenschutzbestimmungen.</p>
-<br>
-<p>Neu gebrandet …</p>
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social Staging
+  </h2>
+  <h3>
+    Information über die Erhebung personenbezogener Daten
+  </h3>
+  <p>
+    Das hier wäre der Inhalt der Datenschutzbestimmungen.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
diff --git a/branding/locales/html/de/donate.html b/branding/locales/html/de/donate.html
index d4b14a1..71f1027 100644
--- a/branding/locales/html/de/donate.html
+++ b/branding/locales/html/de/donate.html
@@ -1,6 +1,60 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<p>Hier steht was zu den Spenden.</p>
-<br>
-<p>Neu gebrandet …</p>
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social Staging
+  </h2>
+  <h3>
+    Wohin kann ich spenden?
+  </h3>
+  <p>
+    Hier steht was zu den Spenden.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
diff --git a/branding/locales/html/de/faq.html b/branding/locales/html/de/faq.html
index 24e0ced..15a9d97 100644
--- a/branding/locales/html/de/faq.html
+++ b/branding/locales/html/de/faq.html
@@ -1,6 +1,67 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<p>Hier stehen die FAQs.</p>
-<br>
-<p>Neu gebrandet …</p>
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social Staging
+  </h2>
+  <h3>
+    Wie bediene ich dieses Netzwerk?
+  </h3>
+  <p>
+    Hier findest Du die
+    <a href="https://github.com/Ocelot-Social-Community/Ocelot-Social/wiki" target="_blank" >Bedienungsanleitung</a>.<br>
+  </p>
+  <h3>
+    Betreiberspezifische FAQs
+  </h3>
+  <p>
+    Hier steht was zu den betreiberspezifischen FAQs.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
diff --git a/branding/locales/html/de/imprint.html b/branding/locales/html/de/imprint.html
index 521c527..ad3c935 100644
--- a/branding/locales/html/de/imprint.html
+++ b/branding/locales/html/de/imprint.html
@@ -1,6 +1,60 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<p>Ich bin das Impressum.</p>
-<br>
-<p>Neu gebrandet …</p>
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social Staging
+  </h2>
+  <h3>
+    Betreiber
+  </h3>
+  <p>
+    Ich bin das Impressum.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
diff --git a/branding/locales/html/de/organization.html b/branding/locales/html/de/organization.html
index ed7c97b..089d72f 100644
--- a/branding/locales/html/de/organization.html
+++ b/branding/locales/html/de/organization.html
@@ -1,6 +1,60 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<p>Hier wird das Netzwerk beschrieben.</p>
-<br>
-<p>Neu gebrandet …</p>
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social Staging
+  </h2>
+  <h3>
+    Das Entwicklernetzwerk
+  </h3>
+  <p>
+    Hier wird das Netzwerk beschrieben.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
diff --git a/branding/locales/html/de/support.html b/branding/locales/html/de/support.html
index 6282306..f4dcb53 100644
--- a/branding/locales/html/de/support.html
+++ b/branding/locales/html/de/support.html
@@ -1,6 +1,60 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<p>Ich bin der Inhalt vom Support.</p>
-<br>
-<p>Neu gebrandet …</p>
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social Staging
+  </h2>
+  <h3>
+    Ansprechpartner
+  </h3>
+  <p>
+    Ich bin der Inhalt vom Support.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
diff --git a/branding/locales/html/de/terms-and-conditions.html b/branding/locales/html/de/terms-and-conditions.html
index 74396a6..74057ad 100644
--- a/branding/locales/html/de/terms-and-conditions.html
+++ b/branding/locales/html/de/terms-and-conditions.html
@@ -1,6 +1,61 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<p>Ich bin der Inhalt der Seite "Nutzungsbedingungen".</p>
-<br>
-<p>Neu gebrandet …</p>
+
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social Staging
+  </h2>
+  <h3>
+    Nutzung und Lizenz
+  </h3>
+  <p>
+    Ich bin der Inhalt der Seite "Nutzungsbedingungen".
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
diff --git a/branding/locales/html/en/code-of-conduct.html b/branding/locales/html/en/code-of-conduct.html
index 75128e8..714cad3 100644
--- a/branding/locales/html/en/code-of-conduct.html
+++ b/branding/locales/html/en/code-of-conduct.html
@@ -1,6 +1,60 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<p>I am the content of the code of conduct.</p>
-<br>
-<p>Rebranded …</p>
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social Staging
+  </h2>
+  <h3>
+    Präambel
+  </h3>
+  <p>
+    I am the content of the code of conduct.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
diff --git a/branding/locales/html/en/data-privacy.html b/branding/locales/html/en/data-privacy.html
index 31a1169..c4b718f 100644
--- a/branding/locales/html/en/data-privacy.html
+++ b/branding/locales/html/en/data-privacy.html
@@ -1,6 +1,60 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<p>This would be our data privacy section.</p>
-<br>
-<p>Rebranded …</p>
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social Staging
+  </h2>
+  <h3>
+    Information about the collection of personal data
+  </h3>
+  <p>
+    This would be our data privacy section.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
diff --git a/branding/locales/html/en/donate.html b/branding/locales/html/en/donate.html
index a3e7daf..d25e9f4 100644
--- a/branding/locales/html/en/donate.html
+++ b/branding/locales/html/en/donate.html
@@ -1,6 +1,60 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<p>Here's what it says about donations.</p>
-<br>
-<p>Rebranded …</p>
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social Staging
+  </h2>
+  <h3>
+    Where can I donate?
+  </h3>
+  <p>
+    Here's what it says about donations.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
diff --git a/branding/locales/html/en/faq.html b/branding/locales/html/en/faq.html
index 08d3cee..a5998db 100644
--- a/branding/locales/html/en/faq.html
+++ b/branding/locales/html/en/faq.html
@@ -1,6 +1,67 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<p>Here are the FAQs.</p>
-<br>
-<p>Rebranded …</p>
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social Staging
+  </h2>
+    <h3>
+    How do I operate this network?
+  </h3>
+  <p>
+    Here you can find the
+    <a href="https://github.com/Ocelot-Social-Community/Ocelot-Social/wiki" target="_blank" >user manual</a>.<br>
+  </p>
+  <h3>
+    Operator-Specific FAQs
+  </h3>
+  <p>
+    Here are the operator-specific FAQs.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
diff --git a/branding/locales/html/en/imprint.html b/branding/locales/html/en/imprint.html
index fbae0bd..6a7489a 100644
--- a/branding/locales/html/en/imprint.html
+++ b/branding/locales/html/en/imprint.html
@@ -1,6 +1,60 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<p>I am the imprint.</p>
-<br>
-<p>Rebranded …</p>
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social Staging
+  </h2>
+  <h3>
+    Operator
+  </h3>
+  <p>
+    I am the imprint.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
diff --git a/branding/locales/html/en/organization.html b/branding/locales/html/en/organization.html
index 99a8bbb..e5a6d0f 100644
--- a/branding/locales/html/en/organization.html
+++ b/branding/locales/html/en/organization.html
@@ -1,6 +1,60 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<p>Here the network is described.</p>
-<br>
-<p>Rebranded …</p>
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social Staging
+  </h2>
+  <h3>
+    The Developers Network
+  </h3>
+  <p>
+    Here the network is described.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
diff --git a/branding/locales/html/en/support.html b/branding/locales/html/en/support.html
index 30f8535..118328b 100644
--- a/branding/locales/html/en/support.html
+++ b/branding/locales/html/en/support.html
@@ -1,6 +1,60 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<p>I am the content of the support.</p>
-<br>
-<p>Rebranded …</p>
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social Staging
+  </h2>
+  <h3>
+    Contact
+  </h3>
+  <p>
+    I am the content of the support.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
diff --git a/branding/locales/html/en/terms-and-conditions.html b/branding/locales/html/en/terms-and-conditions.html
index 50f354b..44e3fe3 100644
--- a/branding/locales/html/en/terms-and-conditions.html
+++ b/branding/locales/html/en/terms-and-conditions.html
@@ -1,6 +1,60 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<p>I am the content of the page "Terms And Conditions".<p>
-<br>
-<p>Rebranded …</p>
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social Staging
+  </h2>
+  <h3>
+    Use and License
+  </h3>
+  <p>
+    I am the content of the page "Terms And Conditions".
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>