kbe/hugo-mistergeek
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prepare migration to Tailwind

Browse Source
This commit is contained in:
kbe
2025-08-20 11:21:40 +02:00
parent aabcd5eaa2
commit 30a3080480
2637 changed files with 9119 additions and 508739 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
docs/breadcrumb.html Normal file
View File

@@ -0,0 +1,221 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breadcrumb Navigation</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(120deg, #f8fafc 0%, #e2e8f0 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2rem;
}
.breadcrumb-container {
width: 100%;
max-width: 1200px;
margin-bottom: 2rem;
}
.demo-content {
background: white;
border-radius: 12px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
padding: 2rem;
width: 100%;
max-width: 1200px;
}
.breadcrumb {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
background: white;
border-radius: 8px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
margin-bottom: 1.5rem;
}
.breadcrumb-item {
display: flex;
align-items: center;
font-size: 0.875rem;
color: #64748b;
}
.breadcrumb-item a {
transition: color 0.2s ease;
}
.breadcrumb-item a:hover {
color: #3b82f6;
}
.breadcrumb-divider {
margin: 0 0.5rem;
color: #cbd5e1;
}
.breadcrumb-item.active {
color: #3b82f6;
font-weight: 500;
}
.code-container {
background: #1e293b;
color: #e2e8f0;
border-radius: 8px;
padding: 1.5rem;
margin-top: 2rem;
overflow-x: auto;
font-family: monospace;
}
.code-comment {
color: #94a3b8;
}
.code-tag {
color: #f87171;
}
.code-attr {
color: #60a5fa;
}
.code-value {
color: #86efac;
}
h1 {
color: #1e293b;
font-weight: 700;
font-size: 2.25rem;
margin-bottom: 1.5rem;
}
h2 {
color: #334155;
font-weight: 600;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
p {
color: #475569;
line-height: 1.7;
margin-bottom: 1.5rem;
}
</style>
</head>
<body>
<div class="breadcrumb-container">
<h1>Breadcrumb Navigation</h1>
<!-- Breadcrumb Example -->
<nav class="breadcrumb" aria-label="Breadcrumb">
<div class="breadcrumb-item">
<a href="#">
<i class="fas fa-home mr-2"></i>Home
</a>
</div>
<div class="breadcrumb-divider">/</div>
<div class="breadcrumb-item">
<a href="#">Articles</a>
</div>
<div class="breadcrumb-divider">/</div>
<div class="breadcrumb-item">
<a href="#">Technology</a>
</div>
<div class="breadcrumb-divider">/</div>
<div class="breadcrumb-item active" aria-current="page">
How Tech Shapes the Future of Work in 2024
</div>
</nav>
</div>
<div class="demo-content">
<h2>Breadcrumb Implementation</h2>
<p>This breadcrumb navigation helps users understand their current location within your blog's hierarchy and allows for easy navigation to parent categories.</p>
<h2>HTML Code</h2>
<div class="code-container">
<pre><code><span class="code-comment">&lt;!-- Breadcrumb Navigation --&gt;</span>
&lt;nav class="breadcrumb" aria-label="Breadcrumb"&gt;
&lt;div class="breadcrumb-item"&gt;
&lt;a href="#"&gt;
&lt;i class="fas fa-home mr-2"&gt;&lt;/i&gt;Home
&lt;/a&gt;
&lt;/div&gt;
&lt;div class="breadcrumb-divider"&gt;/&lt;/div&gt;
&lt;div class="breadcrumb-item"&gt;
&lt;a href="#"&gt;Articles&lt;/a&gt;
&lt;/div&gt;
&lt;div class="breadcrumb-divider"&gt;/&lt;/div&gt;
&lt;div class="breadcrumb-item"&gt;
&lt;a href="#"&gt;Technology&lt;/a&gt;
&lt;/div&gt;
&lt;div class="breadcrumb-divider"&gt;/&lt;/div&gt;
&lt;div class="breadcrumb-item active" aria-current="page"&gt;
How Tech Shapes the Future of Work in 2024
&lt;/div&gt;
&lt;/nav&gt;</code></pre>
</div>
<h2>Tailwind CSS Classes Used</h2>
<div class="code-container">
<pre><code><span class="code-comment">/* Container */</span>
.breadcrumb {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
background: white;
border-radius: 8px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
margin-bottom: 1.5rem;
}
<span class="code-comment">/* Items */</span>
.breadcrumb-item {
display: flex;
align-items: center;
font-size: 0.875rem;
color: #64748b;
}
<span class="code-comment">/* Active item */</span>
.breadcrumb-item.active {
color: #3b82f6;
font-weight: 500;
}
<span class="code-comment">/* Divider between items */</span>
.breadcrumb-divider {
margin: 0 0.5rem;
color: #cbd5e1;
}</code></pre>
</div>
<h2>Implementation Tips</h2>
<p>1. Place the breadcrumb near the top of your content, below the navigation but above the page title.</p>
<p>2. Make sure the breadcrumb is consistent across all pages of your blog.</p>
<p>3. Use microdata or ARIA attributes to enhance accessibility.</p>
<p>4. For mobile responsiveness, you might consider truncating long breadcrumb trails.</p>
<p>5. Ensure each breadcrumb item is clickable except for the current page.</p>
</div>
<script>
// You can add any interactive functionality here if needed
</script>
</body>
</html>