diff --git a/src/components/ImagenMD.astro b/src/components/ImagenMD.astro new file mode 100644 index 0000000..5305375 --- /dev/null +++ b/src/components/ImagenMD.astro @@ -0,0 +1,12 @@ +--- +import { Image } from "astro:assets"; +const { src, width, height, alt } = Astro.props; +let size; +if (width || height) { + size = `width="${width}" height="${height}"` +} else { + size = `inferSize` +} +--- + +{alt} \ No newline at end of file diff --git a/src/layouts/PostStyle.astro b/src/layouts/PostStyle.astro index bffba99..0916ba3 100644 --- a/src/layouts/PostStyle.astro +++ b/src/layouts/PostStyle.astro @@ -5,8 +5,9 @@ import RelatedPosts from '../components/PostsRelacionados.astro'; // Componente import Navbar from '../components/Navbar.astro'; import Footer from '../components/Footer.astro'; -const { frontmatter, content } = Astro.props; -const headings = getHeadings(content); +const { frontmatter } = Astro.props; + +const headings = Astro.props.headings; const description = frontmatter.descripcion; @@ -88,7 +89,7 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${ } .post-meta { font-size: 0.9rem; - color: #666; + margin: 0px !important; } blockquote { background-color: #f9f9f9; @@ -98,39 +99,58 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${ font-style: italic; } .table-of-contents { - background-color: #f3f3f3; - padding: 1rem; - border-radius: 5px; - margin-bottom: 2rem; - } - .table-of-contents ul { - list-style-type: none; - padding-left: 0; - } - .table-of-contents ul ul { - padding-left: 1rem; - } + background-color: #f8f9fa; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0,0,0,0.05); + border: 1px solid #e9ecef; + } - .table-of-contents { - background-color: #f3f3f3; - padding: 1rem; - border-radius: 5px; - margin-bottom: 2rem; - } - .table-of-contents ul { - list-style-type: none; - padding-left: 0; - } - .table-of-contents ul ul { - padding-left: 1rem; - } - .table-of-contents a { - color: #333; - text-decoration: none; - } - .table-of-contents a:hover { - color: #4CAF50; - } + .table-of-contents h4 { + color: #2c3e50; + border-bottom: 2px solid #4CAF50; + font-size: 1.2rem; + } + + .table-of-contents ul { + list-style-type: none; + padding-left: 0; + } + + .table-of-contents a { + color: #495057; + text-decoration: none; + display: block; + border-radius: 5px; + transition: all 0.2s ease; + font-size: 0.9rem; + position: relative; + } + + .table-of-contents a:hover { + color: #4CAF50; + background-color: #e8f5e9; + padding-left: 0.6rem; + } + + /* Estilos para la indentación visual */ + .toc-level-2 { padding-left: 1.1rem; } + .toc-level-3 { padding-left: 2.1rem; } + .toc-level-4 { padding-left: 3.1rem; } + .toc-level-5 { padding-left: 4.1rem; } + .toc-level-6 { padding-left: 5.1rem; } + + /* Líneas verticales para la indentación */ + .toc-level-2, .toc-level-3, .toc-level-4, .toc-level-5, .toc-level-6 { + border-left: 2px solid #e9ecef; + margin-left: 0.5rem; + } + html { + scroll-padding-top: 70px; /* Ajusta este valor según la altura de tu navbar */ + } + img { + max-width: 100%; + height: auto; + } @@ -139,15 +159,6 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${

{frontmatter.titulo}

-

- {new Date(frontmatter.fecha).toLocaleDateString('es-ES', {year: 'numeric', month: 'long', day: 'numeric'})} -  |  - {frontmatter.autor} - {frontmatter.lastModified && ( - <> |  - Última actualización: {new Date(frontmatter.lastModified).toLocaleDateString('es-ES', {year: 'numeric', month: 'long', day: 'numeric'})} - )} -

@@ -160,20 +171,31 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${