css: Simplified media queries

Apply style by default and only overwrite changed values.

1 files changed, 20 insertions, 28 deletions

diff --git a/accounts/static/layout.css b/accounts/static/layout.css
index 5d260c8..b6d8752 100644
--- a/accounts/static/layout.css
+++ b/accounts/static/layout.css
@@ -32,12 +32,22 @@ html, body {
 
 /* header */
 
+header h1 img {
+    margin: 0;
+    max-width: 100%;
+    height: 1.5em;
+}
+
+#header-background {
+    background-color: #333;
+    width: 100%;
+    height: 3em;
+    margin-bottom: 4em;
+}
+
 @media (min-width: 800px) {
     #header-background {
-        background-color: #333;
-        width: 100%;
         height: 4em;
-        margin-bottom: 4em;
     }
     header {
         position: absolute;
@@ -56,8 +66,6 @@ html, body {
         border-bottom-right-radius: .8em;
     }
     header h1 img {
-        margin: 0;
-        max-width: 100%;
         height: 2em;
     }
     header #roundcornerb,
@@ -78,30 +86,18 @@ html, body {
     }
 }
 
-@media (max-width: 800px) {
-    #header-background {
-        background-color: #333;
-        width: 100%;
-        height: 3em;
-        margin-bottom: 4em;
-    }
-    header h1 img {
-        margin: 0;
-        max-width: 100%;
-        height: 1.5em;
-    }
-}
-
 header nav#mainnav {
     position: absolute;
     top: .5em;
     right: 1em;
 }
+
 header nav#mainnav,
 header nav#mainnav :link,
 header nav#mainnav :visited {
     color: #eee;
 }
+
 header nav#usermenu :link,
 header nav#usermenu :visited {
     color: black;
@@ -121,20 +117,16 @@ header nav#mainnav ul li:not(:last-child):after {
 
 /* content */
 
-@media (min-width: 800px) {
-#content {
-    margin: 0 auto;
-    padding-top: 1em;
-    max-width: 50em;
-}
-}
-
-@media (max-width: 800px) {
 #content {
     margin: 0 auto;
     padding: 1em;
     max-width: 50em;
 }
+
+@media (min-width: 800px) {
+    #content {
+        padding: 1em 0 0;
+    }
 }
 
 #content h1 {