From d5f0d21328ecb1663fd451aabacb1081a4a85574 Mon Sep 17 00:00:00 2001 From: Asutosh Palai Date: Sun, 19 Jun 2016 14:41:00 +0530 Subject: [PATCH] Header for posts --- _config.yml | 7 + _includes/header.html | 52 +++--- _includes/home_header.html | 10 -- _layouts/layout.html | 2 + _layouts/post.html | 8 - css/base.css | 319 ------------------------------------- css/base.scss | 15 +- index.html | 6 +- 8 files changed, 48 insertions(+), 371 deletions(-) delete mode 100644 _includes/home_header.html delete mode 100644 css/base.css diff --git a/_config.yml b/_config.yml index 46b12f8..e724e57 100644 --- a/_config.yml +++ b/_config.yml @@ -9,6 +9,13 @@ sass: style: :compressed sass_dir: _sass +defaults: + - + scope: + path: "" # empty string for all files + type: posts # limit to posts + values: + is_post: true # automatically set is_post=true for all posts name: WONA url: http://wona.co.in diff --git a/_includes/header.html b/_includes/header.html index b382068..55553bc 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,28 +1,30 @@ -
-
+{% assign post = site.posts.first %} +{% if page.is_post == true %} + {% assign post = page %} +{% endif %} - +
+
+
+

{{ post.title }}

-
+
+ {% if page.is_post and post.next %} + + + Next + + {% endif %} +
+ +
+ {% if page.is_post and post.next %} + + + Previous + + {% endif %} +
+ +
diff --git a/_includes/home_header.html b/_includes/home_header.html deleted file mode 100644 index 12478ce..0000000 --- a/_includes/home_header.html +++ /dev/null @@ -1,10 +0,0 @@ -{% assign cover_post = site.posts.first %} -
-
-
-

{{ cover_post.title }}

- -
-
-
-
diff --git a/_layouts/layout.html b/_layouts/layout.html index d16f824..4ebcb32 100644 --- a/_layouts/layout.html +++ b/_layouts/layout.html @@ -6,6 +6,8 @@ {% include navbar.html %} + + {% include header.html %} {{ content }} diff --git a/_layouts/post.html b/_layouts/post.html index 42c9b2f..f0818dd 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -1,14 +1,6 @@ --- layout: layout --- -{% if page.isImageCover != false %} - {% if page.image %} -
- -
- {% endif %} -{% endif %} -

diff --git a/css/base.css b/css/base.css deleted file mode 100644 index fa67570..0000000 --- a/css/base.css +++ /dev/null @@ -1,319 +0,0 @@ -@font-face { - font-family: 'AvenirNext'; - font-style: normal; - font-weight: 300; - src: local("Avenir Next"), local("Avenir Next"), url(/fonts/avenirnext-thin.woff) format("woff"); } - -@font-face { - font-family: 'AvenirNext'; - font-style: normal; - font-weight: 500; - src: local("Avenir Next"), local("Avenir Next"), url(/fonts/avenirnext-regular.woff) format("woff"); } - -@font-face { - font-family: 'AvenirNext'; - font-style: normal; - font-weight: 700; - src: local("Avenir Next Bold"), local("Avenir Next Bold"), url(/fonts/avenirnext-bold.woff) format("woff"); } - -body { - font-size: 13px; - color: #081522; - border-top: 10px solid #363845; - background: #dddddd url("/images/bg.png"); - box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; } - -* { - font-family: Open Sans, sans-serif; } - -a { - color: inherit; - text-decoration: none; - -webkit-transition: all 0.2s ease-in; - -moz-transition: all 0.2s ease-in; - -ms-transition: all 0.2s ease-in; - -o-transition: all 0.2s ease-in; - transition: all 0.2s ease-in; } - a:hover { - color: #e74c3c; - border-bottom: 1px solid #e74c3c; - -webkit-transition: all 0.2s ease-in; - -moz-transition: all 0.2s ease-in; - -ms-transition: all 0.2s ease-in; - -o-transition: all 0.2s ease-in; - transition: all 0.2s ease-in; } - -blockquote { - border-left: 5px solid #e74c3c; - padding-left: 10px; - font-style: italic; } - -.pagination { - text-align: center; - font-style: italic; } - .pagination img { - position: relative; - top: 12px; - opacity: 0.7; - cursor: pointer; - -webkit-transition: all 0.2s ease-in; - -moz-transition: all 0.2s ease-in; - -ms-transition: all 0.2s ease-in; - -o-transition: all 0.2s ease-in; - transition: all 0.2s ease-in; } - .pagination img:hover { - opacity: 1; - -webkit-transition: all 0.2s ease-in; - -moz-transition: all 0.2s ease-in; - -ms-transition: all 0.2s ease-in; - -o-transition: all 0.2s ease-in; - transition: all 0.2s ease-in; } - .pagination img.disabled { - opacity: 0.5; } - .pagination img.disabled:hover { - opacity: 0.5; } - -.redhead { - background: #e74c3c; - border-bottom: 1px solid #c0bfc4; - min-height: 200px; } - -header { - font-family: AvenirNext, Sans-serif; - color: white; - padding: 10px 10px; - margin: auto; - text-align: center; } - header.pure-u-2-3 { - display: block; } - header h1, header h3 { - margin: 0px; } - header h3 { - font-weight: 500; } - header img { - width: 30px; } - header nav { - padding: 10px 0px 50px 0px; - margin-top: 30px; } - header nav a { - margin: 0px 10px; - padding: 2px 0px; } - header nav a:hover { - color: #333; - border-bottom: 1px solid #333; } - -.container { - position: relative; - top: -30px; - margin: auto; - display: block; } - -.cover { - background: white; - margin: auto; - display: block; - position: relative; - margin-bottom: 30px; - z-index: 100; - -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); } - .cover img { - width: 100%; - display: block; - opacity: 0.8; - -webkit-transition: all 0.2s ease-in; - -moz-transition: all 0.2s ease-in; - -ms-transition: all 0.2s ease-in; - -o-transition: all 0.2s ease-in; - transition: all 0.2s ease-in; } - .cover img:hover { - opacity: 1; - -webkit-transition: all 0.2s ease-in; - -moz-transition: all 0.2s ease-in; - -ms-transition: all 0.2s ease-in; - -o-transition: all 0.2s ease-in; - transition: all 0.2s ease-in; } - .cover img.hidden { - visibility: hidden; - height: 10em; - } - .cover .tag { - width: 100px; - position: absolute; - top: 0px; - right: 0px; - z-index: 1; } - .cover a:hover { - border: none; - color: #000; } - .cover .details { - position: absolute; - bottom: 0; - width: 100%; - background: rgba(255, 255, 255, 0.8); - padding: 20px 20px; - box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; } - .cover .details h2 { - font-weight: 500; - margin: 0 0 5px 0; } - .cover .details p { - margin: 0; } - -.content .pure-u-1-3 { - box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; } - -.article-container { - /*width: 280px;*/ - width: 30%; - margin: 0 1.5%; - margin-bottom: 50px; - float: left; - box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; } - -.article { - border: 1px solid #ccc; - background: white; - padding-bottom: 10px; - color: #6D6D6D; - -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; } - .article:hover { - color: #333; } - .article:hover img.article-cover { - opacity: 1; } - .article a:hover { - border: none; - color: #000; } - .article .details { - padding: 5px 10px; } - .article .details h3 { - margin: 0 0 10px 0; - color: #363845; } - .article .details blockquote, .article .details p { - margin: 0; - border: none; } - .article img.article-cover { - border-bottom: 1px solid #ccc; - width: 100%; - opacity: 0.8; - overflow-y: hidden; - -webkit-transition: all 0.2s ease-in; - -moz-transition: all 0.2s ease-in; - -ms-transition: all 0.2s ease-in; - -o-transition: all 0.2s ease-in; - transition: all 0.2s ease-in; } - .article .tag { - width: 100px; - position: absolute; - top: 0px; - z-index: 1; } - .article.faceoff { - border-top: 2px solid #E67E22; } - .article.bigstory { - border-top: 2px solid #4390DF; } - .article.coverstory { - border-top: 2px solid #FF5050; } - .article.techila { - border-top: 2px solid #9B59B6; } - .article.phekingnews { - border-top: 2px solid #F1C40F; } - .article.editorial { - border-top: 2px solid #2ECC71; } - .article.news { - border-top: 2px solid #1ABC9C; } - .article.almostfamous { - border-top: 2px solid #34495E; } - .article-cover-container { - height: 200px; - overflow: hidden; -} - -.post { - background: white; - padding: 10px 50px; - -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - font-size: 1.1em; - line-height: 1.5em; - color: #333332; } - .post p img { - display: block; - margin: auto; - max-width: 100%; - padding: 5px 0px; } - -footer { - background: white; } - footer div { - display: block; - margin: auto; } - footer nav { - margin: 1em 0; - float: right; } - footer nav a { - margin: 0px 10px; - padding: 2px 0px; } - -.team { - background: white; - padding: 10px 50px; - -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - font-size: 1.1em; - line-height: 1.5em; - color: #333332; - text-align: center; - font-size: 0.9em; } - .team h1, .team h3, .team h4, .team h5, .team h6 { - margin: 0px; - font-weight: 500; } - .team .person { - margin-bottom: 20px; } - -.about { - background: white; - padding: 10px 50px; - -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - font-size: 1.1em; - line-height: 1.5em; - color: #333332; - text-align: center; - font-size: 0.9em; } - -.img { - padding: 10px 0px 10px 10px; } - .img.right img { - float: right; - width: 300px; } - .img.left img { - float: left; - width: 300px; } - .img.center { - text-align: center; } diff --git a/css/base.scss b/css/base.scss index 47e99b2..77c56bd 100644 --- a/css/base.scss +++ b/css/base.scss @@ -146,7 +146,6 @@ body { margin-bottom: -($new-article-img-height / 4); background: $home-header-bg-color; padding: 0; - z-index: -10; overflow: hidden; .cover { @@ -169,8 +168,14 @@ body { width: 100%; } } - - .left { + + .scroll-buttons { + color: white; + font-size: 32px; + + } + + .left { position: absolute; top: 0; left: 0; @@ -178,7 +183,7 @@ body { width: 10%; @include gradient-horizontal($start-color: rgba(0,0,0,.4), $end-color: rgba(0,0,0,.0001)); } - .right { + .right { position: absolute; top: 0; left: auto; @@ -193,6 +198,8 @@ body { // ============= NEW-ARTICLES ============ // #new-articles { + z-index: 10; + .img-container { width: $new-article-img-width; height: $new-article-img-height; diff --git a/index.html b/index.html index c6ddf6e..69ed8e4 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,6 @@ layout: layout title: "Home" --- - -{% include home_header.html %} -
@@ -94,8 +91,7 @@ title: "Home" - Next