frontend: refactor (remove boilerplate, tweak hero); add custom styling

frontend/assets/variables.scss

 // Ref: https://github.com/nuxt-community/vuetify-module#customvariables
-//
-// The variables you want to modify
-// $font-size-root: 20px;
+@import url("https://fonts.googleapis.com/css2?family=Taviraj:wght@600&display=swap");
+$heading-font-family: "Taviraj", serif;
+
+$material-dark: (
+  background: #162c41,
+);

frontend/components/Hero.vue

-<template>
-  <v-container class="d-flex" fill-height>
-    <v-row class="justify-center align-center">
-      <h1
-        align="center"
-        class="text-xs-h4 center text-sm-h2 text-lg-h1 font-weight-medium"
-      >
-        Spaß mit Wappen
-      </h1>
-    </v-row>
-    <v-row class="justify-center">
-      <v-btn
-        color="primary"
-        elevation="4"
-        x-large
-        dark
-        @click="$store.commit('setShowHero', false)"
-      >
-        Start
-      </v-btn>
-    </v-row>
-  </v-container>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style></style>

frontend/components/Logo.vue

-<template>
-  <div class="VueToNuxtLogo">
-    <div class="Triangle Triangle--two" />
-    <div class="Triangle Triangle--one" />
-    <div class="Triangle Triangle--three" />
-    <div class="Triangle Triangle--four" />
-  </div>
-</template>
-
-<style>
-.VueToNuxtLogo {
-  display: inline-block;
-  animation: turn 2s linear forwards 1s;
-  transform: rotateX(180deg);
-  position: relative;
-  overflow: hidden;
-  height: 180px;
-  width: 245px;
-}
-
-.Triangle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-}
-
-.Triangle--one {
-  border-left: 105px solid transparent;
-  border-right: 105px solid transparent;
-  border-bottom: 180px solid #41b883;
-}
-
-.Triangle--two {
-  top: 30px;
-  left: 35px;
-  animation: goright 0.5s linear forwards 3.5s;
-  border-left: 87.5px solid transparent;
-  border-right: 87.5px solid transparent;
-  border-bottom: 150px solid #3b8070;
-}
-
-.Triangle--three {
-  top: 60px;
-  left: 35px;
-  animation: goright 0.5s linear forwards 3.5s;
-  border-left: 70px solid transparent;
-  border-right: 70px solid transparent;
-  border-bottom: 120px solid #35495e;
-}
-
-.Triangle--four {
-  top: 120px;
-  left: 70px;
-  animation: godown 0.5s linear forwards 3s;
-  border-left: 35px solid transparent;
-  border-right: 35px solid transparent;
-  border-bottom: 60px solid #fff;
-}
-
-@keyframes turn {
-  100% {
-    transform: rotateX(0deg);
-  }
-}
-
-@keyframes godown {
-  100% {
-    top: 180px;
-  }
-}
-
-@keyframes goright {
-  100% {
-    left: 70px;
-  }
-}
-</style>

frontend/components/VuetifyLogo.vue

-<template>
-  <img class="VuetifyLogo" alt="Vuetify Logo" src="/vuetify-logo.svg" />
-</template>
-
-<style>
-.VuetifyLogo {
-  height: 180px;
-  width: 180px;
-  transform: rotateY(560deg);
-  animation: turn 3.5s ease-out forwards 1s;
-}
-
-@keyframes turn {
-  100% {
-    transform: rotateY(0deg);
-  }
-}
-</style>

frontend/layouts/default.vue

 <template>
   <v-app dark>
-    <v-btn text icon @click="toggleTheme">
-      <v-icon>mdi-theme-light-dark</v-icon>
-    </v-btn>
     <v-main>
       <nuxt />
     </v-main>
-    <v-footer app>
+    <v-footer style="background: var(--v-background-lighten1)" app>
       <v-flex text-center>
         Diese Website steht in keiner Verbindung mit den abgebildeten Kommunen
       </v-flex>
@@ -15,11 +12,5 @@
 </template>
 
 <script>
-export default {
-  methods: {
-    toggleTheme() {
-      this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
-    },
-  },
-};
+export default {};
 </script>

frontend/layouts/error.vue

@@ -2,11 +2,13 @@
   <v-app dark>
     <v-container align-center d-flex fill-height justify-space-around>
       <v-row class="justify-center">
-        <h1 class="text-h1 justify-start">
+        <h1 class="text-h1 justify-start text-center">
           {{ errorMsg }}
         </h1>
       </v-row>
-      <NuxtLink to="/" class="text-h4"> Home page </NuxtLink>
+      <NuxtLink id="home-page" to="/" class="text-uppercase">
+        Home page
+      </NuxtLink>
     </v-container>
   </v-app>
 </template>
@@ -38,6 +40,11 @@ export default {
 </script>
 
 <style scoped>
+#home-page {
+  font-size: x-large;
+  text-decoration: none;
+  color: var(--v-info-base);
+}
 h1 {
   font-size: 20px;
 }

frontend/nuxt.config.js

@@ -45,10 +45,20 @@ export default {
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
   vuetify: {
     customVariables: ["~/assets/variables.scss"],
+    treeShake: true,
+    defaultAssets: {
+      font: {
+        family: "Poppins",
+      },
+    },
     theme: {
+      options: {
+        customProperties: true,
+      },
       dark: true,
       themes: {
         dark: {
+          background: "#162c41",
           primary: colors.blue.darken2,
           accent: colors.grey.darken3,
           secondary: colors.amber.darken3,

frontend/pages/index.vue

 <template>
-  <v-container v-if="$store.state.showHero" fill-height>
-    <Hero />
+  <v-container class="d-flex" fill-height>
+    <v-row class="justify-center align-center">
+      <h1 align="center" class="text-h4 center text-sm-h2 text-lg-h1">
+        Spaß mit Wappen
+      </h1>
+    </v-row>
+    <v-row class="justify-center">
+      <nuxt-link to="/info">
+        <v-btn color="primary" elevation="4" x-large dark> Start </v-btn>
+      </nuxt-link>
+    </v-row>
   </v-container>
-  <v-container v-else fill-height> </v-container>
 </template>
 
 <script>
-import Hero from "~/components/Hero.vue";
-export default {
-  components: {
-    Hero,
-  },
-};
+export default {};
 </script>

frontend/components/Home.vue → frontend/pages/info.vue

 <template>
-  <v-container> </v-container>
+  <v-container grid-list-xs> </v-container>
 </template>
 
 <script>

frontend/pages/inspire.vue

-<template>
-  <v-row>
-    <v-col class="text-center">
-      <img src="/v.png" alt="Vuetify.js" class="mb-5" />
-      <blockquote class="blockquote">
-        &#8220;First, solve the problem. Then, write the code.&#8221;
-        <footer>
-          <small>
-            <em>&mdash;John Johnson</em>
-          </small>
-        </footer>
-      </blockquote>
-    </v-col>
-  </v-row>
-</template>

frontend/static/vuetify-logo.svg

-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>

frontend/store/index.js

-export const state = () => ({
-  showHero: true,
-});
+export const state = () => ({});
 
-export const mutations = {
-  setShowHero(state, value) {
-    state.showHero = value;
-  },
-};
+export const mutations = {};