update

elproffesore · Jul 1, 2024 · c3c3b15 · c3c3b15
1 parent 7d60441
commit c3c3b15
Show file tree

Hide file tree

Showing 25 changed files with 192 additions and 147 deletions.
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://use.typekit.net/vif6dai.css">
     <title>Crisis & Democracy</title>
   </head>
   <body>

diff --git a/src/App.vue b/src/App.vue
@@ -8,7 +8,8 @@ import CountingNumbers from './components/CountingNumbers.vue';
 import AppHeader from './components/AppHeader.vue';
 import AppFooter from './components/AppFooter.vue';
 import SelectionComponent from './components/SelectionComponent.vue';
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import * as d3 from 'd3'
 
 const updateMenuNumber = ref(0)
 const updateMenuProgress = ref(0)
@@ -24,86 +25,99 @@ const crisis = [
     { "who": "of the <span class='highlight'>low-income group</span> (< 2000€/m)  are crisis", "crisis": 65.0, "noCrisis": 35.0 },
     { "who": "of the <span class='highlight'>high-income group</span> (> 7000€/m)  are crisis", "crisis": 35.0, "noCrisis": 65.0 }
 ]
-
 </script>
 <template>
-    <GridComponent class="items-center h-[90vh] my-[5vh] text-wrap">
-        <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
-            </h1>
+    <AppHeader class="invisible md:visible" :updateMenuNumber="updateMenuNumber"
+        :updateMenuProgress="updateMenuProgress" />
+    <GridComponent class="items-center mt-[8vh] h-[90vh]">
+        <div class="row-start-1 col-span-12 text-left md:col-span-8">
+            <h1 class="text-3xl md:heading">Trust in the Time of <span class="underline decoration-primary decoration-8"
+                    style="padding: initial;">Crisis</span> - Democracy put to a Test</h1>
         </div>
-
-        <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-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>
-            </template>
-        </CountingNumbers>
+        <div class="row-start-3 col-span-12 md:col-span-6 self-end">
+            <p> 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>
+        </div>
+        <img class=" row-span-3 col-span-10 col-start-9 w-[100vw]" src="./assets/images/Welt.png" alt="">
 
     </GridComponent>
-    <AppHeader class="invisible md:visible" :updateMenuNumber="updateMenuNumber"
-        :updateMenuProgress="updateMenuProgress" />
+    <GridComponent class="m-0 md:mx-[0px] md:p-0 mb-16">
+        <hr class="row-start-4 col-span-12 col-start-2 text-primary ">
+    </GridComponent>
     <ScrollytellingComponent :offset="0" :progress="true" :threshold="4" :once="false" :debug="false"
         @step-progress="updateMenu">
         <GridComponent>
-            <h1 class="section-heading col-span-12" id="introduction">Introduction</h1>
-            <p class="col-span-6">
-                One term that particularly coins our understanding of the complexity of crisis in recent years is the
-                analysis of the POLYCRISIS: It describes the occurrence and intertwining of different crises at the same
-                time, which call for a wide variety of reactions to adapt. When analysing different political streams,
-                it becomes clear that different groups focus on different crises and demand different adaptation
-                strategies.
-            </p>
-            <p class="col-span-6">
-                While some focus on the melting of the polar caps, others fear the decline of their culture
-                due to foreign overrun. Groups even contradict each other in their crises perception and deny the
-                existence of the other's crises. The perception of crises and the extent to which people are affected by
-                them depends heavily on their own social position; a consensus on crises seems to be difficult to
-                achieve in society. If everyone perceives the many crises differently, is there a chance to find a
-                common ground of perception, share mitigation strategy and build collective resilience?
-            </p>
-        </GridComponent>
-        <!-- <GridComponent>
-            <h1 class="section-heading col-span-12">Bar Chart</h1>
-            <BarComparison :data="crisis" :left="false" :progress="updateMenuProgress" class="col-span-12">
-            </BarComparison>
-        </GridComponent> --><!--
-        <GridComponent>
-            <h1 class="section-heading col-span-12">RelativePeopleComparison</h1>
-            <RelativePeopleComparison :data="crisis" :left="false" :progress="updateMenuProgress"
-                :current-index="updateMenuNumber" :component-index="2" class="col-span-12"></RelativePeopleComparison>
+            <div class="col-start-2 col-span-10 grid grid-cols-5 grid-rows-2 items-center justify-center">
+                <div class="flex gap-2 row-start-1 col-span-1">
+                    <img src="./assets/images/money.png" class="max-w-[80%] h-[100%]">
+                    <CountingNumbers class="" >
+                    <template v-slot:number>65</template>
+                    <template v-slot:text>Inflation</template>
+                </CountingNumbers>
+                </div>
+                <div class="flex gap-2 row-start-2 col-start-2 col-span-1">
+                    <img src="./assets/images/Soldiers.png" class="max-w-[80%] h-[100%]">
+                <CountingNumbers>
+                    <template v-slot:number>60</template>
+                    <template v-slot:text>War</template>
+                </CountingNumbers>
+                </div>
+                <div class="flex gap-2 row-start-1 col-start-3 col-span-1">
+                    <img src="./assets/images/House.png" class="max-w-[80%] h-[100%]">
+                <CountingNumbers >
+                    <template v-slot:number>54</template>
+                    <template v-slot:text>Housing</template>
+                </CountingNumbers>
+                </div>
+                <div class="flex gap-2 row-start-2 col-start-4 col-span-1">
+                    <img src="./assets/images/seperated.png" class="max-w-[80%] h-[100%]">
+                <CountingNumbers >
+                    <template v-slot:number>49</template>
+                    <template v-slot:text>Social Polarisation</template>
+                </CountingNumbers>
+                </div>
+            </div>
+            <div class="col-start-8 col-span-4">
+                <h1 class="section-heading" id="multicrisis">Multicrisis</h1>
+                <p>
+                    While some focus on the melting of the polar caps, others fear the decline of their culture
+                    due to foreign overrun. Groups even contradict each other in their crises perception and deny the
+                    existence of the other's crises. The perception of crises and the extent to which people are
+                    affected by
+                    them depends heavily on their own social position; a consensus on crises seems to be difficult to
+                    achieve in society. If everyone perceives the many crises differently, is there a chance to find a
+                    common ground of perception, share mitigation strategy and build collective resilience?
+                </p>
+            </div>
         </GridComponent>
         <GridComponent>
-            <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>
-            <PointOnLineComparison :data="crisis" :left="false" :progress="updateMenuProgress"
+            <h1 class="section-heading col-start-2 col-span-10" id="who-is-concerned">Who is concerned?</h1>
+            <BarComparison :data="crisis" :left="true" :progress="updateMenuProgress"
+            :current-index="updateMenuNumber" :component-index="1" v-slot="scope">
+                The topic of generational <SelectionComponent :options="options" v-on:change="scope.updateSelection">
+                </SelectionComponent> 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.
+            </BarComparison>
+            <!-- <PointOnLineComparison :data="crisis" :left="true" :progress="updateMenuProgress"
                 :current-index="updateMenuNumber" :component-index="1" class="col-span-12" v-slot="scope">
                 The topic of generational <SelectionComponent :options="options" v-on:change="scope.updateSelection">
                 </SelectionComponent> 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.
-            </PointOnLineComparison>
-
+            </PointOnLineComparison> -->
         </GridComponent>
         <GridComponent>
+            <h1 class="section-heading col-start-7 col-span-5" id="who-is-concerned">Stepping into the fields of felt realities</h1>
             <PointOnLineComparison :data="crisis" :left="false" :progress="updateMenuProgress"
-                :current-index="updateMenuNumber" :component-index="2" class="col-span-12" :scrollable="true">
-                <p class="col-span-12">
+                :current-index="updateMenuNumber" :component-index="2" class="col-start-1 col-span-10" :scrollable="true">
+                <p>
                     "If people define situations as real, then their consequences are also real."
                     Thomas-Theorem (1928)
                     According to famous Thomas Theorem, formulated by by William and Dorothy Thomas in 1928, we can
@@ -123,7 +137,7 @@ const crisis = [
 
                     [ hier Daten zu Angst vor Rechnungen zahlen obwohl real keine finanzielle Schieflage besteht]
                 </p>
-                <p class="col-span-12">
+                <p>
                     "If people define situations as real, then their consequences are also real."
                     Thomas-Theorem (1928)
                     According to famous Thomas Theorem, formulated by by William and Dorothy Thomas in 1928, we can
@@ -191,11 +205,11 @@ const crisis = [
                 Hobbies, Discussion Panels
             </p>
         </GridComponent>
-        <GridComponent>
-            <h1 class="section-heading col-span-12" id="sources">Sources</h1>
-        </GridComponent>
-    </ScrollytellingComponent>
 
+    </ScrollytellingComponent>
+    <GridComponent>
+        <h1 class="section-heading col-span-12" id="sources">Sources</h1>
+    </GridComponent>
     <AppFooter />
 </template>
 <style></style>
diff --git a/src/assets/images/Bundestag.png b/src/assets/images/Bundestag.png
diff --git a/src/assets/images/House.png b/src/assets/images/House.png
diff --git a/src/assets/images/Inflation.png b/src/assets/images/Inflation.png
diff --git a/src/assets/images/Poor.png b/src/assets/images/Poor.png
diff --git a/src/assets/images/Soldiers.png b/src/assets/images/Soldiers.png
diff --git a/src/assets/images/Welt copy.png b/src/assets/images/Welt copy.png
diff --git a/src/assets/images/Welt.png b/src/assets/images/Welt.png
diff --git a/src/assets/images/fight.png b/src/assets/images/fight.png
diff --git a/src/assets/images/hj#.png b/src/assets/images/hj#.png
diff --git a/...ightning-strike-thunderstorm-weather-icon-meteorological-sign-3d-render-png.png b/...ightning-strike-thunderstorm-weather-icon-meteorological-sign-3d-render-png.png
diff --git a/src/assets/images/money.png b/src/assets/images/money.png
diff --git a/src/assets/images/person.svg b/src/assets/images/person.svg
diff --git a/src/assets/images/seperated.png b/src/assets/images/seperated.png
diff --git a/src/assets/images/seperation.png b/src/assets/images/seperation.png
diff --git a/src/assets/images/user.svg b/src/assets/images/user.svg
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { defineProps, watch } from 'vue';
-
 const props = defineProps({
     updateMenuNumber: {
         type: Number,
@@ -12,34 +11,29 @@ const props = defineProps({
     }
 })
 watch(() => props.updateMenuProgress, (nv) => {
-    document.getElementById('menu'+props.updateMenuNumber).style.backgroundImage = `linear-gradient(to right, var(--secondary) 50%, #fff 50%)`;
+    console.log(props.updateMenuNumber, nv);
+    document.getElementById('menu'+props.updateMenuNumber).style.backgroundImage = `linear-gradient(to right, #f15060 50%, #fff 50%)`;
     document.getElementById('menu'+props.updateMenuNumber).style.backgroundPosition = -100-nv*100+'%';
 })
-function scrollTop() {
-    window.scrollTo({
-        top:0,
-        behavior: 'smooth'
-    });
-}
 </script>
 <template>
-    <nav class="sticky top-[2.5vh] w-[100vw] z-10">
+    <nav class="fixed top-[2vh] w-[100vw] z-10">
         <ul class="flex flex-row justify-center text-center gap-8 m-4">
-            <a to="#" @click="scrollTop"><li id="menu0" ><b>Introduction</b></li></a>
+            <a to="#multicrisis"><li id="menu0" ><b>Multicrisis</b></li></a>
             <a to="#who-is-concerned"><li id="menu1" ><b>Who is concerned?</b></li></a>
             <a to="#just-feelings"><li id="menu2" ><b>Just Feelings?</b></li></a>
             <a to="#effects-on-democracy"><li id="menu3" ><b>Effects on Democracy</b></li></a>
             <a to="#strengthen-resilience"><li id="menu4" ><b>Crisis Resilience</b></li></a>
-            <a to="#sources"><li id="menu5" ><b>Sources</b></li></a>
         </ul>
     </nav>
 </template>
 <style>
  li {
     font-weight: 200;
     font-size: 14px;
+    color: #000;
     padding: 6px 35px;
-    border: 1px solid #000;
+    border: 0.2px solid #000;
     border-radius: 30px;
     box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
     background-color: #fff;

diff --git a/src/components/CountingNumbers.vue b/src/components/CountingNumbers.vue
@@ -1,9 +1,11 @@
 <script setup>
 </script>
 <template>
-    <div class="flex flex-col">
-        <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 class="flex flex-col number ">
+
+        <span class="text-8xl text-primary p-0"><slot name="number" ></slot><span class="text-8xl">%</span></span>
+        <span class="text-2xl p-0 mt-[-5%]"><slot name="text"></slot></span>
+
     </div>
 </template>
 <style>

diff --git a/src/components/GridComponent.vue b/src/components/GridComponent.vue
@@ -1,7 +1,7 @@
 <script setup>
 </script>
 <template>
-    <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">
+    <div id="gridComponent" class="flex flex-col gap-6 p-4 mx-4 md:grid md:grid-cols-12 md:mx-[45px] md:gap-[25px] md:mb-[15vh]">
         <slot></slot>
     </div>
 </template>

diff --git a/src/components/SelectionComponent.vue b/src/components/SelectionComponent.vue
@@ -8,7 +8,7 @@ const props = defineProps({
 })
 </script>
 <template>
-    <select ref="selection" class="w-min p-1 ">
+    <select ref="selection" class="w-min p-[2px] text-white bg-primary rounded">
         <option v-for="(option, index) in options" :key="index" :value="index">
             {{ option }}
         </option>