Added about page

It needs some work, I know.

3 files changed, 52 insertions, 3 deletions

diff --git a/WebInterface/NodeJSServer/dist/about/index.html b/WebInterface/NodeJSServer/dist/about/index.html
index 6fcb1ee..c490415 100644
--- a/WebInterface/NodeJSServer/dist/about/index.html
+++ b/WebInterface/NodeJSServer/dist/about/index.html
@@ -26,9 +26,20 @@
       </div>
     </div>
     <div class="front-layer" id="front-layer">
+      <div class="about-container">
+        <h1>Über uns</h1>
 
-      <!-- TODO: About content here -->
-
+        <div class="about">
+          <p>Wir sind Dennis Kobert und Timon Scholz, zwei ehemalige Josephiner, die jetzt Informatik studieren. Unter anderem umfassen unsere Hobbies aber auch Pen and Paper Rollenspiele. Da es nicht immer möglich ist, sich zu in Person zu treffen, muss man manchmal auch auf online Alternativen ausweichen; die vorhandenen Alternativen haben uns aber aus verschiedenen Gründen nicht zugesagt. Zum einen wäre da die Menge der Werte, die in einem Heldendokument verzeichnet sind. Es wäre also praktisch, die Werte maschinell einzulesen, statt sie per Hand für jeden Mitspieler eintragen zu müssen. Weitere Mängel sahen wir in der Handhabung vieler Alternativen; diese waren spezifisch für DnD designed, und Alternativen wie DSA wirken eher wie ein Nachsatz. Zur Lösung dieser Probleme entwickelte Dennis Kobert zunächst eine Implementation als Discord-Bot - ein automatisierter Nutzer für das populäre Instant-Messenger- / Voice-Chat-Programm Discord. Dies erlaubte bereits, Charakterinformationen aus den Dateien der Helden-Software zu extrahieren. Mit Hilfe seines Cousins erreichte Dennis Kobert letztendlich eine zum Spielen bereite Version. Da aber die meisten Nutzer lieber eine grafische Oberfläche verwenden, statt ein glorifiziertes „Multiplayer-Command-Line-Interface”, entwickelten Dennis Kobert und Timon Scholz ein Web-Modul, über welches Befehle aus dem Browser ausgeführt werden können, mit dem Ziel viele der häufig verwendeten Funktionen grafisch abrufbar zu machen, und später auch für ein Grafik- und Soundinterface zu sorgen.</p>
+        </div>
+        <div class="contact">
+          <h2>Kontakt</h2>
+          <span>Email1:</span><a>[hier ganz tolle Emails einfügen!]</a>
+          <span>Email2:</span><a>[hier eine weitere toll Email einfügen!]</a>
+          <span>GitHub:</span><a>[hier den GitHub Link nochmal hinpfeffern]</a>
+          <span>Twitter:</span><a>[hier meinen Twitter verlinken, ich brauch mehr Follower!]</a>
+        </div>
+      </div>
       <div class="copyright-container">
         <p>Front-End © 2018 Timon Scholz</p>
         <p>Back-End © 2018 Dennis Kobert</p>
diff --git a/WebInterface/NodeJSServer/dist/style/about.css b/WebInterface/NodeJSServer/dist/style/about.css
index 2a7aaab..5820f64 100644
--- a/WebInterface/NodeJSServer/dist/style/about.css
+++ b/WebInterface/NodeJSServer/dist/style/about.css
@@ -1 +1 @@
-html,body{height:100vh;margin:0;padding:0;font-family:'Roboto', sans-serif;font-display:swap;overflow:hidden;background-color:#212121;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#546e7a;position:relative}.backdrop{background-color:#546e7a;color:#fff;font-size:1rem}.backdrop .header-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (max-height: 550px){.backdrop .header-bar{margin-top:0.125rem}}.backdrop .header-bar .menu-icon{background-image:url("../ressources/menu.png");background-position:center;background-repeat:no-repeat;width:36px;height:36px;padding:4px;margin:1rem;display:inline-block;border:none;border-radius:32px;-webkit-transition:background-color 100ms ease;transition:background-color 100ms ease}@media (max-height: 550px){.backdrop .header-bar .menu-icon{padding:0;margin:0.125rem}}.backdrop .header-bar .menu-icon:hover{background-color:#29434e}.backdrop .header-bar .menu-icon.open{background-image:url("../ressources/menu_close.png")}.backdrop .header-bar .header{margin:0;padding:16px;text-align:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media (min-width: 450px){.backdrop .header-bar .header{margin-right:56px}}@media (max-height: 550px){.backdrop .header-bar .header{padding:0}}.backdrop .menu-actions{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:max-height 200ms ease, color 200ms ease, background-color 100ms ease;transition:max-height 200ms ease, color 200ms ease, background-color 100ms ease;position:relative;max-height:16rem;margin:0 1rem}.backdrop .menu-actions .menu-option{color:#fff;text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;font-size:1.5rem;width:100%;text-align:center;padding:1rem;border:none;border-radius:8px;cursor:pointer}.backdrop .menu-actions .menu-option:hover{background-color:#3e5864}.backdrop .menu-actions .menu-option.active{background-color:#29434e}.backdrop .menu-actions.hidden{max-height:0;color:rgba(0,0,0,0)}.backdrop .menu-actions.hidden .menu-option{color:rgba(0,0,0,0);background-color:rgba(0,0,0,0) !important}.front-layer{position:relative;border:none;border-radius:16px 16px 0 0;min-height:0;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:white;margin-top:8px;-webkit-animation-name:start;animation-name:start;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;color:black;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@-webkit-keyframes start{from{top:100vh}to{top:0}}@keyframes start{from{top:100vh}to{top:0}}.front-layer .copyright-container{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;width:100%;margin:4px;bottom:0;text-align:center}
+html,body{height:100vh;margin:0;padding:0;font-family:'Roboto', sans-serif;font-display:swap;overflow:hidden;background-color:#212121;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#546e7a;position:relative}.backdrop{background-color:#546e7a;color:#fff;font-size:1rem}.backdrop .header-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (max-height: 550px){.backdrop .header-bar{margin-top:0.125rem}}.backdrop .header-bar .menu-icon{background-image:url("../ressources/menu.png");background-position:center;background-repeat:no-repeat;width:36px;height:36px;padding:4px;margin:1rem;display:inline-block;border:none;border-radius:32px;-webkit-transition:background-color 100ms ease;transition:background-color 100ms ease}@media (max-height: 550px){.backdrop .header-bar .menu-icon{padding:0;margin:0.125rem}}.backdrop .header-bar .menu-icon:hover{background-color:#29434e}.backdrop .header-bar .menu-icon.open{background-image:url("../ressources/menu_close.png")}.backdrop .header-bar .header{margin:0;padding:16px;text-align:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media (min-width: 450px){.backdrop .header-bar .header{margin-right:56px}}@media (max-height: 550px){.backdrop .header-bar .header{padding:0}}.backdrop .menu-actions{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:max-height 200ms ease, color 200ms ease, background-color 100ms ease;transition:max-height 200ms ease, color 200ms ease, background-color 100ms ease;position:relative;max-height:16rem;margin:0 1rem}.backdrop .menu-actions .menu-option{color:#fff;text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;font-size:1.5rem;width:100%;text-align:center;padding:1rem;border:none;border-radius:8px;cursor:pointer}.backdrop .menu-actions .menu-option:hover{background-color:#3e5864}.backdrop .menu-actions .menu-option.active{background-color:#29434e}.backdrop .menu-actions.hidden{max-height:0;color:rgba(0,0,0,0)}.backdrop .menu-actions.hidden .menu-option{color:rgba(0,0,0,0);background-color:rgba(0,0,0,0) !important}.front-layer{position:relative;border:none;border-radius:16px 16px 0 0;min-height:0;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:white;margin-top:8px;-webkit-animation-name:start;animation-name:start;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;color:black;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@-webkit-keyframes start{from{top:100vh}to{top:0}}@keyframes start{from{top:100vh}to{top:0}}.front-layer .copyright-container{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;width:100%;margin:4px;bottom:0;text-align:center}h1,h2,p,a{margin:0.5rem 1rem}h1,h2{margin-top:1rem;text-align:center}.front-layer{padding-bottom:5rem;display:-webkit-box;display:-ms-flexbox;display:flex}.about-container{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto;margin:0.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.about-container .about{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.about-container .contact{margin:1rem;display:-ms-grid;display:grid;-ms-grid-columns:1fr 5fr;grid-template-columns:1fr 5fr;-ms-grid-rows:1fr 1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr 1fr;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.about-container .contact h2{-ms-grid-column:1;-ms-grid-column-span:2;grid-column:1/3}
diff --git a/WebInterface/NodeJSServer/src/style/about.scss b/WebInterface/NodeJSServer/src/style/about.scss
index 9d8ad50..3b45674 100644
--- a/WebInterface/NodeJSServer/src/style/about.scss
+++ b/WebInterface/NodeJSServer/src/style/about.scss
@@ -3,3 +3,41 @@
 @import 'partials/backdrop/menu';
 @import 'partials/front-layer/base';
 @import 'partials/front-layer/copyright';
+
+
+h1, h2, p, a {
+  margin: 0.5rem 1rem;
+}
+
+h1, h2 {
+  margin-top: 1rem;
+  text-align: center;
+}
+
+.front-layer {
+  padding-bottom: 5rem;
+  display: flex;
+}
+
+.about-container {
+  flex-grow: 1;
+  overflow-y: auto;
+  margin: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  .about {
+    flex-grow: 1;
+  }
+
+  .contact {
+    margin: 1rem;
+    display: grid;
+    grid-template-columns: 1fr 5fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+    flex-direction: column;
+
+    h2 {
+      grid-column: 1/3;
+    }
+  }
+}