Some small template fixes

[garden.git] / templates / style / screen.css

diff --git a/templates/style/screen.css b/templates/style/screen.css
index 11e561161649aa519711ef87b65d5e475a1dd1d9..41acdb340d5deb7fbb867ab1b8b43e3ed05839e8 100644 (file)
--- a/templates/style/screen.css
+++ b/templates/style/screen.css
@@ -1,6 +1,6 @@
 html {
        line-height: 1.3;
-       -webkit-text-size-adjust:100%
+       -webkit-text-size-adjust: 100%
 }
 
 body {
@@ -15,15 +15,16 @@ body {
        grid-template:
                "head head" 7em
                "nav main" auto
-               "nav foot" 2em / 15em 1fr;
+               "foot foot" 2em / 15em 1fr;
        margin: 0 auto;
        min-height: 100vh;
        padding: 0;
-       width: 60em;
+       max-width: 60em;
 }
 
 header {
        grid-area: head;
+       padding: 0 1em 2em 1em;
 }
 
 header h1 {
@@ -32,6 +33,7 @@ header h1 {
 
 nav {
        background-color: rgb(250, 250, 250);
+       border-radius: 10px;
        grid-area: nav;
        padding: 1em;
 }
@@ -57,6 +59,16 @@ footer {
        text-align: right;
 }
 
+@media (max-width: 800px) {
+       .container {
+               grid-template:
+                       "head" 7em
+                       "main" auto
+                       "nav" auto
+                       "foot" 2em / 1fr;
+       }
+}
+
 img {
        max-width: 100%;
        margin: 0 auto;