twk95/11ty-site
Public Access
1
0
Fork 0
Code Actions Packages Activity

Tweaks

Browse Source
This commit is contained in:
Jesus Otero Lagunes
2025-08-06 14:07:07 -04:00
parent c1fa3e8863
commit 3f6a319565
8 changed files with 212 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/_includes/base.njk Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
.prose {
max-width: 65ch;
margin-left: auto;
margin-right: auto;
}
.prose h1, .prose h2, .prose h3 {
font-weight: 700;
}
.prose a {
color: #3b82f6;
text-decoration: none;
}
.prose a:hover {
text-decoration: underline;
}
.prose code {
background-color: #f3f4f6;
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
border-radius: 3px;
}
.prose pre {
background-color: #1f2937;
color: #f9fafb;
padding: 1em;
border-radius: 0.5rem;
overflow-x: auto;
}
.prose pre code {
background-color: transparent;
padding: 0;
}
.prose blockquote {
border-left: 4px solid #d1d5db;
padding-left: 1em;
font-style: italic;
color: #6b7280;
}
.prose table {
width: 100%;
border-collapse: collapse;
}
.prose th, .prose td {
border: 1px solid #d1d5db;
padding: 0.5em;
}
.prose th {
background-color: #f3f4f6;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<!-- Header -->
<header class="bg-white shadow-sm">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<h1 class="text-3xl font-bold text-gray-900">{{ title }}</h1>
<p class="text-gray-600 mt-1">A demonstration of what's possible with this powerful static site generator.</p>
</div>
</header>
<main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="prose">
{{ content | safe }}
</div>
</main>
<!-- Footer -->
<footer class="bg-white mt-12">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4 text-center text-gray-500">
<p>Created to showcase the power of <a href="https://www.11ty.dev/" target="_blank" class="text-blue-500 hover:underline">Eleventy</a>.</p>
</div>
</footer>
</body>
</html>

2
src/_includes/post.njk
View File

@@ -4,6 +4,6 @@ layout: "layout.njk"
<article class="prose prose-invert lg:prose-xl max-w-none">
<h1>{{ title }}</h1>
<p class="text-gray-400">Published on: {{ date | readableDate }}</p>
<br/>
{{ content | safe }}
</article>