Her kopierte jeg også stilene fra Refills 'mønsterseksjon, og plasserte dem i en ny fil dedikert til denne bannerseksjonen. De angitte stilene er i .SCSS syntaks og så går jeg med strømmen - det er ikke nødvendig å konvertere dette til .sass egentlig.

I "kilde / stylesheets / _hero_banner.scss":

 .helt $ base-border-radius: 3px! default; $ action-color: # 477DCA! default; $ storskjerm: em (860)! standard; $ helt-bakgrunnsbilde: # 7F99BE; $ helt-bakgrunnsbunn: # 20392B; $ hero-farge: hvit; $ gradient-vinkel: 10deg; $ helt-bilde: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png'; @include background (url ($ hero-image), lineær gradient ($ gradient-vinkel, $ helt-bakgrunnsbunn, $ heltbakgrunns-topp), ikke gjentatt $ helt-bakgrunnsrulle); bakgrunnsfarge: # 324766; bakgrunnsposisjon: topp; bakgrunn-gjentak: ikke-gjenta; bakgrunnsstørrelse: deksel; polstring-bunn: 3em; .hero-logo img height: 4em; margin-bunn: 1em;  .hero-inner @include ytterbeholder; @include clearfix; margin: auto; polstring: 3.5em; tekst-align: center; .hero-copy text-align: center; h1 color: $ hero-color; skriftstørrelse: 1.6em; margin-bunn: 0.5em; @include media ($ storskjerm) font-size: 1.8em;  p color: $ hero-color; linjehøyde: 1.4em; margin: 0 auto 3em auto; @include media ($ storskjerm) font-size: 1.1em; maksimal bredde: 40%;  

Vi vil justere dette på et sekund, men la oss ta en titt først:

Det passer rett inn - det er slik jeg liker det! La oss tilpasse dette til våre behov ved å kvitte seg med bildet og ikonet. Men la oss starte med teksten, så i "source / index.html.erb":

Du kan finjustere dette slik du vil. Jeg vil gjøre dette raskt og bare øke størrelsen på h1 for både store skjermer og mindre enheter. Heltenhetens header er nå 2em og 3em henholdsvis - ikke for mye. Padding på .helt-indre trenger også å flytte en pute.

Igjen i "kilde / stylesheets / _hero_banner.scss":

 .helten-indre // polstring: 3.5em; polstring: 1.2em;  .hero-copy text-align: center; h1 color: $ hero-color; skriftstørrelse: 2em; margin-bunn: 0.5em; @include media ($ storskjerm) font-size: 3em;  

Neste, la oss drepe logoholderen. Jeg finner dem ofte litt irriterende. I "kilde / index.html.erb":

 
 
 
 
MATCHA NERDZ
 
Podcast for grønn te-kjennere
 
 
 
 

Det er alt vi trenger. Siden vi ikke bruker heltenes logo, la oss bli kvitt stilene deres - dødvekt, så i "kilde / stylesheets / _hero_banner.scss":

 //.hero-logo img // høyde: 4em; // margin-bunn: 1em; // 

Bakgrunnsbilde

Det generiske bakgrunnsbildet må også gå. Jeg vil først vise deg hvordan jeg vil se den, så skal jeg forklare hvordan jeg kommer dit.

Ignorer typografien for nå, du kan justere den senere. Jeg erstattet bildet og satte en liten gradient på toppen av det. Siden typen er hvit, trengte jeg litt mer kontrast for en bedre leseropplevelse. Hvis du velger et bilde som ikke trenger en ekstra gradient, går du etter det!

Jeg justerte Refills-koden med et par endringer. Først har jeg lagt til et bilde til "kilde / bilder" og lagret dette bildet i variabelen $ Hero-bilde. Deretter brukte jeg denne variabelen på nytt i bakgrunn mixin fra Bourbon og reordered bildet og lineær-gradient (en Bourbon mixin også). Fordi gradienten kommer først, er den overlagt på toppen av Matcha_Nerdz.png. Igjen, i "kilde / stylesheets / _hero_banner.scss":

 .helten $ hero-image: '... /images/Matcha_Nerdz.png'; $ helt-bakgrunns-topp: mørkere ($ matcha-grønn, 65%); $ helten-bakgrunnsbunn: rgba (lysere ($ matcha-grønn, 10%), .3); @include background (lineær gradient ($ gradient-vinkel, $ helt-bakgrunnsbunn, $ heltbakgrunns-topp), url ($ hero-image), ingen gjentatt $ helt-bakgrunnsrulle); margin-bunn: 2em; // bakgrunnsfarge: # 324766; // bakgrunnsstørrelse: deksel; 

For gradienten selv, brukte jeg igjen $ Matcha-grønne som vi lagret i "kilde / stylesheets / base / _variables.scss". Toppfargen er mørkere med 65% med en Sass-funksjon; den andre er opplyst med 10% og også gjort gjennomsiktig via en annen Sass-funksjon kalt RGBA. Vi bruker deretter disse variablene i vår bakgrunn mixin. De gradient-vinkel ble det samme. Jeg har også lagt til en liten margin på 2em å skyve indekslisten litt ned. Stilene jeg kommenterte for deg er dødvekt, og så slettet jeg dem.

Du kan selvfølgelig spille med en slik gradient direkte i Photoshop, men jeg vil vise deg hvordan du kan bruke dem i Sass. Nedenfor er et skjermbilde som ikke har noen lineær gradient lagt til heltenheten. Som en liten øvelse forlater jeg opprydding av stilene vi kopierte til deg. Hvis du finner duplikater eller ubrukte stiler, anbefaler jeg at du fikser dette før du fortsetter.

Forplikte og distribuere

Tid for en annen forplikte og distribuere.

 git add --all git commit -m 'Legger til hero-enhet til index.html.erb Legger til helten bilde med gradient Legger til _hero_banner Sass delvis Importer Sass delvis' mellommann distribuere 

Uten det visuelle nettet ser det ikke ut til du har mye arbeid igjen for å justere denne siden for podcasting-behovene dine. Noen ting jeg vil anbefale deg, er å finne et skrifttegn som kommuniserer prosjektet ditt særegent uten å være for eksotisk og justere størrelsen og avstanden på teksten din slik at den passer til bakgrunnen til heltenhetens bakgrunnsbilde. Siden dette er en del av din merkevarebygging, foreslår jeg at du tar deg tid og har det gøy!

Navigasjon

Det er en god tid å legge til en navbar. Igjen vil vi bruke et eksisterende mønster fra Refills og tilpasse det til våre egne behov. Jeg valgte "Centered Navigation" som du finner under "Patterns". For dette må vi kopiere HTML, SCSS og CoffeeScript-koden. Jeg starter først ved å legge til markeringen i vår globale "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" %>   

Jøss! Det er ganske en del av koden. Synes du det samme som meg? Dette ser ekkel ut, ikke sant? La oss sette dette inn i en delvis. Vi endrer "kilde / layouts / layout.erb" til:

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

Og legg til "source / partials / _navbar.erb":

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

Jeg har fjernet en masse ting som jeg ikke trenger, og bare ender med logoen min som jeg lagret i "/ images" og to lenker for hjemme og om sider. For de to koblingene jeg brukte link til hjelpemetode. Det tar to argumenter:

• Strengen du vil at brukerne skal klikke på
• og stedet du vil koble til.

Jeg er sikker på at folk som har spilt litt med Rails eller Sinatra, er kjent med dette. Hendig, men ikke så farlig. Koblingen for "Hjem" (/ matcha-nerd) vil bryte for din lokale vert, men det fungerer på GitHub Pages der vi trenger navneområdet.

Den ivrige leseren kan også ha oppdaget at vår om link kobler til en enkel HTML-side som jeg plasserte i en ny katalog kalt "sider". Jeg foreslår at du legger HTML-sider som kontakt, faq eller hva som helst også i denne katalogen. Hvis du legger disse statiske sidene der inne, burde du ikke ha problemer med å tilpasse dem til dine behov. Bare ha det gøy og bruk det du har lært så langt med disse sidene. Herfra er du alene med disse, men du vet nå alt du trenger. Samo, samo!

Asset Path

Et ord om bildekoder og aktivitetsbanen på GitHub Pages. Jeg bestemte meg for å erstatte sletten img Tagger for logoen med en middleman hjelper kalt IMAGE_TAG. Det er ikke bare ganske konsistent og lesbart, men retter også et problem du vil komme inn på med img tag når du bygger nettstedet og distribuerer det til GitHub Pages. Nettadressen for aktiva-lenken på enkelte artikler blir alt skrudd opp, og dette er den enkleste løsningen for å fikse det.

Før du bruker IMAGE_TAG, url for logoen så slik ut: http://your_username.github.io/images/matcha_nerdz_logo-hash_numbers.png

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

Denne Middleman-hjelperen ga nettadressen med appnavnet matcha-Nerdz-den navngir riktig eiendommen og gir GitHub Pages tilgang til denne bildefilen (http://your_username.github.io/matcha-nerdz/images/matcha_nerdz_logo-hash_numbers.png).

Mer organisasjon

Stilene jeg kopierte fra Refills er i en ny Sass delvis selvfølgelig. I "kilde / stylesheets / all.sass" refererer vi:

 @import 'header_navbar' 

Og den faktiske delvise "kilde / stylesheets / _header_navbar.scss" ser ut som:

 .sentrert navigasjon $ base-border-radius: 3px! default; $ mørkegrå: # 333! default; $ storskjerm: em (860)! standard; $ base-font-farge: hvit; $ centered-navigasjon-padding: 1em; $ centered-navigation-logo-høyde: 2em; $ centered-navigation-bakgrunn: # E7F1EC; $ sentrert navigasjonsfarge: $ base-font-color; $ centered-navigation-color-hover: $ tekst-farge; $ sentrert navigasjonshøyde: 60px; $ centered-navigasjon-element-polstring: 1em; $ centered-navigation-undermeny-padding: 1em; $ centered-navigasjon-element-nudge: 2.2em; $ horisontal-bar-modus: $ storskjerm; bakgrunnsfarge: $ matcha-green; border-bottom: 1px solid mørkere ($ matcha-green, 5%); Minhøyde: $ centrert navigasjonshøyde; bredde: 100%; z-indeks: 9999; // Mobilvisning .mobile-logo display: inline; flyte: venstre; maksimal høyde: $ sentrert navigasjonshøyde; padding-left: $ centered-navigasjon-padding; img maksimal høyde: $ sentrert navigasjonshøyde; polstring: .8em 0;  @include media ($ horizontal-bar-modus) display: none; . Centered-navigasjons-mobil-menyen farge: $ sentrert navigasjonsfarge; skjerm: blokk; flyte: høyre; linjehøyde: $ centrert navigasjonshøyde; margin: 0; padding-right: $ centered-navigasjon-undermeny-padding; tekst-dekorasjon: ingen; tekst-transformer: store bokstaver; @include media ($ horisontal bar-modus) display: none;  &: fokus, &: svever farge: $ sentrert-navigasjon-fargelov  // Nav-meny. Centered-navigasjon-wrapper @ include outer-container; @include clearfix; stilling: relativ; z-indeks: 999;  ul.centered-navigasjonsmeny -webkit-transform-style: preserve-3d; // stopp webkit flimmer klar: begge; skjerm: ingen; margin: 0 auto; overløp: synlig; polstring: 0; bredde: 100%; z-indeks: 99999; & .show display: block;  @include media ($ horisontal-bar-modus) display: block; tekst-align: center;  // Nav-elementene .nav-link: første barn @ include media ($ horisontal-bar-modus) margin-left: $ centrert navigasjons-element-nudge; polstring-høyre: 0px;  ul li.nav-link bakgrunn: lighten ($ matcha-green, 8%); skjerm: blokk; linjehøyde: $ centrert navigasjonshøyde; overløp: skjult; padding-right: $ centered-navigasjon-undermeny-padding; tekstjustering: høyre; bredde: 100%; z-indeks: 9999; en color: $ centered-navigasjon-farge; display: inline-block; oversikt: ingen; tekst-dekorasjon: ingen; &: fokus, &: sveve farge: $ sentrert navigasjon-fargelov  @include media ($ horizontal-bar-modus) bakgrunn: transparent; skjerm: inline; linjehøyde: $ centrert navigasjonshøyde; en padding-right: $ centered-navigasjon-element-padding;  li.logo.nav-link display: none; linjehøyde: 0; @include media ($ storskjerm) display: inline;  .logo img margin-bottom: - $ centered-navigation-logo-height / 3; maksimal høyde: $ centered-navigasjon-logo-høyde;  

Jeg legger CoffeeScript-koden fra Refills til "all.coffee". Så snart jeg måtte legge til mer kode enn det, ville jeg sette den inn i sitt eget utpekte sted. “Source / javascripts / all.coffee”:

 // = krever jquery $ (dokument) .ready -> menuToggle = $ ('# js-sentrert-navigasjons-mobil-menyen') .bind () $ ('# js-sentrert navigasjonsmeny'). removeClass ' vis 'menyToggle.on' klikk ', (e) -> e.preventDefault () $ (' # js-sentrert navigasjonsmeny '). slideToggle -> hvis $ (' # js-sentrert navigasjonsmeny ') .is (': hidden') $ ('# js-sentrert navigasjonsmeny'). removeAttr 'stil' returavkastning 

Denne brikken er ansvarlig for å bytte menyen til mindre skjermer.

Fordi jeg slettet en haug med ting jeg ikke trengte fra navbar-markup-som undermenyen-jeg var i stand til å kvitte seg med en betydelig del av de aktuelle stilene i denne filen. Siden jeg ikke vet om du trenger en mer utførlig navbar og vil ta koden rett fra disse eksemplene, foreslår jeg at du kopierer den opprinnelige koden hvis du har større planer for navbaren. Spill med Sass for å passe din stil, fjern død kode og duplikater. Jeg justerte bakgrunnsfargen og lenkefargene, spilt med logoenes gjennomsiktighet, endret grensen og flyttet videre. Ha det gøy og bli gal hvis du vil. Jeg ville bare bruke en super enkel navbar med merkefargen og en sentrert logo. Det viste seg ganske bra for dette lille arbeidet jeg ville si.

Her er indekssiden:

Og her er detaljsiden:

Tid til å pakke dette inn i en git-forpliktelse og for distribusjon av nettstedet.

 git add --all git commit -m 'Implementerer en header med navbar Legger til overskrift delvis til layout Ta vare på distribuert ressurs url for logo Importer Sass delvis for navbar Legger til logo Legger til CoffeeScript-kode Justerer Refills-stiler Justerer Refills markup' midleman deploy 

Tittel

Den neste endringen er en liten, bare et snev. Vi må oppdatere titteltaggen i vårt layout ("kilde / layouts / layout.erb"):

Dette gir oss en dynamisk tittel som alltid starter med navnet på nettstedet vårt og fester artikkelens tittel hvis tilgjengelig.

 git add --all git commit -m 'Justerer nettstedets tittel' mellommann distribuere 

paginering

Når du ser på bunnen av indekslisten over artikler, ser du noe viktig mangler - navigerer vår liste over innlegg.

Jeg er ikke en fan av altfor kloge paginasjonsforbindelser. De klumpete er heller ikke å vinne noen priser med meg. La oss holde det enkelt og gi to koblinger til neste og forrige side. Middleman gjør dette utrolig praktisk. Vi trenger bare å justere vår "config.rb" og fortelle frontmatteren på indekssiden vår for å finjustere den.

 blog.paginate = true 

Først uncoment linjen ovenfor. Deretter forteller du indekssiden hvor mange artikler du vil se. Jeg tror ti innlegg per side er nok. I "kilde / index.html.erb":

 --- per side: 10 sider: sant --- 

Det siste trinnet før vi bruker noen styling er å plassere begge koblingene beleilig nederst på listen. Først må vi bli kvitt disse kodelinjene nedenfor som ble kommentert. De ble plassert øverst på indekssiden din.

Og plasser dette helt nederst på denne siden:

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

Dette gir oss navigasjonslinkene vi trenger ved siden av og gir oss en klasse for å finjustere noen få ting. Jeg bestemte meg for å gå med en del for Sass-koden fordi den ikke passet i bunnteksten, heller ikke indekspoststilene, pluss det fortjener en delvis av seg selv, spesielt bør den vokse mer i størrelse. I "kilde / stylesheets / all.sass":

 @import 'paginering' 

Og i de delvise "kilde / stylesheets / _pagination.sass":

 .paginering-link + skift (2) margin-bunn: 4em &: float for første type: venstre margin-høyre: 4em a + overgang (farge 0.25s brukervennlighet) farge: $ tekstfarge skriftstørrelse : 1.1em &: sveverfarge: $ matcha-green 

Vi skifter koblingene litt til høyre, ordner dem til å flyte ved siden av hverandre. Standard vil være blokkadferdighet stablet på toppen av hverandre - og bruk en liten overgangseffekt når brukeren svinger over koblingen. Det er alt vi trenger akkurat nå. La oss se.

Alrighty, tid til en annen forpliktelse.

 git add -all git commit -m 'Legger til paginering til indekser liste over innlegg Justerer config.rb Justerer markering på indeks side Legger til stiler i _pagination Sass delvis' mellommann distribuere 

Siste tanker

Jeg antar at det skulle være nok for versjon 01! Som et neste trinn bør du spille med medieforespørsler for å gjøre oppsettet lydhør overfor ulike skjermstørrelser. Typografien kan også trenge litt alvorlig kjærlighet.

Velg et typefelt eller to som passer best med temaet til podcasten din - bare ikke glem å holde den superlestelig.

Også, bør du bestemme deg for å gjøre en podcast for ekte, kan jeg bare gratulere deg. Det er en fin måte å lære av eksperter og også å øke nettverket ditt betydelig. Å gjøre noe av verdi for samfunnet er alltid en god ide og kan betale seg for stor tid. Ett siste tips, prøv å lære ved å gjøre og oppleve så mye du kan! Å lese alene kutter ikke det - vært der, gjort det! Hvis du liker å dele de lesningene du lærte ved å skrive om det, vil du utdype din forståelse av emnet enda mer. Ha det gøy!