style: resize some bits on small screens

diff --git a/chloro/phyll/static/css/style.scss b/chloro/phyll/static/css/style.scss
index 874cd9b5d59f61003f411e8d29ddefb4a875bc40..8bb69bb5011af8443c0e01acb084ecea42bc2659 100644 (file)
--- a/chloro/phyll/static/css/style.scss
+++ b/chloro/phyll/static/css/style.scss
@@ -59,6 +59,9 @@ main, footer {
        margin: 0 4em;
        padding: 1em;
        max-width: 70em;
+       @media screen and (max-width: 50em) {
+               margin: 0;
+       }
 }
 
 main {
@@ -74,6 +77,9 @@ main {
                display: inline-block;
                text-decoration: none;
                font-size: 500%;
+               @media screen and (max-width: 50em) {
+                       font-size: 200%;
+               }
                font-weight: bold;
                padding-top: 0.5em;
                line-height: 50%;
@@ -96,6 +102,9 @@ main {
                h2 {
                        margin: 0;
                        font-size: 400%;
+                       @media screen and (max-width: 50em) {
+                               font-size: 200%;
+                       }
                        font-weight: bold;
                        text-transform: uppercase;
                }