Qui ho copiato anche gli stili dalla sezione pattern di Refills, inserendoli in un nuovo file dedicato a questa sezione banner. Gli stili forniti sono nel .SCSS la sintassi e così vado con il flusso: non è necessario convertirlo .insolenza veramente.

In "source / stylesheets / _hero_banner.scss":

 .hero $ base-border-radius: 3px! default; $ action-color: # 477DCA! default; $ large-screen: em (860)! predefinito; $ hero-background-top: # 7F99BE; $ hero-background-bottom: # 20392B; $ eroe-colore: bianco; $ gradient-angle: 10deg; $ hero-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png'; @include background (url ($ hero-image), linear-gradient ($ gradient-angle, $ hero-background-bottom, $ hero-background-top), no-repeat $ hero-background-top scroll); background-color: # 324766; posizione di sfondo: alto; background-repeat: no-repeat; dimensione di sfondo: copertina; imbottitura-fondo: 3em; .hero-logo img height: 4em; margin-bottom: 1em;  .hero-inner @ include il contenitore esterno; @include clearfix; margine: auto; imbottitura: 3.5em; allineamento del testo: centro; .hero-copy text-align: center; h1 color: $ hero-color; font-size: 1.6em; margin-bottom: 0.5em; @include media ($ large-screen) font-size: 1.8em;  p color: $ hero-color; line-height: 1.4em; margine: 0 auto 3em auto; @include media ($ large-screen) font-size: 1.1em; larghezza massima: 40%;  

Regoleremo questo in un secondo, ma prima diamo un'occhiata:

È perfetto, è così che mi piace! Aggiungiamo questo alle nostre esigenze eliminando l'immagine e l'icona. Ma iniziamo con il testo, quindi in "source / index.html.erb":

Puoi modificare questo come più ti piace. Voglio fare in modo veloce e solo aumentare la dimensione del h1 per entrambi gli schermi di grandi dimensioni e dispositivi più piccoli. L'intestazione dell'unità eroe è ora 2em e 3em rispettivamente, non troppo. L'imbottitura .hero-interno ha anche bisogno di spostare una spinta.

Di nuovo in "source / stylesheets / _hero_banner.scss":

 .hero-inner // padding: 3.5em; padding-top: 1.2em;  .hero-copy text-align: center; h1 color: $ hero-color; font-size: 2em; margin-bottom: 0.5em; @include media ($ large-screen) font-size: 3em;  

Quindi uccidiamo il segnaposto del logo. Li trovo spesso un po 'fastidiosi. In "source / index.html.erb":

 
 
 
 
MATCHA NERDZ
 
Podcast per intenditori di tè verde
 
 
 
 

Questo è tutto ciò di cui abbiamo bisogno. Dal momento che non usiamo il logo dell'eroe, liberiamoci dei loro stili - peso morto, quindi in "source / stylesheets / _hero_banner.scss":

 //.hero-logo img // height: 4em; // margin-bottom: 1em; // 

Immagine di sfondo

Anche l'immagine di sfondo generica deve andare. Per prima cosa ti mostrerò come voglio che guardi, poi ti spiegherò come arrivarci.

Ignora la tipografia per ora, puoi regolarla in un secondo momento. Ho sostituito l'immagine e ho messo un leggero gradiente sopra di esso. Dato che il tipo è bianco, avevo bisogno di un po 'più di contrasto per una migliore esperienza di lettura. Se scegli un'immagine che non ha bisogno di un gradiente aggiuntivo, fallo!

Ho modificato il codice Ricarica con un paio di modifiche. Per prima cosa ho aggiunto un'immagine a "source / images" e salvato questa immagine nella variabile $ Eroe-immagine. Quindi ho riutilizzato questa variabile nel sfondo mixin da Bourbon e riordinato l'immagine e il lineare gradiente (anche una miscela borbonica). Poiché la sfumatura viene prima, viene sovrapposta a Matcha_Nerdz.png. Ancora una volta, in "source / stylesheets / _hero_banner.scss":

 .hero $ hero-image: '... /images/Matcha_Nerdz.png'; $ hero-background-top: darken ($ matcha-green, 65%); $ hero-background-bottom: rgba (alleggerire ($ matcha-green, 10%), .3); @include background (linear-gradient ($ gradient-angle, $ hero-background-bottom, $ hero-background-top), url ($ hero-image), no-repeat $ hero-background-top scroll); margin-bottom: 2em; // background-color: # 324766; // background-size: cover; 

Per il gradiente stesso, ho riutilizzato il nostro $ Matcha-verde che abbiamo archiviato in "source / stylesheets / base / _variables.scss". Il colore superiore è darkend del 65% con una funzione Sass; l'altro viene alleggerito del 10% e reso trasparente tramite un'altra funzione Sass chiamata RGBA. Quindi riutilizziamo queste variabili nel nostro sfondo mixin. Il gradiente angolo è rimasto lo stesso. Ho anche aggiunto un piccolo margine di 2em per abbassare un po 'l'elenco degli indici. Gli stili che ho commentato per te sono di peso morto e quindi li ho cancellati.

Puoi anche giocare con un gradiente simile direttamente in Photoshop, ma volevo mostrarti come utilizzarli in Sass. Di seguito è riportato uno screenshot che non ha alcuna sfumatura lineare aggiunta all'unità eroe. Come un piccolo esercizio, lascerò la pulizia degli stili che abbiamo copiato. Se trovi duplicati o stili non utilizzati, ti consiglio di correggerlo prima di proseguire.

Impegno e distribuzione

Tempo per un altro commit e distribuzione.

 git add --all git commit -m 'Aggiunge l'unità eroe a index.html.erb Aggiunge l'immagine dell'eroe con gradiente Aggiunge _hero_banner Sass partial Imports Sass partial' middleman deploy 

Senza la griglia visiva, non sembra che tu abbia ancora molto lavoro da fare per adattare questa pagina alle tue esigenze di podcasting. Alcune cose che ti consiglio di fare è trovare un carattere tipografico che comunichi distintamente il tuo progetto senza essere troppo esotico e regolare le dimensioni e la spaziatura del testo in modo che si adatti all'immagine di sfondo dell'unità eroe. Poiché questo fa parte del tuo marchio, ti suggerisco di prenderti il ​​tempo e divertirti!

Navigazione

È un buon momento per aggiungere una barra di navigazione. Ancora una volta, utilizzeremo un modello esistente da Ricariche e lo adatteremo per i nostri bisogni. Ho scelto la "Navigazione centrata" che troverai sotto "Motivi". Per questo, abbiamo bisogno di copiare l'HTML, SCSS e il codice CoffeeScript. Inizierò innanzitutto aggiungendo il markup al nostro file "layout.erb" globale

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

Whoa! Questo è un bel pezzo di codice. Stai pensando come me? Questo sembra cattivo, giusto? Mettiamolo in un parziale. Cambiamo "source / layouts / layout.erb" in:

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

E aggiungi "source / partials / _navbar.erb":

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

Ho rimosso un sacco di cose che non mi servono e finisco solo con il mio logo che ho memorizzato in "/ images" e due link per la home page e le pagine. Per i due collegamenti ho usato il Collegamento a metodo di supporto. Ci vogliono due argomenti:

• La stringa su cui gli utenti devono fare clic
• e la posizione a cui vuoi collegarti.

Sono sicuro che le persone che hanno giocato un po 'con Rails o Sinatra hanno familiarità con questo. Pratico, ma non un grosso problema. Il link per "Home" (/ matcha-nerd) si interromperà per il tuo host locale ma sta lavorando su GitHub Pages dove abbiamo bisogno dello spazio dei nomi.

L'avido lettore potrebbe anche aver scoperto che il nostro parla di link a una semplice pagina HTML che ho inserito in una nuova directory chiamata "pagine". Ti suggerisco di inserire pagine HTML come contatti, faq o qualsiasi altra cosa in questa directory. Se inserisci queste pagine statiche, non dovresti avere problemi a personalizzarle in base alle tue esigenze. Divertiti e applica ciò che hai imparato finora con queste pagine. Da qui in poi sei da solo con questi, ma ora sai tutto ciò di cui hai bisogno. Samo, samo!

Asset Path

Una parola sui tag immagine e il percorso degli asset su GitHub Pages. Ho deciso di sostituire la pianura img tag per il logo con un aiuto di Middleman chiamato image_tag. Non è solo abbastanza conciso e leggibile, ma risolve anche un problema con cui ti imbatterai img taggalo quando costruisci il sito e lo distribuisci su GitHub Pages. L'url per il collegamento di asset su singoli articoli viene completamente rovinato e questa è la soluzione più semplice per risolverlo.

Prima di usare image_tag, l'url per il logo era simile a questo: http://your_username.github.io/images/matcha_nerdz_logo-hash_numbers.png

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

Questo helper di Middleman ha fornito l'url con il nome dell'app matcha-Nerdz-ha correttamente assegnato il nome alla risorsa e dà accesso a GitHub Pages a questo file immagine (http://your_username.github.io/matcha-nerdz/images/matcha_nerdz_logo-hash_numbers.png).

Più organizzazione

Gli stili che ho copiato da Refills sono ovviamente in un nuovo parziale di Sass. In "source / stylesheets / all.sass" facciamo riferimento a:

 @import 'header_navbar' 

E l'attuale parziale "source / stylesheets / _header_navbar.scss" ha il seguente aspetto:

 .centrato-navigazione $ base-border-radius: 3px! default; $ dark-gray: # 333! default; $ large-screen: em (860)! predefinito; $ base-font-color: bianco; $ centrato-navigazione-padding: 1em; $ centered-navigation-logo-height: 2em; $ centered-navigation-background: # E7F1EC; $ centered-navigation-color: $ base-font-color; $ centered-navigation-color-hover: $ text-color; $ centered-navigation-height: 60px; $ centrato-navigazione-elemento-padding: 1em; $ centrato-navigazione-sottomenu-padding: 1em; $ centered-navigation-item-nudge: 2.2em; $ modalità-barra orizzontale: $ grande schermo; background-color: $ matcha-green; border-bottom: 1px darken scuro ($ matcha-green, 5%); altezza minima: $ centered-navigation-height; larghezza: 100%; z-index: 9999; // Visualizzazione mobile .mobile-logo display: inline; fluttuare: a sinistra; altezza massima: $ centrato-navigazione-altezza; padding-left: $ centrato-navigazione-padding; img max-height: $ centered-navigation-height; riempimento: .8em 0;  @include media ($ horizontal-bar-mode) display: none;  .centered-navigation-mobile-menu color: $ centered-navigation-color; blocco di visualizzazione; float: giusto; line-height: $ centered-navigation-height; margine: 0; padding-right: $ centrato-navigazione-sottomenu-padding; decorazione del testo: nessuna; text-transform: maiuscolo; @include media ($ horizontal-bar-mode) display: none;  &: focus, &: hover color: $ centered-navigation-color-hover;  // Nav menu .centered-navigation-wrapper @include outer-container; @include clearfix; posizione: relativa; z-index: 999;  ul.centered-navigation-menu -webkit-transform-style: preserve-3d; // stop webkit flicker clear: both; display: nessuno; margine: 0 auto; overflow: visibile; padding: 0; larghezza: 100%; z-index: 99999; & .show display: block;  @include media ($ horizontal-bar-mode) display: block; allineamento del testo: centro;  // Gli elementi nav .nav-link: first-child @include media ($ horizontal-bar-mode) margin-left: $ centered-navigation-item-nudge; padding-right: 0px;  ul li.nav-link background: lighten ($ matcha-green, 8%); blocco di visualizzazione; line-height: $ centered-navigation-height; overflow: nascosto; padding-right: $ centrato-navigazione-sottomenu-padding; allineamento del testo: giusto; larghezza: 100%; z-index: 9999; a color: $ centered-navigation-color; display: blocco in linea; contorni: nessuno; decorazione del testo: nessuna; &: focus, &: hover color: $ centered-navigation-color-hover;  @include media ($ horizontal-bar-mode) background: transparent; display: inline; line-height: $ centered-navigation-height; a padding-right: $ centered-navigation-item-padding;  li.logo.nav-link display: none; altezza della linea: 0; @include media ($ large-screen) display: inline;  .logo img margin-bottom: - $ centered-navigation-logo-height / 3; altezza massima: $ centered-navigation-logo-height;  

Ho inserito il codice CoffeeScript di Refills in "all.coffee". Non appena ho dovuto aggiungere altro codice, l'ho messo nel suo posto designato. “Fonte / javascript / all.coffee”:

 // = richiede jquery $ (documento) .ready -> menuToggle = $ ('# js-centered-navigation-mobile-menu'). unbind () $ ('# js-centered-navigation-menu'). removeClass ' mostra 'menuToggle.on' click ', (e) -> e.preventDefault () $ (' # js-centered-navigation-menu '). slideToggle -> if $ (' # js-centered-navigation-menu ') .is (': hidden') $ ('# js-centered-navigation-menu'). removeAttr 'style' return return return 

Questo snippet è responsabile della commutazione del menu per gli schermi più piccoli.

Perché ho cancellato un sacco di cose che non mi servivano dal markup della barra di navigazione, come il sottomenu: in questo file ero in grado di eliminare una parte significativa degli stili rilevanti. Dato che non so se hai bisogno di una barra di navigazione più elaborata e vuoi prendere il codice direttamente da questi esempi, ti suggerisco di copiare il codice originale se hai piani più grandi per la barra di navigazione. Gioca con il Sass per adattarlo al tuo stile, rimuovere il codice morto e duplicati. Ho regolato il colore di sfondo e i colori dei collegamenti, ho giocato con la trasparenza del logo, ho cambiato il bordo e sono andato avanti. Divertiti e impazzisci se vuoi. Volevo solo utilizzare una barra di navigazione super semplice con il colore del marchio e un logo centrato. Si è rivelato abbastanza buono per questo piccolo lavoro che direi.

Ecco la pagina indice:

Ed ecco la pagina dei dettagli:

È ora di impacchettarlo in un commit git e di distribuire il sito.

 git add --all git commit -m 'Implementa un'intestazione con barra di navigazione Aggiunge un'intestazione parziale al layout Prende cura dell'URL del bene distribuito per il logo Imports Sass partial per la barra di navigazione Aggiunge il logo Aggiunge codice CoffeeScript Regola Ricarica gli stili Regola Ricarica markup' middleman deploy 

Titolo

Il prossimo cambiamento è piccolo, solo un tocco davvero. Dobbiamo aggiornare il tag title nel nostro layout ("source / layouts / layout.erb"):

Questo ci dà un titolo dinamico che inizia sempre con il nome del nostro sito e allega il titolo dell'articolo, se disponibile.

 git add --all git commit -m 'Regola l'installazione del middleman' del titolo del sito 

paginatura

Quando guardi in fondo alla lista degli articoli degli indici vedrai qualcosa di essenziale che manca, navigando nel nostro elenco di post.

Non sono un fan dei link di paginazione eccessivamente intelligenti, anche quelli ingombranti non vincono nessun premio con me. Manteniamolo semplice e fornire due link per le pagine successive e precedenti. Middleman rende questo incredibilmente conveniente. Abbiamo solo bisogno di aggiustare il nostro "config.rb" e dire al frontmatter della nostra pagina di indice per ottimizzarlo.

 blog.paginate = true 

Per prima cosa decommentare la riga sopra. Dopodiché, dici alla pagina indice quanti articoli vuoi vedere. Penso che dieci post per pagina siano sufficienti. In "source / index.html.erb":

 --- per_page: 10 pageable: true --- 

Il passaggio finale prima di applicare alcuni stili è quello di posizionare entrambi i collegamenti nella parte inferiore dell'elenco. Per prima cosa dobbiamo liberarci di queste righe di codice sotto le quali sono stati commentati. Sono stati posizionati nella parte superiore della pagina indice.

E poi posizionalo nella parte inferiore di questa pagina:

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

Questo ci dà i collegamenti di navigazione che abbiamo bisogno fianco a fianco e ci fornisce una classe per modificare alcune cose. Ho deciso di utilizzare un partial per il codice Sass perché non si adattava al piè di pagina, né agli stili di post dell'indice, in più merita un parziale proprio, specialmente se dovesse crescere di dimensioni maggiori. In "source / stylesheets / all.sass":

 'impaginazione' @import 

E nel parziale "source / stylesheets / _pagination.sass":

 .pagination-link + shift (2) margin-bottom: 4em &: first-of-type float: left margin-right: 4em a + transition (colore 0.25s easy-in-out) colore: $ text-color font-size : 1.1em &: colore del passaggio del mouse: $ matcha-green 

Spostiamo i collegamenti un po 'a destra, sistemali a fluttuare l'uno accanto all'altro - il comportamento predefinito sarebbe il blocco dei blocchi sovrapposti - e applicare un piccolo effetto di transizione quando l'utente si posiziona sul collegamento. Questo è tutto ciò di cui abbiamo bisogno adesso. Diamo un'occhiata.

Alrighty, tempo per un altro commit.

 git add -all git commit -m 'Aggiunge la paginazione per indicizzare l'elenco dei post Regola config.rb Regola il markup nella pagina dell'indice Aggiunge gli stili in _pagination Sass partial' middleman deploy 

Pensieri finali

Suppongo che dovrebbe essere sufficiente per la versione 01! Come passo successivo, dovresti giocare con le query multimediali per rendere il layout reattivo a varie dimensioni dello schermo. La tipografia potrebbe anche aver bisogno di un amore serio.

Scegli un carattere o due che meglio si adattano al tema del tuo podcast, ma non dimenticare di tenerlo leggibile.

Inoltre, se decidi di fare un podcast per davvero, posso solo congratularmi con te. È un ottimo modo per imparare dagli esperti e anche per aumentare significativamente la tua rete. Fare qualcosa di valore per la comunità è sempre una buona idea e può dare grandi frutti. Un ultimo consiglio, cerca di imparare facendo e sperimenta il più possibile! Leggere da solo non basta: è stato lì, fatto! Se ti piace condividere le nozioni apprese scrivendo su di esso, approfondirai ulteriormente la tua comprensione dell'argomento. Divertiti!