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

ADD: more icon consistency

Browse source 
More icons and better consistency
This commit is contained in:
webfussel 2025-02-21 20:45:29 +01:00
parent 9ecafeba02
commit 2ac710387e
4 changed files with 12 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/assets/css/global.css
View file

@ -197,6 +197,10 @@ span.chip {
align-items: center; align-items: center;
gap: .2em; gap: .2em;
&.big-gap {
gap: .5em;
}
&.reverse { &.reverse {
flex-direction: row-reverse; flex-direction: row-reverse;
} }

12
app/components/Footer.vue
View file

@ -14,15 +14,15 @@
</ul> </ul>
<ul class="sitemap gap-default"> <ul class="sitemap gap-default">
<li class="tip-container"> <li class="tip-container">
<Icon name="material-symbols:cookie-off-outline" size="1.5rem" mode="svg" /> <Icon name="ph:cookie-duotone" size="1.5rem" mode="svg" />
<span class="tip">Ohne Cookies</span> <span class="tip">Ohne Cookies</span>
</li> </li>
<li class="tip-container"> <li class="tip-container">
<Icon name="material-symbols:fingerprint-off" size="1.5rem" mode="svg" /> <Icon name="ph:fingerprint-simple-duotone" size="1.5rem" mode="svg" />
<span class="tip">Ohne Tracker</span> <span class="tip">Ohne Tracker</span>
</li> </li>
</ul> </ul>
<p>&copy; 2024 by <a href="https://webfussel.de">webfussel</a></p> <p class="inline-flex-row"><Icon name="ph:copyright-duotone" mode="svg"/> 2024 by <a href="https://webfussel.de">webfussel</a></p>
</footer> </footer>
</template> </template>
@ -57,12 +57,12 @@ const nav = [
const socials = [ const socials = [
{ {
href: 'https://www.linkedin.com/in/webfussel/', href: 'https://www.linkedin.com/in/webfussel/',
icon: 'ri:linkedin-box-line', icon: 'ph:linkedin-logo-duotone',
'aria-label': 'Externer Link: LinkedIn Profil' 'aria-label': 'Externer Link: LinkedIn Profil'
}, },
{ {
href: 'https://mastodontech.de/@webfussel', href: 'https://mastodontech.de/@webfussel',
icon: 'ri:mastodon-line', icon: 'ph:mastodon-logo-duotone',
rel: 'me', rel: 'me',
'aria-label': 'Externer Link: Mastodon Profil' 'aria-label': 'Externer Link: Mastodon Profil'
}, },
@ -73,7 +73,7 @@ const socials = [
}, },
{ {
href: 'https://twitch.tv/webfussel', href: 'https://twitch.tv/webfussel',
icon: 'ri:twitch-line', icon: 'ph:twitch-logo-duotone',
'aria-label': 'Externer Link: Twitch Kanal' 'aria-label': 'Externer Link: Twitch Kanal'
}, },
{ {

2
app/components/Header.vue
View file

@ -29,7 +29,7 @@
<nav> <nav>
<ul class="main-nav"> <ul class="main-nav">
<li v-for="({label, to, aria, icon}) in nav" :key="label" @click="isBurgerOpen = false"> <li v-for="({label, to, aria, icon}) in nav" :key="label" @click="isBurgerOpen = false">
<NuxtLink :to="to" :aria-label="aria" active-class="active" class="inline-flex-row"> <NuxtLink :to="to" :aria-label="aria" active-class="active" class="inline-flex-row big-gap">
<Icon :name="`ph:${icon}-duotone`" mode="svg" /> <Icon :name="`ph:${icon}-duotone`" mode="svg" />
{{ label }} {{ label }}
</NuxtLink> </NuxtLink>

2
app/components/Intro.vue
View file

@ -2,7 +2,7 @@
<section id="intro" class="Intro content full gap-default"> <section id="intro" class="Intro content full gap-default">
<div class="intro-text flex-col gap-default"> <div class="intro-text flex-col gap-default">
<h1 class="flex-col"> <h1 class="flex-col">
<span class="greeting">Moin.</span> <span class="greeting inline-flex-row">Moin. <Icon name="ph:hand-peace-duotone" mode="svg"/></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> <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>
<h2> <h2>