Added contact page, changed other stuff

src/documents/contact.html

@@ -1,7 +1,34 @@
 ---
-layout: contentpage
+layout: core
 title: "Contact"
 icon: "envelope-o"
 order: 1
 ---
-This will probably have some fancy panels or something.
+<div class="animated">
+  <div class="animated">
+    <div>
+      <div class="icon fa fa-envelope"></div>
+      If you'd like to send me an email, you can reach me on <a href="mailto:contact@timstallard.me.uk">contact@timstallard.me.uk</a>.
+    </div>
+  </div>
+  <div class="animated">
+    <div>
+      You'll also find me elsewhere around the internet...
+      <br>
+      <a class="icon fa fa-github" style="display: inline-block; margin-right: 0.2em;" href="https://github.com/TimStallard"></a>
+      <a class="icon fa fa-twitter" style="display: inline-block;" href="https://twitter.com/Tim_Stallard"></a>
+    </div>
+  </div>
+  <div class="animated">
+    <div>
+      Or, if you're feeling lazy, you can just fill out this form:
+      <form>
+        <input name="name" placeholder="Name"></input>
+        <input name="subject" placeholder="Subject"></input>
+        <input name="contact" placeholder="Email/Phone/Twitter"></input>
+        <textarea></textarea>
+        <input type="submit" value="Send!"></input>
+      </form>
+    </div>
+  </div>
+</div>

src/documents/projects.html.ejs

@@ -1,5 +1,5 @@
 ---
-layout: "contentpage"
+layout: "imgcontentpage"
 title: "Projects"
 icon: "wrench"
 order: 2
@@ -8,3 +8,4 @@ order: 2
 <% projects.forEach(function(project){ %>
   <a href="<%- project.url %>"><%= project.title %></a>
 <% }) %>
+<% document.subtitle = "Some things that I've been working on..." %>

src/documents/styles.css.scss

@@ -95,19 +95,12 @@ body{
       @media(orientation: landscape), (min-width: 800px){
         max-height: 50vh;
       }
-      background:
-        linear-gradient(
-          rgba(0, 0, 0, 0.5),
-          rgba(0, 0, 0, 0.5)
-        ),
-        url("/img/contact.jpg");
-      background-size: cover;
-      background-position: 50% 50%;
       display: flex;
       z-index: 10;
       #headerdesc{
         margin: auto;
         color: white;
+        text-align: center;
         h1{
           font-size: 3em;
         }
@@ -295,6 +288,100 @@ body{
   }
 }
 
+#content[data-slug="contact"]{
+  >div{ //page container
+    flex-grow: 1;
+    display: flex;
+    >div{ //contact panels
+      text-align: center;
+      display: flex;
+      >div{ //centered sections
+        margin: auto;
+        >.icon{
+          display: block;
+          text-decoration: none;
+        }
+        a{
+          color: white;
+        }
+        form{
+          width: 80%;
+          margin-left: auto;
+          margin-right: auto;
+          input, textarea{
+            width: 100%;
+            margin: 5px;
+            border-radius: 3px;
+          }
+          input{
+            font-size: 1.2em;
+            display: block;
+            text-align: center;
+          }
+          textarea{
+            height: 200px;
+          }
+        }
+      }
+    }
+  }
+  @media(min-width: 800px){
+    >div{ //page container
+      flex-direction: row;
+      >div{ //contact panels
+        width: 33%;
+        flex-grow: 1;
+        text-align: center;
+        display: flex;
+        &:nth-child(1n+2){
+          border-left: solid 2px white;
+        }
+        .icon{
+          font-size: 12vw;
+        }
+
+        @at-root .animations#{&}{
+          animation-name: slideInUp;
+        }
+        &:nth-child(1){
+          @at-root .animations#{&}{
+            animation-delay: 0ms;
+          }
+        }
+        &:nth-child(2){
+          @at-root .animations#{&}{
+            animation-delay: 200ms;
+          }
+        }
+        &:nth-child(3){
+          @at-root .animations#{&}{
+            animation-delay: 400ms;
+          }
+        }
+      }
+    }
+  }
+  @media(max-width: 799px){
+    >div{
+      flex-direction: column;
+      @at-root .animations#{&}{
+        animation-name: fadeInUp;
+      }
+      >div{
+        border-bottom: 2px solid white;
+        padding-top: 20px;
+        padding-bottom: 20px;
+        &:last-child{
+          border-bottom: none;
+        }
+        >.icon{
+          font-size: 15vw;
+        }
+      }
+    }
+  }
+}
+
 .animations{
   #imgcontent{
     animation-name: fadeInUp;

src/layouts/imgcontentpage.html.ejs

@@ -1,10 +1,13 @@
 ---
-layout: core.html
+layout: core
 ---
 <div id="imgcontent" class="animated">
-  <div id="headerimg" class="animated">
+  <div id="headerimg" class="animated" style="background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),url('/img/headers<%- document.url %>.jpg');background-size: cover;background-position: 50% 50%;">
     <div id="headerdesc">
       <h1><%- document.title %></h1>
+      <% if(document.subtitle){ %>
+        <h2><%- document.subtitle %></h2>
+      <% } %>
     </div>
   </div>
   <div id="maincontent" class="animated">