Add news detail layout

Tom Rutgers committed Aug 19, 2018

commit 89040c4cb29eb306e53df335e06e6805591cf646

Showing 4 changed files with 98 additions and 1 deletions

config.rb +1 -1

@@	@@ -28,8 +28,8 @@ page "/admin/*", layout: false

	activate :blog do \|blog\|
	blog.permalink = "news/{year}/{title}.html"
-
	blog.sources = "posts/{title}.html"
+	blog.layout = "news-detail"
	end

	# With alternative layout

source/layouts/news-detail.slim +34 -0

@@	@@ -0,0 +1,34 @@
+	doctype html
+	html
+	head
+	meta content=("text/html; charset=UTF-8") http-equiv="Content-Type"
+	meta charset="utf-8"
+	meta content="ie=edge" http-equiv="x-ua-compatible"
+	meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"
+
+	// Use the title from a page's frontmatter if it has one
+	title= current_page.data.title \|\| "Kaldi - Middleman + Netlify CMS Example"
+
+	= stylesheet_link_tag "all"
+
+	// Include netlify identity widget for user registration
+	script src="https://identity.netlify.com/v1/netlify-identity-widget.js" type="text/javascript"
+	body
+	= partial 'partials/shared/header-primary'
+
+	main.main-content
+	.news-detail
+	.container
+	.row
+	.title
+	- date = Date.parse current_page.data.date.to_s
+	span.date = date.strftime("%d-%m-%Y")
+	h1 = current_page.data.title
+
+	.row
+	.image
+	= image_tag current_page.data.image
+
+	.row.content
+
+	= yield
	\ No newline at end of file

source/stylesheets/all.css.scss +1 -0

@@	@@ -17,6 +17,7 @@
	@import 'demo/products/product-detail';

	@import 'demo/news/news';
+	@import 'demo/news/news-detail';

	@import 'demo/homepage/hero';
	@import 'demo/homepage/story';
	\ No newline at end of file

source/stylesheets/demo/news/_news-detail.scss +62 -0

@@	@@ -0,0 +1,62 @@
+	.news-detail {
+	border-top: 1px solid $background-primary-color;
+	.title, .content {
+	@extend %column;
+	@extend %col-md-8;
+	@extend %col-sm-10;
+	@extend %col-md-offset-2;
+	@extend %col-sm-offset-1;
+	margin-top: 60px;
+	margin-bottom: 60px;
+	}
+	h1 {
+	font-size: 48px;
+	line-height: 56px;
+	margin-top: 15px;
+	}
+	p {
+	margin-bottom: 30px;
+	}
+
+	a {
+	color: $primary-color;
+	}
+	li {
+	font-size: 18px;
+	}
+
+	ul, ol {
+	margin-bottom: 30px;
+	}
+
+	.date {
+	font-size: 24px;
+	color: rgba(102, 102, 102, 1)
+	}
+
+	.image {
+	@extend %column;
+	@extend %col-md-10;
+	@extend %col-sm-12;
+	@extend %col-md-offset-1;
+
+	img {
+	@extend %img-responsive;
+	}
+	}
+
+	@media screen and (max-width: $screen-md-max) {
+	.title, .content {
+	margin-top: 30px;
+	margin-bottom: 30px;
+	}
+	h1 {
+	font-size: 32px;
+	line-height: 40px;
+	margin-top: 10px;
+	}
+	.date {
+	font-size: 18px;
+	}
+	}
+	}
	\ No newline at end of file