Bilder hinzugefügt, Events angefangen zu reparieren

src/App.vue

@@ -25,10 +25,27 @@ export default {
 <template>
     <!-- Haupt-Component -->
      <!-- Navigationsleiste, Footer, Klönkasten etc. -->
-      <Navbar/>
+     
     <RouterView/>
 </template>
 
-<style>
+<style lang="scss">
+    @import "assets/web/assets/mobirise-icons2/mobirise2.css";
+    @import "assets/parallax/jarallax.css";
+    @import "assets/bootstrap/css/bootstrap.min.css";
+    @import "assets/bootstrap/css/bootstrap-grid.min.css";
+    @import "assets/bootstrap/css/bootstrap-reboot.min.css";
+    @import "assets/dropdown/css/style.scss";
+    @import "assets/socicon/css/styles.css";
+    @import "assets/animatecss/animate.css";
+    @import "assets/theme/css/style.css";
+    @import "assets/modal.css";
+    @import "assets/mobirise/css/additional.scss";
+    @import "./assets/css/index.css";
+
+    html, body, #app{
+        width: 100vw;
+        margin: 0;
+    }
     
 </style>

src/Main.vue

@@ -1,11 +1,148 @@
 <script lang="ts">
-
+import Navbar from "./Navbar.vue";
+import striptags from "striptags";
+export default {
+  components: {
+    Navbar,
+  },
+  computed: {
+    events() {
+      return [
+        {
+            id: 0,
+            eventname:"Eventname",
+            datum: "2009-04-06",
+            type: "text",
+            content: "<h1>Test</h1>",
+            link: null,
+            foto: "erntefest/2011/pic08.jpg"
+        }
+      ];
+    },
+  },
+  methods:{
+    vorschautext(content:string) {
+        let stripped=striptags(content);
+        let vorschaulen=30;
+        if(stripped.length>vorschaulen){
+            return stripped.substring(0,vorschaulen)+"...";
+        }else{
+            return stripped;
+        }
+    },
+    format_date(date: string){
+        
+    }
+  }
+};
 </script>
 
 <template>
+  <Navbar />
+  <section
+    class="header16 cid-u6k7q0xIhk mbr-fullscreen mbr-parallax-background"
+    id="hero-17-u6k7q0xIhk"
+  >
+    <div
+      class="mbr-overlay"
+      style="opacity: 0.3; background-color: rgb(0, 0, 0)"
+    ></div>
+    <div class="container-fluid">
+      <div class="row">
+        <div class="content-wrap col-12 col-md-10">
+          <h1
+            class="mbr-section-title mbr-fonts-style mbr-white mb-4 display-1"
+          >
+            <strong>Willkommen auf ritzenbergen.de</strong>
+          </h1>
+          <p class="mbr-fonts-style mbr-text mbr-white mb-4 display-7">
+            Dies ist eine private Homepage über das Dorfleben in Amedorf und
+            Ritzenbergen
+          </p>
+          <div class="mbr-section-btn">
+            <a
+              class="btn btn-white-outline display-7"
+              href="#gallery-9-u6k7q0xbqP"
+              >Erkunden</a
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="features023 cid-u6k7q0xclF" id="metrics-1-u6k7q0xclF">
+    <div class="container">
+      <div class="row content-row justify-content-center">
+        <div
+          class="item features-without-image col-12 col-md-6 col-lg-4 item-mb"
+        >
+          <div class="item-wrapper"></div>
+        </div>
+        <div
+          class="item features-without-image col-12 col-md-6 col-lg-4 item-mb"
+        >
+          <div class="item-wrapper"></div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="features03 cid-u6k7q0xyDG" id="news-1-u6k7q0xyDG">
+    <div class="container-fluid">
+      <div class="row justify-content-center mb-5">
+        <div class="col-12 content-head">
+          <div class="mbr-section-head">
+            <h4
+              class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
+            >
+              <strong>Termine & Neuigkeiten</strong>
+            </h4>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <!-- Events -->
 
+        <h5 class="align-center" v-if="events.length == 0">
+          Es stehen keine Events an.
+        </h5>
+        <!--HTML-->
+        <div class="item features-image col-12 col-md-6 col-lg-3" :class="{active: i%4==0}" v-for="event, i in events">
+          <div class="item-wrapper">
+            <div class="item-img mb-3">
+              <img :src="'../bilder/'+event.foto" />
+            </div>
+            <div class="item-content align-left">
+              <h6 class="item-subtitle mbr-fonts-style mt-0 mb-3 display-5">
+                <strong
+                  ><a
+                    class="text-black fw-bold"
+                    @click.prevent
+                    :data-id="event.id"
+                    >{{ event.eventname }}</a
+                  ></strong
+                >
+              </h6>
+              <p class="mbr-text mbr-fonts-style mb-3 display-7">
+                {{ event.datum }}
+              </p>
+              <p class="mbr-text mbr-fonts-style mb-3 display-7">
+                {{ vorschautext(event.content) }}
+              </p>
+              <div class="mbr-section-btn item-footer">
+                <button
+                  class="btn item-btn btn-primary display-7 modal-open-btn"
+                  :data-id="event.id"
+                >
+                  Mehr
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        </div>
+    </div>
+  </section>
 </template>
 
-<style lang="css" scoped>
-
-</style>
+<style lang="css" scoped></style>

src/Navbar.vue

@@ -88,19 +88,6 @@ export default {};
 </template>
 <style lang="scss" scoped>
 
-@import "assets/theme/css/style.css";
-@import "assets/web/assets/mobirise-icons2/mobirise2.css";
-@import "assets/parallax/jarallax.css";
-@import "assets/bootstrap/css/bootstrap.min.css";
-@import "assets/bootstrap/css/bootstrap-grid.min.css";
-@import "assets/bootstrap/css/bootstrap-reboot.min.css";
-@import "assets/dropdown/css/style.scss";
-@import "assets/socicon/css/styles.css";
-@import "assets/animatecss/animate.css";
-@import "assets/modal.css";
-@import "assets/mobirise/css/additional.scss";
-@import "./assets/css/index.css";
-
 .container{
   font-family: 'Inter Tight';
 }

src/assets/mobirise/css/additional.scss

@@ -34,8 +34,8 @@ img,
 .video-wrapper {
   overflow: hidden;
 }
-body {
-  font-family: var(--display1-font, 'Inter Tight');
+body, #app {
+  font-family: 'Inter Tight';
   background: color-mix(in srgb, $dominant-color 10%, transparent);
 }
 
@@ -607,7 +607,7 @@ a.text-black:focus,
 a.text-black.active {
   color: color-mix(in srgb,#232323,#000 20%);
 }
-body[data-underlined-links="true"] a[class*="text-"]:not(.nav-link):not(.dropdown-item):not([role]):not(.navbar-caption){
+body[data-underlined-links="true"] #app a[class*="text-"]:not(.nav-link):not(.dropdown-item):not([role]):not(.navbar-caption){
   transition: 0.2s;
   position: relative;
   background-image: linear-gradient(currentColor 50%, currentColor 50%);
@@ -615,7 +615,7 @@ body[data-underlined-links="true"] a[class*="text-"]:not(.nav-link):not(.dropdow
   background-repeat: no-repeat;
   background-position: 0 1.2em;
 }
-body[data-underlined-links="false"] a[class*="text-"]:not(.nav-link):not(.dropdown-item):not([role]):not(.navbar-caption){
+body[data-underlined-links="false"] #app a[class*="text-"]:not(.nav-link):not(.dropdown-item):not([role]):not(.navbar-caption){
   position: relative;
   background-image: transparent;
   background-size: 10000px 2px;
@@ -623,12 +623,12 @@ body[data-underlined-links="false"] a[class*="text-"]:not(.nav-link):not(.dropdo
   background-position: 0px 1.2em;
   background-position: -10000px 1.2em;
 }
-body[data-underlined-links="false"] a[class*="text-"]:not(.nav-link):not(.dropdown-item):not([role]):not(.navbar-caption):hover{
+body[data-underlined-links="false"] #app a[class*="text-"]:not(.nav-link):not(.dropdown-item):not([role]):not(.navbar-caption):hover{
   transition: background-position 2s ease-in-out;
   background-image: linear-gradient(currentColor 50%, currentColor 50%);
   background-position: 0px 1.2em;
 }
-body[data-is-rounded-buttons="true"] .nav-tabs .nav-link {
+body[data-is-rounded-buttons="true"] #app .nav-tabs .nav-link {
   border-radius: 100px !important;
 }
 .nav-tabs .nav-link.active {
@@ -770,7 +770,7 @@ iframe.lazy-placeholder,
 section.lazy-placeholder:after {
   opacity: 0.5;
 }
-body, html {
+body, html, #app {
   overflow-x: hidden;
 }
 a {

src/bilder/doppelkopf/2003/info.txt

@@ -0,0 +1,2 @@
+ev
+Preisdoppelkopf 2003

src/bilder/doppelkopf/2004/info.txt

@@ -0,0 +1,2 @@
+ev
+Preisdoppelkopf 2004

src/bilder/doppelkopf/2004/senf10.txt

@@ -0,0 +1,2 @@
+sprotte:Was für ein Blatt!!!!!!!!!!!!!!
+Tom:Buben-Solo!

src/bilder/doppelkopf/2006/info.txt

@@ -0,0 +1,4 @@
+ev
+Preisdoppelkopf 2006
+25. Februar 2006
+Fotograf: Harm Kuhlenkamp

src/bilder/doppelkopf/2006/senf11.txt

@@ -0,0 +1 @@
+ina:sieht aus, als hätte sascha schon mal bessere karten ...

src/bilder/doppelkopf/2006/senf19.txt

@@ -0,0 +1 @@
+Harm:...da hatte ich endlich mal gute Karten!

src/bilder/doppelkopf/2006/senf21.txt

@@ -0,0 +1 @@
+Tom:So sehen Sieger aus, schalalalala

src/bilder/doppelkopf/2007/info.txt

@@ -0,0 +1,4 @@
+ev
+Preisdoppelkopf 2007
+24. Februar 2007
+Fotograf: Tom Kuhlenkamp