update

Vorlage/.~lock.Hochzeitswebsite Julia und Samuel.docx#

@@ -0,0 +1 @@
+,silas,silas-manjaro,01.12.2020 14:18,file:///home/silas/.config/libreoffice/4;

Vorlage/.~lock.Hochzeitswebsite Julia und Samuel_v2.docx#

@@ -0,0 +1 @@
+,silas,silas-manjaro,17.12.2020 12:36,file:///home/silas/.config/libreoffice/4;

dist/index.html

@@ -46,7 +46,7 @@
         </div>
     </div>
 </nav>
-<div id="main-content-container">
+<div id="main-content-container" class="hide-scrollbar">
     <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"

dist/main.css

@@ -4780,15 +4780,18 @@ html.is-reveal-open {
         padding-right: 0.5rem; }
       @media print, screen and (min-width: 64em) {
         .top-bar .menu li {
-          height: 4rem; } }
+          height: 4rem; }
+          .top-bar .menu li a {
+            font-size: 1rem !important; } }
       .top-bar .menu li a {
         color: black;
         font-family: "Bahnschrift", Helvetica, Arial, serif;
-        font-size: 1.3rem;
-        padding: 0.3rem; }
+        font-size: 1rem;
+        font-weight: bold;
+        padding: 0.5rem; }
         @media print, screen and (min-width: 64em) {
           .top-bar .menu li a {
-            padding: 0.7rem 1rem;
+            padding: 1rem 1rem;
             font-size: 1.7rem; } }
       .top-bar .menu li.active {
         background: white; }
@@ -4802,10 +4805,17 @@ html.is-reveal-open {
         right: 0;
         bottom: 0;
         background-image: url(/img/einkreiser.png);
-        background-size: 100% 100%;
+        background-size: contain;
+        background-position: center;
         background-repeat: no-repeat;
         display: none;
         cursor: pointer; }
+        @media print, screen and (min-width: 50em) and (max-width: 63.99875em) {
+          .top-bar .menu li::after {
+            background-size: 165px 100%; } }
+        @media print, screen and (max-width: 49.99875em) {
+          .top-bar .menu li::after {
+            background-size: 100% 100%; } }
       .top-bar .menu li.active::after {
         display: initial;
         opacity: 0.7; }

src/client/html/geschenke.html

@@ -1,12 +1,13 @@
 <div class="flex-container fill-height-medium-up">
     <div class="grow height-100 overflow-auto site-content hide-scrollbar">
-        <h1>Gechenkliste</h1>
+        <h1>Geschenkeliste</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.
+            sehr freuen. Außerdem lieben wir es zu reisen und freuen uns immer über Geld für unsere Reisekasse. Falls
+            ihr euch unten in der Liste etwas ausgesucht habt, dann setzt dort gerne einen Haken. Wenn ihr auf ein Bild
+            klickt, öffnet sich direkt der passende Link dazu.
         </p>
-
         <div id="present-container">
             <a id="present-template" class="flex-container present" target="_blank">
                 <div class="present-checkbox">

src/client/html/home.html

@@ -1,7 +1,7 @@
 <div class="site-content grid-container">
     <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>
+        Bitte sagt uns doch bis zum 15.März, ob ihr dabei sein könnt! Schreibt uns dazu bitte eine Mail an <a href = 'mailto:hochzeit-js@gmx.net'>hochzeit-js@gmx.net</a>.</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

src/client/html/tagesablauf.html

@@ -9,7 +9,7 @@
         <img src="../img/einkreiser.png" class="circler spiel" data-state="spiel">
         <img src="../img/einkreiser.png" class="circler dance" data-state="dance">
     </div>
-    <div class="grow height-100 overflow-auto site-content hide-for-small-only">
+    <div class="grow height-100 overflow-auto site-content hide-for-small-only hide-scrollbar">
         <div class="anchor" data-state="godi">
             <h1>Traugottesdienst</h1>
             <p>
@@ -54,7 +54,7 @@
                 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
+                gerne bei <a href = 'mailto:seitz-miriam@web.de'>Miriam Seitz (seitz.miriam@web.de)</a>. 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></div>
         <div class="anchor" data-state="dance">

src/client/html/unterkunft.html

@@ -1,17 +1,22 @@
 <div class="flex-container fill-height-medium-up">
-<!--    <div class="height-100 show-for-small-only">-->
-<!--        <img src="../img/unterkunft.jpg">-->
-<!--    </div>-->
-    <div class="grow height-100 overflow-auto site-content">
+    <!--    <div class="height-100 show-for-small-only">-->
+    <!--        <img src="../img/unterkunft.jpg">-->
+    <!--    </div>-->
+    <div class="grow height-100 overflow-auto site-content hide-scrollbar">
         <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.
+            Unten stehend findet ihr Vorschläge für Übernachtungsmöglichkeiten in Aachen. Wahrscheinlich macht es auf
+            Grund der aktuellen Corona-Lage noch keinen Sinn, dass ihr etwas bucht, weil wir erst abwarten müssen,
+            inwiefern wir unsere Hochzeit feiern können.
+        </p>
+        <p>
+            Das B&B Hotel Aachen City (Großkölnstraße 57-63) ist fußläufig von unserer Location in fünf Minuten zu
+            erreichen. Da wir von der Kirche zu Fuß ins Forum M gehen können, könnt ihr das Auto 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
@@ -28,8 +33,8 @@
                 </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>
+<!--                <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>-->
+                <iframe id="map_unterkunft" src="https://maps.google.com/maps?width=520&amp;height=395&amp;hl=de&amp;q=B%26B+Hotel+Aachen-City,+Großkölnstraße+57-63,+52062+Aachen&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe>
             </div>
         </div>
     </div>

src/client/index.html

@@ -46,7 +46,7 @@
         </div>
     </div>
 </nav>
-<div id="main-content-container">
+<div id="main-content-container" class="hide-scrollbar">
     <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"

src/client/js/PresentsHandler.ts

@@ -50,7 +50,7 @@ export class PresentsHandler {
             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;
+            (<HTMLElement>element.querySelector(".present-description")).innerHTML = present.description;
             element.href = present.link;
 
             const checkboxElement = element.querySelector(".present-checkbox");

src/client/js/presents.ts

@@ -1,65 +1,104 @@
 export default [{
     id: 1,
     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",
+    image: require("../img/geschenke/Quicheform.png").default,
+    name: "Quicheform",
+    description: "Eine Keramik-Quicheform mit Haltegriffen, die spülmaschinengeeigent ist (wie im Link oder ähnlich)",
+    link: "https://www.zwilling.com/de/zwilling-kuchenform-28-cm-keramik-40202-028-0/40202-028-0.html",
     version: 0,
 }, {
     id: 2,
     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/",
+    image: require("../img/geschenke/Sodastream.png").default,
+    name: "2 Sodastream Flaschen",
+    description: "Zwei Glaskaraffen für den Sodastream Crystal",
+    link: "https://sodastream.de/products/glaskaraffe-duo-pack-0-8l",
     version: 0,
-},{
+}, {
     id: 3,
     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",
+    image: require("../img/geschenke/GoPro.png").default,
+    name: "Go Pro Hero 7 black",
+    description: "Eine Go Pro Hero 7 Actioncam in schwarz",
+    link: "https://gopro.com/de/de/shop/hero7-black/tech-specs?pid=CHDHX-701-master",
     version: 0,
 }, {
     id: 4,
     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/",
+    image: require("../img/geschenke/AdventureKit_GoPro.png").default,
+    name: "Go Pro Zubehör",
+    description: "Go Pro Abenteuer Kit mit schwimmendem Handgriff, Kopfgurt, QuickClip und Tasche",
+    link: "https://gopro.com/de/de/shop/mounts-accessories/abenteuer-kit/AKTES-002.html",
     version: 0,
-},{
+}, {
     id: 5,
     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",
+    image: require("../img/geschenke/Messerblock.png").default,
+    name: "Messerblock",
+    description: "ZWILLING Messerblock, 8-tlg., Bambusblock, 6 Messer und eine Schere aus rostfreiem Spezialstahl",
+    link: "https://www.amazon.de/Zwilling-32434-002-0-Bambus-Style-8-tlg/dp/B00AO2TRUI/",
     version: 0,
 }, {
-    id:6,
+    id: 6,
     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/",
+    image: require("../img/geschenke/Brettspiele.jpg").default,
+    name: "Brettspiele",
+    description: "Wir freuen uns immer über ein neues, spannendes Brettspiel. Hier eine Liste von Spielen, die wir schon haben:<ul><li>Die Siedler inklusive Seefahrer Erweiterung</li><li>Dominion</li><li>Kingdom Builder</li><li>Keltis</li><li> Das verrückte Labyrinth</li><li> Trivial Pursuit</li><li> Dog</li><li> Outburst</li><li>eine Spielesammlung</li></ul>",
+    link: "",
     version: 0,
-},{
-    id:7,
-    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",
-    version: 0,
-}, {
-    id: 8,
-    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/",
-    version: 0,
-},]
+},
+    {
+        id: 7,
+        isBought: false,
+        image: require("../img/geschenke/Zahnbürste.png").default,
+        name: "Elektrische Pärchenzahn-bürste",
+        description: "Nachhaltige elektrische Zahnbürste von happy brush, SCHALL VIBE 3 Partner Bundle",
+        link: "https://www.happybrush.de/starterkit-vibe-3-schall-zahnbuerste-bundle-mix/",
+        version: 0,
+    },
+    {
+        id: 8,
+        isBought: false,
+        image: require("../img/geschenke/Kappsäge.png").default,
+        name: "Kappsäge",
+        description: "Einhell Kapp-/Gehrungssäge TC-MS 2112 (1600 W, Sägeblatt Ø 210 mm, Schnittbreite 120 mm, schwenkbarer Sägekopf)",
+        link: "https://www.amazon.de/dp/B00DEXXFMK",
+        version: 0,
+    },
+    {
+        id: 9,
+        isBought: false,
+        image: require("../img/geschenke/Akkuschrauber.png").default,
+        name: "Akku-schrauber",
+        description: "LUX Akku-Bohrschrauber-Set inkl. Akku (wie im Link oder ähnlich)",
+        link: "https://www.obi.de/akkuschrauber/lux-akku-bohrschrauber-set-1-powersystem-a-bs-20/p/9543208",
+        version: 0,
+    },
+    {
+        id: 10,
+        isBought: false,
+        image: require("../img/geschenke/BodumBrotbox.jpg").default,
+        name: "Bodum Brotbox",
+        description: "Bodum bistroBrotkasten mit Bambus-Schneidebrett, 23.81 x 37.15 x 14.29 cm; 1.11 Kilogramm",
+        link: "https://www.amazon.de/Bodum-bistroBrotkasten-Bambus-Schneidebrett-BPA-freier-Kunststoff/dp/B00MAPNVCW/",
+        version: 0,
+    },
+    {
+        id: 11,
+        isBought: false,
+        image: require("../img/geschenke/großer_Topf.png").default,
+        name: "Großer Kochtopf",
+        description: "Tefal A70546 Duetto, ein großer Kochtopf, der circa 5l fasst (wie im Link oder ähnlich)",
+        link: "https://www.amazon.de/dp/B00V6GF7UU/",
+        version: 0,
+    },
+    // {
+    //     id: 12,
+    //     isBought: false,
+    //     image: require("../img/geschenke/.png").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/",
+    //     version: 0,
+    // },
+]

src/client/sass/_navbar.scss

@@ -13,10 +13,10 @@
     display: flex;
 
     li {
-
       flex: 1;
       text-align: center;
       height: 3rem;
+      //height: 4rem;
       padding-top: 0.5rem;
       padding-bottom: 0.5rem;
 
@@ -29,22 +29,26 @@
 
       @include breakpoint(large) {
         height: 4rem;
+        a {
+          font-size: 1rem !important;
+        }
       }
 
       a {
         color: black;
         font-family: "Bahnschrift", Helvetica, Arial, serif;
-        font-size: 1.3rem;
-        padding: 0.3rem;
+        font-size: 1rem;
+        font-weight: bold;
+        padding: 0.5rem;
+        //padding: 1rem;
         @include breakpoint(large) {
-          padding: 0.7rem 1rem;
+          padding: 1rem 1rem;
           font-size: 1.7rem;
         }
       }
 
       &.active {
         background: white;
-
         > a {
           background: transparent;
         }
@@ -61,7 +65,15 @@
         bottom: 0;
         //background: red;
         background-image: url("../img/einkreiser.png");
-        background-size: 100% 100%;
+        background-size: contain;
+        @include breakpoint(medium only){
+          background-size: 165px 100%;
+        }
+        @include breakpoint(small only){
+          background-size: 100% 100%;
+        }
+        background-position: center;
+        //background-size: 100% 100%;
         background-repeat: no-repeat;
         display: none;
         cursor: pointer;

src/client/sass/index.scss

@@ -19,6 +19,7 @@
   height: calc(100vh - 4rem);
   @include breakpoint(medium down) {
     height: calc(100vh - 3rem);
+    //height: calc(100vh - 4rem);
   }
 }
 
@@ -158,6 +159,7 @@ img.full-screen-width {
 .fill-height-medium-up {
   @include breakpoint(medium) {
     height: calc(100vh - 3rem);
+    //height: calc(100vh - 4rem);
     @include breakpoint(large){
       height: calc(100vh - 4rem);
     }