From 7308b658153e089456dd1b5ad691ff8db19088cd Mon Sep 17 00:00:00 2001
From: Botond Hende <nettingman@gmail.com>
Date: Tue, 23 Dec 2025 15:57:09 +0100
Subject: comic styling

---
 comic/assets/css/comic.css    | 36 +++++++++++++++++++++++++++---------
 comic/templates/issue.html.j2 | 13 +++++++++----
 2 files changed, 36 insertions(+), 13 deletions(-)

(limited to 'comic')

diff --git a/comic/assets/css/comic.css b/comic/assets/css/comic.css
index c647875..f571a16 100644
--- a/comic/assets/css/comic.css
+++ b/comic/assets/css/comic.css
@@ -1,18 +1,36 @@
-img.comic {
-    width: 100%;
-}
-
-header {
-    margin: auto;
+body {
+    background-color: #cdb7f6;
 }
 
-main, header {
+main, header, footer {
     display: flex;
     flex-flow: column;
     align-items: center;
     margin: auto;
+    border-radius: 0.5rem;
+    background-color: white;
+}
+
+@media (min-width: 768px) {
+    main, header, footer {
+        padding: 0 5rem 0 5rem !important;
+    }
+}
+
+main, footer {
+    margin-top: 0.5rem;
+}
+
+img.comic {
+    width: 100%;
+    border: 0.1rem solid black;
+}
+
+p {
+    text-align: center;
+    margin: 0.2rem;
 }
 
-div.huge-vertical-spacer-at-the-bottom {
-    height: 10rem;
+p.description {
+    margin-top: 3rem;
 }
\ No newline at end of file
diff --git a/comic/templates/issue.html.j2 b/comic/templates/issue.html.j2
index 9281ec0..7eca898 100644
--- a/comic/templates/issue.html.j2
+++ b/comic/templates/issue.html.j2
@@ -14,17 +14,22 @@
 <div class="bootstrap-wrapper">
     <div class="container">
         <a href="/" class="row dont-bother">
-            <header class="col-md-6" role="banner">TITLE</header>
+            <header class="col-md-7" role="banner">TITLE</header>
         </a>
         <div class="row">
-            <main class="col-md-6">
+            <main class="col-md-7">
                 <h1>{{ issue.title() }}</h1>
                 <img class="comic" src="{{ url }}/comic.png" />
-                <p>{{ issue.description() }}</p>
+                <p class="description">{{ issue.description() }}</p>
             </main>
         </div>
+        <div class="row">
+            <footer class="col-md-7">
+                <p>Permalink to this comic: <a href="{{ url }}">{{ url }}</a></p>
+                <p>Image url: <a href="{{ url }}/comic.png">{{ url }}/comic.png</a></p>
+            </footer>
+        </div>
     </div>
 </div>
-<div class="huge-vertical-spacer-at-the-bottom"></div>
 </body>
 </html>
-- 
cgit v1.2.3-70-g09d2