Här kopierade jag också stilar från Refills 'mönsteravsnitt, och placerade dem i en ny fil tillägnad denna bannersektion. De angivna stilar finns i .SCSS syntax och så går jag med flödet-det finns ingen anledning att konvertera detta till .sass verkligen.

I "source / stylesheets / _hero_banner.scss":

 .hjälte $ basgräns-radie: 3px! default; $ action-color: # 477DCA! default; $ storskärm: em (860)! default; $ hjälte-bakgrunds-topp: # 7F99BE; $ hjälte-bakgrundsbotten: # 20392B; $ hjältefärg: vit; $ gradientvinkel: 10deg; $ hjältebild: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png'; @include background (url ($ hero-image), linjär gradient ($ gradient-vinkel, $ hjälte-bakgrundsbottna, $ hjälte-bakgrunds-topp), ingen repetition $ hjälte-bakgrunds-topprulle); bakgrundsfärg: # 324766; bakgrundsställning: topp; background-repeat: no-repeat; bakgrundsstorlek: omslag; padding-bottom: 3em; .hero-logo img height: 4em; marginal-botten: 1em;  .hero-inner @ include outer-container; @include clearfix; marginal: auto; vaddering: 3.5em; text-align: center; .hero-copy text-align: center; h1 färg: $ hjältefärg; fontstorlek: 1.6em; marginal-botten: 0.5em; @include media ($ large-screen) font-size: 1.8em;  p färg: $ hjältefärg; linjehöjd: 1.4em; marginal: 0 auto 3em auto; @ inkludera media ($ storskärm) font-size: 1.1em; maxbredd: 40%;  

Vi kommer att justera detta på en sekund men låt oss ta en titt först:

Det passar rätt in-det är hur jag gillar det! Låt oss tweak detta till våra behov genom att bli av med bilden och ikonen. Men låt oss börja med texten, så i "source / index.html.erb":

Du kan finjustera det som du vill. Jag vill göra det snabbt och bara öka storleken på h1 för både stora skärmar och mindre enheter. Hjälteenhetshuvudet är nu 2em och 3em respektive inte för mycket. Vadderingen på .hjälte inre behöver också flytta en nudge.

Återigen i "source / stylesheets / _hero_banner.scss":

 .hjälte-inre // padding: 3.5em; padding-top: 1.2em;  .hero-copy text-align: center; h1 färg: $ hjältefärg; typsnittstorlek: 2em; marginal-botten: 0.5em; @ inkludera media ($ storskärm) font-size: 3em;  

Låt oss döda logotypen. Jag tycker ofta att de är lite irriterande. I "source / index.html.erb":

 
 
 
 
MATCHA NERDZ
 
Podcast för grönt tefiskare
 
 
 
 

Det är allt vi behöver. Eftersom vi inte använder hjältelogotypen, låt oss bli av med sina stilar - dödsvikt, så i "source / stylesheets / _hero_banner.scss":

 //.hero-logo img // höjd: 4em; // margin-bottom: 1em; // 

Bakgrundsbild

Den generiska bakgrundsbilden måste också gå. Jag först visar hur jag vill att den ska se ut, då ska jag förklara hur man kommer dit.

Ignorera typografi för nu, du kan justera det senare. Jag bytte ut bilden och lägger en liten gradient ovanpå den. Eftersom typen är vit behövde jag lite mer kontrast för en bättre läsupplevelse. Om du väljer en bild som inte behöver en ytterligare gradient, gå till den!

Jag justerade Refills-koden med några ändringar. Först lade jag till en bild till "source / images" och sparade den här bilden i variabeln $ Hjältebild. Sedan återanvändade jag denna variabel i bakgrund mixin från Bourbon och omordnade bilden och linjär-gradient (en Bourbon mixin också). Eftersom gradienten kommer först är den överlagd ovanpå Matcha_Nerdz.png. Än en gång, i "source / stylesheets / _hero_banner.scss":

 .hjälte $ hjälte-image: '... /images/Matcha_Nerdz.png'; $ hjälte-bakgrunds-topp: mörkare ($ matcha-grön, 65%); $ hjälte-bakgrundsbotten: rgba (ljusare ($ matcha-grön, 10%), .3); @ inkludera bakgrund (linjär-gradient ($ gradient-vinkel, $ hjälte-bakgrundsbotten, $ hjälte-bakgrunds-topp), url ($ hero-image), ingen upprepning $ hjälte-bakgrunds-topprulle); marginalbotten: 2em; // bakgrundsfärg: # 324766; // bakgrundsstorlek: omslag; 

För gradienten själv, återanvände jag vår $ Matcha gröna som vi lagrade i "source / stylesheets / base / _variables.scss". Toppfärgen är mörkad med 65% med en Sass-funktion; den andra lyser med 10% och görs även transparent via en annan Sass-funktion som kallas RGBA. Vi använder sedan dessa variabler i vårt bakgrund blanda i. De gradient-vinkel förblev detsamma. Jag har också lagt till en liten marginal på 2em att trycka indexlistan lite ner. De stilar jag kommenterade för dig är dödsvikt och så tog jag bort dem.

Du kan naturligtvis spela med en sådan gradient direkt i Photoshop, men jag ville visa dig hur du kan använda dem i Sass. Nedan visas en skärmdump som inte har någon linjär gradient till hjälteenheten. Som en liten övning lämnar jag uppreningen av de stilar vi kopierade till dig. Om du hittar dubbletter eller oanvända stilar rekommenderar jag att du åtgärdar det innan du går vidare.

Kommit och distribuera

Tiden för en annan begå och distribuera.

 git add --all git commit -m 'Lägger hjälte enhet till index.html.erb Lägger hjälte bild med gradient Lägger till _hero_banner Sass partiell import Sass partiell "mellan 

Utan det visuella nätet ser det inte ut att du har mycket arbete kvar för att justera denna sida för dina podcastingbehov. Några saker som jag skulle rekommendera dig att göra är att hitta ett typsnitt som kommunicerar ditt projekt tydligt utan att vara för exotiskt och justera storleken och avståndet på din text så att den passar din hjälteenhetens bakgrundsbild. Eftersom det här är en del av din branding, föreslår jag att du tar dig tid och har roligt!

Navigering

Det är en bra tid att lägga till en navbar. Återigen använder vi ett befintligt mönster från Refills och anpassar det för våra egna behov. Jag valde "Centered Navigation" som du hittar under "Patterns". För det här måste vi kopiera HTML, SCSS och CoffeeScript-koden. Jag börjar först genom att lägga till markeringen i vår globala "layout.erb" -fil

        <%= feed_tag :atom, "#blog.options.prefix.to_s/feed.xml", title: "Atom Feed" %> <%= stylesheet_link_tag "all" %> <%= javascript_include_tag "all" %>   
 
    MENY  
  
 <%= yield %> 
 <%= partial "partials/footer" %>   

Oj! Det är ganska en bit av kod. Tror du på samma sätt som jag? Det här ser otäckt ut, inte sant? Låt oss sätta detta in i en partiell. Vi ändrar "källa / layouter / layout.erb" till:

...  <%= partial "partials/navbar" %> 
 <%= yield %> 
 <%= partial "partials/footer" %>   

Och lägg till "source / partials / _navbar.erb":

 
 
  <%= image_tag "matcha_nerdz_logo.png", alt: "Logo image" %>  MENY  
  

Jag har tagit bort en massa saker som jag inte behöver och slutar bara med min logotyp som jag lagrade i "/ images" och två länkar för hem och om sidor. För de två länkarna som jag använde anknyta till hjälparmetod. Det tar två argument:

• Strängen du vill att användarna klickar på
• och den plats du vill länka till.

Jag är säker på att människor som har spelat lite med Rails eller Sinatra är bekanta med detta. Praktiskt, men ingen stor sak. Länken för "Home" (/ matcha-nerd) kommer att bryta för din lokala värd men den arbetar på GitHub Pages där vi behöver namespace.

Den avidade läsaren kan också ha upptäckt att vår länk länkar till en enkel HTML-sida som jag placerat i en ny katalog med namnet "sidor". Jag föreslår att du lägger HTML-sidor som kontakt, faq eller vad som helst i den här katalogen. Om du placerar dessa statiska sidor där borde du inte ha några problem med att anpassa dem till dina behov. Bara ha det roligt och tillämpa det du har lärt dig så länge med dessa sidor. Härifrån är du själv med dessa, men nu vet du allt du behöver. Samo, samo!

Asset Path

Ett ord om bildkoderna och aktivitetsbanan på GitHub Pages. Jag bestämde mig för att ersätta slätten img taggar för logotypen med en medelhavshjälpen som heter image_tag. Det är inte bara ganska kortfattat och läsbart, men fixar också ett problem som du kommer att köra in i img tagga när du bygger webbplatsen och distribuera den till GitHub Pages. URL-adressen för tillgångslänken på enskilda artiklar blir allt inkopplad och det här är den enklaste lösningen för att åtgärda det.

Innan användning image_tag, Url för logotypen såg ut så här: http://your_username.github.io/images/matcha_nerdz_logo-hash_numbers.png

 <%= image_tag "matcha_nerdz_logo.png", alt: "Logo image" %> 

Denna Middleman-hjälpen gav URL-adressen med appnamnet matcha-nerdz-Det namnspaced namnet på aktiven och ger GitHub Pages tillgång till den här bildfilen (http://your_username.github.io/matcha-nerdz/images/matcha_nerdz_logo-hash_numbers.png).

Mer organisation

De stilar jag kopierade från Refills är naturligtvis i en ny Sass partiell. I "source / stylesheets / all.sass" hänvisar vi till:

 @import 'header_navbar' 

Och den faktiska partiella "källan / stylesheets / _header_navbar.scss" ser ut som:

 .centrerad navigering $ basgränsradien: 3px! default; $ mörkgrå: # 333! default; $ storskärm: em (860)! default; $ basfont-färg: vit; $ centered-navigation-padding: 1em; $ centrerad navigering-logotyphöjd: 2em; $ centrerad navigationsbakgrund: # E7F1EC; $ centrerad navigeringsfärg: $ basfont-färg; $ centered-navigation-color-hover: $ text-färg; $ centrerad navigationshöjd: 60px; $ centrerad navigationsartikel-vaddering: 1em; $ centered-navigation-submenu-padding: 1em; $ centrerad navigations-objekt-nudge: 2.2em; $ horisontellt-bar-läge: $ storskärm; bakgrundsfärg: $ matcha-green; border-bottom: 1px solid darken ($ matcha-green, 5%); minhöjd: $ centrerad navigationshöjd; bredd: 100%; z-index: 9999; // Mobilvyn .mobile-logo display: inline; flyta till vänster; maxhöjd: $ centrerad navigationshöjd; padding-left: $ centered-navigation-padding; img maxhöjd: $ centrerad navigationshöjd; vaddering: .8em 0;  @ inkludera media ($ horizontal-bar-mode) display: none; . centered-navigation-mobile-menyn färg: $ centrerad navigering-färg; display: block; float: right; linjehöjd: $ centrerad navigationshöjd; marginal: 0; padding-right: $ centered-navigation-submenu-padding; text-dekoration: ingen; text-transform: stor bokstav; @include media ($ horizontal-bar-mode) display: none;  &: fokusera, och: sväva färg: $ centrerad navigering-färg-svängare;  // Nav-menyn .centered-navigation-wrapper @ include outer-container; @include clearfix; position: relativ; z-index: 999;  ul.centered-navigation-menyn -webkit-transform-style: preserve-3d; // stoppa webkit flimmer clear: båda; display: none; marginal: 0 auto; överflöde: synligt; vaddering: 0; bredd: 100%; z-index: 99999; & .show display: block;  @ inkludera media ($ horisontellt-bar-läge) display: block; text-align: center;  // Nav-objekten .nav-länk: första barn @ inkludera media ($ horisontellt-bar-läge) margin-left: $ centrerad navigationsobjekt-nudge; padding-right: 0px;  ul li.nav-link background: lighten ($ matcha-green, 8%); display: block; linjehöjd: $ centrerad navigationshöjd; överflöde: gömd; padding-right: $ centered-navigation-submenu-padding; textjustera: höger; bredd: 100%; z-index: 9999; en färg: $ centrerad navigeringsfärg; display: inline-block; kontur: ingen; text-dekoration: ingen; &: fokusera, och: sväva färg: $ centrerad navigering-färg-svängare;  @ inkludera media ($ horizontal-bar-mode) bakgrund: transparent; display: inline; linjehöjd: $ centrerad navigationshöjd; en padding-right: $ centered-navigation-item-padding;  li.logo.nav-länk display: none; linjehöjd: 0; @ inkludera media ($ storskärm) display: inline;  .logo img margin-bottom: - $ centered-navigation-logo-height / 3; maxhöjd: $ centered-navigation-logo-height;  

Jag lägger CoffeeScript-koden från Refills i "all.coffee". Så snart jag var tvungen att lägga till mer kod än det skulle jag lägga den till sin egen plats. ”Source / javascript / all.coffee”

 // = kräver jquery $ (dokument) .ready -> menuToggle = $ ('# js-centered-navigation-mobile-menyn'). unbind () $ ('# js-centrerad navigationsmeny'). removeClass ' visa 'menyToggle.on' klicka ', (e) -> e.preventDefault () $ (' # js-centrerad navigationsmeny '). slideToggle -> om $ (' # js-centrerad navigationsmeny ') .is (': hidden') $ ('# js-centrerad navigationsmeny'). removeAttr 'style' avkastning avkastning 

Denna kod är ansvarig för att växla menyn för mindre skärmar.

Eftersom jag tog bort en massa saker som jag inte behövde från navbarmarkup-som undermenyn-kunde jag bli av med en betydande bit av relevanta format i den här filen. Eftersom jag inte vet om du behöver en mer detaljerad navbar och vill ta koden direkt från dessa exempel, föreslår jag att du kopierar originalkoden om du har större planer för navbaren. Spela med Sass för att passa din stil, ta bort död kod och dubbletter. Jag justerade bakgrundsfärgen och länkfärgerna, spelade med logotypens transparens, ändrade gränsen och fortsatte. Ha det roligt och bli galen om du vill. Jag ville bara använda en super enkel navbar med varumärkesfärgen och en centrerad logotyp. Det visade sig ganska bra för det lilla arbetet jag skulle säga.

Här är indexsidan:

Och här är detaljsidan:

Tiden att paketera detta till ett git-commit och för att distribuera webbplatsen.

 git add -all git commit -m 'Implementerar en rubrik med navbar Lägger till rubrik delvis till layout Ta hand om distribuerad tillgång url för logotyp Importera Sass partiell för navbar Lägger till logo Lägger till CoffeeScript-kod Justerar Refills-stilar Justerar Refills markup' mellanhand 

Titel

Nästa förändring är en liten, bara en röra verkligen. Vi behöver uppdatera titeltaggen i vår layout ("source / layouts / layout.erb"):

Detta ger oss en dynamisk titel som alltid börjar med vår webbplats namn och bifogar artikelns titel om den är tillgänglig.

 git add --all git commit -m 'Justerar webbplatsens titel' mellanlägg implementera 

Paginering

När du tittar längst ner på indexlistan över artiklar ser du något som saknar viktiga saker - navigering i vår lista över inlägg.

Jag är inte ett fan av överdrivet kloka paginationslänkar - skrymmande segrar inte heller några utmärkelser med mig. Låt oss hålla det enkelt och ge två länkar till nästa och föregående sidor. Middleman gör det här otroligt bekvämt. Vi behöver bara justera vår "config.rb" och berätta frontmatteren på vår indexsida för att finjustera den.

 blog.paginate = true 

Först förstår inte linjen ovan. Därefter berättar du på indexsidan hur många artiklar du vill se. Jag tror att tio inlägg per sida räcker. I "source / index.html.erb":

 --- per_sida: 10 sidbar: sant --- 

Det sista steget innan vi tillämpar någon styling är att placera båda länkarna bekvämt längst ner i listan. Först måste vi bli av med dessa rader kod nedan som kommenterades. De placerades högst upp på din indexsida.

Och placera det här längst ner på den här sidan:

 <% if paginate %> <% if prev_page %> 
<%= link_to '<< Previous page', prev_page %>
 <% end %> <% if next_page %> 
<%= link_to 'Next page >> ', next_page%>
 <% end %> <% end %> 

Detta ger oss navigeringslänkarna vi behöver sida om sida och förser oss med en klass för att finjustera några saker. Jag bestämde mig för att gå med en del för Sass-koden eftersom den inte passade in i sidfoten eller indexpoststilarna, plus det förtjänar en del av sin egen, särskilt om den skulle växa mer i storlek. I "source / stylesheets / all.sass":

 @import "pagination" 

Och i den dela "källan / stylesheets / _pagination.sass":

 .pagination-länk + skift (2) marginalbotten: 4em &: Float: vänster-höger: 4em a + övergång (färg 0.25s enkelhet) färg: $ textfärg stilsortstorlek : 1.1em &: svängfärg: $ matcha-green 

Vi flyttar länkarna lite till höger, ordnar dem att flyta bredvid varandra - standard skulle blockbeteendet vara staplat ovanpå varandra - och tillämpa en liten övergångseffekt när användaren svävar över länken. Det är allt vi behöver just nu. Låt oss ta en titt.

Alrighty, tid för ett annat engagemang.

 git add -all git commit -m 'Lägger till pagination till indexlista av inlägg Justerar config.rb Justerar markering på indexsida Lägger till stilar i _pagination Sass partiell "mellan 

Slutgiltiga tankar

Jag antar att det borde räcka för version 01! Som ett nästa steg bör du spela med mediafrågor för att göra layouten mottaglig för olika skärmstorlekar. Typografi kan också behöva lite allvarlig kärlek.

Välj ett typfält eller två som bäst går med temat för din podcast - bara glöm inte att hålla det superläst.

Om du bestämmer dig för att göra en podcast för riktigt, kan jag bara gratulera dig. Det är ett utmärkt sätt att lära sig av experter och även att öka ditt nätverk avsevärt. Att göra något av värde för samhället är alltid en bra idé och kan betala av stor tid. Ett sista tips, försök att lära dig genom att göra och experiement så mycket som möjligt! Att läsa ensam skar det inte, det har du gjort, gjort det! Om du gillar att dela lärdomarna genom att skriva om det, kommer du att fördjupa din förståelse av ämnet ännu mer. Ha så kul!