1 files changed, 68 insertions, 42 deletions
diff --git a/accounts/static/layout.css b/accounts/static/layout.css
index b4ac7b6..5d260c8 100644
--- a/accounts/static/layout.css
+++ b/accounts/static/layout.css
@@ -32,48 +32,64 @@ html, body {
 
 /* header */
 
-#header-background {
-    background-color: #333;
-    width: 100%;
-    height: 4em;
-    margin-bottom: 4em;
-}
-header {
-    position: absolute;
-    top: 0;
-    margin: 0;
-    padding: 1em 0;
-    width: 100%;
-}
-header h1 {
-    font-size: 2em;
-    margin: 0;
-    max-width: 50%; /* make image smaller on small screens */
-    min-height: 3em;
-    padding: 0 1em 0;
-    display: inline-block;
-    background-color: #333;
-    border-bottom-right-radius: .8em;
-}
-header h1 img {
-    margin: 0;
-    max-width: 100%;
-}
-header #roundcornerb,
-header #roundcornerw {
-    display: inline-block;
-    width: 50px;
-    height: 50px;
-    position: absolute;
-    top: 4em;
-    margin: 0;
-}
-header #roundcornerb {
-    background-color: #333;
-}
-header #roundcornerw {
-    background-color: white;
-    border-top-left-radius: 1.6em;
+@media (min-width: 800px) {
+    #header-background {
+        background-color: #333;
+        width: 100%;
+        height: 4em;
+        margin-bottom: 4em;
+    }
+    header {
+        position: absolute;
+        top: 0;
+        margin: 0;
+        padding: 1em 0;
+        width: 100%;
+    }
+    header h1 {
+        font-size: 2em;
+        margin: 0;
+        min-height: 3em;
+        padding: 0 1em 0;
+        display: inline-block;
+        background-color: #333;
+        border-bottom-right-radius: .8em;
+    }
+    header h1 img {
+        margin: 0;
+        max-width: 100%;
+        height: 2em;
+    }
+    header #roundcornerb,
+    header #roundcornerw {
+        display: inline-block;
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        top: 4em;
+        margin: 0;
+    }
+    header #roundcornerb {
+        background-color: #333;
+    }
+    header #roundcornerw {
+        background-color: white;
+        border-top-left-radius: 1.6em;
+    }
+}
+
+@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 {
@@ -105,11 +121,21 @@ 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;
+}
+}
 
 #content h1 {
     font-size: 1.8em;