Changed some animations, and properly implemented use of style/script blocks (meta still required?)

This commit is contained in:
Tim Stallard 2016-04-13 12:04:05 +01:00
parent d9cc10e325
commit 345411ad17
5 changed files with 35 additions and 20 deletions

View File

@ -32,7 +32,31 @@ var docpadConfig = {
}
]
}
}
},
templateData: {
site: {
scripts: [
]
}
},
events: {
populateCollections: function(){
this.docpad.blocks["scripts"].add([
"/libs/jquery.min.js",
"/libs/jquery.smoothState.min.js",
"/script.js"
], {
defer: false
});
this.docpad.blocks["styles"].add([
"/libs/Animate.css",
"/libs/fa.css",
"/styles.css",
"https://fonts.googleapis.com/css?family=Open+Sans"
]);
}
}
}
module.exports = docpadConfig;

View File

@ -49,7 +49,7 @@ order: 1
$("#formcontainer").addClass("completed");
setTimeout(function(){
$("#formcontainer").addClass("completedmsg");
}, 400);
}, 800);
}
)
e.preventDefault();

View File

@ -18,7 +18,7 @@ $(document).ready(function(){
duration: 0,
render: function (container, newContent){
container.removeClass("is-exiting");
container.attr("data-slug", $(newContent).filter("meta").data("slug"))
container.attr("data-slug", $(newContent).filter("meta").data("slug"));
container.html(newContent);
var newmenu = $(newContent).filter("meta").data("menu");

View File

@ -71,6 +71,9 @@ body{
flex-direction: column;
#lightcontent{
@at-root .animations#{&}{
animation-name: slideInUp;
}
background-color: white;
color: black;
flex-grow: 1;
@ -96,6 +99,9 @@ body{
}
#imgcontent{
@at-root .animations#{&}{
animation-name: fadeInUp;
}
>#headerimg{
width: 100%;
height: calc(100vh - 165px + 50px);
@ -330,7 +336,7 @@ body{
}
&.completed{
#inputscontainer{
animation-name: zoomOut;
animation-name: zoomOutUp;
}
}
&.completedmsg{
@ -437,15 +443,6 @@ body{
}
}
.animations{
#imgcontent{
animation-name: fadeInUp;
}
#lightcontent{
animation-name: slideInUp;
}
}
.blogpost{
width: 100%;
max-width: 800px;

View File

@ -2,13 +2,7 @@
<html lang="en">
<head>
<title><%= document.title %> // Tim Stallard</title>
<link rel="stylesheet" href="/libs/Animate.css" />
<link rel="stylesheet" href="/libs/fa.css" />
<link rel="stylesheet" href="/styles.css" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></link>
<script src="/libs/jquery.min.js"></script>
<script src="/libs/jquery.smoothState.min.js"></script>
<script src="/script.js"></script>
<%- getBlock("styles").toHTML() %>
<%- getBlock("scripts").toHTML() %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#6d0000">