Layout improvements for mobile

sass/style.scss

@@ -4,12 +4,18 @@ html,
 body {
   background-color: #09192f;
   color: #ffffff;
+  box-sizing: border-box;
+}
+
+* {
+  box-sizing: inherit;
 }
 
 body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
 }
 
 a:link,
@@ -28,9 +34,11 @@ h6 {
 
 /* Header */
 
-header.page-header {
-  display: flex;
-  justify-content: space-between;
+@media only screen and (min-width: 800px) {
+  header.page-header {
+    display: flex;
+    justify-content: space-between;
+  }
 }
 
 svg#dustin-logo {
@@ -68,10 +76,18 @@ nav.main-nav a:hover {
 /* Body */
 
 main.main-content {
-  max-width: 10in;
-  margin: 0 auto;
   color: #e8e8e8;
   flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+main.main-content div.main-content {
+  margin: auto;
+  width: 100%;
+  max-width: 10in;
+  padding: 0 1em;
 }
 
 .home h1.my-name {
@@ -79,6 +95,7 @@ main.main-content {
   justify-content: space-around;
   font-size: 48pt;
   font-weight: lighter;
+  text-align: center;
   margin-bottom: 0;
 }
 
@@ -141,4 +158,4 @@ footer.page-footer {
 footer.page-footer hr {
   margin-bottom: 1em;
   width: 20%;
-}
+}

templates/base.html

@@ -32,7 +32,9 @@
     </header>
 
     <main id="content" class="main-content" role="main">
+      <div class="main-content">
       {% block content %}{% endblock %}
+      </div>
     </main>
   
     <footer class="page-footer">