diff options
| author | Botond Hende <nettingman@gmail.com> | 2025-12-23 15:57:09 +0100 |
|---|---|---|
| committer | Botond Hende <nettingman@gmail.com> | 2025-12-23 15:57:09 +0100 |
| commit | 7308b658153e089456dd1b5ad691ff8db19088cd (patch) | |
| tree | c26e122bff0a621c7622ddaf08c1f899a7267bf2 /comic | |
| parent | 71c7de032edca8bfd00871e0f0fe986bbd9e60a5 (diff) | |
comic styling
Diffstat (limited to 'comic')
| -rw-r--r-- | comic/assets/css/comic.css | 36 | ||||
| -rw-r--r-- | comic/templates/issue.html.j2 | 13 |
2 files changed, 36 insertions, 13 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> |