Stone_Red/Stone-Red-Code.github.io
1
0
Fork 0
mirror of https://github.com/Stone-Red-Code/Stone-Red-Code.github.io.git synced 2026-09-04 09:06:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added some nice animations

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
nav.html
+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>
style.css
+30 -13
View File
@@ -49,6 +49,16 @@ footer {
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;
margin-top: -0.4rem; margin-top: -0.4rem;
@@ -62,8 +72,7 @@ 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,14 +165,12 @@ 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%;
}
} }