added contact and more

assets/_default/list.scss

@@ -2,6 +2,7 @@
 @import '../import/main.scss';
 @import '../import/nav.scss';
 @import '../import/footer.scss';
+@import '../import/include.scss';
 
 main {
   margin: 60px 0 0 0;

assets/_default/single.scss

@@ -3,6 +3,7 @@
 @import '../import/main.scss';
 @import '../import/nav.scss';
 @import '../import/footer.scss';
+@import '../import/include.scss';
 
 .section-article {
   article {
@@ -21,17 +22,7 @@
       margin-bottom: 15px;
       max-width: 100%;
     }
-    a {
-      border-bottom: 1px solid;
-      color: $white;
-      margin: -5px;
-      padding: 5px;
-      transition: border .2s, color .2s;
-      &:hover {
-        color: $red;
-        text-decoration: none;
-      }
-    }
+    @include a-underlined;
     h2 {
       font-size: .6em;
     }

assets/errorpages.scss

@@ -1,7 +1,8 @@
 @import 'import/colors.scss';
 @import 'import/main.scss';
 @import 'import/nav.scss';
-@import 'import/footer';
+@import 'import/footer.scss';
+@import 'import/include.scss';
 
 header {
   margin: 150px 0;

assets/import/include.scss

@@ -0,0 +1,13 @@
+@mixin a-underlined {
+  a {
+    border-bottom: 1px solid;
+    color: $white;
+    margin: -5px;
+    padding: 5px;
+    transition: border .2s, color .2s;
+    &:hover {
+      color: $red;
+      text-decoration: none;
+    }
+  }
+}

assets/index.scss

@@ -2,28 +2,49 @@
 @import 'import/main.scss';
 @import 'import/nav.scss';
 @import 'import/footer.scss';
+@import 'import/include.scss';
 
 .section.header {
   align-items: center;
   background: $bg60;
   display: flex;
-  height: 350px;
-  order: -1;
-  text-align: center;
+  @include a-underlined;
   header {
+    margin: 60px auto;
     max-width: 600px;
-    margin: auto;
+    text-align: center;
     h1 {
       font-size: 2.5em;
       margin: auto;
     }
   }
+  .section.contact {
+    background: $bg70;
+    border-radius: 5px;
+    display: flex;
+    padding: 20px;
+    margin: 60px auto;
+    max-width: 500px;
+    .table.contact {
+      margin: 0 auto;
+      white-space: nowrap;
+      tr {
+        td {
+          &:first-of-type {
+            padding: 5px 30px 5px 0;
+            text-align: right;
+          }
+        }
+      }
+    }
+  }
 }
 
 main {
   margin: 60px 0 0 0;
 }
 
+
 .section.latest {
   color: $white-dark;
   font-size: 1.5em;
@@ -85,11 +106,6 @@ main {
     }
   }
 }
-@media (max-width: 900px) {
-  .section.articles {
-    grid-template-columns: repeat(1, 1fr);
-  }
-}
 
 .section.projects {
   display: grid;
@@ -142,11 +158,35 @@ main {
   }
 }
 @media (max-width: 900px) {
+  .section.articles {
+    grid-template-columns: repeat(1, 1fr);
+  }
   .section.projects {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 @media (max-width: 600px) {
+  .section.header {
+    .section.contact {
+      border-radius: 0;
+      padding: 10px;
+      margin: 60px -20px;
+      max-width: none;
+      overflow-x: auto;
+      width: 100vw;
+      .table.contact {
+        margin: 0 auto;
+        white-space: nowrap;
+        tr {
+          td {
+            &:first-of-type {
+              padding: 5px 20px 5px 0;
+            }
+          }
+        }
+      }
+    }
+  }
   .section.projects {
     grid-template-columns: repeat(1, 1fr);
   }

assets/projects/list.scss

@@ -2,6 +2,7 @@
 @import '../import/main.scss';
 @import '../import/nav.scss';
 @import '../import/footer.scss';
+@import '../import/include.scss';
 
 main {
   margin: 60px 0 0 0;