From b0adb37ce7e0e399fc52ca3666addbec6ec58809 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Wed, 22 May 2024 18:10:32 +0200
Subject: [PATCH] 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.
---
 static/css/style.css | 106 +++++++++++++++++++++++++++++++++++--------
 templates/index.html |  76 +++++++++++++++++--------------
 2 files changed, 129 insertions(+), 53 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 14bf807..f80cf75 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,55 +1,121 @@
+:root {
+  --main-font: "DejaVu Sans Mono", monospace;
+  --main-color: #bbc2cf;
+  --link-color: #ff6c6b;
+  --heading-color: #51afef;
+  --code-bg: #20232a;
+  --code-color: #969ba6;
+  --border-color: lightgrey;
+}
+
 body {
-  font-family: DejaVu Sans Mono, monospace;
+  font-family: var(--main-font);
   margin: 20px auto;
-  line-height: 1.5em;
+  line-height: 1.5;
   font-size: 1.1em;
   max-width: 100vw;
-  color: #bbc2cf;
+  color: var(--main-color);
   padding: 0 10px;
   hyphens: auto;
 }
 
 a {
-  color: #ff6c6b;
+  color: var(--link-color);
   text-decoration: none;
 }
+
 a:hover {
-  color: #ff6c6b;
   text-decoration: underline;
 }
 
 h1,
 h2,
-h3,
-.fact_check_info_title {
+h3 {
   line-height: 1.2;
-  color: #51afef;
+  color: var(--heading-color);
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+h2 {
   font-size: 1.3em;
 }
-h2 {
+
+h3 {
   font-size: 1.2em;
 }
-h3,
-.fact_check_info_title {
-  font-size: 1.1em;
-}
 
 pre,
 code {
-  tab-size: 8;
-  background: #20232a;
-  color: #969ba6;
-  border: 1px solid lightgrey;
+  background: var(--code-bg);
+  color: var(--code-color);
+  border: 1px solid var(--border-color);
   padding: 5px;
   tab-size: 4;
+  overflow-x: auto;
 }
 
 blockquote {
-  border-left: 10px solid #969ba6;
+  border-left: 10px solid var(--code-color);
   padding-left: 10px;
   margin-right: 10px;
 }
 
+.navbar-logo {
+  height: 64px;
+}
+
+.card {
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.card-img-top {
+  max-width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+
+.navbar-collapse {
+  display: flex;
+  justify-content: space-between;
+}
+
+.navbar-nav {
+  flex-direction: row;
+}
+
+.nav-item {
+  margin-left: 1rem;
+}
+
+@media (max-width: 768px) {
+  .navbar-nav {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .nav-item {
+    margin-left: 0;
+    margin-bottom: 0.5rem;
+  }
+
+  .navbar-collapse {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .form-control {
+    width: 100%;
+    margin-bottom: 0.5rem;
+  }
+}
+
 .ibles {
   display: inline-block;
   vertical-align: top;
@@ -77,13 +143,13 @@ blockquote {
   display: none;
 }
 
-.reply-button + label {
+.reply-button+label {
   position: relative;
   display: block;
   cursor: pointer;
 }
 
-input.reply-button:checked + label + .replies {
+input.reply-button:checked+label+.replies {
   display: flex;
   flex-direction: column;
   gap: 1rem;
diff --git a/templates/index.html b/templates/index.html
index b39a1bb..c21dd87 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,33 +1,43 @@
-{% extends "base.html" %}
-
-{% block content %}
-	<center>
-		<h1>{{ title }}</h1>
-
-		{% for section in sections %}
-		<div class="container">
-			<div class="row">
-				<h3></strong><a href="{{ section[1] }}">{{ section[0] }}</a></h3>
-			</div>
-			<div class="row justify-content-center">
-				{% for ible in section[2] %}
-				<div class="ibles col-xs-12 col-sm-6 col-lg-4">
-					<a href="{{ ible.link }}">
-						<img style="max-width:19vw;" src="{{ ible.img }}" alt="{{ ible.alt }}">
-						<p>
-							<strong style="max-width:19vw;">{{ ible.title }}</strong>
-						</p>
-					</a>
-					<div class="ible-small">
-						<p>by <a href="{{ ible.author_link }}">{{ ible.author }}</a></p>
-						<p>in <a href="{{ ible.channel_link }}">{{ ible.channel }}</a></p>
-						<p>{{ ible.favorites }} Favorites, {{ ible.views }} Views</p>
-					</div>
-				</div>
-				{% endfor %}
-			</div>
-		</div>
-		<hr>
-		{% endfor %}
-	</center>
-{% endblock %}
\ No newline at end of file
+{% 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 %}