structables/templates/index.html
Kumi b0adb37ce7
feat: Overhaul UI styling and structure
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.
2024-05-22 18:10:32 +02:00

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 %}