fixed nav buttons on comic siteHEADmaster

1 files changed, 26 insertions, 14 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 {