theme: Use <nav> tag and flexbox.

2 files changed, 16 insertions, 15 deletions

diff --git a/css/dthompson.css b/css/dthompson.css
index 90c8a7a..7bdd6a6 100644
--- a/css/dthompson.css
+++ b/css/dthompson.css
@@ -85,7 +85,9 @@ footer {
 
 /* Navigation */
 
-.nav {
+nav {
+    display: flex;
+    justify-content: space-between;
     font-family: 'Linux Biolinum',sans;
     padding-top: 1rem;
     padding-bottom: 1rem;
@@ -93,32 +95,32 @@ footer {
     border-bottom: 1px solid #eee;
 }
 
-.nav ul {
+nav ul {
     list-style-type: none;
-    display: inline-block;
+    display: flex;
     margin: 0;
     padding: 0;
 }
 
-.nav li {
+nav li {
     display: inline;
-    padding: 1rem;
+    padding-right: 1rem;
 }
 
-.nav li:first-child {
+nav li:first-child {
     padding-left: 0;
 }
 
-.nav a {
+nav a {
     display: inline-block;
     color: #000;
 }
 
-.nav a:hover {
+nav a:hover {
     color: #000;
 }
 
-.nav a:visited {
+nav a:visited {
     color: #000;
 }
 
diff --git a/theme.scm b/theme.scm
index 0489cc1..3870812 100644
--- a/theme.scm
+++ b/theme.scm
@@ -65,12 +65,11 @@
               ,(stylesheet "dthompson"))
              (body
               (div (@ (class "container"))
-                   (div (@ (class "nav"))
-                        (ul (li ,(link "David Thompson" "/"))
-                            (li (@ (class "fade-text")) " ")
-                            (li ,(link "About" "/about.html"))
-                            (li ,(link "Blog" "/index.html"))
-                            (li ,(link "Projects" "/projects.html"))))
+                   (nav
+                    (ul (li ,(link "David Thompson" "/")))
+                    (ul (li ,(link "About" "/about.html"))
+                        (li ,(link "Blog" "/index.html"))
+                        (li ,(link "Projects" "/projects.html"))))
                    ,body
                    (footer (@ (class "text-center"))
                            (p (@ (class "copyright"))