Shortcode pro hero blok

content/_index.md

@@ -1,2 +1,7 @@
 +++
 +++
+
+{{ hero(content="
+	<h1>O projektu</h1>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac dolor justo. Ut malesuada a velit sed pharetra. Suspendisse fermentum augue sed scelerisque luctus. Ut faucibus elementum bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis semper eros sit amet magna venenatis consequat. Curabitur id nisl eget diam commodo cursus. Nunc ligula ligula, sodales vitae dictum quis, egestas at justo. Suspendisse potenti. Donec dictum vestibulum leo, vitae ullamcorper ligula imperdiet vitae.</p>
+") }}

sass/style.scss

@@ -47,6 +47,25 @@ header {
 	}
 }
 
+main {
+
+	.hero {
+		width: 100vw;
+		position: relative;
+		left: 50%;
+		margin-left: -50vw;
+		background-color: #C61730;
+		color: #fff;
+		padding: 4em 0;
+		text-align: center;
+
+		h1 {
+			margin-bottom: 2em;
+			font-size: 1.6em;
+		}
+	}
+}
+
 footer {
 	background-color: #C61730;
 	color: #fff;
@@ -72,3 +91,8 @@ footer {
 		}
 	}
 }
+
+main, .wrap {
+	max-width: 60em;
+	margin: 0 auto;
+}

templates/shortcodes/hero.html

@@ -0,0 +1,5 @@
+<div class="hero">
+	<div class="wrap">
+		{{ content | safe }}
+	</div>
+</div>