bassguitarbill/billros.si
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New font and cool animations

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -4,16 +4,16 @@
<link type="text/css" rel="stylesheet" href="./style.css"> <link type="text/css" rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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> </head>
<body> <body>
<header> <header>
<span class="logo">billros.si</span> <span class="logo">billros.si</span>
<nav> <nav>
<ul> <ul>
<li>Home</li> <li><a href="#">Home</a></li>
<li>Toons</li> <li><a href="https://github.com/bassguitarbill">Github</a></li>
<li>Games</li> <li><a href="https://whatguns.itch.io/">itch.io</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>

25
style.scss
View File

@ -1,4 +1,5 @@
$font-edu-vic: 'Edu VIC WA NT Beginner', cursive; $font-edu-vic: 'Edu VIC WA NT Beginner', cursive;
$font-righteous: 'Righteous', cursive;
$color-bg: #2b0202; $color-bg: #2b0202;
$color-logo: #e0a94a; $color-logo: #e0a94a;
@ -25,11 +26,35 @@ header {
} }
nav { nav {
display: flex;
align-items: center;
font-family: $font-righteous;
ul { ul {
margin: 0%; margin: 0%;
li { li {
display: inline; 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;
}
}