NO FLEX ZONE

- Remove flexbox and use `float: right` instead.
  I've been trying not use flex per "smolweb" guidance.

  See more:
  https://smolweb.org/css-grading.html

- Switch from Button* system-color to Field*.
  Seems to be better implemented on Chrome and Safari.

1 files changed, 13 insertions, 16 deletions

diff --git a/style.css b/style.css
index c68edb9..42ad66a 100644
--- a/style.css
+++ b/style.css
@@ -12,35 +12,32 @@ main {
     margin: 0 1rem;
 }
 body > header {
-    display: flex;
-    justify-content: space-between;
     padding: 0.5rem 1rem;
-    color: ButtonText;
-    background-color: ButtonFace;
+    color: FieldText;
+    background-color: Field;
     gap: 0.5rem 1rem;
-    flex-wrap: wrap;
-}
-header nav {
-    display: inline-block;
 }
 section header {
     font-style: italic;
 }
+nav {
+    float: right;
+}
 nav ul {
     list-style-type: none;
-    border-left: 1px solid ButtonText;
+    border-left: 1px solid FieldText;
     margin: 0;
     padding: 0;
 }
 nav ul li {
-    display: inline-block;
-    border-right: 1px solid ButtonText;
+    display: inline;
+    border-right: 1px solid FieldText;
     padding: 0 10px;
     margin: 0;
 }
 nav ul li a,
 nav ul li a:visited {
-    color: ButtonText;
+    color: FieldText;
 }
 li {
     margin-left: 1rem;
@@ -50,7 +47,7 @@ p {
     line-height: 1.5rem;
 }
 sup {
-    font-size: .75rem;
+    font-size: 0.75rem;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
@@ -64,10 +61,10 @@ figure {
     margin: 1rem 4rem;
 }
 aside {
-    color: ButtonText;
+    color: FieldText;
     padding: 1rem;
-    border: 1px solid ButtonText;
-    background-color: ButtonFace;
+    border: 1px solid FieldText;
+    background-color: Field;
     font-style: italic;
 }
 .footnotes {