add basic responsive layout

resources/app/stylesheets/app.less

@@ -118,7 +118,6 @@ img, svg {
         .app-title {
             grid-column: 1;
             font-size: 1.5rem;
-        }
 
             .app-title__hello {
 		font-size: 1rem;
@@ -126,16 +125,18 @@ img, svg {
 		font-weight: normal;
 		font-style: italic;
             }
+        }
+
 
         .header-content {
             grid-column: 2;
-        }
 
             .header-content__link {
 		display: inline-block;
 		margin-right: @accent-border-width;
             }
         }
+    }
 
     nav {
         grid-area: nav;
@@ -388,3 +389,21 @@ table {
     border: 1px solid @ci-highlight;
     height: 45rem;
 }
+
+@media (max-width: 768px) {
+
+    .grid {
+	grid-template-columns: auto;
+	grid-template-areas: "header" "nav" "main" "footer";
+
+	header {
+	    grid-template-columns: auto;
+
+	    .header-content {
+		grid-column: 1;
+		text-align: center;
+	    }
+	}
+    }
+
+}