css: Fix margins at the top of the page.

resources/style.css

@@ -9,8 +9,6 @@ html, body {
     text-size-adjust: none;
 }
 
-body > *:first-child::before { content: ""; display: table; }
-
 h1, h2, h3, h4, h5, h6 {
     font-family: sans-serif;
 }
@@ -31,9 +29,9 @@ a:hover {
 #sidebar > header blockquote {
     display: none;
 }
-#sidebar > header::after {
-    display: table;
-    content: "";
+
+#sidebar > header h1 {
+    margin: 0; /* only for tiny */
 }
 
 #navbutton {
@@ -91,17 +89,17 @@ a:hover {
     background-color: white;
 }
 
-#content > main > header::before {
+#content > main::before {
     content: "";
     display: table;
 }
 #content > main > header {
     padding: 0 1em;
-    margin-top: -1em;
 }
 #content > main > header h1 {
     line-height: initial;
     margin-bottom: 1em;
+    margin-top: 0; /* only small */
 }
 
 main + footer {
@@ -177,6 +175,9 @@ article .banner img {
 
 /* Small (but not tiny) size */
 @media screen and (min-width: 36em) {
+    #sidebar > header h1 {
+        margin: revert;
+    }
     #navigation nav {
         float: left;
         margin-top: 2em;
@@ -250,6 +251,9 @@ article .banner img {
         margin-left: 30.2%;
         width: auto;
     }
+    #content > main > header h1 {
+        margin-top: revert;
+    }
 }
 
 /* Large size (two side-bars) */