From 1a70c17e78426dc3ec95f0de3bdb495f328bf4ce Mon Sep 17 00:00:00 2001 From: eze <69222000+quiellll@users.noreply.github.com> Date: Sun, 15 Dec 2024 12:27:37 +0100 Subject: [PATCH] sticky headers mal en movil --- css/style.css | 121 ++++++- index.html | 975 ++++++++++++++++++++++++++------------------------ js/main.js | 67 +++- 3 files changed, 659 insertions(+), 504 deletions(-) diff --git a/css/style.css b/css/style.css index 17ff4a5..157412f 100644 --- a/css/style.css +++ b/css/style.css @@ -29,6 +29,7 @@ body { background: url('../img/Fondo_liso.jpg') no-repeat center center fixed; background-size: cover; padding-top: 70px; /* This is to make sure the navbar doesn't overlap the content */ + overflow-x: hidden; } /* Scrollable container */ @@ -102,12 +103,12 @@ body { top: 0; left: 0; right: 0; - z-index: 999; + z-index: 1030; background: var(--bs-dark) !important; transition: all 0.3s ease; - /* width: 100%; + width: 100%; min-height: 70px; - padding: 1rem 0; */ + padding: 1rem 0; } .navbar-brand { @@ -154,22 +155,23 @@ body { min-height: 95vh; /* This makes it take full viewport height */ background: var(--bs-dark); color: var(--bs-light); - padding: 0; /* Remove default padding */ + padding: 0; margin-bottom: 3rem; } -/* If the image is too large, you might want to constrain its height */ .hero-section .about-img img { - max-height: 40vh; /* Adjust this value as needed */ + max-height: 40vh; width: auto; } /*** Section Headers ***/ .section-header { - position: relative; + position: sticky; + top: 70px; background: var(--bs-dark); - padding: 2rem; - margin-bottom: 3rem; + padding: 2rem 0; + margin-bottom: 0; + z-index: 1020; } .section-header h2 { @@ -191,6 +193,17 @@ body { z-index: -1; } +/*** Sections ***/ +section { + position: relative; + min-height: auto; + margin-bottom: 0; +} + +.section-content { + padding: 2rem 0; +} + /*** Buttons ***/ .btn { font-weight: 600; @@ -428,13 +441,14 @@ body { .testimonial-carousel .owl-dots { width: 100%; - height: 80px; /* Fixed height that accommodates both normal and active states */ + height: auto; display: flex; align-items: center; justify-content: center; margin-top: 2rem; - padding: 0; + padding: 1rem; position: relative; /* Add this */ + flex-wrap: wrap; } .testimonial-carousel .owl-dots .owl-dot { @@ -685,6 +699,16 @@ body { /*** Media Queries ***/ @media (max-width: 991px) { + + body { + padding-top: 56px; /* Standard mobile navbar height */ + } + + .navbar { + min-height: 56px; + padding: 0.5rem 0; + } + .navbar-collapse { background: var(--bs-dark); padding: 1rem; @@ -707,6 +731,25 @@ body { position: relative; } + .section-header { + top: 56px; + padding: 0.75rem; + margin-bottom: 0; + } + + .section-content { + padding: 1rem 0; + } + + .text-body { + padding: 1rem; + margin: 0; + } + + section { + margin-bottom: 0; + } + .section-header h2 { font-size: 1.75rem; } @@ -729,6 +772,38 @@ body { } @media (max-width: 767px) { + + body { + padding-top: 56px; /* Standard mobile navbar height */ + } + + .navbar { + min-height: 56px; + padding: 0.5rem 0; + } + + .navbar-collapse { + background: var(--bs-dark); + padding: 1rem; + margin-top: 0.5rem; + max-height: calc(100vh - 70px); + overflow-y: auto; + } + + .navbar .container-fluid .container { + padding: 0 15px; + } + + .navbar-brand { + z-index: 1000; + position: relative; + } + + .navbar-toggler { + z-index: 1000; + position: relative; + } + .hero-section { padding: 4rem 0; } @@ -738,7 +813,26 @@ body { } .section-header { - padding: 1.5rem; + top: 56px; + padding: 0.75rem; + margin-bottom: 0; + } + + .section-content { + padding: 1rem 0; + } + + .text-body { + padding: 1rem; + margin: 0; + } + + section { + margin-bottom: 0; + } + + .section-header h2 { + font-size: 1.5rem; } .testimonial-carousel .owl-nav { @@ -748,10 +842,7 @@ body { .pt-6, .pb-6, .ps-6, .pe-6 { padding: 2rem; } -} -/* Responsive adjustments */ -@media (max-width: 767px) { .feature-grid { grid-template-columns: 1fr; gap: 1rem; diff --git a/index.html b/index.html index 50014d4..7964c36 100644 --- a/index.html +++ b/index.html @@ -154,41 +154,43 @@

-
-
-
-
-

Stratum

-

- Un juego de cartas donde el equilibrio del ecosistema está en - juego. ¡Ya disponible! -
- A card game where the balance of the ecosystem is at stake. - Available now! +

+
+
+
+

Stratum

+

+ Un juego de cartas donde el equilibrio del ecosistema está en + juego. ¡Ya disponible! +
+ A card game where the balance of the ecosystem is at stake. + Available now! +

+ ¡Juega ahora! / Play now! -

- ¡Juega ahora! / Play now! -

- Más información / More info -
-
-
- +
+
+
+ + Stratum + +
@@ -207,21 +209,23 @@

-
-
-

- Porque estamos en contra del software.
- Nosotros hacemos juegos, no software.
- Nuestro juego es una experiencia casi tangible. Analógica. - Inmersiva.
-
- - Because we're against software.
- We create games, not just software.
- Our game is an almost tangible experience — analog, - immersive.
- -

+
+
+
+

+ Porque estamos en contra del software.
+ Nosotros hacemos juegos, no software.
+ Nuestro juego es una experiencia casi tangible. Analógica. + Inmersiva.
+
+ + Because we're against software.
+ We create games, not just software.
+ Our game is an almost tangible experience — analog, immersive. +
+ +

+
@@ -236,189 +240,196 @@

-
-
- -
-
-
-

Soulamander

-

- Juego de plataformas y puzles 2D desarrollado en Unity. -
2D platformer and puzzle game developed in Unity.
- Miguel Rico. -

-
-
-
-
- Image +
+
+
+ +
+
+
+

Soulamander

+

+ Juego de plataformas y puzles 2D desarrollado en Unity. +
2D platformer and puzzle game developed in Unity.
+ Miguel Rico. +

+
+
+
+
+ Image +
-
-
- Ver más / See more +
+ Ver más / See more +
-
- -
-
-
-

Pac-Man

-

- Recreación del videojuego clásico en JavaScript canvas. -
Recreation of the classic video game in JavaScript - canvas.
- Ezequiel García. -

-
-
-
-
- Image + +
+
+
+

Pac-Man

+

+ Recreación del videojuego clásico en JavaScript canvas. +
Recreation of the classic video game in JavaScript + canvas.
+ Ezequiel García. +

+
+
+
+
+ Image +
-
-
- Ver más / See more +
+ Ver más / See more +
-
- -
-
-
-

Defense of the Pumpkin Patch

-

- Juego de defensa de torres desarrollado en Unity.
Tower defense game developed in Unity.
- Miguel Rico, Ezequiel García, Gloria Llorente, Ángel Luis - Rodríguez. -

-
-
-
-
- Image + +
+
+
+

Defense of the Pumpkin Patch

+

+ Juego de defensa de torres desarrollado en Unity. +
Tower defense game developed in Unity.
+ Miguel Rico, Ezequiel García, Gloria Llorente, Ángel Luis + Rodríguez. +

+
+
+
+
+ Image +
-
-
- Ver más / See more +
+ Ver más / See more +
-
- -
-
-
-

Isla japonesa

-

- Modelado 3D de un escenario de videojuego ambientado en una - isla Japonesa.
3D modeling of a video game scenario set on a Japanese - island.
- Javier Castro. -

-
-
-
-
- Image + +
+
+
+

Isla japonesa

+

+ Modelado 3D de un escenario de videojuego ambientado en una + isla Japonesa.
3D modeling of a video game scenario set on a Japanese + island.
+ Javier Castro. +

+
+
+
+
+ Image +
-
-
- Ver más / See more +
+ Ver más / See more +
-
- -
-
-
-

IScream

-

- ¡Refréscate con la aventura más dulce y desafiante del verano! -
Cool off with the sweetest and most challenging adventure - of the summer!
- Óscar Alarcon. -

-
-
-
-
- Image + +
+
+
+

IScream

+

+ ¡Refréscate con la aventura más dulce y desafiante del + verano! +
Cool off with the sweetest and most challenging + adventure of the summer!
+ Óscar Alarcon. +

+
+
+
+
+ Image +
-
-
- Ver más / See more +
+ Ver más / See more +
@@ -436,339 +447,349 @@

-
-
-
-
- +
+
+
+
-
-
-
+ +
+
+
- +
+ +
-
-
-
-
Ángel Luis Rodríguez
-

Artista 3D / 3D Artist

+
+
+
Ángel Luis Rodríguez
+

Artista 3D / 3D Artist

+
-
-
-
-
-
-
    -
  • - Diseñador de personajes / - Character designer -
    • -
  • Modelador 3D / 3D Modeler
    • -
  • Animador 3D / 3D Animator
    • -
+
+
+
+
+
    +
  • + Diseñador de personajes / + Character designer +
    • +
  • Modelador 3D / 3D Modeler
    • +
  • Animador 3D / 3D Animator
    • +
+
+
+ Instagram +
-
- Instagram -
-
- -
-
-
-
+ +
+
+
- +
+ +
-
-
-
-
Ezequiel García
-

Community Manager

+
+
+
Ezequiel García
+

Community Manager

+
-
-
-
-
-
-
    -
  • - Programador gráfico / Graphics programmer -
    • -
  • Desarrollador web / Web developer
    • -
  • Diseñador gráfico / Graphic designer
    • -
+
+
+
+
+
    +
  • + Programador gráfico / Graphics programmer +
    • +
  • Desarrollador web / Web developer
    • +
  • + Diseñador gráfico / Graphic designer +
    • +
+
+
+ GitHub +
-
- GitHub -
-
- -
-
-
-
+ +
+
+
- +
+ +
-
-
-
-
Gloria Llorente
-

Artista 2D / 2D Artist

+
+
+
Gloria Llorente
+

Artista 2D / 2D Artist

+
-
-
-
-
-
-
    -
  • - Diseñadora gráfica / Graphic designer -
    • -
  • Ilustradora / Illustrator
    • -
  • Artista conceptual / Concept artist
    • -
+
+
+
+
+
    +
  • + Diseñadora gráfica / Graphic designer +
    • +
  • Ilustradora / Illustrator
    • +
  • + Artista conceptual / Concept artist +
    • +
+
+
+ Instagram +
-
- Instagram -
-
- -
-
-
-
+ +
+
+
- +
+ +
-
-
-
-
Javier Castro
-

Artista 3D / 3D Artist

+
+
+
Javier Castro
+

Artista 3D / 3D Artist

+
-
-
-
-
-
-
    -
  • Artista conceptual / Concept artist
    • -
  • Modelador 3D / 3D Modeler
    • -
  • Animador 3D / 3D Animator
    • -
+
+
+
+
+
    +
  • + Artista conceptual / Concept artist +
    • +
  • Modelador 3D / 3D Modeler
    • +
  • Animador 3D / 3D Animator
    • +
+
+
+ ArtStation +
-
- ArtStation -
-
- -
-
-
-
+ +
+
+
- +
+ +
-
-
-
-
Miguel Rico
-

Programador / Programmer

+
+
+
Miguel Rico
+

Programador / Programmer

+
-
-
-
-
-
-
    -
  • - Programador de juego / Game programmer -
    • -
  • - Programador de redes / Network programmer -
    • -
  • Diseñador de juego / Game designer
    • -
+
+
+
+
+
    +
  • + Programador de juego / Game programmer +
    • +
  • + Programador de redes / Network programmer +
    • +
  • Diseñador de juego / Game designer
    • +
+
+
+ itch.io +
-
- itch.io -
-
- -
-
-
-
+ +
+
+
- +
+ +
-
-
-
-
Óscar Alarcón
-

Programador / Programmer

+
+
+
Óscar Alarcón
+

Programador / Programmer

+
-
-
-
-
-
-
    -
  • Compositor musical / Music composer
    • -
  • Diseñador de SFX / SFX Designer
    • -
  • Programador de IA / AI Programmer
    • -
+
+
+
+
+
    +
  • + Compositor musical / Music composer +
    • +
  • Diseñador de SFX / SFX Designer
    • +
  • Programador de IA / AI Programmer
    • +
+
-
-
- Instagram +
+ Instagram +
diff --git a/js/main.js b/js/main.js index 332e0c0..7fa361f 100644 --- a/js/main.js +++ b/js/main.js @@ -35,7 +35,7 @@ return false; }); - // Navbar scroll spy + // Simple navbar scroll spy document.addEventListener("DOMContentLoaded", function () { var scrollSpy = new bootstrap.ScrollSpy(document.body, { target: "#navbarNav", @@ -43,20 +43,63 @@ }); document.querySelectorAll(".navbar-nav a.nav-link").forEach((link) => { - if (this.hash !== "") { - e.preventDefault(); - const hash = this.hash; + link.addEventListener("click", function (e) { + if (this.hash !== "") { + e.preventDefault(); + const hash = this.hash; - document.querySelector(hash).scrollIntoView({ - behavior: "smooth", - }); + document.querySelector(hash).scrollIntoView({ + behavior: "smooth", + }); - // En móvil cerrar tras pulsar un enlace - const navbarToggle = document.querySelector(".navbar-toggler"); - if (window.getComputedStyle(navbarToggle).display !== "none") { - document.querySelector(".navbar-collapse").classList.remove("show"); + // Close mobile menu after clicking + const navbarToggle = document.querySelector(".navbar-toggler"); + if (window.getComputedStyle(navbarToggle).display !== "none") { + document.querySelector(".navbar-collapse").classList.remove("show"); + } } + }); + }); + }); + + document.addEventListener("DOMContentLoaded", function () { + const navbar = document.querySelector(".navbar"); + const navbarHeight = navbar.offsetHeight; + + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + const header = entry.target.querySelector(".section-header"); + const nextSection = entry.target.nextElementSibling; + + if (!header) return; + + if (entry.isIntersecting) { + header.style.position = "sticky"; + header.style.top = `${navbarHeight}px`; + + // Only handle the case where headers would overlap + if (nextSection) { + const sectionRect = entry.target.getBoundingClientRect(); + const headerRect = header.getBoundingClientRect(); + + if (sectionRect.bottom <= headerRect.height + navbarHeight) { + header.style.position = "absolute"; + header.style.top = `${entry.target.offsetHeight - headerRect.height}px`; + } + } + } + }); + }, + { + threshold: [0], + rootMargin: `-${navbarHeight}px 0px 0px 0px` } + ); + + // Observe each section + document.querySelectorAll("section").forEach((section) => { + observer.observe(section); }); }); -})(jQuery); +})(jQuery); \ No newline at end of file