h4ckx0r/webSostenible
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimización de importaciones de Bootstrap

Browse Source
This commit is contained in:
Natanael Gómez Ortiz
2025-03-10 21:12:49 +01:00
parent 7e0d6d5a50
commit 1e6e23d62a
3 changed files with 63 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Navbar.astro
View File

@@ -3,7 +3,14 @@ import { Image } from "astro:assets";
const { home, posts, proyectos } = Astro.props; const { home, posts, proyectos } = Astro.props;
--- ---
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top"> <head>
<meta charset="utf-8" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
<main>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container"> <div class="container">
<a class="navbar-brand d-flex align-items-center" href={home ? home : "/"}> <a class="navbar-brand d-flex align-items-center" href={home ? home : "/"}>
<Image <Image
@@ -32,14 +39,16 @@ const { home, posts, proyectos } = Astro.props;
<a type="button" class="nav-link btn btn-light" href={posts ? posts : "/posts"}>Posts</a> <a type="button" class="nav-link btn btn-light" href={posts ? posts : "/posts"}>Posts</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a type="button" class="nav-link btn btn-light disabled" href={proyectos ? proyectos : "#proyectos"} <a type="button" class="nav-link btn btn-light" href={proyectos ? proyectos : "/proyectos"}
>Proyectos</a >Proyectos</a
> >
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</nav> </nav>
</main>
<style> <style>
.biglogo { .biglogo {

66
src/pages/index.astro
View File

@@ -4,6 +4,7 @@ import Footer from "../components/Footer.astro";
import ListadoPostsHorizontal from "../components/ListadoPostsHorizontal.astro"; import ListadoPostsHorizontal from "../components/ListadoPostsHorizontal.astro";
import Navbar from "../components/Navbar.astro"; import Navbar from "../components/Navbar.astro";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import { proyectos } from "../pages/proyectos/index.astro";
const animateOnScroll = ` const animateOnScroll = `
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
@@ -51,12 +52,6 @@ const animateOnScroll = `
content="Tu fuente de información sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS). Descubre cómo contribuir a un futuro más sostenible." content="Tu fuente de información sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS). Descubre cómo contribuir a un futuro más sostenible."
/> />
<link rel="icon" type="image/png" href="logo.png" /> <link rel="icon" type="image/png" href="logo.png" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<link <link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
rel="stylesheet" rel="stylesheet"
@@ -71,7 +66,7 @@ const animateOnScroll = `
<Navbar /> <Navbar />
<header class="header-bg text-white"> <header class="header-bg text-white">
<img <img
src={"/imgs/bosqueverde.png"} src="/imgs/bosqueverde.png"
alt="Bosque Verde" alt="Bosque Verde"
class="video-bg" class="video-bg"
/> />
@@ -227,46 +222,17 @@ const animateOnScroll = `
<h2 class="text-center mb-5 animate-on-scroll pt-2"> <h2 class="text-center mb-5 animate-on-scroll pt-2">
Nuestros Proyectos Destacados Nuestros Proyectos Destacados
</h2> </h2>
<div class="row"> <div class="row justify-content-center">
{ {
[ proyectos.map((project) => (
{
title: "Reforestación Urbana",
description:
"Hemos plantado más de 200 árboles en zonas urbanas para mejorar la calidad del aire y crear espacios verdes.",
image: "/imgs/reforestacion.jpg",
link: "/proyectos/reforestacion",
},
{
title: "Talleres ODS en Escuelas",
description:
"Programa educativo que ha llegado a 15 escuelas enseñando los ODS a más de 500 estudiantes.",
image: "/imgs/talleres-escuelas.jpg",
link: "/proyectos/talleres-ods",
},
{
title: "Podcast EcoVoces",
description:
"Serie de episodios que explora los 17 ODS con expertos en sostenibilidad y activistas locales.",
image: "/imgs/podcast-ods.jpg",
link: "/podcast",
},
{
title: "Campaña Agua Limpia",
description:
"Iniciativa para instalar sistemas de filtración en comunidades con acceso limitado a agua potable.",
image: "/imgs/agua-limpia.jpg",
link: "/proyectos/agua-limpia",
},
].map((project, index) => (
<div class="col-md-6 mb-4 animate-on-scroll"> <div class="col-md-6 mb-4 animate-on-scroll">
<div class="card h-100"> <div class="card h-100">
<div class="row g-0"> <div class="row g-0">
<div class="col-md-4"> <div class="col-md-4">
<img <img
src={project.image} src={project.imagen}
class="img-fluid rounded-start h-100 object-fit-cover" class="img-fluid rounded-start"
alt={project.title} alt={project.titulo}
/> />
</div> </div>
<div class="col-md-8"> <div class="col-md-8">
@@ -275,13 +241,13 @@ const animateOnScroll = `
class="card-title" class="card-title"
aria-label="Proyecto" aria-label="Proyecto"
> >
{project.title} {project.titulo}
</h5> </h5>
<p class="card-text flex-grow-1"> <p class="card-text flex-grow-1 line-clamp">
{project.description} {project.descripcion}
</p> </p>
<a <a
href={project.link} href={project.url}
class="btn btn-success mt-auto" class="btn btn-success mt-auto"
> >
Ver detalles Ver detalles
@@ -317,9 +283,6 @@ const animateOnScroll = `
<Footer /> <Footer />
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
></script>
<script set:html={animateOnScroll} /> <script set:html={animateOnScroll} />
</body> </body>
</html> </html>
@@ -401,4 +364,11 @@ const animateOnScroll = `
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
} }
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style> </style>

6
src/pages/participa.astro
View File

@@ -37,10 +37,6 @@ const urlSitio = Astro.site; // Reemplaza con la URL de tu sitio
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Participa Ahora | Ecobjetivos</title> <title>Participa Ahora | Ecobjetivos</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link <link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
rel="stylesheet" rel="stylesheet"
@@ -217,5 +213,3 @@ const urlSitio = Astro.site; // Reemplaza con la URL de tu sitio
</script> </script>
</body> </body>
</html> </html>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>