🚧 wip

package.json

@@ -11,6 +11,8 @@
   "dependencies": {
     "@astrojs/tailwind": "^5.1.4",
     "@astrojs/vue": "^5.0.4",
+    "@fontsource-variable/montserrat": "^5.1.1",
+    "@fontsource/montserrat": "^5.1.1",
     "@googleapis/sheets": "^9.3.1",
     "@headlessui/vue": "^1.7.23",
     "@iconify-json/material-symbols": "^1.2.12",

src/assets/style.css

@@ -5,14 +5,19 @@ body {
 }
 
 .btn {
-  @apply inline-flex items-center px-4 py-2 text-white font-medium;
+  @apply inline-flex items-center px-4 py-2 text-white font-medium rounded-full font-bold;
   @apply bg-blue-700 hover:bg-blue-800 focus:ring focus:ring-blue-600/50 outline-none motion-safe:transition;
 }
 
 .btn:disabled {
   @apply bg-gray-700 hover:bg-gray-800 focus:ring-gray-600/50 cursor-not-allowed;
 }
 
+.btn-outline {
+  @apply inline-flex items-center px-4 py-2 text-white rounded-full text-blue-700 font-bold;
+  @apply border border-blue-700 hover:bg-blue-800 hover:text-white focus:ring focus:ring-blue-600/50 outline-none motion-safe:transition;
+}
+
 .btn-text {
   @apply text-blue-900 inline-flex items-center focus:ring focus:ring-blue-600/50 focus:ring-offset-1 outline-none motion-safe:transition rounded;
 }

src/components/SiteHeader.vue

@@ -17,8 +17,10 @@ const toIntro = (e: Event) => {
 <template>
   <header class="container mx-auto py-12 px-4">
     <a href="/" @click="toIntro">
-      <h1 class="text-6xl font-extrabold mb-1">Real-O-Mat</h1>
+      <h1 class="text-6xl md:text-8xl font-bold mb-1">Real-O-Mat</h1>
     </a>
-    <span class="text-xl font-medium text-blue-800"> Bundestagswahl 2025 </span>
+    <span class="text-xl font-medium text-purple-800">
+      Bundestagswahl 2025
+    </span>
   </header>
 </template>

src/layouts/Layout.astro

@@ -1,5 +1,6 @@
 ---
 import '../assets/style.css'
+import '@fontsource-variable/montserrat'
 import SiteHeader from '../components/SiteHeader.vue'
 import logo from '../assets/fragdenstaat.svg'
 

src/pages/index.astro

@@ -21,6 +21,7 @@ const partners = await getCollection('partners')
               <Image
                 src={partner.data.logo}
                 alt={partner.data.name}
+                loading="eager"
                 class="w-full h-20 object-contain aspect-[3/2]"
               />
             </li>

src/pages/methodik.astro

@@ -0,0 +1,10 @@
+---
+import Layout from '../layouts/Layout.astro'
+---
+
+<Layout>
+  <div class="bg-white p-4">
+    <h2>Methodik</h2>
+    <p>Lorem ipsum dolor</p>
+  </div>
+</Layout>

src/views/Questionnaire.vue

@@ -90,15 +90,15 @@ const previousQuestion = () => {
     <div class="bg-white">
       <article v-if="currentQuestion" class="overflow-hidden pb-4">
         <div
-          class="bg-blue-200"
+          class="bg-purple-200"
           role="progressbar"
           aria-label="Fortschritt"
           aria-valuemin="1"
           :aria-valuemax="questionsCount"
           :aria-valuenow="currentQuestionProgress"
         >
           <div
-            class="h-2 bg-blue-900 motion-safe:transition-all duration-300 ease-out"
+            class="h-2 bg-purple-900 motion-safe:transition-all duration-300 ease-out"
             :style="{
               width: `${(currentQuestionProgress / questionsCount) * 100}%`,
             }"
@@ -112,21 +112,20 @@ const previousQuestion = () => {
             mode="out-in"
           >
             <div
-              class="px-4 mt-4 text-gray-600 flex"
+              class="px-4 mt-4 text-gray-700 text-2xl font-medium flex"
               :key="currentQuestionIndex"
             >
-              <span> {{ currentQuestion.category }} </span>
-              <div
-                class="max-md:hidden ms-auto whitespace-nowrap"
-                aria-hidden="true"
-              >
-                Frage {{ currentQuestionProgress }} / {{ questionsCount }}
-              </div>
+              <span>
+                <span aria-hidden="false">
+                  {{ currentQuestionProgress }} / {{ questionsCount }}
+                </span>
+                {{ currentQuestion.category }}
+              </span>
             </div>
           </Transition>
           <Transition mode="out-in" :name="transitionName">
             <div class="px-4" :key="currentQuestionIndex">
-              <h2 class="my-8 text-xl md:text-2xl">
+              <h2 class="my-4 text-xl font-semibold md:text-5xl">
                 {{ currentQuestion.thesis }}
               </h2>
             </div>
@@ -140,15 +139,14 @@ const previousQuestion = () => {
             <AnswerButton
               :answer="answer as Answer"
               @save="saveAnswer"
-              :accesskey="i + 1"
               :disabled="disabled"
               v-for="({ disabled, icon }, answer, i) in answerButtons"
             >
               <component :is="icon" />
             </AnswerButton>
 
             <div class="!ms-auto self-center max-md:pt-4">
-              <button @click="skipQuestion" class="btn-text">
+              <button @click="skipQuestion" class="btn-outline">
                 These überspringen
                 <IconForward aria-hidden="true" class="ms-1" />
               </button>

tailwind.config.mjs

@@ -4,7 +4,7 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        sans: ['Creato Display'],
+        sans: ['Montserrat Variable'],
       },
     },
   },