add basic responsive layout

resources/app/stylesheets/app.less

@@ -118,22 +118,23 @@ img, svg {
         .app-title {
             grid-column: 1;
             font-size: 1.5rem;
-        }
 
-        .app-title__hello {
-            font-size: 1rem;
-            margin-left: @text-padding-h;
-            font-weight: normal;
-            font-style: italic;
+            .app-title__hello {
+		font-size: 1rem;
+		margin-left: @text-padding-h;
+		font-weight: normal;
+		font-style: italic;
+            }
         }
 
+
         .header-content {
             grid-column: 2;
-        }
 
-        .header-content__link {
-            display: inline-block;
-            margin-right: @accent-border-width;
+            .header-content__link {
+		display: inline-block;
+		margin-right: @accent-border-width;
+            }
         }
     }
 
@@ -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;
+	    }
+	}
+    }
+
+}