New font and cool animations

This commit is contained in:
Bill Rossi 2022-07-14 18:58:57 -04:00
parent 27ab8f053a
commit 635deb7855
2 changed files with 29 additions and 4 deletions

View File

@ -4,16 +4,16 @@
<link type="text/css" rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Edu+VIC+WA+NT+Beginner:wght@600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Edu+VIC+WA+NT+Beginner:wght@600&family=Righteous&display=swap" rel="stylesheet">
</head>
<body>
<header>
<span class="logo">billros.si</span>
<nav>
<ul>
<li>Home</li>
<li>Toons</li>
<li>Games</li>
<li><a href="#">Home</a></li>
<li><a href="https://github.com/bassguitarbill">Github</a></li>
<li><a href="https://whatguns.itch.io/">itch.io</a></li>
</ul>
</nav>
</header>

View File

@ -1,4 +1,5 @@
$font-edu-vic: 'Edu VIC WA NT Beginner', cursive;
$font-righteous: 'Righteous', cursive;
$color-bg: #2b0202;
$color-logo: #e0a94a;
@ -25,11 +26,35 @@ header {
}
nav {
display: flex;
align-items: center;
font-family: $font-righteous;
ul {
margin: 0%;
li {
display: inline;
list-style: none;
a {
color: $color-logo-shadow;
font-size: 24pt;
padding-left: 12pt;
text-decoration: none;
}
a:hover {
color: $color-logo;
filter: drop-shadow(1px 1px 0px $color-logo-shadow);
animation-name: light-up;
animation-duration: 0.5s;
}
}
}
}
@keyframes light-up {
0% {
color: $color-logo-shadow;
}
100% {
color: $color-logo;
}
}