comic styling

3 files changed, 42 insertions, 15 deletions

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>
diff --git a/modules/comic_generate.py b/modules/comic_generate.py
index 7c55521..9c88d67 100644
--- a/modules/comic_generate.py
+++ b/modules/comic_generate.py
@@ -59,6 +59,7 @@ def generate(jinja_env: jinja2.Environment, output_root_path: str, local: bool):
 
     issues = get_issues(Config.ISSUE_SOURCE_DIR, local)
     issue_template = jinja_env.get_template("issue.html.j2")
+    last_render = None
 
     for issue in issues:
         output_dir = os.path.join(output_root_path, "issues", issue.index)
@@ -69,10 +70,13 @@ def generate(jinja_env: jinja2.Environment, output_root_path: str, local: bool):
             "url": f"{Config.COMIC_ROOT_URL}/issues/{issue.index}"
         }
 
+        last_render = issue_template.render(ctx)
         with open(os.path.join(output_dir, "index.html"), "w") as f:
-            f.write(issue_template.render(ctx))
+            f.write(last_render)
 
         shutil.copyfile(os.path.join(issue.path, IMAGE_FILE_NAME), os.path.join(output_dir, IMAGE_FILE_NAME))
 
-        shutil.copytree(Config.COMIC_ASSETS_SOURCE_DIR, output_root_path + Config.ASSETS_IMPORT_PATH)
+    with open(os.path.join(output_root_path, "index.html"), "w") as f:
+        f.write(last_render)
+    shutil.copytree(Config.COMIC_ASSETS_SOURCE_DIR, output_root_path + Config.ASSETS_IMPORT_PATH)