webfussel/wf4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

FIX: mobile layout for easy skills

Browse source 
Better layout for easily explained skills
This commit is contained in:
webfussel 2025-02-21 20:34:08 +01:00
parent d8593a7280
commit 9ecafeba02
6 changed files with 75 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

16
app/components/SkillsEasy.vue
View file

@ -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',