mirror of
https://github.com/cliffe/HacktivityLabSheets.git
synced 2026-02-21 19:28:04 +00:00
3d9029a200
- Introduced a theme toggle button in the index page for switching between light and dark modes. - Added a new stylesheet for the Hacktivity theme with CSS variables for theming. - Updated existing styles in lab and default layouts to utilize CSS variables for consistent theming. - Enhanced accessibility and visual appeal with improved color contrasts and hover effects.
159 lines
3.2 KiB
HTML
159 lines
3.2 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 var(--panelborder-color);
|
|
padding-bottom: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.lab-header h1 {
|
|
margin-bottom: 0.5rem;
|
|
color: var(--fg-color);
|
|
}
|
|
|
|
.lab-description {
|
|
font-size: 1.125rem;
|
|
color: var(--fg-color);
|
|
opacity: 0.8;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.lab-metadata {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
background-color: var(--panelbg-color);
|
|
padding: 1rem;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--panelborder-color);
|
|
}
|
|
|
|
.metadata-item {
|
|
font-size: 0.875rem;
|
|
color: var(--fg-color);
|
|
}
|
|
|
|
.metadata-item strong {
|
|
color: var(--fg-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tag {
|
|
background-color: var(--primary-btnbg-color);
|
|
color: white;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 12px;
|
|
font-size: 0.75rem;
|
|
border: 1px solid var(--primary-btnbg-color);
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.lab-content-body {
|
|
line-height: 1.6;
|
|
color: var(--fg-color);
|
|
}
|
|
|
|
.lab-content-body h2 {
|
|
border-bottom: 1px solid var(--panelborder-color);
|
|
padding-bottom: 0.3rem;
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--fg-color);
|
|
}
|
|
|
|
.lab-content-body h3 {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
color: var(--fg-color);
|
|
}
|
|
|
|
.lab-content-body code {
|
|
background-color: var(--highlight-color);
|
|
padding: 0.125rem 0.25rem;
|
|
border-radius: 3px;
|
|
font-size: 0.875rem;
|
|
border: 1px solid var(--panelborder-color);
|
|
}
|
|
|
|
.lab-content-body pre {
|
|
background-color: var(--highlight-color);
|
|
padding: 1rem;
|
|
border-radius: 6px;
|
|
overflow-x: auto;
|
|
border: 1px solid var(--panelborder-color);
|
|
}
|
|
|
|
.lab-content-body pre code {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
|
|
.lab-footer {
|
|
margin-top: 3rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid var(--panelborder-color);
|
|
}
|
|
|
|
.back-link {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.back-link:hover {
|
|
text-decoration: underline;
|
|
color: var(--primary-btnhov-color);
|
|
}
|
|
</style> |