host/paulnicoue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit global style and component structure

Browse source
This commit is contained in:
Paul Nicoué 2023-02-02 17:02:53 +01:00
parent 88bac001d8
commit 53e513a55b
15 changed files with 816 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

52
components/HeroArrowDown.vue Normal file
View file

@ -0,0 +1,52 @@
<template>
<a class="hero-arrow-down" tabindex="-1" aria-hidden="true" href="#contact" target="_self">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
<line x1="12" y1="5" x2="12" y2="19"></line>
<polyline points="19 12 12 19 5 12"></polyline>
</svg>
</a>
</template>
<script setup>
</script>
<style lang="scss" scoped>
// --------------------------------------------------
// STYLE
// --------------------------------------------------
.hero-arrow-down {
width: calc(var(--regular-icon-size) + 1rem);
height: calc(var(--regular-icon-size) + 1rem);
display: flex;
justify-content: center;
align-items: center;
background-image: var(--button-gradient);
background-size: 100%;
background-position: right center;
border-radius: 50%;
cursor: pointer;
transition: background-size 200ms ease-in-out;
svg {
width: var(--regular-icon-size);
height: var(--regular-icon-size);
stroke: var(--primary-color);
transition: transform 200ms ease-in-out;
}
&:hover,
&:focus,
&:active {
background-size: 300%;
svg {
transform: translateY(0.25rem);
}
}
}
</style>