From 9ecafeba02d9dd2548f19ba5828386375f3e8bd5 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Fri, 21 Feb 2025 20:34:08 +0100
Subject: [PATCH] FIX: mobile layout for easy skills

Better layout for easily explained skills
---
 app/assets/css/global.css        |  4 +++
 app/assets/css/skills.css        | 46 ++++++++++++++++++++++++++++++++
 app/components/Footer.vue        | 28 +++++++++----------
 app/components/Header.vue        |  4 +--
 app/components/RichText/Link.vue |  4 +--
 app/components/SkillsEasy.vue    | 16 ++++++-----
 6 files changed, 75 insertions(+), 27 deletions(-)

diff --git a/app/assets/css/global.css b/app/assets/css/global.css
index 889dcf3..918ea5a 100644
--- a/app/assets/css/global.css
+++ b/app/assets/css/global.css
@@ -178,6 +178,10 @@ span.chip {
     margin-top: 6rem;
 }
 
+.place-bottom {
+    margin-top: auto;
+}
+
 .flex-row {
     display: flex;
     flex-direction: row;
diff --git a/app/assets/css/skills.css b/app/assets/css/skills.css
index 31b0208..cfc78ee 100644
--- a/app/assets/css/skills.css
+++ b/app/assets/css/skills.css
@@ -17,4 +17,50 @@
     & .bottom {
         align-items: center;
     }
+
+    & .image-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    & .skill-card {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        &.reverse {
+            flex-direction: row-reverse;
+        }
+    }
 }
+
+@media (width <= 1601px) {
+    .Skills {
+        & .skill-container {
+            flex-wrap: wrap;
+            flex-direction: row;
+        }
+
+        & .skill-card.reverse,
+        & .skill-card {
+            flex: 1 0 300px;
+            flex-direction: column;
+            text-align: center;
+            justify-content: start;
+        }
+
+        & .skill-card h3 {
+            text-align: center;
+        }
+
+        & .text-container,
+        & .text-container main {
+            height: 100%;
+        }
+
+        & .image-container img {
+            width: 100%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/components/Footer.vue b/app/components/Footer.vue
index e512e2b..3c1fbf0 100644
--- a/app/components/Footer.vue
+++ b/app/components/Footer.vue
@@ -31,25 +31,21 @@
 
 const nav = [
   {
-    to: `/#intro`,
-    label: 'Über mich',
-    'aria-label': 'Link dieser Seite: Über mich'
+    to: `/`,
+    label: 'Home',
+    'aria-label': 'Link dieser Seite: Home'
   }, {
-    to: `/#skills`,
-    label: 'Meine Expertise',
-    'aria-label': 'Link dieser Seite: Meine Expertise'
+    to: `/services`,
+    label: 'Leistungen',
+    'aria-label': 'Link dieser Seite: Leistungen'
   }, {
-    to: `/#customers`,
-    label: 'Kunden',
-    'aria-label': 'Link dieser Seite: Kunden'
+    to: `/references`,
+    label: 'Referenzen',
+    'aria-label': 'Link dieser Seite: Referenzen'
   }, {
-    to: `/#services`,
-    label: 'Services',
-    'aria-label': 'Link dieser Seite: Services'
-  }, {
-    to: `/#network`,
-    label: 'Mein Netzwerk',
-    'aria-label': 'Link dieser Seite: Mein Netzwerk'
+    to: `/contact`,
+    label: 'Kontakt',
+    'aria-label': 'Link dieser Seite: Kontakt'
   }, {
     to: '/imp',
     label: 'Impressum',
diff --git a/app/components/Header.vue b/app/components/Header.vue
index ff88bca..e667f75 100644
--- a/app/components/Header.vue
+++ b/app/components/Header.vue
@@ -61,8 +61,8 @@ const nav = [
   {
     to: `/services`,
     label: 'Leistungen',
-    icon: 'list-checks',
-    aria: 'Link dieser Seite: Leistungen'
+    icon: 'coins',
+    aria: 'Link dieser Seite: Preise'
   },
   {
     to: `/references`,
diff --git a/app/components/RichText/Link.vue b/app/components/RichText/Link.vue
index b07599d..4714303 100644
--- a/app/components/RichText/Link.vue
+++ b/app/components/RichText/Link.vue
@@ -1,11 +1,11 @@
 <template>
   <a v-if="isExternal" :href="href" :target="target" class="text inline-flex-row">
     {{ content }}
-    <Icon :name="`ph:arrow-square-out-duotone`" mode="svg" />
+    <Icon name="ph:arrow-square-out-duotone" mode="svg" />
   </a>
   <NuxtLink v-else :to="href" class="text inline-flex-row">
     {{ content }}
-    <Icon :name="`ph:link-simple-duotone`" mode="svg" />
+    <Icon name="ph:link-simple-duotone" mode="svg" />
   </NuxtLink>
 </template>
 
diff --git a/app/components/SkillsEasy.vue b/app/components/SkillsEasy.vue
index 04fa894..897d92d 100644
--- a/app/components/SkillsEasy.vue
+++ b/app/components/SkillsEasy.vue
@@ -2,10 +2,12 @@
   <section id="skills_easy" class="Skills content">
     <h2>Jetzt mal ganz konkret.</h2>
     <h3>In diesem Abschnitt jetzt mal ganz <span class="highlight">ohne Technik-Blabla</span>.</h3>
-    <div class="flex-col margin-top gap-default">
-      <article class="z-2 card flex-row gap-default" v-for="(skill, skillIndex) in skills" :class="[skillIndex % 2 && 'reverse']">
-        <img :src="skill.img" alt="" class="card-img z-4" />
-        <div class="flex-col gap-default">
+    <div class="skill-container flex-col margin-top gap-default">
+      <article class="skill-card z-2 card gap-default" v-for="(skill, skillIndex) in skills" :class="[skillIndex % 2 && 'reverse']">
+        <div class="image-container">
+          <img :src="skill.img" alt="" class="card-img z-4" />
+        </div>
+        <div class="text-container flex-col gap-default">
           <h3>{{skill.title}}</h3>
           <main class="flex-col gap-sm">
             <RichText :elements="skill.text" />
@@ -70,7 +72,7 @@ const skills : Skill[] = [
       },
       {
         type: 'p',
-        css: 'margin-top bold',
+        css: 'place-bottom bold',
         children: [
           {
             type: 'plain',
@@ -171,7 +173,7 @@ const skills : Skill[] = [
       },
       {
         type: 'p',
-        css: 'margin-top bold',
+        css: 'place-bottom bold',
         children: [
           {
             type: 'plain',
@@ -237,7 +239,7 @@ const skills : Skill[] = [
       },
       {
         type: 'p',
-        css: 'margin-top bold',
+        css: 'place-bottom bold',
         children: [
           {
             type: 'plain',