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

add: better a11y, nowrap for name

Browse source
This commit is contained in:
webfussel 2024-08-20 13:21:31 +02:00
parent 297ebaa3c5
commit 15ce42b7de
3 changed files with 24 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

18
assets/css/global.css
View file

@ -92,11 +92,27 @@ a {
color: var(--color-white);
}
a.orange {
.nowrap {
white-space: nowrap;
}
a.mail {
display: inline-flex;
align-items: center;
gap: .5rem;
color: var(--color-orange);
font-weight: bold;
& img {
filter: invert(50%) sepia(84%) saturate(868%) hue-rotate(1deg) brightness(103%) contrast(100%);
}
&:hover {
color: var(--color-orange-light);
& img {
filter: invert(72%) sepia(59%) saturate(390%) hue-rotate(343deg) brightness(102%) contrast(103%);
}
}
}

6
components/Intro.vue
View file

@ -3,11 +3,11 @@
<div class="intro-text flex-col default-gap">
<h1 class="flex-col">
<span class="greeting">Moin. </span>
<span class="my-name-wrapper">Ich bin <span class="highlight">Fiona </span><small>Urban</small><span class="dot">.</span></span>
<span class="my-name-wrapper">Ich bin <span class="nowrap"><span class="highlight">Fiona </span><small>Urban</small><span class="dot">.</span></span></span>
</h1>
<h3>
<h2>
Component <span class="highlight">&</span> API Entwicklerin
</h3>
</h2>
<p class="fulltext">
Ich helfe Unternehmen dabei, ihre Daten so richtig nice zusammen zu sammeln
und in wunderschöne Komponenten zu gießen.

5
components/Services.vue
View file

@ -23,7 +23,9 @@
</div>
<article class="z-2 card flex-col default-gap margin-top">
<h3>Keinen Bock auf Telen? Understandable.</h3>
<p>Dann schreib mir einfach gerne direkt eine E-Mail an <ClientOnly><a class="orange" href="mailto:anfragen@webfussel.de">anfragen@webfussel.de</a></ClientOnly></p>
<p>Dann schreib mir einfach gerne direkt eine E-Mail an
<ClientOnly><a class="mail" href="mailto:anfragen@webfussel.de">anfragen@webfussel.de<img :src="mail" aria-hidden="true" alt="" /></a></ClientOnly>
</p>
<h3>Keine Kohle? Kommt vor.</h3>
<p>Meld dich trotzdem. Eventuell ist dein Projekt ja cool genug, dass ich dir da auch entsprechend entgegenkommen kann. :)</p>
</article>
@ -44,6 +46,7 @@
<script setup lang="ts">
import check from 'iconoir/icons/regular/double-check.svg'
import type { Person } from '#components'
import mail from 'iconoir/icons/regular/mail.svg'
const services = [
{