Added some nice animations

This commit is contained in:
Stone-Red-Code
2021-05-05 21:52:41 +02:00
parent 00f15baf73
commit 64d4de010c
2 changed files with 35 additions and 17 deletions
+2 -1
View File
@@ -3,7 +3,8 @@
<a class="navbar-brand" href="http://github.com/Stone-Red-Code" aria-label="GitHub Link"><img class="rounded" <a class="navbar-brand" href="http://github.com/Stone-Red-Code" aria-label="GitHub Link"><img class="rounded"
src="https://github.com/Stone-Red-Code.png" height="45" alt="Profile picture"></a> src="https://github.com/Stone-Red-Code.png" height="45" alt="Profile picture"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-label="Menu Button"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"
aria-label="Menu Button">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
+33 -16
View File
@@ -47,7 +47,17 @@ footer {
top: 1.5rem; top: 1.5rem;
transform: translate(-50%, 0%); transform: translate(-50%, 0%);
width: fit-content; width: fit-content;
} }
.jumbotron {
animation-name: fadeGray;
background: #dadde0;
transition: background-color 0.5s ease-out 100ms;
}
.jumbotron:hover {
background-color: #ffffff;
}
#quotes { #quotes {
font-weight: normal; font-weight: normal;
@@ -62,9 +72,8 @@ footer {
visibility: hidden; visibility: hidden;
} }
.fade-in .fade-in {
{ visibility: visible !important;
visibility:visible !important;
animation: fadeIn; animation: fadeIn;
animation-duration: 1s; animation-duration: 1s;
} }
@@ -98,7 +107,6 @@ h3 {
color: black; color: black;
} }
a:link { a:link {
color: gray; color: gray;
text-decoration: underline; text-decoration: underline;
@@ -113,7 +121,7 @@ a:visited {
/* mouse over link */ /* mouse over link */
a:hover { a:hover {
color: rgb(0, 0, 0); color: black;
} }
/* selected link */ /* selected link */
@@ -125,14 +133,22 @@ a:active {
.nav-link { .nav-link {
text-decoration: var(--fg-theme); text-decoration: var(--fg-theme);
text-decoration: none!important; text-decoration: none!important;
transition: background-color 0.5s ease-out 100ms
}
.nav-link:hover {
background-color: rgb(155, 155, 155);
}
.dropdown-menu {
background-color: var(--fg-theme);
} }
.toolIcon img { .toolIcon img {
width: 100; width: 100;
} }
.dropdown-item:active .dropdown-item:active {
{
background-color: lightgray; background-color: lightgray;
} }
@@ -149,15 +165,13 @@ a:active {
.header-text { .header-text {
margin-top: 1.1rem; margin-top: 1.1rem;
} }
#quotes { #quotes {
display: none; display: none;
} }
} }
@media screen and (max-width: 580px) @media screen and (max-width: 580px) {
{ .dropdown-menu {
.dropdown-menu{
background-color: var(--fg-theme)!important; background-color: var(--fg-theme)!important;
border: none; border: none;
} }
@@ -172,8 +186,11 @@ a:active {
} }
} }
@keyframes fadeIn @keyframes fadeIn {
{ from {
from{opacity: 0%;} opacity: 0%;
to{opacity: 100%;} }
to {
opacity: 100%;
}
} }