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); color: var(--color-white);
} }
a.orange { .nowrap {
white-space: nowrap;
}
a.mail {
display: inline-flex;
align-items: center;
gap: .5rem;
color: var(--color-orange); color: var(--color-orange);
font-weight: bold;
& img {
filter: invert(50%) sepia(84%) saturate(868%) hue-rotate(1deg) brightness(103%) contrast(100%);
}
&:hover { &:hover {
color: var(--color-orange-light); 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"> <div class="intro-text flex-col default-gap">
<h1 class="flex-col"> <h1 class="flex-col">
<span class="greeting">Moin. </span> <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> </h1>
<h3> <h2>
Component <span class="highlight">&</span> API Entwicklerin Component <span class="highlight">&</span> API Entwicklerin
</h3> </h2>
<p class="fulltext"> <p class="fulltext">
Ich helfe Unternehmen dabei, ihre Daten so richtig nice zusammen zu sammeln Ich helfe Unternehmen dabei, ihre Daten so richtig nice zusammen zu sammeln
und in wunderschöne Komponenten zu gießen. und in wunderschöne Komponenten zu gießen.

5
components/Services.vue
View file

@ -23,7 +23,9 @@
</div> </div>
<article class="z-2 card flex-col default-gap margin-top"> <article class="z-2 card flex-col default-gap margin-top">
<h3>Keinen Bock auf Telen? Understandable.</h3> <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> <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> <p>Meld dich trotzdem. Eventuell ist dein Projekt ja cool genug, dass ich dir da auch entsprechend entgegenkommen kann. :)</p>
</article> </article>
@ -44,6 +46,7 @@
<script setup lang="ts"> <script setup lang="ts">
import check from 'iconoir/icons/regular/double-check.svg' import check from 'iconoir/icons/regular/double-check.svg'
import type { Person } from '#components' import type { Person } from '#components'
import mail from 'iconoir/icons/regular/mail.svg'
const services = [ const services = [
{ {