mirror of
https://github.com/cliffe/HacktivityLabSheets.git
synced 2026-02-21 19:28:04 +00:00
148 lines
2.7 KiB
HTML
148 lines
2.7 KiB
HTML
---
|
|
layout: default
|
|
---
|
|
|
|
<article class="lab-content">
|
|
<header class="lab-header">
|
|
<h1>{{ page.title }}</h1>
|
|
{% if page.description %}
|
|
<p class="lab-description">{{ page.description }}</p>
|
|
{% endif %}
|
|
|
|
<div class="lab-metadata">
|
|
{% if page.difficulty %}
|
|
<div class="metadata-item">
|
|
<strong>Difficulty:</strong> {{ page.difficulty }}
|
|
</div>
|
|
{% endif %}
|
|
{% if page.duration %}
|
|
<div class="metadata-item">
|
|
<strong>Estimated Duration:</strong> {{ page.duration }}
|
|
</div>
|
|
{% endif %}
|
|
{% if page.prerequisites %}
|
|
<div class="metadata-item">
|
|
<strong>Prerequisites:</strong> {{ page.prerequisites }}
|
|
</div>
|
|
{% endif %}
|
|
{% if page.tags %}
|
|
<div class="metadata-item">
|
|
<strong>Tags:</strong>
|
|
{% for tag in page.tags %}
|
|
<span class="tag">{{ tag }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</header>
|
|
|
|
<div class="lab-content-body">
|
|
{{ content }}
|
|
</div>
|
|
|
|
<footer class="lab-footer">
|
|
<a href="{{ '/' | relative_url }}" class="back-link">← Back to Lab Index</a>
|
|
</footer>
|
|
</article>
|
|
|
|
<style>
|
|
.lab-content {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.lab-header {
|
|
border-bottom: 2px solid #e1e4e8;
|
|
padding-bottom: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.lab-header h1 {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.lab-description {
|
|
font-size: 1.125rem;
|
|
color: #586069;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.lab-metadata {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
background-color: #f8f9fa;
|
|
padding: 1rem;
|
|
border-radius: 6px;
|
|
border: 1px solid #e1e4e8;
|
|
}
|
|
|
|
.metadata-item {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.metadata-item strong {
|
|
color: #24292e;
|
|
}
|
|
|
|
.tag {
|
|
background-color: #f1f8ff;
|
|
color: #0366d6;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 12px;
|
|
font-size: 0.75rem;
|
|
border: 1px solid #c8e1ff;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.lab-content-body {
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.lab-content-body h2 {
|
|
border-bottom: 1px solid #e1e4e8;
|
|
padding-bottom: 0.3rem;
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.lab-content-body h3 {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.lab-content-body code {
|
|
background-color: #f6f8fa;
|
|
padding: 0.125rem 0.25rem;
|
|
border-radius: 3px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.lab-content-body pre {
|
|
background-color: #f6f8fa;
|
|
padding: 1rem;
|
|
border-radius: 6px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.lab-content-body pre code {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
}
|
|
|
|
.lab-footer {
|
|
margin-top: 3rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid #e1e4e8;
|
|
}
|
|
|
|
.back-link {
|
|
color: #0366d6;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.back-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
</style> |