From a48a04728758b6941c6ecdc73a15cce84395d84a Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@translucent.app>
Date: Thu, 4 Apr 2024 09:59:49 +0100
Subject: [PATCH] update basic css to work on older kindles

---
 cps/templates/basic_layout.html | 47 ++++++++++++++++++++++++---------
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/cps/templates/basic_layout.html b/cps/templates/basic_layout.html
index 4f35f423..c2aba6df 100644
--- a/cps/templates/basic_layout.html
+++ b/cps/templates/basic_layout.html
@@ -11,11 +11,31 @@ body {
 }
 
 nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #f8f8f8;
   height: 50px;
+  padding: 5px 20px;
+  width: 100%;
+  display: table;
+  box-sizing: border-box;
+  border-bottom: 1px solid black;
+}
+
+nav > * {
+  display: inline-block;
+  display: table-cell;
+  vertical-align: middle;
+  float: none;
+  text-align: center;
+  width: auto;
+}
+
+nav > *:first-child {
+  text-align: left;
+  width: 1%;
+}
+
+nav > *:last-child {
+  text-align: right;
+  width: 1%;
 }
 
 nav > a {
@@ -25,13 +45,10 @@ nav > a {
 
 .search {
   margin: auto auto;
-  width: 50%;
-  display: flex;
-  flex: 1;
-  justify-content: center;
 }
 
 form > input {
+  width: 18ch;
   padding-left: 4px;
 }
 
@@ -52,7 +69,7 @@ form > span {
 
 button {
   border: none;
-  padding: 0;
+  padding: 0 10px;
   margin: 0;
   width: 80px;
   height: 100%;
@@ -60,7 +77,7 @@ button {
 }
 
 .body {
-  padding: 0 20px;
+  padding: 5px 20px;
 }
 
 a {
@@ -81,11 +98,17 @@ img {
 }
 
 .pagination {
-  display: flex;
-  justify-content: space-between;
   padding: 10px 0;
   height: 20px;
 }
+
+.pagination > div {
+  float: left;
+}
+
+.pagination > div:last-child {
+  float: right;
+}
 </style>
 </head>