initial version

2020-12-02 11:57:06 +01:00 · 2020-12-02 11:57:06 +01:00 · 6de0d2d9ab
commit 6de0d2d9ab
54 changed files with 11820 additions and 0 deletions
--- a/Vorlage/Bilder
+++ b/Vorlage/Bilder
--- a/Vorlage/Bilder
+++ b/Vorlage/Bilder
--- a/Vorlage/Bilder
+++ b/Vorlage/Bilder
--- a/Vorlage/Bilder
+++ b/Vorlage/Bilder
--- a/Vorlage/Bilder
+++ b/Vorlage/Bilder
--- a/Vorlage/Bilder
+++ b/Vorlage/Bilder
--- a/Vorlage/Bilder
+++ b/Vorlage/Bilder
--- a/Vorlage/Bilder
+++ b/Vorlage/Bilder
--- a/Vorlage/Bilder
+++ b/Vorlage/Bilder
--- a/Vorlage/Bilder
+++ b/Vorlage/Bilder
--- a/Vorlage/Bilder
+++ b/Vorlage/Bilder
--- a/Website/Check.png
+++ b/Website/Check.png
--- a/Website/Hotel.jpg
+++ b/Website/Hotel.jpg
--- a/Website/Testbild.jpg
+++ b/Website/Testbild.jpg
--- a/Vorlage/Hochzeitswebsite
+++ b/Vorlage/Hochzeitswebsite
--- a/Anmerkung/Geschenke
+++ b/Anmerkung/Geschenke
--- a/Vorlage/Screenshots
+++ b/Vorlage/Screenshots
--- a/Vorlage/Screenshots
+++ b/Vorlage/Screenshots
--- a/Anmerkung/Tagesablauf
+++ b/Anmerkung/Tagesablauf
--- a/Anmerkung/Unterkunft
+++ b/Anmerkung/Unterkunft
--- a/Vorlage/Screenshots/Geschenke.jpg
+++ b/Vorlage/Screenshots/Geschenke.jpg
--- a/Vorlage/Screenshots/Home.jpg
+++ b/Vorlage/Screenshots/Home.jpg
--- a/Vorlage/Screenshots/Start
+++ b/Vorlage/Screenshots/Start
--- a/Vorlage/Screenshots/Tagesablauf.jpg
+++ b/Vorlage/Screenshots/Tagesablauf.jpg
--- a/Vorlage/Screenshots/Unterkunft.jpg
+++ b/Vorlage/Screenshots/Unterkunft.jpg
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,47 @@
+{
+  "name": "hochzeit",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "compile": "webpack --config webpack.config.js",
+    "start": "ts-node src/server/index.ts",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.11.6",
+    "@babel/plugin-transform-runtime": "^7.11.5",
+    "@babel/polyfill": "^7.11.5",
+    "@types/express": "^4.17.8",
+    "@types/socket.io": "^2.1.11",
+    "autoprefixer": "^10.0.1",
+    "babel-loader": "^8.1.0",
+    "babel-preset-env": "^1.7.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^6.1.1",
+    "css-loader": "^4.3.0",
+    "extract-loader": "^5.1.0",
+    "file-loader": "^6.1.0",
+    "foundation-sites": "^6.6.3",
+    "html-loader": "^1.3.2",
+    "html-webpack-plugin": "^4.5.0",
+    "jquery": "^3.5.1",
+    "mini-css-extract-plugin": "^0.11.2",
+    "node-sass": "^5.0.0",
+    "nodemon": "^2.0.6",
+    "postcss-loader": "^4.0.4",
+    "sass-loader": "^10.1.0",
+    "terser-webpack-plugin": "^4.2.2",
+    "ts-loader": "^8.0.4",
+    "ts-node": "^9.0.0",
+    "typescript": "^4.0.2",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^3.3.12"
+  },
+  "dependencies": {
+    "express": "^4.17.1",
+    "dotenv": "^8.2.0"
+  }
+}
--- a/src/client/html/geschenke.html
+++ b/src/client/html/geschenke.html
@ -0,0 +1,27 @@
+<div class="flex-container height-100">
+    <div class="grow height-100 overflow-auto">
+        <h1>Gechenkliste</h1>
+        <p>
+            Ihr macht uns die größte Freude, wenn ihr mit uns feiert und den Tag verbringt. Wenn ihr uns gerne etwas
+            schenken möchtet, haben wir eine Liste zusammengestellt, worüber wir uns für den Start ins gemeinsame Leben
+            sehr freuen. Außerdem lieben wir es zu reisen und freuen uns immer über Geld für unsere Reisekasse.
+        </p>
+
+        <div id="present-container">
+            <a id="present-template" class="flex-container present" target="_blank">
+                <div class="present-checkbox">
+                    <div></div>
+                </div>
+                <img class="present-image">
+                <div class="grow">
+                    <div class="present-name"></div>
+                    <div class="present-description"></div>
+                </div>
+            </a>
+        </div>
+
+    </div>
+    <div class="height-100">
+        <img src="../img/geschenke.jpg" class="height-100">
+    </div>
+</div>
--- a/src/client/html/home.html
+++ b/src/client/html/home.html
@ -0,0 +1,11 @@
+<div>
+    <h1>Herzlich Willkommen</h1>
+    <p>Wir heiraten! Und das möchten wir mit euch gemeinsam am 8.Mai 2021 in Aachen feiern.
+        Bitte sagt uns doch bis zum 15.März, ob ihr dabei sein könnt! Schreibt uns dazu bitte eine Mail an (…..).</p>
+
+    <p>Natürlich können wir unsere Einladung für nächstes Jahr nicht aussprechen, ohne ein paar Worte zu der aktuellen
+        Corona Pandemie zu verlieren. Wir hoffen sehr, dass sich die Lage bis Mai soweit beruhigt hat, dass wir unsere
+        Hochzeit mit euch allen feiern können. Leider ist das aber momentan sehr ungewiss. Soweit es geht, planen wir
+        damit, dass wir am 8. Mai gemeinsam feiern, falls sich daran etwas ändert, melden wir uns bei euch. Sagt uns
+        gerne trotzdem bis zum 15.März zu, damit wir besser planen können!</p>
+</div>
--- a/src/client/html/tagesablauf.html
+++ b/src/client/html/tagesablauf.html
@ -0,0 +1,46 @@
+<div class="flex-container height-100">
+    <div class="height-100">
+        <img src="../img/tagesablauf_godi.jpg" class="height-100">
+    </div>
+    <div class="grow height-100 overflow-auto">
+        <h1>Traugottesdienst</h1>
+        <p>
+            Um 14:00 Uhr möchten wir gemeinsam mit euch unseren Traugottesdienst in der Annakirche feiern (Annastraße
+            35, 52062 Aachen). Wenn ihr mit dem Auto anreist könnt ihr im Parkhaus am Dom (Jesuitenstraße 12, 52062
+            Aachen) parken, das ist direkt neben der Kirche.
+        </p>
+        <h1>Fingerfood</h1>
+        <p>
+            Nach dem Gottesdienst gehen wir zusammen zu Fuß ins Aachener Fenster (Buchkremerstraße 2). Dort gibt es dann
+            süßes und salziges Fingerfood und ganz viel Zeit zum Gratulieren. Wenn ihr etwas zum Buffet beisteuern
+            möchtet, dann meldet euch gerne bei <a href='mailto:sinah.stinner@googlemail.com'>Sinah Stinner
+            (sinah.stinner@googlemail.com)</a>.
+        </p>
+        <h1>Gruppenfotos</h1>
+        <p>
+            Um ganz viele wundervolle Erinnerungen an unsere Hochzeit, die wir mit euch feiern, zu haben, gehen wir um
+            17:00 Uhr auf den Katschhof und machen dort Gruppenfotos.
+        </p>
+        <h1>Sektempfang</h1>
+        <p>
+            Wir feiern unsere Hochzeit im Forum M über der Aachener Mayerschen mit einem wundervollen Blick über die
+            Aachener Innenstadt. Nach den Fotos werden wir dort gemeinsam anstoßen.
+        </p>
+        <h1>Festessen</h1>
+        <p>
+            Nach vielen wundervollen Bildern, freuen wir uns alle auf unser leckeres Hochzeitsbuffet, das es um halb
+            acht gibt.
+        </p>
+        <h1>Spiel & Spaß</h1>
+        <p>
+            Wir freuen uns auf richtige viele einzigartige, lustige und spaßige Programmbeiträge von euch. Wenn ihr es
+            schon gar nicht erwarten könnt uns eine Freude zu machen und einen Beiträg beizusteuern, dann meldet euch
+            gerne bei Miriam Seitz (Miriams Mailadresse). Und keine Sorge, Miriam behält alle Beiträge und
+            Überraschungen für sich, aber sagt ihr bitte bei allem Bescheid, was ihr planen wollt.
+        </p>
+        <h1>Let's Dance</h1>
+        <p>
+            Ihr könnt zuhause schonmal üben, um die Tanzfläche unsicher zu machen!
+        </p>
+    </div>
+</div>
--- a/src/client/html/unterkunft.html
+++ b/src/client/html/unterkunft.html
@ -0,0 +1,37 @@
+<div class="flex-container height-100">
+    <div class="grow height-100 overflow-auto">
+        <h1>Unterkunft</h1>
+        <p>
+            Wir freuen uns riesig, dass ihr aus nah und fern anreist, um mit uns gemeinsam unseren Hochzeitstag zu
+            verbringen!
+        </p>
+        <p>
+            Für alle die, die eine lange Anreise haben, empfehlen wir euch, im Hotel … zu übernachten. Das ist fußläufig
+            vom
+            Forum M aus zu erreichen. Ihr könnt das Auto auch im Parkhaus am Dom über Nacht stehen lassen.
+        </p>
+        <p>
+            Alle, die eher eine studentische Übernachtungsmöglichkeit suchen, können sich gerne bei uns melden. Ihr
+            werdet
+            dann bei Freunden aus Aachen in WGs mituntergebracht. Sagt uns da bitte bis spätestens zum 15.April
+            Bescheid.
+        </p>
+
+        <div class="grid-x padding-default">
+            <div class="small-4">
+                <a href="https://all.accor.com/hotel/8027/index.de.shtml" target="_blank" class="hidden-link">
+                    <h3>IBIS Hotel</h3>
+                    <img src="../img/hotel.jpg">
+                </a>
+            </div>
+            <div class="small-8">
+                <iframe id="map_unterkunft"
+                        src="https://maps.google.com/maps?width=520&amp;height=395&amp;hl=de&amp;q=IBIS%20budget%20Hotel+Schumacherstr%2012%20Aachen&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe>
+            </div>
+        </div>
+
+    </div>
+    <div class="height-100">
+        <img src="../img/unterkunft.jpg" class="height-100">
+    </div>
+</div>
--- a/src/client/img/check.png
+++ b/src/client/img/check.png
--- a/src/client/img/geschenke.jpg
+++ b/src/client/img/geschenke.jpg
--- a/src/client/img/geschenke/test.jpg
+++ b/src/client/img/geschenke/test.jpg
--- a/src/client/img/home.jpg
+++ b/src/client/img/home.jpg
--- a/src/client/img/hotel.jpg
+++ b/src/client/img/hotel.jpg
--- a/src/client/img/logo.png
+++ b/src/client/img/logo.png
--- a/src/client/img/logo_big.png
+++ b/src/client/img/logo_big.png
--- a/src/client/img/tagesablauf_godi.jpg
+++ b/src/client/img/tagesablauf_godi.jpg
--- a/src/client/img/unterkunft.jpg
+++ b/src/client/img/unterkunft.jpg
--- a/src/client/index.html
+++ b/src/client/index.html
@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+
+    <link rel="icon" type="image/png" href="img/logo.png">
+    <meta class='foundation-mq'>
+
+    <title>J & S</title>
+</head>
+<body>
+<nav class="top-bar">
+    <div class="grid-container width-100">
+        <div class="top-bar-left">
+            <ul class="menu align-center-middle">
+                <li><img class="logo-img" src="img/logo.png" alt="J&S"></li>
+                <li class="active" data-site="home" data-img="1"><a>Home</a></li>
+                <li data-site="tagesablauf"><a>Tagesablauf</a></li>
+                <li data-site="unterkunft"><a>Unterkunft</a></li>
+                <li data-site="geschenke"><a>Geschenke</a></li>
+                <!--                <li><a href="#">Galerie</a></li>-->
+            </ul>
+        </div>
+        <div class="top-bar-right">
+            <!--        <ul class="menu">-->
+            <!--            <li><input type="search" placeholder="Search"></li>-->
+            <!--            <li><button type="button" class="button">Search</button></li>-->
+            <!--        </ul>-->
+        </div>
+    </div>
+
+    <!--    <div class="grid-container width-100">-->
+    <!--        <div class="grid-padding-x ">-->
+    <!--            <div class="small-12 cell">-->
+
+    <!--&lt;!&ndash;                <div id='navbar-close-listener-container' style="display: none">&ndash;&gt;-->
+    <!--&lt;!&ndash;                    <div id='navbar-close-listener'></div>&ndash;&gt;-->
+    <!--&lt;!&ndash;                </div>&ndash;&gt;-->
+
+    <!--                <ul class="menu align-center horizontal">-->
+    <!--                    <li><img class="logo-img" src="img/logo.png" alt="J&S"></li>-->
+    <!--                    <li class="small"><a>Home</a></li>-->
+    <!--                    <li class="small"><a>Tagesablauf</a></li>-->
+    <!--                    <li class="small"><a>Unterkunft</a></li>-->
+    <!--                    <li class="small"><a>Geschenke</a></li>-->
+    <!--                    <li class="small"><a>Galerie</a></li>-->
+    <!--                </ul>-->
+    <!--&lt;!&ndash;                <span id="responsive-menu-toggle" class="right">&ndash;&gt;-->
+    <!--&lt;!&ndash;                        <button class="menu-icon" type="button" data-toggle=""></button>&ndash;&gt;-->
+    <!--&lt;!&ndash;                    </span>&ndash;&gt;-->
+    <!--&lt;!&ndash;                <div id="responsive-menu">&ndash;&gt;-->
+    <!--&lt;!&ndash;                    <ul class="menu vertical accordion-menu navbar-menu hidden-menu" id="navbar-menu-hidden">&ndash;&gt;-->
+    <!--&lt;!&ndash;                    </ul>&ndash;&gt;-->
+    <!--&lt;!&ndash;                </div>&ndash;&gt;-->
+    <!--            </div>-->
+    <!--        </div>-->
+    <!--    </div>-->
+</nav>
+<div id="main-content-container">
+    <span id="home-img-container">
+        <span class="width-100" id="home-img">
+            <img src="img/home.jpg" id="" alt="Julia und Sam sehen sich verliebt an und halten dabei händchen &lt;3"
+                 class="">
+            <span id="start-text-img-overlay">Hochzeit von <br>Julia und Samuel</span>
+        </span>
+        <span id="img-spacer"></span>
+    </span>
+    <div id="scroll-container">
+        <div class="grid-container">
+            <div class="grid-x grid-padding-x grid-padding-y grow max-height-100">
+                <div class="cell small-12" id="main-content">
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</body>
+</html>
--- a/src/client/js/PresentsHandler.ts
+++ b/src/client/js/PresentsHandler.ts
@ -0,0 +1,60 @@
+export class PresentsHandler {
+    presents: {
+        isBought: boolean,
+        image: string,
+        name: string,
+        description: string
+        link: string
+    }[] = [];
+
+    async loadPresents() {
+        this.presents = require("./presents").default;
+        await this.updateStates();
+    }
+
+    async updateStates() {
+        //TODO vom server laden
+        this.presents[3].isBought = true;
+    }
+
+    async showPresents() {
+        const presentContainer = document.getElementById("present-container");
+        const presentTemplate = document.getElementById("present-template");
+        presentTemplate.remove();
+        presentTemplate.removeAttribute("id");
+
+        await this.loadPresents();
+
+        presentContainer.innerText = "";
+        console.log(this.presents);
+        this.presents.forEach(present => {
+            const element = <HTMLLinkElement>presentTemplate.cloneNode(true);
+            (<HTMLImageElement>element.querySelector(".present-image")).src = present.image;
+            (<HTMLElement>element.querySelector(".present-name")).innerText = present.name;
+            (<HTMLElement>element.querySelector(".present-description")).innerText = present.description;
+            element.href = present.link;
+
+            const checkboxElement = element.querySelector(".present-checkbox");
+            if (present.isBought) {
+                checkboxElement.classList.add("checked");
+            }
+
+            checkboxElement.addEventListener("click", async e => {
+                e.preventDefault();
+                await this.setPresentIsBought(present, !present.isBought);
+                if (present.isBought) {
+                    checkboxElement.classList.add("checked");
+                } else {
+                    checkboxElement.classList.remove("checked");
+                }
+            })
+
+            presentContainer.appendChild(element);
+        })
+    }
+
+    private async setPresentIsBought(present: { isBought: boolean; image: string; name: string; description: string; link: string }, isBought: boolean) {
+        //TODO auf Server updaten
+        present.isBought = isBought;
+    }
+}
--- a/src/client/js/index.ts
+++ b/src/client/js/index.ts
@ -0,0 +1,63 @@
+import * as $ from "jquery";
+import "foundation-sites/dist/js/foundation.es6";
+import {PresentsHandler} from "./PresentsHandler";
+
+const templates = {
+    home: require("../html/home.html"),
+    unterkunft: require("../html/unterkunft.html"),
+    tagesablauf: require("../html/tagesablauf.html"),
+    geschenke: require("../html/geschenke.html"),
+}
+
+async function startPresents(){
+    await new PresentsHandler().showPresents();
+}
+
+const callbacks = {
+    home: () => {},
+    unterkunft: () => {},
+    tagesablauf: () => {},
+    geschenke: startPresents,
+}
+
+$(document).foundation();
+
+$(function () {
+    const mainDiv = document.getElementById("main-content-container");
+    const container = document.getElementById("main-content");
+    const img = document.getElementById("home-img-container");
+
+    let currentSite = "home";
+
+    //Scroll-Element
+    mainDiv.addEventListener("scroll", e => {
+        console.log("scrolling!", e);
+    });
+
+
+    //Navigation
+    container.innerHTML = templates.home;
+    document.querySelectorAll(".menu li[data-site]").forEach((elem: HTMLElement) => {
+        elem.addEventListener("click", () => {
+            const oldActive = document.querySelector(".menu .active");
+            if (oldActive){
+                oldActive.classList.remove("active");
+            }
+            elem.classList.add("active");
+
+            container.innerHTML = templates[elem.dataset["site"]];
+            if (elem.dataset["img"] === "1"){
+                img.classList.remove("hidden");
+            }
+            else {
+                img.classList.add("hidden");
+            }
+
+            currentSite = elem.dataset["site"];
+
+            if (typeof callbacks[currentSite] === "function"){
+                callbacks[currentSite]();
+            }
+        });
+    })
+});
--- a/src/client/js/presents.ts
+++ b/src/client/js/presents.ts
@ -0,0 +1,49 @@
+export default [{
+    isBought: false,
+    image: require("../img/geschenke/test.jpg").default,
+    name: "Akku-Bohrer",
+    description: "Der von BOSCH, weil ich den schon immer mal haben wollte",
+    link: "http://www.onlinewahn.de/ende.htm",
+}, {
+    isBought: true,
+    image: require("../img/geschenke/test.jpg").default,
+    name: "Windows",
+    description: "Bisher konnte ich es mir nicht leisten und musste immer auf eine Web-Version zurückgreifen",
+    link: "https://www.windows93.net/",
+},{
+    isBought: false,
+    image: require("../img/geschenke/test.jpg").default,
+    name: "Akku-Bohrer",
+    description: "Der von BOSCH, weil ich den schon immer mal haben wollte",
+    link: "http://www.onlinewahn.de/ende.htm",
+}, {
+    isBought: false,
+    image: require("../img/geschenke/test.jpg").default,
+    name: "Windows",
+    description: "Bisher konnte ich es mir nicht leisten und musste immer auf eine Web-Version zurückgreifen",
+    link: "https://www.windows93.net/",
+},{
+    isBought: false,
+    image: require("../img/geschenke/test.jpg").default,
+    name: "Akku-Bohrer",
+    description: "Der von BOSCH, weil ich den schon immer mal haben wollte",
+    link: "http://www.onlinewahn.de/ende.htm",
+}, {
+    isBought: false,
+    image: require("../img/geschenke/test.jpg").default,
+    name: "Windows",
+    description: "Bisher konnte ich es mir nicht leisten und musste immer auf eine Web-Version zurückgreifen",
+    link: "https://www.windows93.net/",
+},{
+    isBought: false,
+    image: require("../img/geschenke/test.jpg").default,
+    name: "Akku-Bohrer",
+    description: "Der von BOSCH, weil ich den schon immer mal haben wollte",
+    link: "http://www.onlinewahn.de/ende.htm",
+}, {
+    isBought: false,
+    image: require("../img/geschenke/test.jpg").default,
+    name: "Windows",
+    description: "Bisher konnte ich es mir nicht leisten und musste immer auf eine Web-Version zurückgreifen",
+    link: "https://www.windows93.net/",
+},]
--- a/src/client/sass/_geschenke.scss
+++ b/src/client/sass/_geschenke.scss
@ -0,0 +1,44 @@
+.present {
+  color: black;
+
+  &:hover, &:focus {
+    color: black;
+  }
+
+  padding: 1rem;
+
+  .present-checkbox {
+    height: 10rem;
+    div {
+      position: relative;
+      margin-top: 4rem;
+      width: 2rem;
+      height: 2rem;
+      border: 2px solid black;
+      &::after{
+        position: absolute;
+        top: -1rem;
+        left: -0.5rem;
+        right: -0.5rem;
+        bottom: 0.1rem;
+        content: ""
+      }
+    }
+    &.checked div::after{
+      background-image: url("../img/check.png");
+      background-size: 100% 100%;
+    }
+  }
+
+  .present-image {
+    width: 10rem;
+    height: 10rem;
+    object-fit: contain;
+    padding-left: 1.3rem;
+    padding-right: 1.3rem;
+  }
+
+  .present-name {
+    font-weight: bold;
+  }
+}
--- a/src/client/sass/_navbar.scss
+++ b/src/client/sass/_navbar.scss
@ -0,0 +1,41 @@
+@import "settings";
+
+.top-bar {
+  background: white;
+  padding: 0;
+
+  .grid-container{
+    padding: 0;
+  }
+
+  .menu {
+    background: white;
+    display: flex;
+
+    li {
+      flex: 1;
+      text-align: center;
+      height: 5rem;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+
+      a {
+        color: black;
+        font-family: "Bahnschrift", Helvetica, Arial, serif;
+        font-size: 2rem;
+      }
+
+      &.active {
+        background: $background-color;
+
+        > a {
+          background: $background-color;
+        }
+      }
+    }
+
+    .logo-img {
+      height: 4rem;
+    }
+  }
+}
--- a/src/client/sass/_settings.scss
+++ b/src/client/sass/_settings.scss
@ -0,0 +1,874 @@
+$background-color: #d7c9ac;
+
+
+
+//  Foundation for Sites Settings
+//  -----------------------------
+//
+//  Table of Contents:
+//
+//   1. Global
+//   2. Breakpoints
+//   3. The Grid
+//   4. Base Typography
+//   5. Typography Helpers
+//   6. Abide
+//   7. Accordion
+//   8. Accordion Menu
+//   9. Badge
+//  10. Breadcrumbs
+//  11. Button
+//  12. Button Group
+//  13. Callout
+//  14. Card
+//  15. Close Button
+//  16. Drilldown
+//  17. Dropdown
+//  18. Dropdown Menu
+//  19. Flexbox Utilities
+//  20. Forms
+//  21. Label
+//  22. Media Object
+//  23. Menu
+//  24. Meter
+//  25. Off-canvas
+//  26. Orbit
+//  27. Pagination
+//  28. Progress Bar
+//  29. Prototype Arrow
+//  30. Prototype Border-Box
+//  31. Prototype Border-None
+//  32. Prototype Bordered
+//  33. Prototype Display
+//  34. Prototype Font-Styling
+//  35. Prototype List-Style-Type
+//  36. Prototype Overflow
+//  37. Prototype Position
+//  38. Prototype Rounded
+//  39. Prototype Separator
+//  40. Prototype Shadow
+//  41. Prototype Sizing
+//  42. Prototype Spacing
+//  43. Prototype Text-Decoration
+//  44. Prototype Text-Transformation
+//  45. Prototype Text-Utilities
+//  46. Responsive Embed
+//  47. Reveal
+//  48. Slider
+//  49. Switch
+//  50. Table
+//  51. Tabs
+//  52. Thumbnail
+//  53. Title Bar
+//  54. Tooltip
+//  55. Top Bar
+//  56. Xy Grid
+
+//@import 'util/util';
+
+// 1. Global
+// ---------
+
+$global-font-size: 100%;
+$global-width: rem-calc(1200);
+$global-lineheight: 1.5;
+$foundation-palette: (
+        primary: #1779ba,
+        secondary: #767676,
+        success: #3adb76,
+        warning: #ffae00,
+        alert: #cc4b37,
+);
+$light-gray: #e6e6e6;
+$medium-gray: #cacaca;
+$dark-gray: #8a8a8a;
+$black: #0a0a0a;
+$white: #fefefe;
+$body-background: $white;
+$body-font-color: $black;
+$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+$body-antialiased: true;
+$global-margin: 1rem;
+$global-padding: 1rem;
+$global-position: 1rem;
+$global-weight-normal: normal;
+$global-weight-bold: bold;
+$global-radius: 0;
+$global-menu-padding: 0.7rem 1rem;
+$global-menu-nested-margin: 1rem;
+$global-text-direction: ltr;
+$global-flexbox: true;
+$global-prototype-breakpoints: false;
+$global-button-cursor: auto;
+$global-color-pick-contrast-tolerance: 0;
+$print-transparent-backgrounds: true;
+
+@include add-foundation-colors;
+$print-hrefs: true;
+
+// 2. Breakpoints
+// --------------
+
+$breakpoints: (
+        small: 0,
+        smedium: 400px,
+        medium: 640px,
+        large: 1024px,
+        xlarge: 1200px,
+        xxlarge: 1440px,
+);
+$print-breakpoint: large;
+$breakpoint-classes: (small smedium medium large);
+
+// 3. The Grid
+// -----------
+
+$grid-row-width: $global-width;
+$grid-column-count: 12;
+$grid-column-gutter: (
+        small: 20px,
+        medium: 30px,
+);
+$grid-column-align-edge: true;
+$grid-column-alias: 'columns';
+$block-grid-max: 8;
+
+// 4. Base Typography
+// ------------------
+
+$header-font-family: $body-font-family;
+$header-font-weight: $global-weight-normal;
+$header-font-style: normal;
+$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
+$header-color: inherit;
+$header-lineheight: 1.4;
+$header-margin-bottom: 0.5rem;
+$header-styles: (
+        small: (
+                'h1': ('font-size': 24),
+                'h2': ('font-size': 20),
+                'h3': ('font-size': 19),
+                'h4': ('font-size': 18),
+                'h5': ('font-size': 17),
+                'h6': ('font-size': 16),
+        ),
+        medium: (
+                'h1': ('font-size': 48),
+                'h2': ('font-size': 40),
+                'h3': ('font-size': 31),
+                'h4': ('font-size': 25),
+                'h5': ('font-size': 20),
+                'h6': ('font-size': 16),
+        ),
+);
+$header-text-rendering: optimizeLegibility;
+$small-font-size: 80%;
+$header-small-font-color: $medium-gray;
+$paragraph-lineheight: 1.6;
+$paragraph-margin-bottom: 1rem;
+$paragraph-text-rendering: optimizeLegibility;
+$code-color: $black;
+$code-font-family: $font-family-monospace;
+$code-font-weight: $global-weight-normal;
+$code-background: $light-gray;
+$code-border: 1px solid $medium-gray;
+$code-padding: rem-calc(2 5 1);
+$anchor-color: $primary-color;
+$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
+$anchor-text-decoration: none;
+$anchor-text-decoration-hover: none;
+$hr-width: $global-width;
+$hr-border: 1px solid $medium-gray;
+$hr-margin: rem-calc(20) auto;
+$list-lineheight: $paragraph-lineheight;
+$list-margin-bottom: $paragraph-margin-bottom;
+$list-style-type: disc;
+$list-style-position: outside;
+$list-side-margin: 1.25rem;
+$list-nested-side-margin: 1.25rem;
+$defnlist-margin-bottom: 1rem;
+$defnlist-term-weight: $global-weight-bold;
+$defnlist-term-margin-bottom: 0.3rem;
+$blockquote-color: $dark-gray;
+$blockquote-padding: rem-calc(9 20 0 19);
+$blockquote-border: 1px solid $medium-gray;
+$cite-font-size: rem-calc(13);
+$cite-color: $dark-gray;
+$cite-pseudo-content: '\2014 \0020';
+$keystroke-font: $font-family-monospace;
+$keystroke-color: $black;
+$keystroke-background: $light-gray;
+$keystroke-padding: rem-calc(2 4 0);
+$keystroke-radius: $global-radius;
+$abbr-underline: 1px dotted $black;
+
+// 5. Typography Helpers
+// ---------------------
+
+$lead-font-size: $global-font-size * 1.25;
+$lead-lineheight: 1.6;
+$subheader-lineheight: 1.4;
+$subheader-color: $dark-gray;
+$subheader-font-weight: $global-weight-normal;
+$subheader-margin-top: 0.2rem;
+$subheader-margin-bottom: 0.5rem;
+$stat-font-size: 2.5rem;
+
+// 6. Abide
+// --------
+
+$abide-inputs: true;
+$abide-labels: true;
+$input-background-invalid: get-color(alert);
+$form-label-color-invalid: get-color(alert);
+$input-error-color: get-color(alert);
+$input-error-font-size: rem-calc(12);
+$input-error-font-weight: $global-weight-bold;
+
+// 7. Accordion
+// ------------
+
+$accordion-background: $white;
+$accordion-plusminus: true;
+$accordion-title-font-size: rem-calc(12);
+$accordion-item-color: $primary-color;
+$accordion-item-background-hover: $light-gray;
+$accordion-item-padding: 1.25rem 1rem;
+$accordion-content-background: $white;
+$accordion-content-border: 1px solid $light-gray;
+$accordion-content-color: $body-font-color;
+$accordion-content-padding: 1rem;
+
+// 8. Accordion Menu
+// -----------------
+
+$accordionmenu-padding: $global-menu-padding;
+$accordionmenu-nested-margin: $global-menu-nested-margin;
+$accordionmenu-submenu-padding: $accordionmenu-padding;
+$accordionmenu-arrows: true;
+$accordionmenu-arrow-color: $primary-color;
+$accordionmenu-item-background: null;
+$accordionmenu-border: null;
+$accordionmenu-submenu-toggle-background: null;
+$accordion-submenu-toggle-border: $accordionmenu-border;
+$accordionmenu-submenu-toggle-width: 40px;
+$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
+$accordionmenu-arrow-size: 6px;
+
+// 9. Badge
+// --------
+
+$badge-background: $primary-color;
+$badge-color: $white;
+$badge-color-alt: $black;
+$badge-palette: $foundation-palette;
+$badge-padding: 0.3em;
+$badge-minwidth: 2.1em;
+$badge-font-size: 0.6rem;
+
+// 10. Breadcrumbs
+// ---------------
+
+$breadcrumbs-margin: 0 0 $global-margin 0;
+$breadcrumbs-item-font-size: rem-calc(11);
+$breadcrumbs-item-color: $primary-color;
+$breadcrumbs-item-color-current: $black;
+$breadcrumbs-item-color-disabled: $medium-gray;
+$breadcrumbs-item-margin: 0.75rem;
+$breadcrumbs-item-uppercase: true;
+$breadcrumbs-item-separator: true;
+$breadcrumbs-item-separator-item: '/';
+$breadcrumbs-item-separator-item-rtl: '\\';
+$breadcrumbs-item-separator-color: $medium-gray;
+
+// 11. Button
+// ----------
+
+$button-font-family: inherit;
+$button-padding: 0.85em 1em;
+$button-margin: 0 0 $global-margin 0;
+$button-fill: solid;
+$button-background: $primary-color;
+$button-background-hover: scale-color($button-background, $lightness: -15%);
+$button-color: $white;
+$button-color-alt: $black;
+$button-radius: $global-radius;
+$button-hollow-border-width: 1px;
+$button-sizes: (
+        tiny: 0.6rem,
+        small: 0.75rem,
+        default: 0.9rem,
+        large: 1.25rem,
+);
+$button-palette: $foundation-palette;
+$button-opacity-disabled: 0.25;
+$button-background-hover-lightness: -20%;
+$button-hollow-hover-lightness: -50%;
+$button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
+$button-responsive-expanded: false;
+
+// 12. Button Group
+// ----------------
+
+$buttongroup-margin: 1rem;
+$buttongroup-spacing: 1px;
+$buttongroup-child-selector: '.button';
+$buttongroup-expand-max: 6;
+$buttongroup-radius-on-each: true;
+
+// 13. Callout
+// -----------
+
+$callout-background: $white;
+$callout-background-fade: 85%;
+$callout-border: 1px solid rgba($black, 0.25);
+$callout-margin: 0 0 1rem 0;
+$callout-padding: 1rem;
+$callout-font-color: $body-font-color;
+$callout-font-color-alt: $body-background;
+$callout-radius: $global-radius;
+$callout-link-tint: 30%;
+
+// 14. Card
+// --------
+
+$card-background: $white;
+$card-font-color: $body-font-color;
+$card-divider-background: $light-gray;
+$card-border: 1px solid $light-gray;
+$card-shadow: none;
+$card-border-radius: $global-radius;
+$card-padding: $global-padding;
+$card-margin-bottom: $global-margin;
+
+// 15. Close Button
+// ----------------
+
+$closebutton-position: right top;
+$closebutton-offset-horizontal: (
+        small: 0.66rem,
+        medium: 1rem,
+);
+$closebutton-offset-vertical: (
+        small: 0.33em,
+        medium: 0.5rem,
+);
+$closebutton-size: (
+        small: 1.5em,
+        medium: 2em,
+);
+$closebutton-lineheight: 1;
+$closebutton-color: $dark-gray;
+$closebutton-color-hover: $black;
+
+// 16. Drilldown
+// -------------
+
+$drilldown-transition: transform 0.15s linear;
+$drilldown-arrows: true;
+$drilldown-padding: $global-menu-padding;
+$drilldown-nested-margin: 0;
+$drilldown-background: $white;
+$drilldown-submenu-padding: $drilldown-padding;
+$drilldown-submenu-background: $white;
+$drilldown-arrow-color: $primary-color;
+$drilldown-arrow-size: 6px;
+
+// 17. Dropdown
+// ------------
+
+$dropdown-padding: 1rem;
+$dropdown-background: $body-background;
+$dropdown-border: 1px solid $medium-gray;
+$dropdown-font-size: 1rem;
+$dropdown-width: 300px;
+$dropdown-radius: $global-radius;
+$dropdown-sizes: (
+        tiny: 100px,
+        small: 200px,
+        large: 400px,
+);
+
+// 18. Dropdown Menu
+// -----------------
+
+$dropdownmenu-arrows: true;
+$dropdownmenu-arrow-color: $anchor-color;
+$dropdownmenu-arrow-size: 6px;
+$dropdownmenu-arrow-padding: 1.5rem;
+$dropdownmenu-min-width: 200px;
+$dropdownmenu-background: null;
+$dropdownmenu-submenu-background: $white;
+$dropdownmenu-padding: $global-menu-padding;
+$dropdownmenu-nested-margin: 0;
+$dropdownmenu-submenu-padding: $dropdownmenu-padding;
+$dropdownmenu-border: 1px solid $medium-gray;
+$dropdown-menu-item-color-active: get-color(primary);
+$dropdown-menu-item-background-active: transparent;
+
+// 19. Flexbox Utilities
+// ---------------------
+
+$flex-source-ordering-count: 6;
+$flexbox-responsive-breakpoints: true;
+
+// 20. Forms
+// ---------
+
+$fieldset-border: 1px solid $medium-gray;
+$fieldset-padding: rem-calc(20);
+$fieldset-margin: rem-calc(18 0);
+$legend-padding: rem-calc(0 3);
+$form-spacing: rem-calc(16);
+$helptext-color: $black;
+$helptext-font-size: rem-calc(13);
+$helptext-font-style: italic;
+$input-prefix-color: $black;
+$input-prefix-background: $light-gray;
+$input-prefix-border: 1px solid $medium-gray;
+$input-prefix-padding: 1rem;
+$form-label-color: $black;
+$form-label-font-size: rem-calc(14);
+$form-label-font-weight: $global-weight-normal;
+$form-label-line-height: 1.8;
+$select-background: $white;
+$select-triangle-color: $dark-gray;
+$select-radius: $global-radius;
+$input-color: $black;
+$input-placeholder-color: $medium-gray;
+$input-font-family: inherit;
+$input-font-size: rem-calc(16);
+$input-font-weight: $global-weight-normal;
+$input-line-height: $global-lineheight;
+$input-background: $white;
+$input-background-focus: $white;
+$input-background-disabled: $light-gray;
+$input-border: 1px solid $medium-gray;
+$input-border-focus: 1px solid $dark-gray;
+$input-padding: $form-spacing / 2;
+$input-shadow: inset 0 1px 2px rgba($black, 0.1);
+$input-shadow-focus: 0 0 5px $medium-gray;
+$input-cursor-disabled: not-allowed;
+$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
+$input-number-spinners: true;
+$input-radius: $global-radius;
+$form-button-radius: $global-radius;
+
+// 21. Label
+// ---------
+
+$label-background: $primary-color;
+$label-color: $white;
+$label-color-alt: $black;
+$label-palette: $foundation-palette;
+$label-font-size: 0.8rem;
+$label-padding: 0.33333rem 0.5rem;
+$label-radius: $global-radius;
+
+// 22. Media Object
+// ----------------
+
+$mediaobject-margin-bottom: $global-margin;
+$mediaobject-section-padding: $global-padding;
+$mediaobject-image-width-stacked: 100%;
+
+// 23. Menu
+// --------
+
+$menu-margin: 0;
+$menu-nested-margin: $global-menu-nested-margin;
+$menu-items-padding: $global-menu-padding;
+$menu-simple-margin: 1rem;
+$menu-item-color-active: $white;
+$menu-item-background-active: get-color(primary);
+$menu-icon-spacing: 0.25rem;
+$menu-state-back-compat: true;
+$menu-centered-back-compat: true;
+$menu-icons-back-compat: true;
+
+// 24. Meter
+// ---------
+
+$meter-height: 1rem;
+$meter-radius: $global-radius;
+$meter-background: $medium-gray;
+$meter-fill-good: $success-color;
+$meter-fill-medium: $warning-color;
+$meter-fill-bad: $alert-color;
+
+// 25. Off-canvas
+// --------------
+
+$offcanvas-sizes: (
+        small: 250px,
+);
+$offcanvas-vertical-sizes: (
+        small: 250px,
+);
+$offcanvas-background: $light-gray;
+$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
+$offcanvas-inner-shadow-size: 20px;
+$offcanvas-inner-shadow-color: rgba($black, 0.25);
+$offcanvas-overlay-zindex: 11;
+$offcanvas-push-zindex: 12;
+$offcanvas-overlap-zindex: 13;
+$offcanvas-reveal-zindex: 12;
+$offcanvas-transition-length: 0.5s;
+$offcanvas-transition-timing: ease;
+$offcanvas-fixed-reveal: true;
+$offcanvas-exit-background: rgba($white, 0.25);
+$maincontent-class: 'off-canvas-content';
+
+// 26. Orbit
+// ---------
+
+$orbit-bullet-background: $medium-gray;
+$orbit-bullet-background-active: $dark-gray;
+$orbit-bullet-diameter: 1.2rem;
+$orbit-bullet-margin: 0.1rem;
+$orbit-bullet-margin-top: 0.8rem;
+$orbit-bullet-margin-bottom: 0.8rem;
+$orbit-caption-background: rgba($black, 0.5);
+$orbit-caption-padding: 1rem;
+$orbit-control-background-hover: rgba($black, 0.5);
+$orbit-control-padding: 1rem;
+$orbit-control-zindex: 10;
+
+// 27. Pagination
+// --------------
+
+$pagination-font-size: rem-calc(14);
+$pagination-margin-bottom: $global-margin;
+$pagination-item-color: $black;
+$pagination-item-padding: rem-calc(3 10);
+$pagination-item-spacing: rem-calc(1);
+$pagination-radius: $global-radius;
+$pagination-item-background-hover: $light-gray;
+$pagination-item-background-current: $primary-color;
+$pagination-item-color-current: $white;
+$pagination-item-color-disabled: $medium-gray;
+$pagination-ellipsis-color: $black;
+$pagination-mobile-items: false;
+$pagination-mobile-current-item: false;
+$pagination-arrows: true;
+
+// 28. Progress Bar
+// ----------------
+
+$progress-height: 1rem;
+$progress-background: $medium-gray;
+$progress-margin-bottom: $global-margin;
+$progress-meter-background: $primary-color;
+$progress-radius: $global-radius;
+
+// 29. Prototype Arrow
+// -------------------
+
+$prototype-arrow-directions: (
+        down,
+        up,
+        right,
+        left
+);
+$prototype-arrow-size: 0.4375rem;
+$prototype-arrow-color: $black;
+
+// 30. Prototype Border-Box
+// ------------------------
+
+$prototype-border-box-breakpoints: $global-prototype-breakpoints;
+
+// 31. Prototype Border-None
+// -------------------------
+
+$prototype-border-none-breakpoints: $global-prototype-breakpoints;
+
+// 32. Prototype Bordered
+// ----------------------
+
+$prototype-bordered-breakpoints: $global-prototype-breakpoints;
+$prototype-border-width: rem-calc(1);
+$prototype-border-type: solid;
+$prototype-border-color: $medium-gray;
+
+// 33. Prototype Display
+// ---------------------
+
+$prototype-display-breakpoints: $global-prototype-breakpoints;
+$prototype-display: (
+        inline,
+        inline-block,
+        block,
+        table,
+        table-cell
+);
+
+// 34. Prototype Font-Styling
+// --------------------------
+
+$prototype-font-breakpoints: $global-prototype-breakpoints;
+$prototype-wide-letter-spacing: rem-calc(4);
+$prototype-font-normal: $global-weight-normal;
+$prototype-font-bold: $global-weight-bold;
+
+// 35. Prototype List-Style-Type
+// -----------------------------
+
+$prototype-list-breakpoints: $global-prototype-breakpoints;
+$prototype-style-type-unordered: (
+        disc,
+        circle,
+        square
+);
+$prototype-style-type-ordered: (
+        decimal,
+        lower-alpha,
+        lower-latin,
+        lower-roman,
+        upper-alpha,
+        upper-latin,
+        upper-roman
+);
+
+// 36. Prototype Overflow
+// ----------------------
+
+$prototype-overflow-breakpoints: $global-prototype-breakpoints;
+$prototype-overflow: (
+        visible,
+        hidden,
+        scroll
+);
+
+// 37. Prototype Position
+// ----------------------
+
+$prototype-position-breakpoints: $global-prototype-breakpoints;
+$prototype-position: (
+        static,
+        relative,
+        absolute,
+        fixed
+);
+$prototype-position-z-index: 975;
+
+// 38. Prototype Rounded
+// ---------------------
+
+$prototype-rounded-breakpoints: $global-prototype-breakpoints;
+$prototype-border-radius: rem-calc(3);
+
+// 39. Prototype Separator
+// -----------------------
+
+$prototype-separator-breakpoints: $global-prototype-breakpoints;
+$prototype-separator-align: center;
+$prototype-separator-height: rem-calc(2);
+$prototype-separator-width: 3rem;
+$prototype-separator-background: $primary-color;
+$prototype-separator-margin-top: $global-margin;
+
+// 40. Prototype Shadow
+// --------------------
+
+$prototype-shadow-breakpoints: $global-prototype-breakpoints;
+$prototype-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16),
+0 2px 10px 0 rgba(0, 0, 0, .12);
+
+// 41. Prototype Sizing
+// --------------------
+
+$prototype-sizing-breakpoints: $global-prototype-breakpoints;
+$prototype-sizing: (
+        width,
+        height
+);
+$prototype-sizes: (
+        25: 25%,
+        50: 50%,
+        75: 75%,
+        100: 100%
+);
+
+// 42. Prototype Spacing
+// ---------------------
+
+$prototype-spacing-breakpoints: $global-prototype-breakpoints;
+$prototype-spacers-count: 3;
+
+// 43. Prototype Text-Decoration
+// -----------------------------
+
+$prototype-decoration-breakpoints: $global-prototype-breakpoints;
+$prototype-text-decoration: (
+        overline,
+        underline,
+        line-through,
+);
+
+// 44. Prototype Text-Transformation
+// ---------------------------------
+
+$prototype-transformation-breakpoints: $global-prototype-breakpoints;
+$prototype-text-transformation: (
+        lowercase,
+        uppercase,
+        capitalize
+);
+
+// 45. Prototype Text-Utilities
+// ----------------------------
+
+$prototype-utilities-breakpoints: $global-prototype-breakpoints;
+$prototype-text-overflow: ellipsis;
+
+// 46. Responsive Embed
+// --------------------
+
+$responsive-embed-margin-bottom: rem-calc(16);
+$responsive-embed-ratios: (
+        default: 4 by 3,
+        widescreen: 16 by 9,
+);
+
+// 47. Reveal
+// ----------
+
+$reveal-background: $white;
+$reveal-width: 600px;
+$reveal-max-width: $global-width;
+$reveal-padding: $global-padding;
+$reveal-border: 1px solid $medium-gray;
+$reveal-radius: $global-radius;
+$reveal-zindex: 1005;
+$reveal-overlay-background: rgba($black, 0.45);
+
+// 48. Slider
+// ----------
+
+$slider-width-vertical: 0.5rem;
+$slider-transition: all 0.2s ease-in-out;
+$slider-height: 0.5rem;
+$slider-background: $light-gray;
+$slider-fill-background: $medium-gray;
+$slider-handle-height: 1.4rem;
+$slider-handle-width: 1.4rem;
+$slider-handle-background: $primary-color;
+$slider-opacity-disabled: 0.25;
+$slider-radius: $global-radius;
+
+// 49. Switch
+// ----------
+
+$switch-background: $medium-gray;
+$switch-background-active: $primary-color;
+$switch-height: 2rem;
+$switch-height-tiny: 1.5rem;
+$switch-height-small: 1.75rem;
+$switch-height-large: 2.5rem;
+$switch-radius: $global-radius;
+$switch-margin: $global-margin;
+$switch-paddle-background: $white;
+$switch-paddle-offset: 0.25rem;
+$switch-paddle-radius: $global-radius;
+$switch-paddle-transition: all 0.25s ease-out;
+
+// 50. Table
+// ---------
+
+$table-background: $white;
+$table-color-scale: 5%;
+$table-border: 1px solid smart-scale($table-background, $table-color-scale);
+$table-padding: rem-calc(8 10 10);
+$table-hover-scale: 2%;
+$table-row-hover: darken($table-background, $table-hover-scale);
+$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+$table-is-striped: true;
+$table-striped-background: smart-scale($table-background, $table-color-scale);
+$table-stripe: even;
+$table-head-background: smart-scale($table-background, $table-color-scale / 2);
+$table-head-row-hover: darken($table-head-background, $table-hover-scale);
+$table-foot-background: smart-scale($table-background, $table-color-scale);
+$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
+$table-head-font-color: $body-font-color;
+$table-foot-font-color: $body-font-color;
+$show-header-for-stacked: false;
+$table-stack-breakpoint: medium;
+
+// 51. Tabs
+// --------
+
+$tab-margin: 0;
+$tab-background: $white;
+$tab-color: $primary-color;
+$tab-background-active: $light-gray;
+$tab-active-color: $primary-color;
+$tab-item-font-size: rem-calc(12);
+$tab-item-background-hover: $white;
+$tab-item-padding: 1.25rem 1.5rem;
+$tab-content-background: $white;
+$tab-content-border: $light-gray;
+$tab-content-color: $body-font-color;
+$tab-content-padding: 1rem;
+
+// 52. Thumbnail
+// -------------
+
+$thumbnail-border: 4px solid $white;
+$thumbnail-margin-bottom: $global-margin;
+$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
+$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
+$thumbnail-transition: box-shadow 200ms ease-out;
+$thumbnail-radius: $global-radius;
+
+// 53. Title Bar
+// -------------
+
+$titlebar-background: $black;
+$titlebar-color: $white;
+$titlebar-padding: 0.5rem;
+$titlebar-text-font-weight: bold;
+$titlebar-icon-color: $white;
+$titlebar-icon-color-hover: $medium-gray;
+$titlebar-icon-spacing: 0.25rem;
+
+// 54. Tooltip
+// -----------
+
+$has-tip-cursor: help;
+$has-tip-font-weight: $global-weight-bold;
+$has-tip-border-bottom: dotted 1px $dark-gray;
+$tooltip-background-color: $black;
+$tooltip-color: $white;
+$tooltip-padding: 0.75rem;
+$tooltip-max-width: 10rem;
+$tooltip-font-size: $small-font-size;
+$tooltip-pip-width: 0.75rem;
+$tooltip-pip-height: $tooltip-pip-width * 0.866;
+$tooltip-radius: $global-radius;
+
+// 55. Top Bar
+// -----------
+
+$topbar-padding: 0.5rem;
+$topbar-background: $light-gray;
+$topbar-submenu-background: $topbar-background;
+$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
+$topbar-input-width: 200px;
+$topbar-unstack-breakpoint: medium;
+
+// 56. Xy Grid
+// -----------
+
+$xy-grid: true;
+$grid-container: $global-width;
+$grid-columns: 12;
+$grid-margin-gutters: (
+        small: 20px,
+        medium: 30px
+);
+$grid-padding-gutters: $grid-margin-gutters;
+$grid-container-padding: $grid-padding-gutters;
+$grid-container-max: $global-width;
+$xy-block-grid-max: 8;
+
--- a/src/client/sass/_unterkunft.scss
+++ b/src/client/sass/_unterkunft.scss
@ -0,0 +1,6 @@
+#map_unterkunft{
+  width: 100%;
+  height: 100%;
+  border: 0;
+  padding-left: 1rem;
+}
--- a/src/client/sass/index.scss
+++ b/src/client/sass/index.scss
@ -0,0 +1,115 @@
+@import "../../../node_modules/foundation-sites/scss/foundation";
+
+//@import "settings";
+
+//Importiere zuerst foundation vor anderen Imports, damit foundation-settings überschrieben werden
+@include foundation-everything;
+
+@import "navbar";
+@import "unterkunft";
+@import "geschenke";
+
+.width-100 {
+  width: 100%;
+}
+.height-100{
+  height: 100%;
+}
+
+html {
+  height: 100%;
+  font-size: 20px;
+  letter-spacing: 1.1px;
+}
+
+.grow{
+  flex: 1;
+}
+
+body {
+  background: $background-color;
+  width: 100%;
+  height: 100%;
+
+  nav.top-bar {
+
+  }
+
+  #main-content-container {
+    height: calc(100% - 5rem);
+    position: relative;
+    overflow: auto;
+
+    #scroll-container {
+      height: 100%;
+      background: $background-color;
+
+      > .grid-container {
+        height: 100%;
+
+        > .grid-x {
+          height: 100%;
+        }
+      }
+
+      #main-content {
+        height: 100%;
+        padding: 0;
+      }
+    }
+  }
+}
+
+.overflow-auto{
+  overflow: auto;
+}
+
+h1, p, .padding-default {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+a.hidden-link, a.hidden-link:hover{
+  text-decoration: none;
+  color: inherit;
+}
+
+#home-img-container {
+  #home-img {
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+
+    position: fixed;
+
+    img {
+      width: 100%;
+      height: calc(100% - 5rem);
+      object-fit: cover;
+    }
+
+    #start-text-img-overlay {
+      position: absolute;
+      left: 2rem;
+      top: 50%;
+      color: white;
+      font-family: "Winter Sunrise", Arial, serif;
+      font-size: 4rem;
+      line-height: 2.5;
+    }
+  }
+
+  #img-spacer {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+img.full-screen-width {
+  width: 100vw;
+}
+
+.hidden {
+  display: none;
+}
--- a/src/server/Server.ts
+++ b/src/server/Server.ts
@ -0,0 +1,135 @@
+import * as express from "express";
+import {createServer, Server as HTTPServer} from "http";
+import * as path from "path";
+
+export class Server {
+    private httpServer: HTTPServer;
+    private app: express.Application;
+    // private io: socketIO.Server;
+
+    // private activeSockets: string[] = [];
+    // private senders: string[] = [];
+
+    private readonly DEFAULT_PORT = parseInt(process.env.PORT) || 5000;
+
+    constructor() {
+        this.initialize();
+    }
+
+    private initialize(): void {
+        this.app = express();
+        this.httpServer = createServer(this.app);
+        // this.io = socketIO(this.httpServer);
+
+        this.configureApp();
+        this.configureRoutes();
+        // this.handleSocketConnection();
+    }
+
+    private configureApp(): void {
+        this.app.use(express.static(path.join(__dirname, "../../dist")));
+    }
+
+    private configureRoutes(): void {
+        this.app.get("/", (req, res) => {
+            res.sendFile("index.html");
+        });
+    }
+
+    // private handleSocketConnection(): void {
+    //     let webserverSocket = null;
+    //     this.io.on("connection", socket => {
+    //         console.log("new client", new Date());
+    //         const existingSocket = this.activeSockets.find(
+    //             existingSocket => existingSocket === socket.id
+    //         );
+    //
+    //         if (!existingSocket) {
+    //             this.activeSockets.push(socket.id);
+    //
+    //             socket.emit("update-user-list", {
+    //                 users: this.activeSockets.filter(
+    //                     existingSocket => existingSocket !== socket.id
+    //                 )
+    //             });
+    //
+    //             socket.broadcast.emit("update-user-list", {
+    //                 users: [socket.id]
+    //             });
+    //         }
+    //
+    //         socket.on("message", (data: any) => {
+    //             console.log(new Date(), data.to, data.message.type);
+    //             if (data.message.type === undefined){
+    //                 console.log(new Date(), data.message);
+    //             }
+    //             if (data.to) {
+    //                 socket.to(data.to).emit("message", data);
+    //             } else if (webserverSocket) {
+    //                 data.from = socket.id;
+    //                 webserverSocket.emit("message", data)
+    //             }
+    //         });
+    //
+    //         socket.on("set-webserver", () => {
+    //             if (webserverSocket === null) {
+    //                 console.log("setting webserver", new Date())
+    //                 webserverSocket = socket;
+    //
+    //                 this.activeSockets.forEach(s => {
+    //                     if (s !== socket.id){
+    //                         socket.to(s).emit("ready");
+    //                     }
+    //                 });
+    //             }
+    //         })
+    //
+    //         if (webserverSocket){
+    //             socket.emit("ready");
+    //         }
+    //         // socket.on("request-offer", () => {
+    //         //     if (webserverSocket) {
+    //         //         webserverSocket.emit("request-offer", {socket: socket.id})
+    //         //     }
+    //         // });
+    //         //
+    //         // socket.on("answer", data => {
+    //         //     console.log("got answer", data.answer);
+    //         //     socket.to(data.to).emit("answer", data.answer);
+    //         // });
+    //         //
+    //         // socket.on("send-answer", data => {
+    //         //     if (webserverSocket) {
+    //         //         addMessage(socket.id, JSON.parse(data));
+    //         //         webserverSocket.emit("send-answer", data)
+    //         //     }
+    //         // });
+    //         //
+    //         // socket.on("send-ice-candidate", data => {
+    //         //     if (socket.to(data.to)){
+    //         //         addMessage(socket.id, data.candidate);
+    //         //         socket.to(data.to).emit("ice-candidate", data.candidate)
+    //         //     }
+    //         // });
+    //
+    //         socket.on("disconnect", () => {
+    //             console.log("losing client", new Date())
+    //             this.activeSockets = this.activeSockets.filter(
+    //                 existingSocket => existingSocket !== socket.id
+    //             );
+    //             socket.broadcast.emit("remove-user", {
+    //                 socketId: socket.id
+    //             });
+    //             if (socket === webserverSocket){
+    //                 webserverSocket = null;
+    //             }
+    //         });
+    //     });
+    // }
+
+    public listen(callback: (port: number) => void): void {
+        this.httpServer.listen(this.DEFAULT_PORT, () => {
+            callback(this.DEFAULT_PORT);
+        });
+    }
+}
--- a/src/server/index.ts
+++ b/src/server/index.ts
@ -0,0 +1,8 @@
+import "dotenv/config";
+import { Server } from "./Server";
+
+const server = new Server();
+
+server.listen(port => {
+    console.log(`Server is listening on http://localhost:${port}`);
+});
--- a/todo.txt
+++ b/todo.txt
@ -0,0 +1,9 @@
+- Schriftarten herunterladen & einbinden
+    - Bahnschrift für navbar
+    - Allgemeine Schriftart
+    - Überschriften, Winter Sunrise, Regular
+- Hotelname bei Unterkunft anpassen
+- E-Mail bei Herzlich Willkommen hinzufügen
+- E-Mailadresse von Melanie - Tagesablauf
+- Tagesablauf Bild-Scroll-Click
+- Geschenkliste synchronisieren
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,25 @@
+{
+  "version": "2.0.2",
+  "compilerOptions": {
+    "lib": ["es5", "es2015.promise", "dom", "es2015", "es6"],
+    "target": "es6",
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "allowJs": true
+  },
+  "include": [
+//    "./node_modules/cordova-sites/**/*",
+//    "./node_modules/cordova-sites-database/**/*",
+//    "./node_modules/cordova-sites-easy-sync/**/*",
+//    "./node_modules/cordova-sites-user-management/**/*",
+    //    "./node_modules/js-helper/**/*",
+    "./src/client/**/*",
+    "./src/shared/**/*"
+  ],
+  "exclude": [],
+  "emitDecoratorMetadata": true,
+  "experimentalDecorators": true
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,219 @@
+require("dotenv").config();
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const {CleanWebpackPlugin} = require('clean-webpack-plugin');
+// const CopyWebpackPlugin = require("copy-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const webpack = require('webpack');
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+// const WorkboxPlugin = require('workbox-webpack-plugin');
+
+
+let mode = (process.env.MODE || "development");
+
+let moduleExports = {
+
+    //Development oder production, wird oben durch Variable angegeben (damit später per IF überprüft)
+    mode: mode,
+
+    //Beinhaltet den JS-Startpunkt und SCSS-Startpunkt
+    entry: [
+        __dirname + "/src/client/js/index.ts",
+        __dirname + "/src/client/sass/index.scss"
+    ],
+    // devtool: 'inline-source-map',
+
+    //Gibt Ausgabename und Ort für JS-File an
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: "bundle.js"
+    },
+    resolve: {
+        extensions: [".ts", ".js", ".mjs", ".json", "png"]
+    },
+
+    optimization: {
+        // minimize: false
+        minimizer: [
+            new TerserPlugin({
+                cache: true,
+                parallel: true,
+                sourceMap: true, // Must be set to true if using source-maps in production
+                terserOptions: {
+                    mangle: {
+                        reserved: []
+                    }
+                }
+            })
+        ]
+    },
+
+    plugins: [
+        //Delete www before every Build (to only have nessesary files)
+        new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns: ['**/*', '!**/.gitkeep']}),
+
+        // new WorkboxPlugin.GenerateSW({
+        //     maximumFileSizeToCacheInBytes: 1024 * 1024 * 1024 * 5
+        // }),
+
+        //Erstellt (kopiert) die Index.html
+        new HtmlWebpackPlugin({
+            // template: '!!html-loader!src/client/index.html'
+            template: 'src/client/index.html'
+        }),
+        new webpack.DefinePlugin({}),
+        new MiniCssExtractPlugin(),
+    ],
+
+    module: {
+
+        //Regeln: Wenn Regex zutrifft => führe Loader (in UMGEKEHRTER) Reihenfolge aus
+        rules: [
+            {
+                //Kopiert HTML-Dateien in www. Nur die Dateien, welche im JS angefragt werden
+                test: /\.html$/,
+                use: [
+                    // {
+                    //     loader: 'file-loader',
+                    //     options: {
+                    //         name: '[name].[ext]',
+                    //         outputPath: 'html'
+                    //     }
+                    // },
+                    // {
+                    //     loader: 'extract-loader'
+                    // },
+                    {
+                        loader: 'html-loader',
+                        options: {
+                            //Sorgt dafür, dass Child-Views funktionieren
+                            attributes: {
+                                list: [
+                                    // {
+                                    //     "attribute": "data-view",
+                                    //     "type": "src"
+                                    // },
+                                    {
+                                        "attribute": "src",
+                                        "type": "src"
+                                    },
+                                    {
+                                        "attribute": "href",
+                                        "tag": "link",
+                                        "type": "src"
+                                    },
+                                ],
+                            }
+                        }
+                    }
+                ],
+            },
+            {
+                test: /\.tsx?$/,
+                use: ["ts-loader"],
+            },
+            {
+                //Kopiert nur benutzte Bilder/Videos/Sound (benutzt durch JS (import), html oder css/sass)
+                test: /(img|video|sound)[\\\/]/,
+                use: [
+                    {
+                        loader: 'file-loader',
+                        options: {
+                            name: (resourcePath, resourceQuery) => {
+                                // console.log("path", resourcePath);
+                                // console.log("query", resourceQuery);
+                                return "[name].[ext]"
+                            },
+                            outputPath: 'img',
+                            publicPath: (url, resourcePath, context) => {
+                                // console.log("url: ", url);
+                                // console.log("resourcePath: ", resourcePath);
+                                // console.log("context: ", context);
+
+                                return "/img/" + url;
+                            },
+                            // useRelativePath: false
+                        }
+                    },
+                ],
+            },
+            {
+                //Compiliert SASS zu CSS und speichert es in Datei
+                test: /\.scss$/,
+                use: [
+                    // {
+                    //     loader: 'file-loader',
+                    //     options: {
+                    //         name: '[name].css',
+                    //         outputPath: 'css',
+                    //         // publicPath: '/css'
+                    //     }
+                    // },
+                    // {
+                    //     loader: 'extract-loader'
+                    // },
+                    {
+                        loader: MiniCssExtractPlugin.loader,
+                    },
+                    {
+                        loader: 'css-loader'
+                    },
+                    {
+                        //Compiliert zu CSS
+                        loader: 'sass-loader'
+                    }
+                ]
+            }
+        ]
+    }
+};
+
+//Auslagerung von zeitintensiven Sachen in production only, damit Debugging schneller geht
+if (mode === "production" && false) {
+
+    //Polyfills hinzufügen
+    moduleExports["entry"].unshift("@babel/polyfill");
+    // moduleExports["devtool"] = "source-map";
+
+    //Transpilieren zu ES5
+    moduleExports["module"]["rules"].push({
+        test: /\.m?js$/,
+        exclude: /node_modules\/(?!(cordova-sites|js-helper|cs-event-manager|polygon-geometry))/,
+        use: {
+            loader: 'babel-loader',
+            options: {
+                presets: ['@babel/preset-env'],
+            }
+        }
+    });
+
+    moduleExports["module"]["rules"][1]["use"].unshift({
+        loader: 'babel-loader',
+        options: {
+            presets: ['@babel/preset-env'],
+            inputSourceMap: "inline",
+            sourceMaps: true
+
+        }
+    });
+
+    //Hinzufügen von POSTCSS und Autoprefixer für alte css-Präfixe
+    moduleExports["module"]["rules"][3]["use"].splice(3, 0, {
+        //PostCSS ist nicht wichtig, autoprefixer schon. Fügt Präfixes hinzu (Bsp.: -webkit), wo diese benötigt werden
+        loader: 'postcss-loader',
+        options: {
+            plugins: [require('autoprefixer')()]
+        }
+    });
+
+    // moduleExports["optimization"] = {
+    //     minimize: false,
+    //     // minimizer: [new UglifyJsPlugin({
+    //     //     include: /\.min\.js$/
+    //     // })]
+    // }
+}
+
+module.exports = moduleExports;
+