From 1217a1041832ab80e6f44419e087a5a65e8cd8c3 Mon Sep 17 00:00:00 2001
From: jonasled <git@jonasled.de>
Date: Fri, 5 Mar 2021 22:47:51 +0100
Subject: [PATCH] add hover animations
---
scss/_footer.scss | 12 ++++++++++++
scss/_general.scss | 2 ++
scss/_menue.scss | 1 +
scss/_var.scss | 4 +++-
4 files changed, 18 insertions(+), 1 deletion(-)
diff --git a/scss/_footer.scss b/scss/_footer.scss
index 030a4d8..00b20b6 100644
--- a/scss/_footer.scss
+++ b/scss/_footer.scss
@@ -23,6 +23,10 @@ footer{
a {
color: $text-color;
+ transition: color $link-hover-animation-time;
+ }
+ a:hover{
+ color: $accent-color;
}
}
@@ -30,6 +34,14 @@ footer{
margin-left: 10px;
display: inline;
}
+
+ .fa {
+ transition: color $link-hover-animation-time;
+ }
+
+ .fa:hover{
+ color: $accent-color;
+ }
}
#blueBar{
diff --git a/scss/_general.scss b/scss/_general.scss
index 6fa1fec..dd088ca 100644
--- a/scss/_general.scss
+++ b/scss/_general.scss
@@ -16,6 +16,7 @@ button{
padding: 5px;
cursor: pointer;
border-radius: 5px;
+ transition: background-color $link-hover-animation-time linear;
&:HOVER{
background-color: $accent-color-2;
@@ -30,6 +31,7 @@ a{
padding: 0;
color: $accent-color;
text-decoration:underline;
+ transition: color $link-hover-animation-time;
&:HOVER{
color: $accent-color-2;
diff --git a/scss/_menue.scss b/scss/_menue.scss
index e105e79..2a2b5e1 100644
--- a/scss/_menue.scss
+++ b/scss/_menue.scss
@@ -33,6 +33,7 @@
border-bottom: $back-color-2 solid 2px;
width: 100%;
color: $text-color;
+ transition: background-color $link-hover-animation-time linear;
&:first-of-type{
border-top-left-radius: $border-radius-sub-nav;
diff --git a/scss/_var.scss b/scss/_var.scss
index 86d3e77..a1906a1 100644
--- a/scss/_var.scss
+++ b/scss/_var.scss
@@ -10,4 +10,6 @@ $darker-color-2: 2%;
$border-radius-sub-nav: 10px;
$mobile-max-width: 600px;
-$small-mobile-max-width: 300px;
\ No newline at end of file
+$small-mobile-max-width: 300px;
+
+$link-hover-animation-time: 0.2s;
\ No newline at end of file
--
GitLab