diff options
| -rw-r--r-- | comic/assets/css/comic.css | 40 | ||||
| -rw-r--r-- | comic/templates/issue.html.j2 | 20 |
2 files changed, 36 insertions, 24 deletions
diff --git a/comic/assets/css/comic.css b/comic/assets/css/comic.css index 888d61c..7335684 100644 --- a/comic/assets/css/comic.css +++ b/comic/assets/css/comic.css @@ -34,37 +34,49 @@ hr { ul.navigation { margin-top: 0; padding: 0; + display: inline-flex; + max-width: 100%; } ul.navigation li { display: inline; - padding-left: 0.2rem; - padding-right: 0.2rem; + text-align: center; + height: 1.5rem; + line-height: 1.5rem; } -ul.navigation li a { +ul.navigation li.issue_number { + width: 2rem; +} + +ul.navigation li.nav_button { width: 4rem; - margin-left: auto; - margin-right: auto; - display: inline-block; - text-align: center; + flex-shrink: 1; + margin-left: 0.1rem; + margin-right: 0.1rem; + border-radius: 0.5rem; background: #a665c6; - color: white; border: 0.1rem solid white; - border-radius: 0.5rem; } -ul.navigation li a:hover { +ul.navigation li.nav_button:hover { background: white; - color: #a665c6; border: 0.1rem solid #a665c6; - text-decoration: none; } ul.navigation li span { - width: 2rem; display: inline-block; - text-align: center; +} + +ul.navigation li a { + display: inline-block; + width: 100%; + color: white; +} + +ul.navigation li:hover a { + color: #a665c6; + text-decoration: none; } .icon-text { diff --git a/comic/templates/issue.html.j2 b/comic/templates/issue.html.j2 index ca454c3..9a7765c 100644 --- a/comic/templates/issue.html.j2 +++ b/comic/templates/issue.html.j2 @@ -21,20 +21,20 @@ <main class="col-md-9"> <h1>{{ issue.title() }}</h1> <ul class="navigation"> - <li><a href="/issues/1"><<</a></li> - <li><a href="{{ previous }}"><</a></li> - <li><span>{{ issue_number }}</span></li> - <li><a href="{{ next }}">></a></li> - <li><a href="/">>></a></li> + <li class="nav_button"><a href="/issues/1"><<</a></li> + <li class="nav_button"><a href="{{ previous }}"><</a></li> + <li class="issue_number"><span>{{ issue_number }}</span></li> + <li class="nav_button"><a href="{{ next }}">></a></li> + <li class="nav_button"><a href="/">>></a></li> </ul> <img class="comic" src="{{ url }}/comic.png" alt="comic" {{ issue.extra_attributes() }}/> <p class="description">{{ issue.description() }}</p> <ul class="navigation"> - <li><a href="/issues/1"><<</a></li> - <li><a href="{{ previous }}"><</a></li> - <li><span>{{ issue_number }}</span></li> - <li><a href="{{ next }}">></a></li> - <li><a href="/">>></a></li> + <li class="nav_button"><a href="/issues/1"><<</a></li> + <li class="nav_button"><a href="{{ previous }}"><</a></li> + <li class="issue_number"><span>{{ issue_number }}</span></li> + <li class="nav_button"><a href="{{ next }}">></a></li> + <li class="nav_button"><a href="/">>></a></li> </ul> </main> </div> |