Added contact page, changed other stuff

This commit is contained in:
Tim Stallard 2016-04-08 20:17:12 +01:00
parent 247aadc479
commit 9284695fd3
6 changed files with 131 additions and 13 deletions

View File

@ -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>

View File

@ -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..." %>

View File

@ -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;

View File

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

View File

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

View File

@ -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">