feat(article layout): Improve readability and multimedia integration
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.
This commit is contained in:
parent
c32144d437
commit
25a07d797b
GPG key ID:
ECBCC9082395383F
2 changed files with 100 additions and 97 deletions
|
|
@ -141,15 +141,28 @@ blockquote {
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-imgs {
|
.step-section {
|
||||||
display: flex;
|
background-color: var(--primary-bg);
|
||||||
align-items: center;
|
border: 1px solid var(--border-color);
|
||||||
justify-content: center;
|
border-radius: 8px;
|
||||||
flex-wrap: wrap;
|
box-shadow: 0 2px 4px var(--shadow-color);
|
||||||
|
padding: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-imgs img {
|
.step-header h2 {
|
||||||
max-width: 300px;
|
font-size: 2em;
|
||||||
|
color: var(--heading-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-images img,
|
||||||
|
.step-videos video,
|
||||||
|
.step-iframes iframe {
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 4px var(--shadow-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-text {
|
||||||
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reply-button,
|
.reply-button,
|
||||||
|
|
@ -289,3 +302,22 @@ header {
|
||||||
.navbar-logo {
|
.navbar-logo {
|
||||||
height: 64px;
|
height: 64px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.img-fluid {
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
video {
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-muted {
|
||||||
|
color: #6c757d !important;
|
||||||
|
}
|
||||||
|
|
@ -1,116 +1,87 @@
|
||||||
{% extends "base.html" %} {% block content %}
|
{% extends "base.html" %} {% block content %}
|
||||||
<center>
|
<div class="container my-5">
|
||||||
<h1>{{ title }}</h1>
|
<div class="header-section text-center mb-5">
|
||||||
|
<h1 class="display-4">{{ title }}</h1>
|
||||||
<p>
|
<p class="text-muted">
|
||||||
by <a href="{{ author_link }}">{{ author }}</a> in
|
by
|
||||||
<a href="{{ category_link }}">{{ category }}</a> >
|
<a href="{{ author_link }}" class="text-decoration-none">{{ author }}</a>
|
||||||
<a href="{{ channel_link }}">{{ channel }}</a>
|
in
|
||||||
|
<a href="{{ category_link }}" class="text-decoration-none"
|
||||||
|
>{{ category }}</a
|
||||||
|
>
|
||||||
|
>
|
||||||
|
<a href="{{ channel_link }}" class="text-decoration-none"
|
||||||
|
>{{ channel }}</a
|
||||||
|
>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p class="text-muted">
|
||||||
{{ views }} Views, {{ favorites }} Favorites, {{ comment_count }} Comments
|
{{ views }} Views, {{ favorites }} Favorites, {{ comment_count }} Comments
|
||||||
</p>
|
</p>
|
||||||
</center>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
{% for step in steps %}
|
|
||||||
<div class="row mb-6">
|
|
||||||
<div class="col-12">
|
|
||||||
<h2>{{ step.title }}</h2>
|
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
{% if step.imgs %}
|
{% if step.imgs %}
|
||||||
<div class="row mb-3 justify-content-center">
|
<div class="step-images row mb-4">
|
||||||
{% for step_img in step.imgs %}
|
{% for step_img in step.imgs %}
|
||||||
<div class="col-md-3">
|
<div class="col-md-4 mb-3">
|
||||||
<img src="{{ step_img.src }}" alt="{{ step_img.alt }}" class="img-fluid" />
|
<img
|
||||||
|
src="{{ step_img.src }}"
|
||||||
|
alt="{{ step_img.alt }}"
|
||||||
|
class="img-fluid rounded shadow-sm"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %} {% if step.videos %}
|
||||||
|
<div class="step-videos row mb-4">
|
||||||
{% if step.videos %}
|
|
||||||
<div class="row mb-3 justify-content-center">
|
|
||||||
{% for step_video in step.videos %}
|
{% for step_video in step.videos %}
|
||||||
<div class="col-md-3">
|
<div class="col-md-6 mb-3">
|
||||||
<video src="{{ step_video }}" controls class="w-100"></video>
|
<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>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if step.iframes %}
|
<div class="step-text mb-3">{{ step.text|safe }}</div>
|
||||||
<div class="row mb-3 justify-content-center">
|
|
||||||
{% for step_iframe in step.iframes %}
|
|
||||||
<div class="col-md-3 mb-3">
|
|
||||||
<iframe src="{{ step_iframe.src }}" width="100%" height="{{ step_iframe.height }}"></iframe>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if step.downloads %}
|
{% if step.downloads %}
|
||||||
<div class="row">
|
<div class="step-downloads row mb-4">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<h3>Downloads</h3>
|
<h3>Downloads</h3>
|
||||||
</div>
|
</div>
|
||||||
{% for step_download in step.downloads %}
|
{% for step_download in step.downloads %}
|
||||||
<div class="col-md-2 mb-3">
|
<div class="col-md-2 mb-3">
|
||||||
<a href="{{ step_download.src }}" class="btn btn-primary">{{ step_download.name }}</a>
|
<a href="{{ step_download.src }}" class="btn btn-primary w-100"
|
||||||
|
>{{ step_download.name }}</a
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
</section>
|
||||||
<div class="row">
|
|
||||||
<div class="col-12 mb-3 wrap">
|
|
||||||
{{ step.text|safe }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<br />
|
|
||||||
{% for index, comment in enumerate(comments) %}
|
|
||||||
<!-- TODO: Fix comments -->
|
|
||||||
<a href="{{ comment[4] }}">
|
|
||||||
<img
|
|
||||||
style="display: inline-block"
|
|
||||||
width="30px"
|
|
||||||
height="30px"
|
|
||||||
src="{{ comment[1] }}"
|
|
||||||
alt="{{ comment[2] }}"
|
|
||||||
/>
|
|
||||||
<span>{{ comment[3] }}</span>
|
|
||||||
</a>
|
|
||||||
<span>{{ comment[5] }}</span>
|
|
||||||
<span>{{ comment[0] }} votes</span>
|
|
||||||
{{ comment[6]|safe }}
|
|
||||||
<input type="checkbox" id="replies{{ index }}" class="reply-button" />
|
|
||||||
<label for="replies{{ index }}"><b>{{ comment[7] }} replies</b></label>
|
|
||||||
<div class="replies">
|
|
||||||
{% for reply in comment[8] %}
|
|
||||||
<blockquote>
|
|
||||||
<a href="{{ reply[4] }}">
|
|
||||||
<img
|
|
||||||
style="display: inline-block"
|
|
||||||
width="30px"
|
|
||||||
height="30px"
|
|
||||||
src="{{ reply[1] }}"
|
|
||||||
alt="{{ comment[2] }}"
|
|
||||||
/>
|
|
||||||
<span>{{ reply[3] }}</span>
|
|
||||||
</a>
|
|
||||||
<span>{{ reply[5] }}</span>
|
|
||||||
<span>{{ reply[0] }} votes</span>
|
|
||||||
{{ reply[6]|safe }}
|
|
||||||
</blockquote>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
<br />
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue