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

ADD: Technology tip

Browse source
This commit is contained in:
webfussel 2024-05-22 08:34:08 +02:00
parent 1c86f3569e
commit b7a11e5b84
6 changed files with 43 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

22
components/Technology/Technology.css
View file

@ -1,10 +1,28 @@
.Technology {
position: relative;
align-items: center;
&.m {
&.m img {
height: 30px;
}
&.l {
&.l img {
height: 50px;
}
& span {
scale: 0;
position: absolute;
top: -3rem;
width: max-content;
border: 1px solid var(--color-white);
border-radius: 999px;
background-color: var(--color-black);
padding: .5em 1.5rem;
transition: 150ms;
}
&:hover span {
scale: 1;
}
}

11
components/Technology/Technology.vue
View file

@ -1,10 +1,13 @@
<style scoped src="./Technology.css"/>
<template>
<a v-if="link" :href="link" target="_blank" rel="noopener noreferrer">
<img class="Technology" :src="img" :alt="name" :class="[size]"/>
</a>
<img v-else class="Technology" :src="img" :alt="name" :class="[size]"/>
<div class="Technology flex-col" :class="[size]">
<a v-if="link" :href="link" target="_blank" rel="noopener noreferrer">
<img :src="img" :alt="name" :class="[size]"/>
</a>
<img v-else :src="img" :alt="name"/>
<span class="tip">{{name}}</span>
</div>
</template>
<script setup lang="ts">