Fügt contact form hinzu.

10 files changed, 139 insertions, 12 deletions

diff --git a/content/contact.md b/content/contact.md
new file mode 100644
index 0000000..263c018
--- /dev/null
+++ b/content/contact.md
@@ -0,0 +1,8 @@
++++
+date = "2016-11-18T11:10:19+02:00"
+draft = false 
+title = "contact me"
+type = "contact"
+layout = "single"
+
++++
diff --git a/content/thankyou.md b/content/thankyou.md
new file mode 100644
index 0000000..9d080a4
--- /dev/null
+++ b/content/thankyou.md
@@ -0,0 +1,8 @@
++++
+date = "2016-11-18T11:10:19+02:00"
+draft = false 
+title = "thank you"
+type = "thankyou"
+layout = "single"
+
++++
diff --git a/gulpfile.js b/gulpfile.js
index e413a14..43c1167 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -13,7 +13,7 @@ gulp.task('concat', function() {
 gulp.task('uncss', function() {
 	return gulp.src('static/concat.css')
 		.pipe(uncss({
-		html: ['public/*.html', 'public/projects/*.html', 'public/journal/*.html', 'public/journal/**/*.html'],
+		html: ['public/*.html', 'public/projects/*.html', 'public/journal/*.html', 'public/journal/**/*.html', 'public/thankyou/*.html', 'public/contact/*.html'],
 		ignore: ['.text-right', '.text-left']
 		}))
 		.pipe(cssnano())
@@ -27,6 +27,12 @@ gulp.task('minifyhtml', function() {
 	gulp.src('public/projects/*.html')
 		.pipe(htmlmin({collapseWhitespace: true}))
 		.pipe(gulp.dest('public/projects/'));
+	gulp.src('public/thankyou/*.html')
+		.pipe(htmlmin({collapseWhitespace: true}))
+		.pipe(gulp.dest('public/thankyou/'));
+	gulp.src('public/contact/*.html')
+		.pipe(htmlmin({collapseWhitespace: true}))
+		.pipe(gulp.dest('public/contact/'));
 	gulp.src('public/journal/*/*.html')
 		.pipe(htmlmin({collapseWhitespace: true}))
 		.pipe(gulp.dest('public/journal/'));
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 0c2fc41..8f648dd 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -3,7 +3,7 @@
 	<header><p><a href="{{$.Site.BaseURL}}" class="black-link header-link" title="go back">journal</a></p></header>
 </div>
 				{{ range .Data.Pages }}
-<div class="container journal">
+<div class="container journal content">
 	<div class="row">
 		<div class="twelve columns article">
 			<ul>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 0f61d2a..6f53645 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -2,7 +2,7 @@
 <div class="row">
     <header><p>{{.Title}}</p></header>
 </div>
-<div class="container journal">
+<div class="container content journal">
 	<div class="row">
 		<div class="twelve columns article">
 			<div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
diff --git a/layouts/contact/single.html b/layouts/contact/single.html
new file mode 100644
index 0000000..c497c55
--- /dev/null
+++ b/layouts/contact/single.html
@@ -0,0 +1,33 @@
+{{partial "header.tmpl" .}}
+<div class="row">
+    <header><p>{{.Title}}</p></header>
+</div>
+<div class="container content">
+	<div class="row">
+		<form class="contactform" action="https://www.iamfabulous.de/submit/" method="POST">
+		  <div class="row">
+		    <div class="six columns">
+		      <label for="from">your email</label>
+		      <input class="u-full-width" placeholder="mail@domain.com" id="from" name="from" type="email">
+		    </div>
+		    <div class="six columns">
+		      <label for="subject">subject</label>
+		      <input class="u-full-width" placeholder="hello" id="subject" name="subject" type="text">
+		    </div>
+		  </div>
+		  <label for="message">message</label>
+		  <textarea class="u-full-width" placeholder="type your message here …" id="message" name="message"></textarea>
+		  <!--label class="example-send-yourself-copy">
+		    <input type="checkbox">
+		    <span class="label-body">Send a copy to yourself</span>
+		  </label-->
+		<input class="button-primary contactform-button" value="submit" type="submit">
+		<a style="margin-left: 10px;" class="button" href="../" title="back to index">cancel</a>
+		</form>
+	<div/>
+<div/>
+<div class="row center">
+	<p class="twelve columns">
+	</p>
+</div>
+{{partial "footer.tmpl" .}}
diff --git a/layouts/index.html b/layouts/index.html
index 94aa532..79e4bdc 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -5,7 +5,7 @@
 <div class="container main">
 	<div class="row">
 		<div class="twelve columns">
-           	 	<a href="https://www.complicissimus.de" title="blog">my blog</a>
+           	 	<a href="https://www.complicissimus.de" title="blog">the blog</a>
 		</div>
 		<div class="twelve columns margin-top-small">
             		<a href="projects/" title="side projects">projects</a>
@@ -14,7 +14,7 @@
             		<a href="journal/" title="journal">journal</a>
 		</div>
 		<div class="twelve columns margin-top-small">
-            		<a href="https://www.complicissimus.de/about/#kontakt" title="contact">contact</a>
+            		<a href="contact/" title="contact">contact</a>
 		</div>
 	</div>
 </div>
diff --git a/layouts/thankyou/single.html b/layouts/thankyou/single.html
new file mode 100644
index 0000000..aa93c50
--- /dev/null
+++ b/layouts/thankyou/single.html
@@ -0,0 +1,17 @@
+{{partial "header.tmpl" .}}
+<div class="row">
+    <header><p>{{.Title}}</p></header>
+</div>
+<div class="container content journal">
+	<div class="row">
+		<div class="twelve columns article">
+			Thank you!
+		</div>
+	</div>
+</div>
+<div class="row center">
+	<p class="twelve columns" style="margin-top: 20px">
+		<a class="button" href="../" title="back to index">go back</a>
+	</p>
+</div>
+{{partial "footer.tmpl" .}}
diff --git a/layouts/uhttpd/single.html b/layouts/uhttpd/single.html
index cfcab76..13314bd 100644
--- a/layouts/uhttpd/single.html
+++ b/layouts/uhttpd/single.html
@@ -70,10 +70,10 @@ nav.primary ul li a:hover {
     <nav class="container primary">
         <div class="sixteen columns">
             <ul>
-		<li><a href=".." title="start page">home</a></li>
+		<li><a href="{{$.Site.BaseURL}}" title="start page">home</a></li>
                 <li><a href="https://www.complicissimus.de/" title="my blog">my blog</a></li>
-                <li><a href="/projects/" title="side projects">projects</a></li>
-                <li><a href="https://www.complicissimus.de/about/#kontakt" title="contact">contact</a></li>
+		<li><a href="{{$.Site.BaseURL}}projects/" title="side projects">projects</a></li>
+		<li><a href="{{$.Site.BaseURL}}contact/" title="contact">contact</a></li>
 	    </ul>
         </div>
     </nav>
diff --git a/static/custom.css b/static/custom.css
index 588ab52..661e2a8 100644
--- a/static/custom.css
+++ b/static/custom.css
@@ -51,14 +51,16 @@ a:hover {
 .center {
 	text-align: center;
 }
+.content {
+	margin-top: 50px;
+	width: 100%;
+	padding: 15px 0 0 ;
+}
 .journal {
-	background-color: #efefef;
 	color: #1f1f1f;
-	margin-top: 50px;
+	background-color: #efefef;
 	border: 1px solid #e0e0e0;
 	box-shadow: 0 0 2px #ddd;
-	width: 100%;
-	padding: 15px 0 0 ;
 }
 .article {
 	text-align: left;
@@ -108,3 +110,56 @@ a:hover {
 		text-align: left;
 	}
 } 
+::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+	color:    #3f3f3f;
+	opacity:  .75;
+}
+:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+	color:    #3f3f3f;
+	opacity:  .75;
+}
+::-moz-placeholder { /* Mozilla Firefox 19+ */
+	color:    #3f3f3f;
+	opacity:  .75;
+}
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+	color:    #3f3f3f;
+	opacity:  .75;
+}
+.contactform input{
+	color: #000;
+}
+.contactform textarea {
+	color: #000;
+}
+.contactform:hover {
+}
+.contactform-button {
+	/*
+  background-color: #1f1f1f !important;
+  border-color: #efefef !important;  
+	color: #1f1f1f !important;
+        text-shadow: 0 0 1px #1f1f1f;
+        transition: text-shadow 1s;
+  */
+	color: #3f3f3f !important;
+}
+.contactform-button:hover {
+	text-decoration: underline;
+	color: inherit !important;
+        text-shadow: 0 0 1px #efefef;
+        transition: color 1s;
+}
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+	background-color: #efefef;
+	border: 1px solid #e0e0e0 !important;
+	box-shadow: 0 0 2px #ddd !important;
+  }