Kumi
b0adb37ce7
Introduced a modular CSS variable system for easier theme management, enhancing the maintainability and scalability of our site's design. Reorganized the HTML structure in the index page for a more semantic layout, improving accessibility and SEO. Additionally, updated the styling of UI components, such as navigation and cards, for a more modern and cohesive look. This change not only refreshes the website's aesthetics but also improves the user experience on both desktop and mobile devices.
43 lines
1.3 KiB
HTML
43 lines
1.3 KiB
HTML
{% extends "base.html" %} {% block content %}
|
|
<div class="container text-center">
|
|
<h1>{{ title }}</h1>
|
|
{% for section in sections %}
|
|
<section>
|
|
<div class="row">
|
|
<h3><a href="{{ section[1] }}">{{ section[0] }}</a></h3>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
{% for ible in section[2] %}
|
|
<div class="col-xs-12 col-sm-6 col-lg-4 mb-4">
|
|
<div class="card h-100">
|
|
<a href="{{ ible.link }}">
|
|
<img
|
|
class="card-img-top"
|
|
src="{{ ible.img }}"
|
|
alt="{{ ible.alt }}"
|
|
style="max-width: 100%"
|
|
/>
|
|
<div class="card-body">
|
|
<h5 class="card-title">{{ ible.title }}</h5>
|
|
</div>
|
|
</a>
|
|
<div class="card-footer">
|
|
<p class="card-text">
|
|
by <a href="{{ ible.author_link }}">{{ ible.author }}</a>
|
|
</p>
|
|
<p class="card-text">
|
|
in <a href="{{ ible.channel_link }}">{{ ible.channel }}</a>
|
|
</p>
|
|
<p class="card-text">
|
|
{{ ible.favorites }} Favorites, {{ ible.views }} Views
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<hr />
|
|
</section>
|
|
{% endfor %}
|
|
</div>
|
|
{% endblock %}
|