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; module.exports = docpadConfig;

View File

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

View File

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

View File

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

View File

@ -2,13 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title><%= document.title %> // Tim Stallard</title> <title><%= document.title %> // Tim Stallard</title>
<link rel="stylesheet" href="/libs/Animate.css" /> <%- getBlock("styles").toHTML() %>
<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("scripts").toHTML() %> <%- getBlock("scripts").toHTML() %>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#6d0000"> <meta name="theme-color" content="#6d0000">