diff --git a/src/components/atoms/Button.svelte b/src/components/atoms/Button.svelte
index 19c37e6..89c51ca 100644
--- a/src/components/atoms/Button.svelte
+++ b/src/components/atoms/Button.svelte
@@ -1,11 +1,15 @@
@@ -13,11 +17,11 @@
{#if tag === 'button'}
{:else if tag === 'a'}
- {text}
+
{/if}
\ No newline at end of file
diff --git a/src/components/organisms/Footer.svelte b/src/components/organisms/Footer.svelte
index c3b24c5..95e36cf 100644
--- a/src/components/organisms/Footer.svelte
+++ b/src/components/organisms/Footer.svelte
@@ -18,13 +18,13 @@
{#each footer_links as { title, slug }}
-
-
+
{/each}
-
-
+
diff --git a/src/style/_base.scss b/src/style/_base.scss
index edf6b5c..35b8aed 100644
--- a/src/style/_base.scss
+++ b/src/style/_base.scss
@@ -80,6 +80,7 @@ button {
}
.text-split {
span, &__line {
+ display: inline-block;
transition: opacity 0.7s var(--ease-quart), transform 0.7s var(--ease-quart);
}
}
\ No newline at end of file
diff --git a/src/style/_effects.scss b/src/style/_effects.scss
index b98ee7d..dd06cb7 100644
--- a/src/style/_effects.scss
+++ b/src/style/_effects.scss
@@ -1,6 +1,6 @@
-/**
- * Box shadows
- */
+/*
+** Box shadows
+*/
// Box: Dark
.shadow-box-dark {
box-shadow:
@@ -36,4 +36,46 @@
0 2px 2px $shadow-color,
0 4px 4px $shadow-color,
0 16px 16px $shadow-color;
+}
+
+
+
+/*
+** Hovers
+*/
+// 3D effect link
+.link-3d {
+ overflow: hidden;
+
+ .text-split {
+ perspective: 300px;
+ }
+ .text-split__line {
+ --offset-y: 100%;
+ transform-origin: bottom center;
+
+ &:last-child {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ color: $color-secondary;
+ transform: translate3d(0, var(--offset-y), 0);
+ opacity: 0;
+ }
+ }
+ &:hover {
+ .text-split__line {
+ &:first-child {
+ opacity: 0;
+ transform: scale(0.92) translate3d(0, 12%, 0);
+ }
+ &:last-child {
+ opacity: 1;
+ transform: translate3d(0,0,0);
+ transition-delay: 55ms;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/style/atoms/_button.scss b/src/style/atoms/_button.scss
index 2d7aff8..bc04e0d 100644
--- a/src/style/atoms/_button.scss
+++ b/src/style/atoms/_button.scss
@@ -9,6 +9,7 @@
border-radius: 100vh;
border: none;
text-decoration: none;
+ transition: background-color 0.55s var(--ease-quart), color 0.55s var(--ease-quart);
@include bp (sm) {
height: 48px;
@@ -22,6 +23,17 @@
margin-right: 12px;
}
+ // Hover effect
+ &:hover {
+ background: $color-secondary;
+ }
+ .text-split__line {
+ &:last-child {
+ --offset-y: 65%;
+ color: #fff;
+ }
+ }
+
/*
** Size variants
@@ -56,15 +68,36 @@
*/
// Pink
&--pink {
+ color: $color-text;
background: $color-secondary-light;
+
+ // Hover
+ &:hover {
+ color: #fff;
+ background: $color-secondary;
+ }
+ .text-split__line {
+ &:last-child {
+ color: #fff;
+ }
+ }
}
+
+ // Beige
&--beige {
$color-button: #F2D3B8;
+ color: $color-text;
background: $color-button;
&[disabled] {
background: none;
border: 2px solid darken($color-button, 2);
}
+
+ // Hover
+ &:hover {
+ color: $color-primary-tertiary20;
+ background: darken($color-button, 2.5);
+ }
}
}
\ No newline at end of file
diff --git a/src/style/organisms/_footer.scss b/src/style/organisms/_footer.scss
index 61ff2ef..e0b65b0 100644
--- a/src/style/organisms/_footer.scss
+++ b/src/style/organisms/_footer.scss
@@ -56,7 +56,6 @@
li {
display: block;
margin-bottom: 16px;
- overflow: hidden;
@include bp (sm) {
margin: 0 12px;
@@ -82,34 +81,6 @@
@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: 8px;
diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss
index 812aff6..396bd3e 100644
--- a/src/style/pages/_homepage.scss
+++ b/src/style/pages/_homepage.scss
@@ -31,8 +31,31 @@
// Button
.button {
- box-shadow: 0 1px 1px rgba($color-shadow-brown, 0.05), 0 2px 2px rgba($color-shadow-brown, 0.05), 0 4px 4px rgba($color-shadow-brown, 0.05), 0 16px 16px rgba($color-shadow-brown, 0.05);
+ $color-shadow: rgba($color-shadow-brown, 0.05);
+ box-shadow:
+ 0 1px 1px $color-shadow,
+ 0 2px 2px $color-shadow,
+ 0 4px 4px $color-shadow,
+ 0 16px 16px $color-shadow;
margin-bottom: 40px;
+
+ svg {
+ transition: fill 0.3s;
+ }
+ .text-split__line {
+ &:last-child {
+ color: #fff;
+ }
+ }
+
+ // Hover
+ &:hover {
+ background-color: $color-primary-tertiary20;
+
+ svg {
+ fill: $color-tertiary;
+ }
+ }
}
}
// Text