implement annas feedback

src/components/elements/AbilityComponent.vue

@@ -8,7 +8,7 @@
         v-for="(entry, index) in ability.interaction"
         id="interaction"
         :key="index"
-        class="text-[24px] flex flex-row justify-start items-center"
+        class="text-[16px] flex flex-row justify-start items-center"
       >
         <div
           id="pre"
@@ -66,15 +66,15 @@
         <div
           v-else
           id="btn.label"
-          class="m-2 py-2 px-4 text-[24px] text-normal uppercase bg-transparent hover:bg-white hover:bg-opacity-70 hover:text-[#D82027] border-2 border-gray-300 hover:cursor-pointer"
+          class="m-2 py-2 px-4 text-[16px] text-normal uppercase bg-transparent hover:bg-white hover:bg-opacity-70 hover:text-[#D82027] border-2 border-gray-300 hover:cursor-pointer"
           @click="showAbilityModal(ability, entry.btn)"
         >
           {{ entry.btn.label }}
         </div>
         {{ entry.post }}
       </div>
       <div
-        class="m-2 py-2 px-4 text-[24px] text-center border-2 border-gray-300 bg-transparent cursor-pointer hover:bg-black hover:text-white border-2 border-gray-300"
+        class="m-2 py-2 px-4 text-[16px] text-center border-2 border-gray-300 bg-transparent cursor-pointer hover:bg-black hover:text-white border-2 border-gray-300"
         @click="deleteAbility()"
       >
         X

src/components/elements/CCButton/BaseCCButton.vue

@@ -2,12 +2,13 @@
   <div>
     <button
       :class="[
-        'w-80',
-        'h-14',
+        'w-72',
+        'h-12',
         'rounded',
         'shadow-xl',
         'shadow-black/25',
         'text-center',
+        'text-base',
         'font-bold',
         'font-[roboto]',
         'uppercase',

src/components/elements/Dropdown/Dropdown.vue

@@ -8,7 +8,7 @@
     ]"
     @click="toggleDropdown"
   >
-    <div class="p-2 flex">
+    <div class="p-1 px-3 flex">
       {{ displayButton() }}
       <img
         class="w-4 pr-1 rotate-180 my-auto"

src/components/elements/FadeTeaser.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative h-[50rem] xl:h-[80rem] overflow-hidden">
+  <div class="relative h-[55rem] xl:h-[80rem] overflow-hidden">
     <img
       alt="worm bg"
       class="absolute left-[-15rem] md:left-[-10rem] h-[100%]"

src/components/partials/PageMenu.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="h-32 bg-black flex space-x-10 px-10">
+  <div class="h-24 bg-black flex space-x-10 px-10">
     <router-link
       class="my-auto"
       to="/"
     >
       <img
-        class="h-16 object-contain"
+        class="h-12 object-contain"
         :src="CCLogo"
         alt="CC logo"
       >
@@ -38,7 +38,8 @@
       'flex-row',
       'uppercase',
       'text-white',
-      'text-xl',
+      'text-lg',
+      'h-13',
       'font-bold',
       'max-md:flex-col',
       'max-md:' + (state.barShown ? 'visible' : 'hidden'),
@@ -47,7 +48,7 @@
     <router-link
       v-for="elem in elems"
       :to="elem.routeName"
-      class="px-10 py-5 hover:underline"
+      class="px-8 py-4 hover:underline"
       active-class="text-yellow-500"
     >
       {{ elem.display }}