From 9a6cabe75ced9da265b31a70166593c7dc681325 Mon Sep 17 00:00:00 2001
From: elproffesore <philipp.proff@gmx.de>
Date: Sat, 29 Jun 2024 09:38:29 +0200
Subject: [PATCH] update

---
 .gitignore                        |  3 +++
 assets/css/tailwind.css           | 11 ++++++-----
 components/AppHeader.vue          |  4 ++--
 components/CountingNumbers.vue    |  4 ++--
 components/GridComponent.vue      |  2 +-
 components/SelectionComponent.vue |  5 +++--
 pages/index.vue                   | 14 ++++++++++----
 tailwind.config.js                | 21 +++++++++++++++++++--
 8 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/.gitignore b/.gitignore
index a79a822..a12d141 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,6 @@ logs
 .env
 .env.*
 !.env.example
+
+KeroinePRO-DouxExtreme.otf
+KeroinePRO-IntenseLegere.otf
\ No newline at end of file
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index e098f1d..48d6040 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -5,10 +5,10 @@
 @layer base {
     :root {
         --primary: #f00;
-        --primaryOpaque: #f00a;
-        --secondary: #00f;
-        --secondaryOpaque: #00fa;
-        --background: #ccc
+        --primaryOpaque: #ff0000aa;
+        --secondary: #a75fff;
+        --secondaryOpaque: #a75fffaa;
+        --background: #e3e3e3
     }
     @font-face {
         font-family: 'Keroine Doux';
@@ -22,10 +22,11 @@
     }
     body {
         @apply bg-background text-text;
+        overflow-x: hidden;
         font-family: Keroine Doux, sans-serif;
     }
     h1 {
-        @apply text-2xl pb-12;
+        @apply text-2xl pb-8;
         font-family: Keroine Intense, sans-serif;
     }
     h2 {
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index 354142b..9b3ac3e 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -10,7 +10,7 @@ const props = defineProps({
     }
 })
 watch(() => props.updateMenuProgress, (nv) => {
-    document.getElementById('menu'+props.updateMenuNumber).style.backgroundImage = `linear-gradient(to right, var(--secondaryOpaque) 50%, #fff 50%)`;
+    document.getElementById('menu'+props.updateMenuNumber).style.backgroundImage = `linear-gradient(to right, var(--secondary) 50%, #fff 50%)`;
     document.getElementById('menu'+props.updateMenuNumber).style.backgroundPosition = -100-nv*100+'%';
 })
 function scrollTop() {
@@ -36,7 +36,7 @@ function scrollTop() {
  li {
     font-weight: 200;
     font-size: 14px;
-    padding: 2px 35px;
+    padding: 6px 35px;
     border: 1px solid #000;
     border-radius: 30px;
     box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
diff --git a/components/CountingNumbers.vue b/components/CountingNumbers.vue
index 77be3f3..a5025fa 100644
--- a/components/CountingNumbers.vue
+++ b/components/CountingNumbers.vue
@@ -2,8 +2,8 @@
 </script>
 <template>
     <div class="flex flex-col">
-        <span class="text-[24em] text-primary"><slot name="number"></slot><span class="text-8xl">%</span></span>
-        <span class="text-text mt-[-30%]"><slot name="text"></slot></span>
+        <span class="text-number text-primary mb-[-130px] tracking-[-0.05em]"><slot name="number" ></slot><span class="text-8xl">%</span></span>
+        <span class="text-text"><slot name="text"></slot></span>
     </div>
 </template>
 <style>
diff --git a/components/GridComponent.vue b/components/GridComponent.vue
index d38ebc3..fc28b6b 100644
--- a/components/GridComponent.vue
+++ b/components/GridComponent.vue
@@ -1,7 +1,7 @@
 <script setup>
 </script>
 <template>
-    <div id="gridComponent" class="flex flex-col gap-6 p-4 mx-4 md:grid md:grid-cols-12 md:p-8 md:mx-8 md:gap-12">
+    <div id="gridComponent" class="min-h-[90vh] flex flex-col gap-6 p-4 mx-4 md:grid md:grid-cols-12 md:p-4 md:mx-8 md:gap-12">
         <slot></slot>
     </div>
 </template>
diff --git a/components/SelectionComponent.vue b/components/SelectionComponent.vue
index 65062d5..b331e00 100644
--- a/components/SelectionComponent.vue
+++ b/components/SelectionComponent.vue
@@ -11,8 +11,9 @@ const changeSelection = (index) => {
 }
 </script>
 <template>
-    <div class="flex gap-3 border cursor-pointer px-4 py-px">
-        <p v-for="(option, index) in options" :key="index" @click="changeSelection(index)" class="transition-all duration-300 px-4 py-px rounded" :class="index==selected? 'bg-primary':''">
+    <div class="relative flex gap-3 border cursor-pointer px-4 py-px">
+        <div class="absolute h-[100%] bg-primary" :style="{left:((100/options.length)*selected)+'px', width: (100/options.length) + 'px'  }"></div>
+        <p v-for="(option, index) in options" :key="index" @click="changeSelection(index)" class="transition-all duration-300 px-4 py-px rounded" :class="index==selected? '':''">
             {{ option }}
         </p>
     </div>
diff --git a/pages/index.vue b/pages/index.vue
index b02124b..436d920 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -30,7 +30,7 @@ const crisis = [
 </script>
 <template>
     <GridComponent class="items-center h-[90vh] my-[5vh] text-wrap">
-        <div class="row-start-2 col-span-12 text-left md:col-span-8 md:row-start-1">
+        <div class="row-start-1 col-span-12 leading-none text-left md:col-span-8 md:row-start-1">
             <h1 class="text-3xl md:heading">Felt Crisis – Effects on Democracy</h1>
             <h1 class="text-2xl md:text-3xl">
                 Democracy put to the test: dealing with crisis moods
@@ -38,13 +38,13 @@ const crisis = [
         </div>
 
         <!-- <canvas id="canvas3d" class="col-span-12 row-start-1 row-span-1 md:col-span-4 md:col-start-9 md:row-span-2 "></canvas> -->
-        <p class="row-start-2 col-span-12 md:col-span-6 self-end">
+        <p class="row-start-3 col-span-12 md:col-span-6 self-end">
             The phenomena of crises are omnipresent in our times - whether climate crisis, financial crisis,
             migration crisis or crisis of democracy among others. We are currently confronted with ever new crisis
             analyses that puts us into a permanent state of emergency. But what exactly does that mean for us? And
             which groups are experiencing which crises?
         </p>
-        <CountingNumbers class="row-start-1 row-span-2 col-span-4 col-start-9 self-end">
+        <CountingNumbers class="row-start-2 row-span-2 col-span-4 col-start-9 self-end">
             <template v-slot:number>75</template>
             <template v-slot:text>
                 Percentage of people that feeled worried or very concerned about the top 5 problems in Germany in 2022.<sup>[1]</sup> 
@@ -80,7 +80,7 @@ const crisis = [
             </BarComparison>
         </GridComponent> -->
 
-        <GridComponent>
+        <!-- <GridComponent>
             <h1 class="section-heading col-span-12">Point on Line Comparison</h1>
             <PointOnLineComparison :data="crisis" :left="false" :progress="updateMenuProgress"
                 :current-index="updateMenuNumber" :component-index="1" class="col-span-12"></PointOnLineComparison>
@@ -94,6 +94,12 @@ const crisis = [
             <h1 class="section-heading col-span-12">Bar Comparison</h1>
             <BarComparison :data="crisis" :left="false" :progress="updateMenuProgress" :current-index="updateMenuNumber"
                 :component-index="3" class="col-span-12"></BarComparison>
+        </GridComponent> -->
+        <GridComponent>
+            <h1 class="section-heading col-span-12" id="who-is-concerned">Who is concerned?</h1>
+            <p class="col-span-12">
+                The topic of generational justice became very prominent with a rising awareness on climate justice. If we take a look to the perception of crisis of different generation, we can observe that the feeling of crisis is shared by all generations.
+            </p>
         </GridComponent>
         <GridComponent>
             <h1 class="section-heading col-span-12" id="just-feelings">Just Feelings?</h1>
diff --git a/tailwind.config.js b/tailwind.config.js
index 4e6f10e..5a2ac2e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,9 +14,26 @@ module.exports = {
       colors: {
         text: "#000",
         white: "#fff",
-        background: "#ccc",
+        background: "#f2f2f2",
         primary: "#f00",
-        secondary: "#00f",
+        secondary: "#a75fff",
+      },
+      fontSize:{
+        'xs': '.75rem',
+        'sm': '.875rem',
+        'tiny': '.875rem',
+        'base': '1rem',
+        'lg': '1.125rem',
+        'xl': '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.25rem',
+        '5xl': '3rem',
+        '6xl': '4rem',
+        '7xl': '5rem',
+        '8xl': '6rem',
+        '8xl': '6rem',
+        'number': '20rem',
       }
     },