Compare commits
3 Commits
f713857f9c
...
1fbf1dcaa2
| Author | SHA1 | Date | |
|---|---|---|---|
| 1fbf1dcaa2 | |||
| dbacbcee7a | |||
| 0669d3bd53 |
Binary file not shown.
|
Before Width: | Height: | Size: 135 KiB |
BIN
public/imgs/logo.png
Normal file
BIN
public/imgs/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 312 KiB |
26
src/components/ListadoPostsHorizontal.astro
Normal file
26
src/components/ListadoPostsHorizontal.astro
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
---
|
||||||
|
const posts = await Astro.glob("../pages/posts/*.md");
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
{
|
||||||
|
posts.slice(0, 3).map((post) => (
|
||||||
|
<div class="col-md-4 mb-4 animate-on-scroll">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">
|
||||||
|
{post.frontmatter.titulo}
|
||||||
|
</h5>
|
||||||
|
<p class="card-text">
|
||||||
|
{post.frontmatter.descripcion}
|
||||||
|
...
|
||||||
|
</p>
|
||||||
|
<a href={post.url} class="btn btn-primary">
|
||||||
|
Leer más
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
@@ -1,13 +1,22 @@
|
|||||||
---
|
---
|
||||||
|
import { Image } from "astro:assets";
|
||||||
---
|
---
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
|
<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="#">
|
<a
|
||||||
<img src="/imgs/logo.jpg" alt="Logo Ecobjetivos" class="me-2" height="24" />
|
class="navbar-brand d-flex align-items-center"
|
||||||
Ecobjetivos
|
href="#"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src="/imgs/logo.png"
|
||||||
|
alt="Logo Ecobjetivos"
|
||||||
|
class="me-2 biglogo"
|
||||||
|
height="25"
|
||||||
|
width="25"
|
||||||
|
/>
|
||||||
|
  Ecobjetivos
|
||||||
</a>
|
</a>
|
||||||
<button
|
<button
|
||||||
class="navbar-toggler"
|
class="navbar-toggler"
|
||||||
@@ -23,13 +32,23 @@
|
|||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
<ul class="navbar-nav ms-auto">
|
<ul class="navbar-nav ms-auto">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#posts">Posts</a>
|
<a type="button" class="nav-link btn btn-light" href="#posts"
|
||||||
|
>Posts</a
|
||||||
|
>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#proyectos">Proyectos</a>
|
<a type="button" class="nav-link btn btn-light" href="#proyectos"
|
||||||
|
>Proyectos</a
|
||||||
|
>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.biglogo {
|
||||||
|
scale: 1.5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
19
src/layouts/PostStyle.astro
Normal file
19
src/layouts/PostStyle.astro
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
---
|
||||||
|
const { titulo } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||||
|
<title>EcoFuturo</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<h1>{titulo}</h1>
|
||||||
|
<slot/>
|
||||||
|
</main>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
---
|
---
|
||||||
// Component Imports
|
// Component Imports
|
||||||
|
import ListadoPostsHorizontal from "../components/ListadoPostsHorizontal.astro";
|
||||||
import Navbar from "../components/Navbar.astro";
|
import Navbar from "../components/Navbar.astro";
|
||||||
|
|
||||||
const animateOnScroll = `
|
const animateOnScroll = `
|
||||||
@@ -40,14 +41,14 @@ const animateOnScroll = `
|
|||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
|
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
|
||||||
/>
|
/>
|
||||||
<title>EcoFuturo</title>
|
<title>Ecobjetivos</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<header class="header-bg text-white">
|
<header class="header-bg text-white">
|
||||||
<div class="container text-center">
|
<div class="container text-center">
|
||||||
<h1
|
<h1
|
||||||
class="display-1 mb-4 animate__animated animate__fadeInDown"
|
class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular"
|
||||||
>
|
>
|
||||||
Ecobjetivos
|
Ecobjetivos
|
||||||
</h1>
|
</h1>
|
||||||
@@ -174,37 +175,16 @@ const animateOnScroll = `
|
|||||||
|
|
||||||
<section id="posts" class="py-5 bg-light">
|
<section id="posts" class="py-5 bg-light">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="text-center mb-5 animate-on-scroll">
|
<h2 class="text-center mb-5 animate-on-scroll pt-1">
|
||||||
Posts Recientes
|
Posts Recientes
|
||||||
</h2>
|
</h2>
|
||||||
<div class="row">
|
<ListadoPostsHorizontal />
|
||||||
{
|
|
||||||
[1, 2, 3].map((num) => (
|
|
||||||
<div class="col-md-4 mb-4 animate-on-scroll">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">
|
|
||||||
Título del Post {num}
|
|
||||||
</h5>
|
|
||||||
<p class="card-text">
|
|
||||||
Breve descripción del post {num}
|
|
||||||
...
|
|
||||||
</p>
|
|
||||||
<a href="#" class="btn btn-primary">
|
|
||||||
Leer más
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="proyectos" class="py-5">
|
<section id="proyectos" class="py-5">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="text-center mb-5 animate-on-scroll">
|
<h2 class="text-center mb-5 animate-on-scroll pt-2">
|
||||||
Nuestros Proyectos
|
Nuestros Proyectos
|
||||||
</h2>
|
</h2>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@@ -282,6 +262,29 @@ const animateOnScroll = `
|
|||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
<style is:global>
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital@0;1&display=swap");
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
a {
|
||||||
|
font-family: "Inter Tight", sans-serif !important;
|
||||||
|
font-optical-sizing: auto;
|
||||||
|
font-weight: 400 !important;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
.londrina-sketch-regular {
|
||||||
|
font-family: "Londrina Sketch", sans-serif !important;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<style>
|
<style>
|
||||||
.header-bg {
|
.header-bg {
|
||||||
background-color: #4caf50;
|
background-color: #4caf50;
|
||||||
|
|||||||
9
src/pages/posts/prueba.md
Normal file
9
src/pages/posts/prueba.md
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
---
|
||||||
|
titulo: 'Título to chulo'
|
||||||
|
layout: '../../layouts/PostStyle.astro'
|
||||||
|
autor: 'Ben'
|
||||||
|
fecha: '08/10/24'
|
||||||
|
descripcion: 'Descripcion de prueba'
|
||||||
|
---
|
||||||
|
|
||||||
|
Here is my _great_ post!
|
||||||
Reference in New Issue
Block a user