compute the menu recursively; put it between title and content

[web.git] / style.css

diff --git a/style.css b/style.css
index be1c63c5df8903348a1e4538ff99cfa395f5a3af..d13bd3a1212716cc1b4a5232badeea7d9978df88 100644 (file)
--- a/style.css
+++ b/style.css
@@ -39,22 +39,32 @@ body {
     margin: 0 auto;
     max-width: calc(50em + 2*11em); /* content width plus 2*navi width */
 }
     margin: 0 auto;
     max-width: calc(50em + 2*11em); /* content width plus 2*navi width */
 }

-#page {
+
+/* The inner box */
+#title, #content {

     border: solid #121212 1px;
     background-color: #252525;
     margin: 0 11.0em; /* navi width */
     border: solid #121212 1px;
     background-color: #252525;
     margin: 0 11.0em; /* navi width */

-    border-radius: 10px;

     padding: 0;
 }
     padding: 0;
 }

-#page h1 {
+#title {
+    border-bottom: none;
+    border-radius: 10px 10px 0px 0px;
+}
+#title h1 {

     border-bottom: solid #08f 2px;
     text-align: center;
     padding: 0 0.7em;
     border-bottom: solid #08f 2px;
     text-align: center;
     padding: 0 0.7em;

+    margin-bottom: 0;

 }
 #content {
 }
 #content {

+    border-top: none;
+    border-radius: 0px 0px 10px 10px;

     display: block;
     display: block;

-    margin: 0.7em;
+    padding: 0.7em;
+    padding-top: 1px; /* If we use 0 here, things get ugly. What?!? */

 }
 }

+

 /* Navigation menu */
 #navi {
     /* No border, no padding, so all the width computations become easy. */
 /* Navigation menu */
 #navi {
     /* No border, no padding, so all the width computations become easy. */


@@ -63,7 +73,6 @@ body {
     width: 11.0em; /* navi width */
     padding: 0;
     margin: 0;
     width: 11.0em; /* navi width */
     padding: 0;
     margin: 0;

-    margin-top:2.7em;

 }
 #navi ul {
     margin: 0px;
 }
 #navi ul {
     margin: 0px;


@@ -76,7 +85,7 @@ body {
 }
 #navi li {
     /* Border around the links */
 }
 #navi li {
     /* Border around the links */

-    margin-top:0.1em;
+    margin-bottom:0.1em;

     background-color: #252525;
     border-left: solid #36ff00 2px;
     border-right: solid #36ff00 2px;
     background-color: #252525;
     border-left: solid #36ff00 2px;
     border-right: solid #36ff00 2px;


@@ -103,33 +112,33 @@ body {
 #navi li:hover a {
     color: #DDD;
 }
 #navi li:hover a {
     color: #DDD;
 }

+

 /* Small screens */
 @media screen and (max-width:60em) {
 /* Small screens */
 @media screen and (max-width:60em) {

-    #frame, #page, #navi {
+    #frame, #title, #content, #navi {

         margin: 0;
         width: auto;
         max-width: none;
         clear: both;
     }
         margin: 0;
         width: auto;
         max-width: none;
         clear: both;
     }

-    #page {
-        /* the navi will be added above this */
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }

     #navi {
         /* Place navi above the title */
         float: none;
     #navi {
         /* Place navi above the title */
         float: none;

-        border-top-left-radius: 10px;
-        border-top-right-radius: 10px;
-        border-bottom: solid #36ff00 2px;
+        border: solid #121212 1px;
+        border-bottom: none;

         background-color: #252525;
         background-color: #252525;

-        padding: 0.7em;
+        padding: 0;

     }
     #navi ul, #navi ul ul, #navi li, #navi li a {
         margin: 0;
         padding: 0;
         display: inline;
     }
     }
     #navi ul, #navi ul ul, #navi li, #navi li a {
         margin: 0;
         padding: 0;
         display: inline;
     }

+    #navi > ul {
+        padding: 0.3em;
+        display: block;
+        border-bottom: solid #36ff00 2px;
+    }

     /* Display only parent and children, and deocare them appropriately */
     #navi li {
         display:inline-block;
     /* Display only parent and children, and deocare them appropriately */
     #navi li {
         display:inline-block;


@@ -154,15 +163,17 @@ body {
         text-decoration: underline;
     }
 }
         text-decoration: underline;
     }
 }

+

 /* Printing */
 @media print {
 /* Printing */
 @media print {

-    #frame, #page {
+    #frame, #title, #content {

         margin: 0;
         margin: 0;

+        padding: 0;

         width: auto;
         max-width: none;
         border: none;
     }
         width: auto;
         max-width: none;
         border: none;
     }

-    #page h1 {
+    #title h1 {

         border: none;
     }
     #navi {
         border: none;
     }
     #navi {