71 lines
No EOL
1.6 KiB
Vue
71 lines
No EOL
1.6 KiB
Vue
<script setup lang="ts">
|
|
|
|
import { Icon } from '@iconify/vue';
|
|
|
|
const props = defineProps({
|
|
isExternal: { type: Boolean, default: false },
|
|
href: { type: String, default: '/' },
|
|
label: { type: String, default: null },
|
|
icon: { type: String, default: null }
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="display">
|
|
<a v-if="isExternal" :href="href" target="_blank" class="link">
|
|
<div class="box"></div>
|
|
<Icon v-if="icon" :icon="icon" class="text-lg md:text-2xl" />
|
|
<span v-if="label">{{label}}</span>
|
|
</a>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style>
|
|
|
|
.display {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.link {
|
|
padding: .2em;
|
|
background-color: var(--dark-shade1);
|
|
-webkit-box-shadow: 0px 0px 10px 5px #2d3139;
|
|
-moz-box-shadow: 0px 0px 10px 5px #2d3139;
|
|
box-shadow: 0px 0px 10px 5px #2d3139;
|
|
text-shadow: 0px 0px 5px var(--dark-accent4);
|
|
border-radius: 1em;
|
|
font-size: 1rem;
|
|
color: var(--dark-accent4);
|
|
transition: transform .2s;
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
.display {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.link {
|
|
padding: .5em;
|
|
background-color: var(--dark-shade1);
|
|
-webkit-box-shadow: 0px 0px 20px 10px #2d3139;
|
|
-moz-box-shadow: 0px 0px 20px 10px #2d3139;
|
|
box-shadow: 0px 0px 20px 10px #2d3139;
|
|
text-shadow: 0px 0px 10px var(--dark-accent4);
|
|
border-radius: 1em;
|
|
font-size: 2rem;
|
|
color: var(--dark-accent4);
|
|
margin-right: 3em;
|
|
transition: transform .2s;
|
|
}
|
|
|
|
.link:hover {
|
|
color: var(--dark-accent1);
|
|
background-color: var(--dark-accent4);
|
|
transform: translate(0, 10%);
|
|
}
|
|
}
|
|
</style> |