Fixed footer mobile scrolling

This commit is contained in:
Rob Kelly 2025-12-20 01:45:38 -07:00
parent c998f7595e
commit 6241b14699
4 changed files with 48 additions and 42 deletions

View File

@ -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 vh-100"> <div class="container 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,7 @@
</div> </div>
</div> </div>
</nav> </nav>
<main class="container mt-5"> <main class="container mt-5 flex-fill">
<div class="section row row-cols-1 g-5 px-2 py-5"> <div class="section row row-cols-1 g-5 px-2 py-5">
<div class="col"> <div class="col">
<div class="card text-center"> <div class="card text-center">
@ -77,18 +77,18 @@
</div> </div>
</div> </div>
</main> </main>
</div> <footer class="pt-5">
<footer id="contact" class="pt-2">
<div class="container text-center text-muted text-small"> <div class="container text-center text-muted text-small">
<p> <p>
<a href="mailto:contact@intrusive.games" class="text-white text-decoration-none"><span class="fa-solid fa-envelope"></span> contact@intrusive.games</a> <a href="mailto:contact@intrusive.games" class="text-white text-decoration-none"><span class="fa-solid fa-envelope"></span> contact@intrusive.games</a>
</p> </p>
<p>© <span id="year">2025</span> Intrusive Thoughts Creative Collective LLC. All rights reserved.</p> <p>© <span id="year">2025</span> Intrusive Thoughts Creative Collective LLC. All rights reserved.</p>
</div>
</footer>
<script> <script>
// Update copyright year automatically // Update copyright year automatically
document.getElementById('year').textContent = new Date().getFullYear(); document.getElementById('year').textContent = new Date().getFullYear();
</script> </script>
</div>
</footer>
</div>
</body> </body>
</html> </html>

View File

@ -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 vh-100"> <div class="container 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,7 @@
</div> </div>
</div> </div>
</nav> </nav>
<main class="container mt-5 fs-4"> <main class="container mt-5 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.
@ -115,18 +115,18 @@
</button> </button>
</div> </div>
</main> </main>
</div> <footer class="pt-5">
<footer id="contact" class="pt-2">
<div class="container text-center text-muted text-small"> <div class="container text-center text-muted text-small">
<p> <p>
<a href="mailto:contact@intrusive.games" class="text-white text-decoration-none"><span class="fa-solid fa-envelope"></span> contact@intrusive.games</a> <a href="mailto:contact@intrusive.games" class="text-white text-decoration-none"><span class="fa-solid fa-envelope"></span> contact@intrusive.games</a>
</p> </p>
<p>© <span id="year">2025</span> Intrusive Thoughts Creative Collective LLC. All rights reserved.</p> <p>© <span id="year">2025</span> Intrusive Thoughts Creative Collective LLC. All rights reserved.</p>
</div>
</footer>
<script> <script>
// Update copyright year automatically // Update copyright year automatically
document.getElementById('year').textContent = new Date().getFullYear(); document.getElementById('year').textContent = new Date().getFullYear();
</script> </script>
</div>
</footer>
</div>
</body> </body>
</html> </html>

View File

@ -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 vh-100"> <div class="container 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,7 @@
</div> </div>
</div> </div>
</nav> </nav>
<main class="container mt-5"> <main class="container mt-5 flex-fill">
<div class="section row row-cols-1 g-5 px-2 py-5"> <div class="section row row-cols-1 g-5 px-2 py-5">
<div class="col"> <div class="col">
<div class="card text-center"> <div class="card text-center">
@ -81,18 +81,18 @@
</div> </div>
</div> </div>
</main> </main>
</div> <footer class="pt-5">
<footer id="contact" class="pt-2">
<div class="container text-center text-muted text-small"> <div class="container text-center text-muted text-small">
<p> <p>
<a href="mailto:contact@intrusive.games" class="text-white text-decoration-none"><span class="fa-solid fa-envelope"></span> contact@intrusive.games</a> <a href="mailto:contact@intrusive.games" class="text-white text-decoration-none"><span class="fa-solid fa-envelope"></span> contact@intrusive.games</a>
</p> </p>
<p>© <span id="year">2025</span> Intrusive Thoughts Creative Collective LLC. All rights reserved.</p> <p>© <span id="year">2025</span> Intrusive Thoughts Creative Collective LLC. All rights reserved.</p>
</div>
</footer>
<script> <script>
// Update copyright year automatically // Update copyright year automatically
document.getElementById('year').textContent = new Date().getFullYear(); document.getElementById('year').textContent = new Date().getFullYear();
</script> </script>
</div>
</footer>
</div>
</body> </body>
</html> </html>

View File

@ -39,12 +39,18 @@ body:before {
body { body {
font-family: "NunitoSans"; font-family: "NunitoSans";
overflow: hidden;
} }
a { a {
text-decoration: none; text-decoration: none;
} }
.dvh-100 {
height: 100vh; /* Compatibility fallback */
height: 100dvh; /* Dynamic viewport height */
}
.text-small { .text-small {
font-size: 12px; font-size: 12px;
} }