flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add hover effects on Footer links

Browse Source
This commit is contained in:
Félix Péault
2021-10-18 16:19:04 +02:00
parent 691e499e9e
commit 72db85ede2
2 changed files with 68 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/organisms/Footer.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import { getContext } from 'svelte'
// Components
import SplitText from '$components/SplitText.svelte'
import SiteTitle from '$components/atoms/SiteTitle.svelte'
const { settings: { instagram, footer_links }}: any = getContext('global')
@@ -18,16 +19,20 @@
{#each footer_links as { title, slug }}
<li>
<a href="/{slug}" sveltekit:prefetch>
{title}
<SplitText text={title} clone={true} />
</a>
</li>
{/each}
<li class="instagram">
<a href="https://www.instagram.com/{instagram}" target="_blank" rel="noopener noreferrer external">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#fff" fill-rule="evenodd" clip-rule="evenodd" d="M10 1.8c2.67 0 2.99.01 4.04.06.98.04 1.5.2 1.86.34a3.27 3.27 0 0 1 1.9 1.9c.13.35.3.88.34 1.86.05 1.05.06 1.37.06 4.04s-.01 2.99-.06 4.04c-.04.98-.2 1.5-.34 1.86-.19.46-.4.8-.75 1.15a3.1 3.1 0 0 1-1.15.75c-.35.13-.88.3-1.86.34-1.05.05-1.37.06-4.04.06s-2.99-.01-4.04-.06c-.98-.04-1.5-.2-1.86-.34a3.1 3.1 0 0 1-1.15-.75 3.1 3.1 0 0 1-.75-1.15 5.6 5.6 0 0 1-.34-1.86A69.42 69.42 0 0 1 1.8 10c0-2.67.01-2.99.06-4.04.04-.98.2-1.5.34-1.86.19-.46.4-.8.75-1.15A3.1 3.1 0 0 1 4.1 2.2c.35-.13.88-.3 1.86-.34C7 1.81 7.33 1.8 10 1.8ZM10 0C7.28 0 6.94.01 5.88.06 4.8.11 4.08.28 3.45.52a4.9 4.9 0 0 0-1.77 1.16A4.9 4.9 0 0 0 .52 3.45a7.34 7.34 0 0 0-.46 2.43C.01 6.94 0 7.28 0 10s.01 3.06.06 4.12c.05 1.07.22 1.8.46 2.43.26.66.6 1.22 1.16 1.77.55.56 1.11.9 1.77 1.16a7.6 7.6 0 0 0 2.43.46c1.06.05 1.4.06 4.12.06s3.06-.01 4.12-.06a7.34 7.34 0 0 0 2.43-.46 4.9 4.9 0 0 0 1.77-1.16 4.9 4.9 0 0 0 1.16-1.77 7.6 7.6 0 0 0 .46-2.43c.05-1.06.06-1.4.06-4.12s-.01-3.06-.06-4.12a7.34 7.34 0 0 0-.46-2.43 4.9 4.9 0 0 0-1.16-1.77A4.9 4.9 0 0 0 16.55.52a7.34 7.34 0 0 0-2.43-.46C13.06.01 12.72 0 10 0Zm0 4.86a5.14 5.14 0 1 0 0 10.28 5.14 5.14 0 0 0 0-10.28Zm0 8.47a3.33 3.33 0 1 1 0-6.66 3.33 3.33 0 0 1 0 6.66Zm5.34-7.47a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z" />
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 1.8c2.67 0 2.99.01 4.04.06.98.04 1.5.2 1.86.34a3.27 3.27 0 0 1 1.9 1.9c.13.35.3.88.34 1.86.05 1.05.06 1.37.06 4.04s-.01 2.99-.06 4.04c-.04.98-.2 1.5-.34 1.86-.19.46-.4.8-.75 1.15a3.1 3.1 0 0 1-1.15.75c-.35.13-.88.3-1.86.34-1.05.05-1.37.06-4.04.06s-2.99-.01-4.04-.06c-.98-.04-1.5-.2-1.86-.34a3.1 3.1 0 0 1-1.15-.75 3.1 3.1 0 0 1-.75-1.15 5.6 5.6 0 0 1-.34-1.86A69.42 69.42 0 0 1 1.8 10c0-2.67.01-2.99.06-4.04.04-.98.2-1.5.34-1.86.19-.46.4-.8.75-1.15A3.1 3.1 0 0 1 4.1 2.2c.35-.13.88-.3 1.86-.34C7 1.81 7.33 1.8 10 1.8ZM10 0C7.28 0 6.94.01 5.88.06 4.8.11 4.08.28 3.45.52a4.9 4.9 0 0 0-1.77 1.16A4.9 4.9 0 0 0 .52 3.45a7.34 7.34 0 0 0-.46 2.43C.01 6.94 0 7.28 0 10s.01 3.06.06 4.12c.05 1.07.22 1.8.46 2.43.26.66.6 1.22 1.16 1.77.55.56 1.11.9 1.77 1.16a7.6 7.6 0 0 0 2.43.46c1.06.05 1.4.06 4.12.06s3.06-.01 4.12-.06a7.34 7.34 0 0 0 2.43-.46 4.9 4.9 0 0 0 1.77-1.16 4.9 4.9 0 0 0 1.16-1.77 7.6 7.6 0 0 0 .46-2.43c.05-1.06.06-1.4.06-4.12s-.01-3.06-.06-4.12a7.34 7.34 0 0 0-.46-2.43 4.9 4.9 0 0 0-1.16-1.77A4.9 4.9 0 0 0 16.55.52a7.34 7.34 0 0 0-2.43-.46C13.06.01 12.72 0 10 0Zm0 4.86a5.14 5.14 0 1 0 0 10.28 5.14 5.14 0 0 0 0-10.28Zm0 8.47a3.33 3.33 0 1 1 0-6.66 3.33 3.33 0 0 1 0 6.66Zm5.34-7.47a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z" />
</svg>
<span>Instagram</span>
<SplitText
class="instagram__text"
text="Instagram"
clone={true}
/>
</a>
</li>
</ul>

62
src/style/organisms/_footer.scss
View File

@@ -19,6 +19,7 @@
&__title {
grid-column: span var(--columns);
grid-row: 1;
display: block;
margin-bottom: 40px;
text-decoration: none;
@@ -27,6 +28,13 @@
grid-row: 1;
margin: auto 0;
}
// hover
.site-title:hover {
strong, span {
color: #fff;
}
}
}
// Links
@@ -48,6 +56,7 @@
li {
display: block;
margin-bottom: 16px;
overflow: hidden;
@include bp (sm) {
margin: 0 12px;
@@ -61,7 +70,9 @@
}
}
a {
display: block;
position: relative;
display: flex;
align-items: center;
color: #fff;
text-decoration: none;
font-size: rem(14px);
@@ -71,12 +82,57 @@
@include bp (md) {
font-size: rem(16px);
}
// Hover effect
.text-split__line {
&:last-child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: $color-secondary;
transform: translate3d(0, 100%, 0);
opacity: 0;
transition-delay: calc(var(--i-w) * 100ms);
}
}
&:hover {
.text-split__line {
&:first-child {
opacity: 0;
transform: translate3d(0, -25%, 0);
transition-duration: 0.5s;
}
&:last-child {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
}
}
svg {
margin-right: 12px;
margin-right: 8px;
@include bp (md) {
margin-right: 16px;
margin-right: 12px;
}
}
// Instagram link
.instagram {
&__text {
position: relative;
}
svg {
transition: color 0.35s;
}
// Hover
a:hover {
svg {
color: $color-secondary;
}
}
}
}