Optimización de importaciones de Bootstrap
This commit is contained in:
@@ -3,7 +3,14 @@ import { Image } from "astro:assets";
|
||||
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">
|
||||
<a class="navbar-brand d-flex align-items-center" href={home ? home : "/"}>
|
||||
<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>
|
||||
</li>
|
||||
<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
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.biglogo {
|
||||
|
||||
@@ -4,6 +4,7 @@ import Footer from "../components/Footer.astro";
|
||||
import ListadoPostsHorizontal from "../components/ListadoPostsHorizontal.astro";
|
||||
import Navbar from "../components/Navbar.astro";
|
||||
import { Image } from "astro:assets";
|
||||
import { proyectos } from "../pages/proyectos/index.astro";
|
||||
|
||||
const animateOnScroll = `
|
||||
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."
|
||||
/>
|
||||
<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
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
rel="stylesheet"
|
||||
@@ -71,7 +66,7 @@ const animateOnScroll = `
|
||||
<Navbar />
|
||||
<header class="header-bg text-white">
|
||||
<img
|
||||
src={"/imgs/bosqueverde.png"}
|
||||
src="/imgs/bosqueverde.png"
|
||||
alt="Bosque Verde"
|
||||
class="video-bg"
|
||||
/>
|
||||
@@ -227,46 +222,17 @@ const animateOnScroll = `
|
||||
<h2 class="text-center mb-5 animate-on-scroll pt-2">
|
||||
Nuestros Proyectos Destacados
|
||||
</h2>
|
||||
<div class="row">
|
||||
<div class="row justify-content-center">
|
||||
{
|
||||
[
|
||||
{
|
||||
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) => (
|
||||
proyectos.map((project) => (
|
||||
<div class="col-md-6 mb-4 animate-on-scroll">
|
||||
<div class="card h-100">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-4">
|
||||
<img
|
||||
src={project.image}
|
||||
class="img-fluid rounded-start h-100 object-fit-cover"
|
||||
alt={project.title}
|
||||
src={project.imagen}
|
||||
class="img-fluid rounded-start"
|
||||
alt={project.titulo}
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
@@ -275,13 +241,13 @@ const animateOnScroll = `
|
||||
class="card-title"
|
||||
aria-label="Proyecto"
|
||||
>
|
||||
{project.title}
|
||||
{project.titulo}
|
||||
</h5>
|
||||
<p class="card-text flex-grow-1">
|
||||
{project.description}
|
||||
<p class="card-text flex-grow-1 line-clamp">
|
||||
{project.descripcion}
|
||||
</p>
|
||||
<a
|
||||
href={project.link}
|
||||
href={project.url}
|
||||
class="btn btn-success mt-auto"
|
||||
>
|
||||
Ver detalles
|
||||
@@ -317,9 +283,6 @@ const animateOnScroll = `
|
||||
|
||||
<Footer />
|
||||
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
|
||||
></script>
|
||||
<script set:html={animateOnScroll} />
|
||||
</body>
|
||||
</html>
|
||||
@@ -401,4 +364,11 @@ const animateOnScroll = `
|
||||
transform: translateY(-5px);
|
||||
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>
|
||||
|
||||
@@ -37,10 +37,6 @@ const urlSitio = Astro.site; // Reemplaza con la URL de tu sitio
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Participa Ahora | Ecobjetivos</title>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
rel="stylesheet"
|
||||
@@ -217,5 +213,3 @@ const urlSitio = Astro.site; // Reemplaza con la URL de tu sitio
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user