X-Git-Url: https://git.ralfj.de/web.git/blobdiff_plain/cd9f8a14cc1c051b99e52650773eda2eef0f6a03..458f641e8782b0b55e9ef8d2c6534de581c69b9c:/style.css

diff --git a/style.css b/style.css
index be1c63c..d13bd3a 100644
--- 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 */
 }
-#page {
+
+/* The inner box */
+#title, #content {
     border: solid #121212 1px;
     background-color: #252525;
     margin: 0 11.0em; /* navi width */
-    border-radius: 10px;
     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;
+    margin-bottom: 0;
 }
 #content {
+    border-top: none;
+    border-radius: 0px 0px 10px 10px;
     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. */
@@ -63,7 +73,6 @@ body {
     width: 11.0em; /* navi width */
     padding: 0;
     margin: 0;
-    margin-top:2.7em;
 }
 #navi ul {
     margin: 0px;
@@ -76,7 +85,7 @@ body {
 }
 #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;
@@ -103,33 +112,33 @@ body {
 #navi li:hover a {
     color: #DDD;
 }
+
 /* Small screens */
 @media screen and (max-width:60em) {
-    #frame, #page, #navi {
+    #frame, #title, #content, #navi {
         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;
-        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;
-        padding: 0.7em;
+        padding: 0;
     }
     #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;
@@ -154,15 +163,17 @@ body {
         text-decoration: underline;
     }
 }
+
 /* Printing */
 @media print {
-    #frame, #page {
+    #frame, #title, #content {
         margin: 0;
+        padding: 0;
         width: auto;
         max-width: none;
         border: none;
     }
-    #page h1 {
+    #title h1 {
         border: none;
     }
     #navi {