diff --git a/src/documents/blog.html b/src/documents/blog.html
index 7a6918f..bdc355f 100644
--- a/src/documents/blog.html
+++ b/src/documents/blog.html
@@ -1,5 +1,5 @@
---
-layout: "contentpage"
+layout: "imgcontentpage"
title: "Blog"
icon: "pencil"
order: 2
diff --git a/src/documents/styles.css.scss b/src/documents/styles.css.scss
index 17f6f1a..8d56f72 100644
--- a/src/documents/styles.css.scss
+++ b/src/documents/styles.css.scss
@@ -20,6 +20,7 @@ body{
#header{
text-align: center;
#nav{
+ margin-bottom: 10px;
>a{
text-decoration: none;
font-size: 2.7em;
@@ -53,12 +54,15 @@ body{
transition: background-color 400ms, color 400ms;
background-color: transparent;
display: flex;
+ flex-direction: column;
#lightcontent{
background-color: white;
color: black;
flex-grow: 1;
- margin-top: 20px;
+ box-shadow: 0px 20px 10px -10px #6d0000 inset, 0px -20px 10px -10px #6d0000 inset;
+ padding-top: 10px;
+ padding-bottom: 20px;
>div{
width: 80%;
max-width: 1100px;
@@ -67,6 +71,48 @@ body{
margin-top: 10px;
}
}
+
+ #imgcontent{
+ >#headerimg{
+ width: 100%;
+ height: calc(100vh - 165px + 50px);
+ min-height: 350px;
+ box-shadow: 0px 50px 30px -30px #6d0000 inset, 0px -50px 30px -30px white inset;
+ @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;
+ h1{
+ font-size: 3em;
+ }
+ }
+ }
+ >#maincontent{
+ width: 100%;
+ background-color: white;
+ color: black;
+ min-height: 100px;
+ display: block;
+ @media(min-width: 800px){
+ min-height: calc(50vh - 165px);
+ }
+ >div{
+
+ }
+ }
+ }
}
#footer{
@@ -93,10 +139,33 @@ body{
.animations[data-slug="index"]{
>div{
- animation-name: slideInRight;
+ animation-name: fadeIn;
}
}
.animations #lightcontent{
animation-name: slideInUp;
}
+
+.animations{
+ #headerimg{
+ //animation-name: fadeInUp;
+ }
+ #maincontent{
+ //animation-name: fadeInUpBig;
+ //animation-delay: 150ms;
+ }
+ #imgcontent{
+ animation-name: fadeInUp;
+ }
+ &.is-exiting{
+ #imgcontent{
+ animation-name: fadeOutDown;
+ animation-direction: normal;
+ }
+ #headerimg, #maincontent{
+ animation-name: none;
+ animation-duration: 0ms;
+ }
+ }
+}
diff --git a/src/files/img/contact.jpg b/src/files/img/contact.jpg
new file mode 100644
index 0000000..d50afc7
Binary files /dev/null and b/src/files/img/contact.jpg differ
diff --git a/src/files/img/projects.jpg b/src/files/img/projects.jpg
new file mode 100644
index 0000000..822eff0
Binary files /dev/null and b/src/files/img/projects.jpg differ
diff --git a/src/layouts/imgcontentpage.html.ejs b/src/layouts/imgcontentpage.html.ejs
index b3b960e..e6449ef 100644
--- a/src/layouts/imgcontentpage.html.ejs
+++ b/src/layouts/imgcontentpage.html.ejs
@@ -1,9 +1,13 @@
---
layout: core.html
---
-
-