Add hero section to homepage
Tom Rutgers
committed Aug 17, 2018
commit cfa696d9dd6baea0a432ebba0abb6a5915f38421
Showing 7
changed files with
46 additions
and 22 deletions
config.rb
+5
-5
| @@ | @@ -53,11 +53,11 @@ activate :directory_indexes |
| # Methods defined in the helpers block are available in templates | |
| # https://middlemanapp.com/basics/helper-methods/ | |
| - | # helpers do |
| - | # def some_helper |
| - | # 'Helping' |
| - | # end |
| - | # end |
| + | helpers do |
| + | def background_image(image) |
| + | "background-image: url('" << image_path(image) << "')" |
| + | end |
| + | end |
| # Build-specific configuration | |
| # https://middlemanapp.com/advanced/configuration/#environment-specific-settings | |
source/about.html.erb
+0
-15
| @@ | @@ -1,15 +0,0 @@ |
| - | <div class="container"> |
| - | <div class="row"> |
| - | <div class="col-xs-12"> |
| - | <h1><%= data.pages.about.title%></h1> |
| - | <ul class="about-values"> |
| - | <% data.pages.about.usps.each do | value | %> |
| - | <li class="value"> |
| - | <h2><%=value.name %></h2> |
| - | <p><%=value.description %></p> |
| - | </li> |
| - | <% end %> |
| - | </ul> |
| - | </div> |
| - | </div> |
| - | </div> |
source/images/uploads/homepage-hero.jpg
+0
-0
source/index.html.slim
+3
-1
| @@ | @@ -1,3 +1,5 @@ |
| --- | |
| title: Home - Middleman + Netlify CMS Example | |
| - | --- |
| \ No newline at end of file | |
| + | --- |
| + | |
| + | = partial 'partials/homepage/hero' |
| \ No newline at end of file | |
source/partials/homepage/_hero.slim
+4
-0
| @@ | @@ -0,0 +1,4 @@ |
| + | section.hero style=background_image(image_path('uploads/homepage-hero.jpg')) |
| + | .caption |
| + | .row |
| + | h1 Great coffee with a conscience |
source/stylesheets/_bootstrap-setup.scss
+1
-1
| @@ | @@ -11,7 +11,7 @@ |
| @import "bootstrap/scaffolding"; | |
| @import "bootstrap/type"; | |
| //@import "bootstrap/code"; | |
| - | @import "bootstrap/grid"; |
| + | //@import "bootstrap/grid"; |
| //@import "bootstrap/tables"; | |
| //@import "bootstrap/forms"; | |
| //@import "bootstrap/buttons"; | |
source/stylesheets/demo/homepage/_hero.scss
+33
-0
| @@ | @@ -0,0 +1,33 @@ |
| + | .hero { |
| + | position: relative; |
| + | width: 100%; |
| + | height: 0; |
| + | padding-bottom: 42.1875%; |
| + | background-size: cover; |
| + | background-position: center right; |
| + | .caption { |
| + | @extend %container; |
| + | } |
| + | |
| + | h1 { |
| + | @extend %column; |
| + | @extend %col-xs-8; |
| + | margin: 0; |
| + | padding-top: 20%; |
| + | font-size: 64px; |
| + | font-weight: 700; |
| + | |
| + | @media screen and (max-width: $screen-md-max){ |
| + | font-size: 48px; |
| + | padding-top: 15%; |
| + | } |
| + | @media screen and (max-width: $screen-xs-max){ |
| + | font-size: 32px; |
| + | padding-top: 10%; |
| + | } |
| + | @media screen and (max-width: 400px){ |
| + | font-size: 32px; |
| + | padding-top: 5%; |
| + | } |
| + | } |
| + | } |
| \ No newline at end of file | |