Better phone support for layout

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

diff --git a/templates/style/screen.css b/templates/style/screen.css
index cb1176c2a421df8788747b08811d244f86755cd8..7fbf9d3bc32e7ec4d8dec4e56628ea7407261a00 100644 (file)
--- a/templates/style/screen.css
+++ b/templates/style/screen.css
@@ -1,6 +1,6 @@
 html {
-       line-height: 1.15;
-       -webkit-text-size-adjust:100%
+       line-height: 1.3;
+       -webkit-text-size-adjust: 100%
 }
 
 body {
@@ -19,7 +19,7 @@ body {
        margin: 0 auto;
        min-height: 100vh;
        padding: 0;
-       width: 60em;
+       max-width: 60em;
 }
 
 header {
@@ -57,6 +57,20 @@ footer {
        text-align: right;
 }
 
+@media (max-width: 800px) {
+       .container {
+               grid-template:
+                       "head" 7em
+                       "main" auto
+                       "nav" auto
+                       "foot" 2em / 1fr;
+       }
+
+       header {
+               padding: 1em;
+       }
+}
+
 img {
        max-width: 100%;
        margin: 0 auto;
@@ -130,3 +144,12 @@ blockquote {
        border-radius: 0 0.25rem 0.25rem 0;
 }
 
+a.feed {
+       color: #f26522;
+}
+
+a.feed:hover {
+       background: none !important;
+       color: #bc4e1b !important;
+}
+