Blog

We created blog with load function you need to create appriopriate files. Every pack of posts has link to next pack ( blog-content-2.html etc. ). You only need to provide this url in similiar manner. Blog has two columns with first displaying featured post (1000px x 600px image). 

		<div id="blog-content-append" class="row">
			<article class="post">
				<a href="post.html" class="img-post unveil">
					<figure>
						<img src="img/placeholder2.png" data-src="img/blog/blog1.jpg" alt="Menu item"/> <-- url image post
						<div class="actions">
							<i class="icon-magnifier-add"></i>
						</div>
					</figure>
				</a>
				<div class="post-content">
					<div class="">
						<div class=""> 
							<span class="date">23 | 05 | 2014</span>
							<h3><a href="post.html">Exquisite Flavours and Ingredients</a></h3>
							<p>Pellentesque fringilla mauris id dolor ultrices elementum. In auctor odio neque, a convallis lacus eleifend in. Nunc hendrerit, est quis bibendum tempus, lectus libero ullamcorper purus, ac ultricies magna enim id eros.</p>  <-- short post text 
							<div class="blog-button"> 
								<a href="post.html" class="btn btn-default">read more</a>
							</div> 
						</div>
					</div>
				</div>
			</article>
		...


		loaded content
		<article class="load-more post" data-href="blog-content-2.html">
			<div class="load-more-text">
				<span class="hidden-xs">Load more
					<!-- <i class="fa fa-spinner fa-spin hidden-xs"></i> -->
				</span>
				<button class="visible-xs">Load more</button>
			</div>
		</article>

		...

Delete last article if you don't want to load more posts. With good url provided within article.load-more data-href, new posts will by automatically appended on section scroll.

Single post view

We created 2 variants of single post. See file post.html and post2.html for post template. Every post has view recent comments and comment form. If you want to add article images, insert your url. You can also use our classes to positioning images.

Images position
alignleft
image at the left of text
alignright
image at the right of text
nav-center
image at the center 
		custom.less

		img.alignright {float:right; margin:0 0 0 1em; }
		img.alignleft {float:left; margin:0 1em 0 0; }
		img.aligncenter {display: block; margin-left: auto; margin-right: auto; }
		.alignright {float:right; }
		.alignleft {float:left; }
		.aligncenter {display: block; margin-left: auto; margin-right: auto; }
		
		Post header

		<section id="post" class="section-scroll main-section blog">
			<div class="container-fluid">
				<div class="row">
					// post.html
					<article class="post">
						<a href="#" class="img-post ">
							<figure>
								<img src="img/blog/blog3.jpg" alt="blog item"/>
							</figure>
						</a>
						<div class="post-content">
							<div class="">
								<div class=""> 
									<span class="date">23 | 05 | 2014</span>
									<h3><a href="#">Exquisite Flavours and Ingredients</a></h3>
									<div class="post-author">
										<a href="#">interior</a>
										<a href="#">3 comments</a>
									</div>
								</div>
							</div>
						</div>
					</article>
					...
					// post2.html
					<article class="post"> 
						<figure>
							<img src="img/post.jpg" alt="post item"/>
						</figure>
					</article>

		Post text

		<div class="post-text">
			<header>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu lectus nunc. Suspendisse sagittis diam aliquet, interdum felis eget, fermentum mauris. Vivamus ipsum metus, dictum fermentum lobortis eleifend, eleifend non nibh. Integer fermentum accumsan metus. Nullam tristique interdum mollis. Praesent rutrum massa a lobortis interdum.
				</p>
			</header>
			<article>
				<img src="img/blog/post-3.jpg" class="alignleft sm-image"/>
				<p>Nullam tristique interdum mollis. Praesent rutrum massa a lobortis interdum...
		...