Add news index page
Tom Rutgers
committed Aug 18, 2018
commit 372598be413ea881f595f2ff5a88b47c59c7503d
Showing 7
changed files with
152 additions
and 142 deletions
data/settings/navigation.yml
+1
-1
| @@ | @@ -2,5 +2,5 @@ nav_items: |
| - {label: 'Home', path: '/'} | |
| - {label: 'Story', path: '#'} | |
| - {label: 'Products', path: '/products/'} | |
| - | - {label: 'News', path: '#'} |
| + | - {label: 'News', path: '/news/'} |
| - {label: 'Contact', path: '#'} | |
| \ No newline at end of file | |
source/news.html.slim
+8
-0
| @@ | @@ -0,0 +1,8 @@ |
| + | section.homepage-news.news |
| + | .container |
| + | h2 |
| + | | News |
| + | .news-items |
| + | //get the first two most recent posts |
| + | - blog.articles.each do | post | |
| + | = partial 'partials/news/news_item', locals: {post: post} |
| \ No newline at end of file | |
source/partials/homepage/_news.slim
+2
-21
| @@ | @@ -1,27 +1,8 @@ |
| - | section.homepage-news |
| + | section.homepage-news.news |
| .container | |
| h2 | |
| | News | |
| .news-items | |
| //get the first two most recent posts | |
| - blog.articles.first(2).each do | post | | |
| - | .news-item |
| - | .row |
| - | .image |
| - | - if post.data.image |
| - | = link_to post |
| - | = image_tag post.data.image |
| - | |
| - | .date |
| - | //make sure the post date is actually a date |
| - | - date = Date.parse post.data.date.to_s |
| - | span = date.strftime("%d-%m-%Y") |
| - | |
| - | .content |
| - | .wrapper |
| - | = link_to post |
| - | h3 = post.data.title |
| - | |
| - | p = post.data.description |
| - | |
| - | = link_to 'Read the story', post, class: 'cta' |
| + | = partial 'partials/news/news_item', locals: {post: post} |
| \ No newline at end of file | |
source/partials/news/_news_item.slim
+20
-0
| @@ | @@ -0,0 +1,20 @@ |
| + | .news-item |
| + | .row |
| + | .image |
| + | - if post.data.image |
| + | = link_to post |
| + | = image_tag post.data.image |
| + | |
| + | .date |
| + | //make sure the post date is actually a date |
| + | - date = Date.parse post.data.date.to_s |
| + | span = date.strftime("%d-%m-%Y") |
| + | |
| + | .content |
| + | .wrapper |
| + | = link_to post |
| + | h3 = post.data.title |
| + | |
| + | p = post.data.description |
| + | |
| + | = link_to 'Read the story', post, class: 'cta' |
source/stylesheets/all.css.scss
+3
-3
| @@ | @@ -16,7 +16,7 @@ |
| @import 'demo/products/product'; | |
| @import 'demo/products/product-detail'; | |
| - | @import 'demo/homepage/hero'; |
| - | @import 'demo/homepage/story'; |
| - | @import 'demo/homepage/news'; |
| + | @import 'demo/news/news'; |
| + | @import 'demo/homepage/hero'; |
| + | @import 'demo/homepage/story'; |
| \ No newline at end of file | |
source/stylesheets/demo/homepage/_news.scss
+0
-117
| @@ | @@ -1,117 +0,0 @@ |
| - | .homepage-news { |
| - | padding-top: 60px; |
| - | padding-bottom: 60px; |
| - | |
| - | h2 { |
| - | margin: 0 0 30px; |
| - | } |
| - | |
| - | .news-items{ |
| - | @extend %row; |
| - | } |
| - | |
| - | .news-item { |
| - | @extend %column; |
| - | @extend %col-xs-12; |
| - | margin-bottom: 60px; |
| - | } |
| - | |
| - | .image { |
| - | position: relative; |
| - | @extend %column; |
| - | @extend %col-sm-5; |
| - | @extend %col-md-6; |
| - | |
| - | img{ |
| - | @extend %img-responsive; |
| - | } |
| - | .date { |
| - | position: absolute; |
| - | bottom: 0; |
| - | left: 15px; |
| - | background-color: rgba(255, 255, 255, 1); |
| - | padding: 10px; |
| - | } |
| - | |
| - | span { |
| - | font-size: 18px; |
| - | font-weight: 700 |
| - | } |
| - | } |
| - | |
| - | .content{ |
| - | @extend %column; |
| - | @extend %col-sm-7; |
| - | @extend %col-md-6; |
| - | } |
| - | |
| - | .wrapper { |
| - | padding: 30px; |
| - | } |
| - | |
| - | h3 { |
| - | font-size: 32px; |
| - | margin-top: 0; |
| - | } |
| - | |
| - | p { |
| - | margin-top: 15px; |
| - | } |
| - | |
| - | a { |
| - | color: $text-color; |
| - | &:hover, &:focus { |
| - | color: $text-color; |
| - | text-decoration: none; |
| - | } |
| - | } |
| - | |
| - | a.cta { |
| - | font-size: 18px; |
| - | font-weight: 700; |
| - | text-decoration: underline; |
| - | color: $primary-color; |
| - | } |
| - | |
| - | @media screen and (max-width: $screen-md-max) { |
| - | .wrapper { |
| - | padding: 15px; |
| - | } |
| - | } |
| - | @media screen and (max-width: $screen-sm-max) { |
| - | .news-item { |
| - | margin-bottom: 30px; |
| - | } |
| - | .wrapper { |
| - | padding: 0px; |
| - | } |
| - | |
| - | h3 { |
| - | font-size: 24px; |
| - | } |
| - | } |
| - | @media screen and (max-width: $screen-xs-max) { |
| - | padding-top: 15px; |
| - | padding-bottom: 15px; |
| - | |
| - | .news-item { |
| - | margin-bottom: 15px; |
| - | } |
| - | |
| - | h2 { |
| - | margin: 15px 0 15px; |
| - | } |
| - | h3 { |
| - | margin-top: 15px; |
| - | font-size: 18px; |
| - | } |
| - | .image { |
| - | .date { |
| - | padding: 5px 10px 0; |
| - | } |
| - | span{ |
| - | font-size: 16px; |
| - | } |
| - | } |
| - | } |
| - | } |
| \ No newline at end of file | |
source/stylesheets/demo/news/_news.scss
+118
-0
| @@ | @@ -0,0 +1,118 @@ |
| + | .news { |
| + | padding-top: 60px; |
| + | padding-bottom: 60px; |
| + | border-top: 1px solid $background-primary-color; |
| + | |
| + | h2 { |
| + | margin: 0 0 30px; |
| + | } |
| + | |
| + | .news-items{ |
| + | @extend %row; |
| + | } |
| + | |
| + | .news-item { |
| + | @extend %column; |
| + | @extend %col-xs-12; |
| + | margin-bottom: 60px; |
| + | } |
| + | |
| + | .image { |
| + | position: relative; |
| + | @extend %column; |
| + | @extend %col-sm-5; |
| + | @extend %col-md-6; |
| + | |
| + | img{ |
| + | @extend %img-responsive; |
| + | } |
| + | .date { |
| + | position: absolute; |
| + | bottom: 0; |
| + | left: 15px; |
| + | background-color: rgba(255, 255, 255, 1); |
| + | padding: 10px; |
| + | } |
| + | |
| + | span { |
| + | font-size: 18px; |
| + | font-weight: 700 |
| + | } |
| + | } |
| + | |
| + | .content{ |
| + | @extend %column; |
| + | @extend %col-sm-7; |
| + | @extend %col-md-6; |
| + | } |
| + | |
| + | .wrapper { |
| + | padding: 30px; |
| + | } |
| + | |
| + | h3 { |
| + | font-size: 32px; |
| + | margin-top: 0; |
| + | } |
| + | |
| + | p { |
| + | margin-top: 15px; |
| + | } |
| + | |
| + | a { |
| + | color: $text-color; |
| + | &:hover, &:focus { |
| + | color: $text-color; |
| + | text-decoration: none; |
| + | } |
| + | } |
| + | |
| + | a.cta { |
| + | font-size: 18px; |
| + | font-weight: 700; |
| + | text-decoration: underline; |
| + | color: $primary-color; |
| + | } |
| + | |
| + | @media screen and (max-width: $screen-md-max) { |
| + | .wrapper { |
| + | padding: 15px; |
| + | } |
| + | } |
| + | @media screen and (max-width: $screen-sm-max) { |
| + | .news-item { |
| + | margin-bottom: 30px; |
| + | } |
| + | .wrapper { |
| + | padding: 0px; |
| + | } |
| + | |
| + | h3 { |
| + | font-size: 24px; |
| + | } |
| + | } |
| + | @media screen and (max-width: $screen-xs-max) { |
| + | padding-top: 15px; |
| + | padding-bottom: 15px; |
| + | |
| + | .news-item { |
| + | margin-bottom: 15px; |
| + | } |
| + | |
| + | h2 { |
| + | margin: 15px 0 15px; |
| + | } |
| + | h3 { |
| + | margin-top: 15px; |
| + | font-size: 18px; |
| + | } |
| + | .image { |
| + | .date { |
| + | padding: 5px 10px 0; |
| + | } |
| + | span{ |
| + | font-size: 16px; |
| + | } |
| + | } |
| + | } |
| + | } |
| \ No newline at end of file | |