Re-styled carousel to better fit screens, display at top of page
This commit is contained in:
parent
db16727f02
commit
e863616086
221
www/index.html
221
www/index.html
@ -11,7 +11,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
||||||
<div class="container overflow-auto d-flex flex-column dvh-100">
|
<div class="overflow-auto d-flex flex-column dvh-100">
|
||||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark border-bottom">
|
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark border-bottom">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<a class="navbar-brand d-flex align-items-center link-body-emphasis text-decoration-none" href="/">
|
<a class="navbar-brand d-flex align-items-center link-body-emphasis text-decoration-none" href="/">
|
||||||
@ -42,7 +42,110 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<main class="container mt-5 fs-4 flex-fill">
|
<div class="mt-5"></div>
|
||||||
|
<div id="gameDemoCarousel" class="mt-3 carousel slide" data-bs-ride="carousel" data-bs-interval="899000">
|
||||||
|
<div class="carousel-indicators">
|
||||||
|
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="The House Always Wins 1"></button>
|
||||||
|
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="1" aria-label="The House Always Wins 2"></button>
|
||||||
|
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="2" aria-label="The House Always Wins 3"></button>
|
||||||
|
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="3" aria-label="Coyote Summer 1"></button>
|
||||||
|
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="4" aria-label="Coyote Summer 2"></button>
|
||||||
|
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="5" aria-label="The Great I Am 1"></button>
|
||||||
|
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="6" aria-label="The Great I Am 2"></button>
|
||||||
|
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="7" aria-label="GFOLF 1"></button>
|
||||||
|
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="8" aria-label="GFOLF 2"></button>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-inner">
|
||||||
|
<div class="carousel-item active">
|
||||||
|
<div class="carousel-fit">
|
||||||
|
<div class="ratio ratio-16x9 d-block">
|
||||||
|
<iframe src="https://www.youtube.com/embed/XxUMn7iG4YM?si=ER9NUp7lmwWF25rx&enablejsapi=1&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
||||||
|
<em><span class="h5">The House Always Wins <a class="fa-brands fa-itch-io" href="https://duncangibbs.itch.io/thaw"></a></span> <span class="fs-6 text-secondary">by Duncan Gibbs</span></em>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<div class="carousel-fit">
|
||||||
|
<img src="/images/thaw_1.png" class="d-block">
|
||||||
|
</div>
|
||||||
|
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
||||||
|
<em><span class="h5">The House Always Wins <a class="fa-brands fa-itch-io" href="https://duncangibbs.itch.io/thaw"></a></span> <span class="fs-6 text-secondary">by Duncan Gibbs</span></em>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<div class="carousel-fit">
|
||||||
|
<img src="/images/thaw_2.png" class="d-block">
|
||||||
|
</div>
|
||||||
|
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
||||||
|
<em><span class="h5">The House Always Wins <a class="fa-brands fa-itch-io" href="https://duncangibbs.itch.io/thaw"></a></span> <span class="fs-6 text-secondary">by Duncan Gibbs</span></em>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="carousel-item">
|
||||||
|
<div class="carousel-fit">
|
||||||
|
<img src="/images/coyote_summer_1.png" class="d-block">
|
||||||
|
</div>
|
||||||
|
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
||||||
|
<em><span class="h5">Coyote Summer <a class="fa-brands fa-itch-io" href="https://intrusive-thoughts.itch.io/coyote-summer"></a></span></em>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<div class="carousel-fit">
|
||||||
|
<img src="/images/coyote_summer_2.png" class="d-block">
|
||||||
|
</div>
|
||||||
|
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
||||||
|
<em><span class="h5">Coyote Summer <a class="fa-brands fa-itch-io" href="https://intrusive-thoughts.itch.io/coyote-summer"></a></span></em>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="carousel-item">
|
||||||
|
<div class="carousel-fit">
|
||||||
|
<img src="/images/the_great_i_am_1.jpg" class="d-block">
|
||||||
|
</div>
|
||||||
|
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
||||||
|
<em><span class="h5">The Great I Am <a class="fa-brands fa-itch-io" href="https://whitman-la-torra.itch.io/the-great-i-am"> </a></span> <span class="fs-6 text-secondary">by Whitman La Torra</span></em>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<div class="carousel-fit">
|
||||||
|
<img src="/images/the_great_i_am_2.png" class="d-block">
|
||||||
|
</div>
|
||||||
|
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
||||||
|
<em><span class="h5">The Great I Am <a class="fa-brands fa-itch-io" href="https://whitman-la-torra.itch.io/the-great-i-am"> </a></span> <span class="fs-6 text-secondary">by Whitman La Torra</span></em>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="carousel-item">
|
||||||
|
<div class="carousel-fit">
|
||||||
|
<img src="/images/gfolf_1.png" class="d-block">
|
||||||
|
</div>
|
||||||
|
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
||||||
|
<em><span class="h5">GFOLF: Combat Golf Action <a class="fa-brands fa-git-alt" href="https://git.intrusive.games/krampus/gfolf2"> </a></span> <span class="fs-6 text-secondary">by Rob Kelly</span></em>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<div class="carousel-fit">
|
||||||
|
<img src="/images/gfolf_2.png" class="d-block">
|
||||||
|
</div>
|
||||||
|
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
||||||
|
<em><span class="h5">GFOLF: Combat Golf Action <a class="fa-brands fa-git-alt" href="https://git.intrusive.games/krampus/gfolf2"> </a></span> <span class="fs-6 text-secondary">by Rob Kelly</span></em>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<button class="carousel-control-prev" type="button" data-bs-target="#gameDemoCarousel" data-bs-slide="prev">
|
||||||
|
<span class="carousel-control-prev-icon" aria-hidden="true" />
|
||||||
|
<span class="visually-hidden">Previous</span>
|
||||||
|
</button>
|
||||||
|
<button class="carousel-control-next" type="button" data-bs-target="#gameDemoCarousel" data-bs-slide="next">
|
||||||
|
<span class="carousel-control-next-icon" aria-hidden="true" />
|
||||||
|
<span class="visually-hidden">Next</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<main class="container mt-2 fs-4 flex-fill">
|
||||||
<div class="section p-5 text-center">
|
<div class="section p-5 text-center">
|
||||||
<p>
|
<p>
|
||||||
We are artists, designers, developers, and creators based in Albuquerque, New Mexico.
|
We are artists, designers, developers, and creators based in Albuquerque, New Mexico.
|
||||||
@ -54,90 +157,6 @@
|
|||||||
We make games to tell the stories we want to tell.
|
We make games to tell the stories we want to tell.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="gameDemoCarousel" class="carousel slide" data-bs-ride="carousel">
|
|
||||||
<div class="carousel-indicators">
|
|
||||||
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="The House Always Wins 1"></button>
|
|
||||||
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="1" aria-label="The House Always Wins 2"></button>
|
|
||||||
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="2" aria-label="The House Always Wins 3"></button>
|
|
||||||
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="3" aria-label="Coyote Summer 1"></button>
|
|
||||||
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="4" aria-label="Coyote Summer 2"></button>
|
|
||||||
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="5" aria-label="The Great I Am 1"></button>
|
|
||||||
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="6" aria-label="The Great I Am 2"></button>
|
|
||||||
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="7" aria-label="GFOLF 1"></button>
|
|
||||||
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="8" aria-label="GFOLF 2"></button>
|
|
||||||
</div>
|
|
||||||
<div class="carousel-inner">
|
|
||||||
<div class="carousel-item active">
|
|
||||||
<div class="ratio ratio-16x9 d-block w-100">
|
|
||||||
<iframe src="https://www.youtube.com/embed/XxUMn7iG4YM?si=ER9NUp7lmwWF25rx" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
|
||||||
</div>
|
|
||||||
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
|
||||||
<em><span class="h5">The House Always Wins <a class="fa-brands fa-itch-io" href="https://duncangibbs.itch.io/thaw"></a></span> <span class="fs-6 text-secondary">by Duncan Gibbs</span></em>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="carousel-item">
|
|
||||||
<img src="/images/thaw_1.png" class="d-block w-100">
|
|
||||||
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
|
||||||
<em><span class="h5">The House Always Wins <a class="fa-brands fa-itch-io" href="https://duncangibbs.itch.io/thaw"></a></span> <span class="fs-6 text-secondary">by Duncan Gibbs</span></em>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="carousel-item">
|
|
||||||
<img src="/images/thaw_2.png" class="d-block w-100">
|
|
||||||
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
|
||||||
<em><span class="h5">The House Always Wins <a class="fa-brands fa-itch-io" href="https://duncangibbs.itch.io/thaw"></a></span> <span class="fs-6 text-secondary">by Duncan Gibbs</span></em>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="carousel-item">
|
|
||||||
<img src="/images/coyote_summer_1.png" class="d-block w-100">
|
|
||||||
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
|
||||||
<h5><em>Coyote Summer <a class="fa-brands fa-itch-io" href="https://intrusive-thoughts.itch.io/coyote-summer"></a></em></h5>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="carousel-item">
|
|
||||||
<img src="/images/coyote_summer_2.png" class="d-block w-100">
|
|
||||||
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
|
||||||
<h5><em>Coyote Summer <a class="fa-brands fa-itch-io" href="https://intrusive-thoughts.itch.io/coyote-summer"></a></em></h5>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="carousel-item">
|
|
||||||
<img src="/images/the_great_i_am_1.jpg" class="d-block w-100">
|
|
||||||
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
|
||||||
<em><span class="h5">The Great I Am <a class="fa-brands fa-itch-io" href="https://whitman-la-torra.itch.io/the-great-i-am"> </a></span> <span class="fs-6 text-secondary">by Whitman La Torra</span></em>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="carousel-item">
|
|
||||||
<img src="/images/the_great_i_am_2.png" class="d-block w-100">
|
|
||||||
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
|
||||||
<em><span class="h5">The Great I Am <a class="fa-brands fa-itch-io" href="https://whitman-la-torra.itch.io/the-great-i-am"> </a></span> <span class="fs-6 text-secondary">by Whitman La Torra</span></em>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="carousel-item">
|
|
||||||
<img src="/images/gfolf_1.png" class="d-block w-100">
|
|
||||||
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
|
||||||
<em><span class="h5">GFOLF: Combat Golf Action <a class="fa-brands fa-git-alt" href="https://git.intrusive.games/krampus/gfolf2"> </a></span> <span class="fs-6 text-secondary">by Rob Kelly</span></em>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="carousel-item">
|
|
||||||
<img src="/images/gfolf_2.png" class="d-block w-100">
|
|
||||||
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
|
||||||
<em><span class="h5">GFOLF: Combat Golf Action <a class="fa-brands fa-git-alt" href="https://git.intrusive.games/krampus/gfolf2"> </a></span> <span class="fs-6 text-secondary">by Rob Kelly</span></em>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<button class="carousel-control-prev" type="button" data-bs-target="#gameDemoCarousel" data-bs-slide="prev">
|
|
||||||
<span class="carousel-control-prev-icon" aria-hidden="true" />
|
|
||||||
<span class="visually-hidden">Previous</span>
|
|
||||||
</button>
|
|
||||||
<button class="carousel-control-next" type="button" data-bs-target="#gameDemoCarousel" data-bs-slide="next">
|
|
||||||
<span class="carousel-control-next-icon" aria-hidden="true" />
|
|
||||||
<span class="visually-hidden">Next</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
<footer class="pt-5">
|
<footer class="pt-5">
|
||||||
<div class="container text-center text-muted text-small">
|
<div class="container text-center text-muted text-small">
|
||||||
@ -153,4 +172,34 @@
|
|||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
// Executes when DOM available
|
||||||
|
document.getElementById('gameDemoCarousel').on('slide.bs.carousel', function(event) {
|
||||||
|
players[event.from].pauseVideo();
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|
||||||
|
var tag = document.createElement('script');
|
||||||
|
tag.src = "https://www.youtube.com/iframe_api";
|
||||||
|
var firstScriptTag = document.getElementsByTagName('script')[0];
|
||||||
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||||
|
var players = [];
|
||||||
|
function onYouTubeIframeAPIReady() {
|
||||||
|
var allMovieIframes = document.getElementById("gameDemoCarousel").getElementsByTagName('iframe');
|
||||||
|
for (currentIFrame of allMovieIframes) {
|
||||||
|
players.push(new YT.Player(
|
||||||
|
currentIFrame.id,
|
||||||
|
{ events: { 'onStateChange': onPlayerStateChange}}
|
||||||
|
));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function onPlayerStateChange(event) {
|
||||||
|
if (event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING) {
|
||||||
|
document.getElementById("gameDemoCarousel").carousel('pause');
|
||||||
|
} else {
|
||||||
|
document.getElementById("gameDemoCarousel").carousel();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -58,8 +58,18 @@ a {
|
|||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#gameDemoCarousel {
|
.carousel-fit {
|
||||||
max-width: 1153px;
|
height:40vh;
|
||||||
|
width: 100vw;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-fit > * {
|
||||||
|
max-height: 40vh;
|
||||||
|
max-width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-caption {
|
.carousel-caption {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user