Kumi
25a07d797b
Revamped the article template to enhance visual appeal and user engagement. Introduced a modern, centered layout for article headers, enriched steps display, and standardized multimedia elements with rounded corners and shadows for a cohesive look. Adjustments ensure content is more engaging and accessible, encouraging longer visitor sessions and interaction. This change aligns with the goal of providing a more immersive user experience while maintaining the site's aesthetic consistency. Refactored CSS to support these changes, defining variables for easier future theme adjustments and promoting code reuse across similar elements. The update signifies a pivotal shift towards a refined and flexible presentation of articles, potentially increasing visitor retention and satisfaction.
87 lines
2.3 KiB
HTML
87 lines
2.3 KiB
HTML
{% extends "base.html" %} {% block content %}
|
|
<div class="container my-5">
|
|
<div class="header-section text-center mb-5">
|
|
<h1 class="display-4">{{ title }}</h1>
|
|
<p class="text-muted">
|
|
by
|
|
<a href="{{ author_link }}" class="text-decoration-none">{{ author }}</a>
|
|
in
|
|
<a href="{{ category_link }}" class="text-decoration-none"
|
|
>{{ category }}</a
|
|
>
|
|
>
|
|
<a href="{{ channel_link }}" class="text-decoration-none"
|
|
>{{ channel }}</a
|
|
>
|
|
</p>
|
|
<p class="text-muted">
|
|
{{ views }} Views, {{ favorites }} Favorites, {{ comment_count }} Comments
|
|
</p>
|
|
</div>
|
|
|
|
{% for step in steps %}
|
|
<section class="step-section mb-5 p-4 rounded shadow-sm">
|
|
<div class="step-header mb-4">
|
|
<h2>{{ step.title }}</h2>
|
|
</div>
|
|
|
|
{% if step.imgs %}
|
|
<div class="step-images row mb-4">
|
|
{% for step_img in step.imgs %}
|
|
<div class="col-md-4 mb-3">
|
|
<img
|
|
src="{{ step_img.src }}"
|
|
alt="{{ step_img.alt }}"
|
|
class="img-fluid rounded shadow-sm"
|
|
/>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %} {% if step.videos %}
|
|
<div class="step-videos row mb-4">
|
|
{% for step_video in step.videos %}
|
|
<div class="col-md-6 mb-3">
|
|
<video
|
|
src="{{ step_video }}"
|
|
controls
|
|
class="w-100 rounded shadow-sm"
|
|
></video>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %} {% if step.iframes %}
|
|
<div class="step-iframes row mb-4">
|
|
{% for step_iframe in step.iframes %}
|
|
<div class="col-md-8 mb-3">
|
|
<iframe
|
|
src="{{ step_iframe.src }}"
|
|
width="100%"
|
|
height="{{ step_iframe.height }}"
|
|
frameborder="0"
|
|
class="rounded shadow-sm"
|
|
></iframe>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="step-text mb-3">{{ step.text|safe }}</div>
|
|
|
|
{% if step.downloads %}
|
|
<div class="step-downloads row mb-4">
|
|
<div class="col-12">
|
|
<h3>Downloads</h3>
|
|
</div>
|
|
{% for step_download in step.downloads %}
|
|
<div class="col-md-2 mb-3">
|
|
<a href="{{ step_download.src }}" class="btn btn-primary w-100"
|
|
>{{ step_download.name }}</a
|
|
>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
{% endfor %}
|
|
</div>
|
|
{% endblock %}
|