nav menu on top

diff --git a/index.cgi b/index.cgi
index 0cfa8a312eeba1030ad327588297d2bf27322e0f..7dfe9fd9353b2524f30beff93abe8ddad68e78cb 100755 (executable)
--- a/index.cgi
+++ b/index.cgi
@@ -55,8 +55,9 @@ yield_page() {
     printf '
        ] [body #top class="%s"
     ' "$class"
-    cat
+    printf '[ul .menu [li [a "/cards/" . %s]][li [a "/courses/" . %s]]]' "$(l10n cards)" "$(l10n courses)"
     [ "$message" ] && printf '[p #message\n%s\n]' "$(l10n "$message")"
+    cat
     printf '] ]'
   } \
   | "${_EXEC}/cgilite/html-sh.sed"

diff --git a/style.css b/style.css
index 302a52f9aad3921e21271aa1a340ac3f5f533b40..e0faba6c7957635392d0700320ecfe774c51f393 100644 (file)
--- a/style.css
+++ b/style.css
@@ -1,4 +1,5 @@
 * {
+  position: relative;
   box-sizing: border-box;
   font-family: sans-serif;
   font-weight: normal;
@@ -15,6 +16,8 @@ body {
   color: #000; background-color: #FFF;
 }
 
+/* ======= GENERIC HTML STYLES =======*/
+
 p { margin-bottom: 1em; }
 
 a {
@@ -71,6 +74,11 @@ input[type=number] { text-align: right; padding-right: 0; }
 button, input[type=button],
 .control a {
   box-shadow: .125em .125em .25em;
+  cursor: pointer;
+}
+input[type=radio], input[type=checkbox],
+input[type=radio] + label, input[type=checkbox] + label {
+  cursor: pointer;
 }
 
 label { margin-right: .75em; }
@@ -78,6 +86,35 @@ input + label {
   margin-left: .375em;
 }
 
+/* ====== COMMON ELEMENTS ======*/
+
+body > ul.menu {
+  display: block;
+  height: 1.75em;
+  margin: 0; -padding: 0 .5em;
+  list-style: none;
+  color: #CCC;
+  background-color: #444;
+  box-shadow: inset 0 -.25em .25em #000;
+  overflow: hidden;
+  z-index: 3;
+}
+
+body > .menu li {
+  display: inline-block;
+}
+body > .menu a {
+  color: inherit;
+  padding: .5em 3em;
+  box-shadow: inset 0 0 .5em #000;
+}
+body.cards > .menu a[href="/cards/"],
+body.courses > .menu a[href="/courses/"] {
+  color: #000;
+  background-color: #FFF;
+  box-shadow: none;
+}
+
 /* =========== FILTER AND SEARCH Headers ========= */
 
 form.search, form.sort, form.filter, form.newcard, form.newcourses {