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

Add buttons to change the season

Browse Source
This commit is contained in:
Bill Rossi 2022-07-14 22:22:28 -04:00
parent f10001212f
commit af20db34a3
7 changed files with 63 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -5,11 +5,19 @@
<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&family=Righteous&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0" />
<script src="js/index.js"></script>
</head>
<body>
<header>
<span class="logo">billros.si</span>
<nav>
<ul class="season">
<li onclick="setSeason('spring')"><span class="material-symbols-outlined">eco</span></li>
<li onclick="setSeason('summer')"><span class="material-symbols-outlined">sunny</span></li>
<li onclick="setSeason('autumn')"><span class="material-symbols-outlined">park</span></li>
<li onclick="setSeason('winter')"><span class="material-symbols-outlined">ac_unit</span></li>
</ul>
<ul>
<li><a href="#">Home</a></li>
<li><a href="https://github.com/bassguitarbill">Github</a></li>

31
js/index.js Normal file
View File

@ -0,0 +1,31 @@
const SEASONAL_COLORS = {
spring: {
bg: '#76BA99',
logo: '#CED89E',
shadow: '#ADCF9F',
},
summer: {
bg: '#0078AA',
logo: '#F6F6F6',
shadow: '#F2DF3A',
},
autumn: {
bg: '#9D5C0D',
logo: '#F7D08A',
shadow: '#E5890A',
},
winter: {
bg: '#242F9B',
logo: '#9BA3EB',
shadow: '#646FD4',
},
}
function setSeason(season) {
document.querySelector(':root').style.setProperty('--background-color', SEASONAL_COLORS[season].bg);
document.querySelector(':root').style.setProperty('--logo-color', SEASONAL_COLORS[season].logo);
document.querySelector(':root').style.setProperty('--logo-shadow-color', SEASONAL_COLORS[season].shadow);
localStorage.setItem('season', season);
}
setSeason(localStorage.getItem('season') || 'spring');

4
style/_autumn.scss
View File

@ -1,4 +0,0 @@
// https://colorhunt.co/palette/9d5c0de5890af7d08afafafa
$color-bg: #9D5C0D;
$color-logo: #F7D08A;
$color-logo-shadow: #E5890A;

4
style/_spring.scss
View File

@ -1,4 +0,0 @@
// https://colorhunt.co/palette/76ba99adcf9fced89effdcae
$color-bg: #76BA99;
$color-logo: #CED89E;
$color-logo-shadow: #ADCF9F;

4
style/_summer.scss
View File

@ -1,4 +0,0 @@
// https://colorhunt.co/palette/0078aa3ab4f2f2df3af6f6f6
$color-bg: #0078AA;
$color-logo: #F6F6F6;
$color-logo-shadow: #F2DF3A;

4
style/_winter.scss
View File

@ -1,4 +0,0 @@
// https://colorhunt.co/palette/242f9b646fd49ba3ebdbdffd
$color-bg: #242F9B;
$color-logo: #9BA3EB;
$color-logo-shadow: #646FD4;

41
style/style.scss
View File

@ -1,14 +1,15 @@
// @use 'spring' as *;
@use 'summer' as *;
// @use 'autumn' as *;
// @use 'winter' as *;
$font-edu-vic: 'Edu VIC WA NT Beginner', cursive;
$font-righteous: 'Righteous', cursive;
:root {
--background-color: #76BA99;
--logo-color: #CED89E;
--logo-shadow-color: #ADCF9F;
}
body {
margin: 0px;
background-color: $color-bg;
background-color: var(--background-color);
color: white;
}
@ -21,8 +22,8 @@ header {
.logo {
font-family: $font-edu-vic;
font-size: 36pt;
color: $color-logo;
filter: drop-shadow(3px 4px 0px $color-logo-shadow);
color: var(--logo-color);
filter: drop-shadow(3px 4px 0px var(--logo-shadow-color));
text-decoration: underline dotted;
}
@ -36,26 +37,32 @@ nav {
display: inline;
list-style: none;
a {
color: $color-logo-shadow;
color: var(--logo-shadow-color);
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;
}
}
li:hover {
color: var(--logo-color);
filter: drop-shadow(1px 1px 0px var(--logo-shadow-color));
animation-name: light-up;
animation-duration: 0.5s;
}
}
ul.season {
color: var(--logo-shadow-color);
padding-left: 0px;
font-size: 30pt;
cursor: pointer;
}
}
@keyframes light-up {
0% {
color: $color-logo-shadow;
color: var(--logo-shadow-color);
}
100% {
color: $color-logo;
color: var(--logo-color);
}
}