Set styles

.coveragerc

@@ -9,6 +9,7 @@ omit =
     sanic/simple.py
     sanic/utils.py
     sanic/cli
+    sanic/pages
 
 [html]
 directory = coverage

codecov.yml

@@ -17,7 +17,8 @@ ignore:
   - "sanic/compat.py"
   - "sanic/simple.py"
   - "sanic/utils.py"
-  - "sanic/cli"
+  - "sanic/cli/"
+  - "sanic/pages/"
   - ".github/"
   - "changelogs/"
   - "docker/"

sanic/pages/autoindex.py

@@ -13,22 +13,34 @@ class FileInfo(TypedDict):
     file_size: str
 
 
-class AutoIndex(BasePage):
+class AutoIndex(BasePage):  # no cov
     EXTRA_STYLE = dedent(
         """
+        #breadcrumbs a { text-decoration: none; }
         #breadcrumbs .path-0 a::before { content: "🏠"; }
         #breadcrumbs span:has(> a:hover, > a:focus) * {
             color: #ff0d68; text-shadow: 0 0 1rem;
         }
         main a { color: inherit; font-weight: bold; }
+        table.autoindex { width: 100%; }
         table.autoindex tr { display: flex; }
+        table.autoindex tr:hover { background-color: #eee; }
         table.autoindex td { margin: 0 0.5rem; }
         table.autoindex td:first-child { flex: 1; }
         table.autoindex td:nth-child(2) { text-align: right; }
         table.autoindex td:last-child {  text-align: right; }
+        @media (min-width:  915px) {
+            table.autoindex { font-size: 1.75vw; }
+        }
+        @media (min-width:  1600px) {
+            table.autoindex { font-size: 1.75rem; }
+        }
+        @media (prefers-color-scheme: dark) {
+            table.autoindex tr:hover { background-color: #222; }
+        }
         """
     )
-    TITLE = "File browser"
+    TITLE = "File Browser"
 
     def __init__(
         self, files: Iterable[FileInfo], url: str, debug: bool
@@ -59,7 +71,7 @@ class AutoIndex(BasePage):
                 self.doc.__exit__(None, None, None)
 
     def _file_table(self, files: Iterable[FileInfo]):
-        with self.doc.table(class_="autoindex"):
+        with self.doc.table(class_="autoindex container"):
             for f in files:
                 self._file_row(**f)
 

sanic/pages/base.py

@@ -7,20 +7,28 @@ from sanic import __version__ as VERSION
 from sanic.application.logo import SVG_LOGO
 
 
-class BasePage(ABC):
+class BasePage(ABC):  # no cov
     BASE_STYLE = dedent(
         """
-        body { margin: 0; font: 16px sans-serif; }
+        html { font: 16px monospace; }
-        body > * { padding: 0 2rem; }
+        body { margin: 0; font-size: 1.25rem; }
+        body > * { padding: 1rem 2vw; }
+        @media (max-width:  1200px) {
+            body > * { padding: 0.5rem 1.5vw;}
+            body { font-size: 1rem; }
+        }
+        .container { min-width: 600px; max-width: 1600px; }
         header {
-            display: flex; align-items: center; justify-content: space-between;
             background: #111; color: #e1e1e1; border-bottom: 1px solid #272727;
         }
+        header .container {
+            display: flex; align-items: center; justify-content: space-between;
+        }
+        h1 { text-align: left; }
         a:visited { color: inherit; }
         a { text-decoration: none; color: #88f; }
         a:hover, a:focus { text-decoration: underline; outline: none; }
         #logo { height: 2.75rem; padding: 0.25rem 0; }
-        table { width: 100%; max-width: 1200px; }
         span.icon { margin-right: 1rem; }
         @media (prefers-color-scheme: dark) {
             html { background: #111; color: #ccc; }
@@ -45,11 +53,13 @@ class BasePage(ABC):
 
     def _head(self) -> None:
         self.doc.style(HTML(self.style))
-        if self.debug:
         with self.doc.header:
-                self.doc(HTML(SVG_LOGO)).div(self.TITLE, id="hdrtext").div(
+            with self.doc.div(class_="container"):
-                    f"Version {VERSION}", id="hdrver"
+                if self.debug:
-                )
+                    self.doc(HTML(SVG_LOGO))
+                self.doc.div(self.TITLE, id="hdrtext")
+                if self.debug:
+                    self.doc.div(f"Version {VERSION}", id="hdrver")
 
     @abstractmethod
     def _body(self) -> None: