Refactor internal pages to new CSS

- Make FAQ page internal.

webapp/constants/links.js

@@ -83,7 +83,7 @@ const DATA_PRIVACY = defaultPageParamsPages.DATA_PRIVACY.overwrite({
   },
 })
 const FAQ = defaultPageParamsPages.FAQ.overwrite({
-  externalLink: 'https://ocelot.social', // if string is defined and not empty it's dominating
+  // externalLink: null, // if string is defined and not empty it's dominating
 
   internalPage: {
     // footerIdent: 'site.faq', // localized string identifier, if undefined default is used

webapp/locales/html/de/code-of-conduct.html

@@ -1,4 +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>
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social für Entwickler
+  </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>

webapp/locales/html/de/data-privacy.html

@@ -1,4 +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>
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social für Entwickler
+  </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>

webapp/locales/html/de/donate.html

@@ -1,4 +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>
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social für Entwickler
+  </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>

webapp/locales/html/de/faq.html

@@ -1,4 +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>
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social für Entwickler
+  </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>

webapp/locales/html/de/imprint.html

@@ -1,4 +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>
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social für Entwickler
+  </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>

webapp/locales/html/de/organization.html

@@ -1,4 +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>
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social für Entwickler
+  </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>

webapp/locales/html/de/support.html

@@ -1,4 +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>
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social für Entwickler
+  </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>

webapp/locales/html/de/terms-and-conditions.html

@@ -1,4 +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>
+
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social für Entwickler
+  </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>

webapp/locales/html/en/code-of-conduct.html

@@ -1,4 +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>
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social for Developers
+  </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>

webapp/locales/html/en/data-privacy.html

@@ -1,4 +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>
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social for Developers
+  </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>

webapp/locales/html/en/donate.html

@@ -1,4 +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>
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social for Developers
+  </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>

webapp/locales/html/en/faq.html

@@ -1,4 +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>
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social for Developers
+  </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>

webapp/locales/html/en/imprint.html

@@ -1,4 +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>
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social for Developers
+  </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>

webapp/locales/html/en/organization.html

@@ -1,4 +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>
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social for Developers
+  </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>

webapp/locales/html/en/support.html

@@ -1,4 +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>
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social for Developers
+  </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>

webapp/locales/html/en/terms-and-conditions.html

@@ -1,4 +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>
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social for Developers
+  </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>