Project: Finishing up Our Middleman Podcast Website_part2(end)

More Organization

The styles I copied from Refills are in a new Sass partial of course. In “source/stylesheets/all.sass” we reference:

1. @import 'header_navbar'

And the actual partial “source/stylesheets/_header_navbar.scss” looks like:

1. .centered-navigation {
2.   $base-border-radius: 3px !default;
3.   $dark-gray: #333 !default;
4.   $large-screen: em(860) !default;
5.   $base-font-color: white;
6.   $centered-navigation-padding: 1em;
7.   $centered-navigation-logo-height: 2em;
8.   $centered-navigation-background: #E7F1EC;
9.   $centered-navigation-color: $base-font-color;
10.   $centered-navigation-color-hover: $text-color;
11.   $centered-navigation-height: 60px;
12.   $centered-navigation-item-padding: 1em;
13.   $centered-navigation-submenu-padding: 1em;
14.   $centered-navigation-item-nudge: 2.2em;
15.   $horizontal-bar-mode: $large-screen;
16.   background-color: $matcha-green;
17.   border-bottom: 1px solid darken($matcha-green, 5%);
18.   min-height: $centered-navigation-height;
19.   width: 100%;
20.   z-index: 9999;
21.   // Mobile view 
22.   .mobile-logo {
23.     display: inline;
24.     float: left;
25.     max-height: $centered-navigation-height;
26.     padding-left: $centered-navigation-padding; 
27.     img {
28.       max-height: $centered-navigation-height;
29.       padding: .8em 0;
30.     } 
31.     @include media($horizontal-bar-mode) {
32.       display: none;
33.     }
34.   } 
35.   .centered-navigation-mobile-menu {
36.     color: $centered-navigation-color;
37.     display: block;
38.     float: right;
39.     line-height: $centered-navigation-height;
40.     margin: 0;
41.     padding-right: $centered-navigation-submenu-padding;
42.     text-decoration: none;
43.     text-transform: uppercase;
44.  
45.     @include media ($horizontal-bar-mode) {
46.       display: none;
47.     } 
48.     &:focus,
49.     &:hover {
50.       color: $centered-navigation-color-hover;
51.     }
52.   } 
53.   // Nav menu 
54.   .centered-navigation-wrapper {
55.     @include outer-container;
56.     @include clearfix;
57.     position: relative;
58.     z-index: 999;
59.   } 
60.   ul.centered-navigation-menu {
61.     -webkit-transform-style: preserve-3d; // stop webkit flicker
62.     clear: both;
63.     display: none;
64.     margin: 0 auto;
65.     overflow: visible;
66.     padding: 0;
67.     width: 100%;
68.     z-index: 99999; 
69.     &.show {
70.       display: block;
71.     }
72.     @include media ($horizontal-bar-mode) {
73.       display: block;
74.       text-align: center;
75.     }
76.   } 
77.   // The nav items 
78.   .nav-link:first-child {
79.     @include media($horizontal-bar-mode) {
80.       margin-left: $centered-navigation-item-nudge;
81.       padding-right: 0px;
82.     }
83.   }
84.  
85.   ul li.nav-link {
86.     background: lighten($matcha-green, 8%);
87.     display: block;
88.     line-height: $centered-navigation-height;
89.     overflow: hidden;
90.     padding-right: $centered-navigation-submenu-padding;
91.     text-align: right;
92.     width: 100%;
93.     z-index: 9999; 
94.     a {
95.       color: $centered-navigation-color;
96.       display: inline-block;
97.       outline: none;
98.       text-decoration: none;
99.       &:focus,
100.       &:hover {
101.         color: $centered-navigation-color-hover;
102.       }
103.     }
104.     @include media($horizontal-bar-mode) {
105.       background: transparent;
106.       display: inline;
107.       line-height: $centered-navigation-height; 
108.       a {
109.         padding-right: $centered-navigation-item-padding;
110.       }
111.     }
112.   } 
113.   li.logo.nav-link {
114.     display: none;
115.     line-height: 0; 
116.     @include media($large-screen) {
117.       display: inline;
118.     }
119.   } 
120.   .logo img {
121.     margin-bottom: -$centered-navigation-logo-height / 3;
122.     max-height: $centered-navigation-logo-height;
123.   }
124. }

I put the CoffeeScript code from Refills into “all.coffee”. As soon as I had to add more code than that, I’d put it into its own designated place. “source/javascripts/all.coffee”:

1. //= require jquery
2.  
3. $(document).ready ->
4.   menuToggle = $('#js-centered-navigation-mobile-menu').unbind()
5.   $('#js-centered-navigation-menu').removeClass 'show'
6.   menuToggle.on 'click', (e) ->
7.     e.preventDefault()
8.     $('#js-centered-navigation-menu').slideToggle ->
9.       if $('#js-centered-navigation-menu').is(':hidden')
10.         $('#js-centered-navigation-menu').removeAttr 'style'
11.       return
12.     return
13.   return

This snippet is responsible for toggling the menu for smaller screens.

Because I deleted a bunch of stuff I didn’t need from the navbar markup—like the submenu—I was able to get rid of a significant chunk of the relevant styles in this file. Since I don’t know if you need a more elaborate navbar and want to take the code right from these examples, I suggest you copy the original code if you have bigger plans for the navbar. Play with the Sass to fit your style, remove dead code and duplicates. I adjusted the background color and link colors, played with the transparency of the logo, changed the border and moved on. Have fun and go crazy if you like. I just wanted to use a super simple navbar with the brand color and a centered logo. It turned out pretty good for this little work I’d say.

Here’s the index page:

And here’s the detail page:

Time to package this into a git commit and for deploying the site.

1. git add --all
2. git commit -m 'Implements a header with navbar
3.                Adds header partial to layout
4.                Takes care of deployed asset url for logo
5.                Imports Sass partial for navbar
6.                Adds logo
7.                Adds CoffeeScript code
8.                Adjusts Refills styles
9.                Adjusts Refills markup'
10.  
11. middleman deploy

Title

The next change is a small one, just a touch really. We need to update the title tag in our layout (“source/layouts/layout.erb”):

1. <title>Matcha Nerdz<%= ' - ' + current_article.title unless current_article.nil? %></title>

This gives us a dynamic title which always starts with our site’s name and attaches the article’s title if available.

1. git add --all
2. git commit -m 'Adjusts site’s title'
3.  
4. middleman deploy

Pagination

When you look at the bottom of the index list of articles you’ll see something essential missing—navigating our list of posts.

I’m not a fan of overly clever pagination links—bulky ones are also not winning any awards with me. Let’s keep it simple and provide two links for next and previous pages. Middleman makes this incredibly convenient. We just need to adjust our “config.rb” and tell the frontmatter of our index page to fine tune it.

1. blog.paginate = true

First uncomment the line above. After that, you tell the index page how many articles you want to see. I think ten posts per page is enough. In “source/index.html.erb”:

1. ---
2. per_page: 10
3. pageable: true
4. ---

The final step before we apply some styling is to place both links conveniently at the bottom of the list. First we need to get rid of these lines of code below which were commented out. They were placed at the very top of your index page.

1. <!--
2. <% if paginate && num_pages > 1 %>
3.   <p>Page <%= page_number %> of <%= num_pages %></p>
4.  
5.   <% if prev_page %>
6.     <p><%= link_to 'Previous page', prev_page %></p>
7.   <% end %>
8. <% end %>
9. -->

And then place this at the very bottom of this page:

1. <% if paginate %>
2.   <% if prev_page %>
3.     <p class='pagination-link'><%= link_to '<< Previous page', prev_page %></p>
4.   <% end %> 
5.   <% if next_page %>
6.     <p class='pagination-link'><%= link_to 'Next page >>', next_page %></p>
7.   <% end %>
8. <% end %>

This gives us the navigational links we need side by side and supplies us with a class to tweak a few things. I decided to go with a partial for the Sass code because it didn’t fit in the footer, nor the index post styles, plus it deserves a partial of its own, especially should it grow more in size. In “source/stylesheets/all.sass”:

1. @import 'pagination'

And in the partial “source/stylesheets/_pagination.sass”:

1. .pagination-link
2.   +shift(2)
3.   margin-bottom: 4em
4.   &:first-of-type
5.     float: left
6.     margin-right: 4em
7.   a
8.     +transition(color 0.25s ease-in-out)
9.     color: $text-color
10.     font-size: 1.1em
11.     &:hover
12.       color: $matcha-green

We shift the links a bit to the right, arrange them to float next to each other—default would be block behaviour being stacked on top of each other—and apply a little transitional effect when the user hovers over the link. That’s all we need right now. Let’s have a look.

Alrighty, time for another commit.

1. git add -all
2. git commit -m 'Adds Pagination to index list of posts
3.                Adjusts config.rb
4.                Adjusts markup on index page
5.                Adds styles in _pagination Sass partial'
6.  
7. middleman deploy

Final Thoughts

I guess that should suffice for version 01! As a next step, you should play with media queries to make the layout responsive to various screen sizes. The typography could need some serious love as well.

Pick a typface or two that best goes with the theme of your podcast—just don’t forget to keep it super readable.

Also, should you decide to do a podcast for real, I can only congratulate you. It’s a great way to learn from experts and also to increase your network significantly. Doing something of value for the community is always a good idea and can pay off big time. One last tip, try to learn by doing and experiement as much as you can! Reading alone just doesn’t cut it—been there, done that! If you like to share the lessions learned by writing about it, you will deepen your understanding of the topic even more. Have fun!
Written by Ed Wassermann

If you found this post interesting, follow and support us.
Suggest for you:

Learn Responsive Web Development from Scratch

The Complete Web Developer Course - Build 14 Websites

Create Complete Web Apps without Coding

The Complete PHP 7 Guide for Web Developers

Advanced HTML5 Tutorial for Web Developers