- Spent too long adding a rotating gradient

This commit is contained in:
Adam Iannazzone 2024-04-18 10:52:32 -04:00
parent b87269ccde
commit 83ed86e1b2
3 changed files with 43 additions and 7 deletions

View file

@ -1,23 +1,41 @@
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"); @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
body { body {
background-color: #111; background-color: #222;
} }
.navbar { .navbar {
background: linear-gradient(-95deg, #1a9fff, #946beb); background: linear-gradient(-95deg, #1a9fff, #946beb);
font-family: "Source Sans 3";
} }
.navbar .dropdown-menu { .navbar .dropdown-menu {
background-color: #222;
}
/* .btn-dark {
background-color: #111;
} */
.btn {
font-family: "Source Sans 3", sans-serif;
background-color: #111; background-color: #111;
} }
.btn-dark { .btn:hover, button {
background-color: #111; background-color: #222;
border: 1px white solid;
} }
#lead-jumbotron { .jumbotron {
background: linear-gradient(45deg, #1a9fff, #946beb); background: linear-gradient(45deg, #1a9fff, #946beb);
color: white; color: white;
border: 1px white solid; border: 1px white solid;
font-family: "Source Sans 3", sans-serif;
}
.jumbotron h1 {
font-family: "Nunito Sans", sans-serif;
} }

View file

@ -96,7 +96,7 @@
<main class="container"> <main class="container">
<!-- Lead Jumbotron --> <!-- Lead Jumbotron -->
<div class="p-2 mb-4 mt-4 bg-body-tertiary rounded-3" id="lead-jumbotron"> <div class="p-2 mb-4 mt-4 bg-body-tertiary rounded-3 jumbotron">
<div class="container-fluid py-5"> <div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Your all-in-one emulation package for the Steam Deck</h1> <h1 class="display-5 fw-bold">Your all-in-one emulation package for the Steam Deck</h1>
<p class="col-md-8 fs-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed ante <p class="col-md-8 fs-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed ante
@ -104,7 +104,7 @@
erat, nec vehicula arcu dapibus sed.</p> erat, nec vehicula arcu dapibus sed.</p>
<a type="button" class="align-center" target="_blank" rel="noopener noreferrer" <a type="button" class="align-center" target="_blank" rel="noopener noreferrer"
href="https://flathub.org/apps/details/net.retrodeck.retrodeck"> href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
<img src="assets/icons/flathub.webp"> <img width='200' alt='Download on Flathub' src='https://flathub.org/api/badge?locale=en'/>
</a> </a>
</div> </div>
</div> </div>
@ -152,7 +152,7 @@
<!-- End Carousel --> <!-- End Carousel -->
<!-- Donate Jumbotron --> <!-- Donate Jumbotron -->
<div class="p-2 mb-4 bg-body-tertiary rounded-3" id="lead-jumbotron"> <div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron">
<div class="container-fluid py-4"> <div class="container-fluid py-4">
<h1 class="display-5 fw-bold">We can't do this alone</h1> <h1 class="display-5 fw-bold">We can't do this alone</h1>
<p class="col-md-8 fs-4">RetroDECK is run by volunteers. If you appreciate our work, please consider <p class="col-md-8 fs-4">RetroDECK is run by volunteers. If you appreciate our work, please consider
@ -169,6 +169,7 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script src="scripts/gradient.js" type="module"></script>
</body> </body>
</html> </html>

17
scripts/gradient.js Normal file
View file

@ -0,0 +1,17 @@
let gradientAngle = 45;
let jumbotronElems = document.getElementsByClassName('jumbotron');
const gradientInterval = setInterval(function() {
updateGradientAngle();
}, 50);
console.log(jumbotronElems.length)
function updateGradientAngle() {
gradientAngle += 1
if (gradientAngle > 360) {
gradientAngle = 0;
}
for (let i=0; i<jumbotronElems.length; i++) {
jumbotronElems[i].style.background = `linear-gradient(${gradientAngle}deg, #1a9fff, #946beb)`;
}
}