Re-styled carousel to better fit screens, display at top of page
This commit is contained in:
parent
db16727f02
commit
e863616086
101
www/index.html
101
www/index.html
@ -11,7 +11,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<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">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand d-flex align-items-center link-body-emphasis text-decoration-none" href="/">
|
||||
@ -42,19 +42,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="container mt-5 fs-4 flex-fill">
|
||||
<div class="section p-5 text-center">
|
||||
<p>
|
||||
We are artists, designers, developers, and creators based in Albuquerque, New Mexico.
|
||||
</p>
|
||||
<p>
|
||||
In the summer of 2024, we formed the Intrusive Thoughts Creative Collective as a collectively-organized independent games studio.
|
||||
</p>
|
||||
<p>
|
||||
We make games to tell the stories we want to tell.
|
||||
</p>
|
||||
</div>
|
||||
<div id="gameDemoCarousel" class="carousel slide" data-bs-ride="carousel">
|
||||
<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>
|
||||
@ -68,21 +57,27 @@
|
||||
</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 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">
|
||||
<img src="/images/thaw_1.png" class="d-block w-100">
|
||||
<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">
|
||||
<img src="/images/thaw_2.png" class="d-block w-100">
|
||||
<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>
|
||||
@ -90,39 +85,51 @@
|
||||
|
||||
|
||||
<div class="carousel-item">
|
||||
<img src="/images/coyote_summer_1.png" class="d-block w-100">
|
||||
<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">
|
||||
<h5><em>Coyote Summer <a class="fa-brands fa-itch-io" href="https://intrusive-thoughts.itch.io/coyote-summer"></a></em></h5>
|
||||
<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">
|
||||
<img src="/images/coyote_summer_2.png" class="d-block w-100">
|
||||
<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">
|
||||
<h5><em>Coyote Summer <a class="fa-brands fa-itch-io" href="https://intrusive-thoughts.itch.io/coyote-summer"></a></em></h5>
|
||||
<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">
|
||||
<img src="/images/the_great_i_am_1.jpg" class="d-block w-100">
|
||||
<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">
|
||||
<img src="/images/the_great_i_am_2.png" class="d-block w-100">
|
||||
<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">
|
||||
<img src="/images/gfolf_1.png" class="d-block w-100">
|
||||
<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">
|
||||
<img src="/images/gfolf_2.png" class="d-block w-100">
|
||||
<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>
|
||||
@ -138,6 +145,18 @@
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
<main class="container mt-2 fs-4 flex-fill">
|
||||
<div class="section p-5 text-center">
|
||||
<p>
|
||||
We are artists, designers, developers, and creators based in Albuquerque, New Mexico.
|
||||
</p>
|
||||
<p>
|
||||
In the summer of 2024, we formed the Intrusive Thoughts Creative Collective as a collectively-organized independent games studio.
|
||||
</p>
|
||||
<p>
|
||||
We make games to tell the stories we want to tell.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="pt-5">
|
||||
<div class="container text-center text-muted text-small">
|
||||
@ -153,4 +172,34 @@
|
||||
</footer>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
@ -58,8 +58,18 @@ a {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#gameDemoCarousel {
|
||||
max-width: 1153px;
|
||||
.carousel-fit {
|
||||
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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user