Add story section to homepage

Tom Rutgers committed Aug 17, 2018
commit 984d98bdde312461faaa54aee347b72ed56fa1bb
Showing 9 changed files with 57 additions and 5 deletions
data/pages/home.yml +2 -0
@@ @@ -1,3 +1,5 @@
hero:
title: Great coffee with a conscience
image: /images/uploads/homepage-hero.jpg
+
+ story: "Kaldi is the coffee store for everyone who believes that great coffee shouldn't just taste good, it should do good too. We source all of our beans directly from small scale sustainable farmers and make sure part of the profits are reinvested in their communities."
\ No newline at end of file
source/admin/config.yml +3 -0
@@ @@ -44,6 +44,9 @@ collections:
fields:
- {label: Title, name: title, widget: string}
- {label: Image, name: image, widget: image}
+ - label: Story
+ name: story
+ widget: markdown
- name: settings
label: Settings
source/index.html.slim +2 -1
@@ @@ -2,4 +2,5 @@
title: Home - Middleman + Netlify CMS Example
---
- = partial 'partials/homepage/hero'
\ No newline at end of file
+ = partial 'partials/homepage/hero'
+ = partial 'partials/homepage/story'
\ No newline at end of file
source/partials/homepage/_story.slim +7 -0
@@ @@ -0,0 +1,7 @@
+ section.homepage-story
+ .container
+ .row
+ .story-content
+ p
+ markdown:
+ #{data.pages.home.story}
\ No newline at end of file
source/stylesheets/all.css.scss +2 -1
@@ @@ -12,4 +12,5 @@
@import 'demo/shared/header-primary';
@import 'demo/shared/main-content';
- @import 'demo/homepage/hero';
\ No newline at end of file
+ @import 'demo/homepage/hero';
+ @import 'demo/homepage/story';
\ No newline at end of file
source/stylesheets/demo/base/_colors.scss +4 -2
@@ @@ -1,2 +1,4 @@
- $primary-color: rgb(255, 68, 0);
- $text-color: rgb(51,51,51);
+ $primary-color: rgba(255, 68, 0, 1);
+ $secondary-color: rgba(112,93,86, 1);
+
+ $text-color: rgba(51,51,51, 1);
source/stylesheets/demo/base/_typography.scss +5 -0
@@ @@ -3,4 +3,9 @@ body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: $text-color;
+ }
+
+ p {
+ font-size: 18px;
+ line-height: 28px;
}
\ No newline at end of file
source/stylesheets/demo/homepage/_story.scss +27 -0
@@ @@ -0,0 +1,27 @@
+ .homepage-story {
+ background: $secondary-color;
+
+ .story-content {
+ @extend %column;
+ @extend %col-sm-8;
+ padding-top: 60px;
+ padding-bottom: 60px;
+
+ p {
+ margin: 0;
+ font-size: 24px;
+ line-height: 36px;
+ color: rgba(255, 255, 255, 1);
+ }
+
+ @media screen and(max-width: $screen-xs-max){
+ padding-top: 30px;
+ padding-bottom: 30px;
+
+ p {
+ font-size: 16px;
+ line-height: 24px;
+ }
+ }
+ }
+ }
\ No newline at end of file
source/stylesheets/demo/shared/_header-primary.scss +5 -1
@@ @@ -14,9 +14,13 @@
}
}
+ ul {
+ margin: 0;
+ }
+
.navigation {
position: absolute;
- top: 33px;
+ top: 28px;
right: 15px;
li {
display: inline-block;