diff --git a/src/documents/contact.html b/src/documents/contact.html
index aff31d5..78b5b8d 100644
--- a/src/documents/contact.html
+++ b/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.
+
+
+
+
+ You'll also find me elsewhere around the internet...
+
+
+
+
+
+
+
+ Or, if you're feeling lazy, you can just fill out this form:
+
+
+
+
diff --git a/src/documents/projects.html.ejs b/src/documents/projects.html.ejs
index 96343f2..8b8ac79 100644
--- a/src/documents/projects.html.ejs
+++ b/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){ %>
<%= project.title %>
<% }) %>
+<% document.subtitle = "Some things that I've been working on..." %>
diff --git a/src/documents/styles.css.scss b/src/documents/styles.css.scss
index 01fbf07..e820a10 100644
--- a/src/documents/styles.css.scss
+++ b/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;
diff --git a/src/files/img/contact.jpg b/src/files/img/headers/blog.jpg
similarity index 100%
rename from src/files/img/contact.jpg
rename to src/files/img/headers/blog.jpg
diff --git a/src/files/img/projects.jpg b/src/files/img/headers/projects.jpg
similarity index 100%
rename from src/files/img/projects.jpg
rename to src/files/img/headers/projects.jpg
diff --git a/src/layouts/imgcontentpage.html.ejs b/src/layouts/imgcontentpage.html.ejs
index e6449ef..c21d193 100644
--- a/src/layouts/imgcontentpage.html.ejs
+++ b/src/layouts/imgcontentpage.html.ejs
@@ -1,10 +1,13 @@
---
-layout: core.html
+layout: core
---
-