Ici, j'ai également copié les styles de la section des motifs de Refills, en les plaçant dans un nouveau fichier dédié à cette section de bannière. Les styles fournis sont dans le .scss syntaxe et donc je vais avec le flux-il n'y a pas besoin de convertir cela en .toupet vraiment.

Dans “source / stylesheets / _hero_banner.scss”:

 .hero $ base-border-radius: 3px! default; $ action-color: # 477DCA! default; $ grand écran: em (860)! default; $ hero-background-top: # 7F99BE; $ hero-background-bottom: # 20392B; $ hero-color: blanc; $ 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), défilement $ hero-background-top); couleur de fond: # 324766; position de fond: top; répétition de fond: non répétée; taille du fond: couverture; rembourrage en bas: 3em; .hero-logo img hauteur: 4em; marge en bas: 1em;  .hero-inner @include outer-container; @include clearfix; marge: auto; rembourrage: 3.5em; text-align: center; .hero-copy text-align: center; h1 color: $ hero-color; taille de police: 1.6em; marge inférieure: 0.5em; @include media ($ grand écran) font-size: 1.8em;  p color: $ hero-color; hauteur de ligne: 1.4em; marge: 0 auto 3em auto; @include media ($ grand écran) font-size: 1.1em; largeur maximale: 40%;  

Nous ajusterons cela dans un instant, mais regardons d’abord:

Cela convient parfaitement, c'est comme ça que je l'aime! Modifions cela à nos besoins en nous débarrassant de l'image et de l'icône. Mais commençons par le texte, donc dans “source / index.html.erb”:

Vous pouvez modifier cela comme vous le souhaitez. Je veux faire cela rapidement et juste augmenter la taille de la h1 pour les grands écrans et les petits appareils. L'en-tête de l'unité des héros est maintenant 2em et 3em respectivement pas trop. Le rembourrage sur .héros intérieur a également besoin de déplacer un coup de pouce.

Encore une fois dans “source / stylesheets / _hero_banner.scss”:

 .hero-inner // padding: 3.5em; rembourrage en haut: 1.2em;  .hero-copy text-align: center; h1 color: $ hero-color; taille de police: 2em; marge inférieure: 0.5em; @include media ($ grand écran) font-size: 3em;  

Ensuite, supprimons l’espace réservé pour le logo. Je les trouve souvent un peu ennuyeux. Dans “source / index.html.erb”:

 
 
 
 
MATCHA NERDZ
 
Podcast pour les connaisseurs de thé vert
 
 
 
 

C'est tout ce dont nous avons besoin. Puisque nous n'utilisons pas le logo du héros, supprimons son poids mort, c'est-à-dire dans «source / stylesheets / _hero_banner.scss»:

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

Image de fond

L'image de fond générique doit également disparaître. Je vais d'abord vous montrer ce que je veux, puis je vais vous expliquer comment vous y rendre.

Ignorez la typographie pour l'instant, vous pourrez l'ajuster plus tard. J'ai remplacé l'image et mis un léger dégradé dessus. Comme le type est blanc, il me fallait un peu plus de contraste pour une meilleure expérience de lecture. Si vous choisissez une image qui n'a pas besoin d'un dégradé supplémentaire, allez-y!

J'ai ajusté le code de recharges avec quelques modifications. Tout d'abord, j'ai ajouté une image à “source / images” et ai sauvegardé cette image dans la variable $ hero-image. Puis j'ai réutilisé cette variable dans le Contexte mixin de Bourbon et réordonné l'image et la gradient linéaire (un mix Bourbon aussi). Parce que le dégradé vient en premier, il se superpose à Matcha_Nerdz.png. Une fois de plus, dans “source / stylesheets / _hero_banner.scss”:

 .hero $ hero-image: '… /images/Matcha_Nerdz.png'; $ hero-background-top: assombrit ($ matcha-green, 65%); $ hero-background-bottom: rgba (allégé ($ matcha-vert, 10%), .3); @include background (linéaire-dégradé ($ angle-gradient, $ hero-fond-en-bas, $ hero-fond-en-haut), url ($ hero-image), défilement sans $ hero-fond-en haut); marge inférieure: 2em; // couleur de fond: # 324766; // background-size: cover; 

Pour le dégradé lui-même, j'ai réutilisé notre $ vert matcha que nous avons stockés dans «source / stylesheets / base / _variables.scss». La couleur supérieure est assombrie de 65% avec une fonction Sass; l'autre est allégée de 10% et rendue transparente via une autre fonction Sass appelée rgba. Nous réutilisons ensuite ces variables dans notre Contexte mixin. le angle d'inclinaison resté le même. J'ai aussi ajouté une petite marge de 2em pour pousser un peu la liste des index. Les styles que j'ai commentés pour vous sont du poids mort et je les ai donc supprimés.

Vous pouvez aussi jouer avec un tel dégradé directement dans Photoshop, bien sûr, mais je voulais vous montrer comment vous pouvez les utiliser dans Sass. Vous trouverez ci-dessous une capture d'écran dans laquelle aucun dégradé linéaire n'est ajouté à l'unité héros. Comme petit exercice, je vais laisser le nettoyage des styles que nous vous avons copiés. Si vous trouvez des doublons ou des styles inutilisés, je vous recommande de résoudre ce problème avant de poursuivre..

S'engager et se déployer

Temps pour un autre commit et déploiement.

 git add --all git commit -m 'Ajoute l'unité du héros à index.html.erb Ajoute une image du héros avec un dégradé Ajoute _hero_banner Sass partial Importe un Sass partiel' intermédiaire 

Sans la grille visuelle, il ne semble pas qu'il vous reste beaucoup de travail pour ajuster cette page à vos besoins en podcasting. Il est conseillé de rechercher une police de caractères qui communique distinctement votre projet sans être trop exotique, puis d'ajuster la taille et l'espacement de votre texte de sorte qu'il s'adapte à l'image d'arrière-plan de votre unité héros. Puisque cela fait partie de votre image de marque, je vous suggère de prendre votre temps et de vous amuser.!

La navigation

C'est un bon moment pour ajouter une barre de navigation. De nouveau, nous utiliserons un modèle existant de Refills et l’adapterons à nos propres besoins. J'ai choisi la "Navigation Centrée" que vous trouverez sous "Patterns". Pour celui-ci, nous devons copier le code HTML, SCSS et le code CoffeeScript. Je vais commencer par ajouter le balisage à notre fichier global «layout.erb»

        <%= 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! C'est un morceau de code. Pensez-vous la même chose que moi? Cela a l'air méchant, non? Mettons cela dans un partiel. Nous allons changer «source / layouts / layout.erb» en:

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

Et ajoutez «source / partials / _navbar.erb»:

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

J'ai supprimé un tas de choses dont je n'ai pas besoin et je n'ai que mon logo que j'ai stocké dans «/ images» et deux liens pour la page d'accueil et à propos de pages. Pour les deux liens, j'ai utilisé le lié à méthode d'assistance. Il faut deux arguments:

• La chaîne sur laquelle les utilisateurs doivent cliquer
• et l'emplacement vers lequel vous souhaitez créer un lien.

Je suis sûr que les gens qui ont un peu joué avec Rails ou Sinatra sont au courant de cela. Pratique, mais pas grave. Le lien pour "Home" (/ matcha-nerd) se brisera pour votre hôte local mais il fonctionne sur les pages GitHub où nous avons besoin de l'espace de noms..

Le lecteur assidu a peut-être aussi découvert que notre sujet proposait un lien vers une page HTML simple que je plaçais dans un nouveau répertoire nommé "pages". Je vous suggère de mettre des pages HTML comme contact, faq ou autre dans ce répertoire. Si vous mettez ces pages statiques là-bas, vous ne devriez pas avoir de problèmes pour les personnaliser selon vos besoins. Amusez-vous et appliquez ce que vous avez appris jusqu'à présent avec ces pages. A partir de là, vous êtes seul avec ceux-ci, mais vous savez maintenant tout ce dont vous avez besoin. Samo, Samo!

Chemin de l'actif

Un mot sur les balises d’image et le chemin des ressources sur les pages GitHub. J'ai décidé de remplacer la plaine img étiquettes pour le logo avec un assistant Middleman appelé image_tag. Il est non seulement concis et lisible, mais corrige également un problème que vous rencontrerez avec le img balise lorsque vous construisez le site et le déployez sur GitHub Pages. L'URL du lien d'actif sur des articles individuels est tout gâché et c'est la solution la plus simple pour y remédier.

Avant d'utiliser image_tag, l'url du logo ressemble à ceci: http://votre_nom_utilisateur.github.io/images/matcha_nerdz_logo-hash_numbers.png

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

Cette aide de Middleman a fourni à l'URL le nom de l'application matcha-nerdz-il nomme correctement l’actif et donne à GitHub Pages l’accès à ce fichier image (http://votre_nom_utilisateur.github.io/matcha-nerdz/images/matcha_nerdz_logo-hash_numbers.png).

Plus d'organisation

Les styles que j'ai copiés à partir de Refills sont bien sûr dans une nouvelle partie Sass. Dans «source / stylesheets / all.sass», nous référons:

 @import 'header_navbar' 

Et la partie partielle "source / stylesheets / _header_navbar.scss" ressemble à ceci:

 .center-navigation $ base-border-radius: 3px! default; $ gris foncé: # 333! default; $ grand écran: em (860)! default; $ base-font-color: blanc; $ center-navigation-padding: 1em; $ center-navigation-logo-height: 2em; $ center-navigation-background: # E7F1EC; $ center-navigation-color: $ base-font-color; $ center-navigation-color-hover: $ text-color; $ center-navigation-height: 60px; $ center-navigation-item-padding: 1em; $ navigation-centrée-navigation-sous-menu: 1em; $ center-navigation-item-nudge: 2.2em; $ mode barre horizontale: $ grand écran; couleur de fond: $ matcha-green; bas de la bordure: 1px solide noircit (vert matcha, 5%); hauteur-min: $ centré-navigation-hauteur; largeur: 100%; z-index: 9999; // Vue mobile .mobile-logo display: inline; float: gauche; max-height: $ center-navigation-height; padding-left: $ center-navigation-padding; img hauteur-maximale: $ centré-navigation-hauteur; remplissage: .8em 0;  @include media ($ mode-barre horizontale) display: none;  .centered-navigation-mobile-menu color: $ center-navigation-color; bloc de visualisation; Flotter à droite; line-height: $ center-navigation-height; marge: 0; padding-right: $ center-navigation-submenu-padding; texte-décoration: aucun; text-transform: majuscule; @include media ($ mode-barre horizontale) display: none;  &: focus, &: survol couleur: $ centré-navigation-couleur-survol;  // Menu de navigation .centered-navigation-wrapper @include outer-container; @include clearfix; position: relative; z-index: 999;  ul.centered-navigation-menu -webkit-transform-style: preserve-3d; // arrête le scintillement du webkit clear: both; affichage: aucun; marge: 0 auto; débordement: visible; rembourrage: 0; largeur: 100%; z-index: 99999; & .show display: block;  @include media ($ mode-barre horizontale) display: block; text-align: center;  // Les éléments de navigation .nav-link: premier-enfant @include média ($ mode-barre-horizontale) marge-gauche: $ centré-navigation-item-nudge; padding-right: 0px;  ul li.nav-link background: lighten ($ matcha-green, 8%); bloc de visualisation; line-height: $ center-navigation-height; débordement caché; padding-right: $ center-navigation-submenu-padding; text-align: right; largeur: 100%; z-index: 9999; a color: $ center-navigation-color; affichage: inline-block; contour: aucun; texte-décoration: aucun; &: focus, &: hover couleur: $ centrée-navigation-couleur-survol;  @include media ($ mode-barre horizontale) background: transparent; affichage: en ligne; line-height: $ center-navigation-height; un padding-right: $ center-navigation-item-padding;  li.logo.nav-link display: none; hauteur de ligne: 0; @include media ($ grand écran) display: inline;  .logo img margin-bottom: - $ centré-navigation-logo-height / 3; hauteur-max: $ center-navigation-logo-height;  

J'ai mis le code CoffeeScript de Refills dans «all.coffee». Dès que je devais ajouter plus de code, je le mettais à sa place. "Source / javascripts / all.coffee":

 // = nécessite jquery $ (document) .ready -> menuToggle = $ ('# js-centré-navigation-mobile-menu'). unbind () $ ('# js-centré-navigation-menu'). removeClass ' show 'menuToggle.on' click ', (e) -> e.preventDefault () $ (' # js-centré-navigation-menu '). slideToggle -> if $ (' # js-centré-navigation-menu ') .is (': hidden') $ ('# js-center-navigation-menu'). removeAttr 'style' return return return 

Cet extrait est responsable de la bascule du menu pour les écrans plus petits.

Comme j'ai supprimé un tas de choses dont je n'avais pas besoin du balisage de la barre de navigation, comme le sous-menu, j'ai pu supprimer une grande partie des styles pertinents de ce fichier. Puisque je ne sais pas si vous avez besoin d’une barre de navigation plus élaborée et que vous voulez utiliser le code directement à partir de ces exemples, je vous suggère de copier le code original si vous avez de plus grands projets pour la barre de navigation. Jouez avec le Sass selon votre style, supprimez le code mort et les doublons. J'ai ajusté la couleur d'arrière-plan et les couleurs des liens, joué avec la transparence du logo, modifié la bordure et continué. Amusez-vous et devenez fou si vous aimez. Je voulais juste utiliser une barre de navigation super simple avec la couleur de la marque et un logo centré. Je me suis dit que c'était plutôt bon pour ce petit travail.

Voici la page d'index:

Et voici la page de détail:

Il est temps de regrouper cela dans un commit git et de déployer le site.

 git add --all git add -m 'Implémente un en-tête avec la barre de navigation Ajoute un en-tête partiel à la présentation Prend soin de l'url de l'actif déployé pour le logo Importe Sass partial pour la barre de navigation Ajoute le logo Ajoute du code CoffeeScript Ajuste les styles de recharges Ajuste les recharges 

Titre

Le prochain changement est un petit changement, juste une touche vraiment. Nous devons mettre à jour la balise title dans notre layout (“source / layouts / layout.erb”):

Cela nous donne un titre dynamique qui commence toujours par le nom de notre site et joint le titre de l'article s'il est disponible..

 git add --all git commit -m 'ajuste le titre du site' intermédiaire deploy 

Pagination

Lorsque vous regardez au bas de la liste d'index des articles, vous constaterez qu'il manque quelque chose d'essentiel: naviguer dans notre liste d'articles.

Je ne suis pas un fan de liens de pagination trop intelligents: les liens volumineux ne gagnent pas non plus de prix avec moi. Restons simples et fournissons deux liens pour les pages suivantes et précédentes. Middleman rend cela incroyablement pratique. Nous avons juste besoin d’ajuster notre fichier «config.rb» et d’indiquer à la page principale de notre page d’index de l’ajuster.

 blog.paginate = true 

Commencez par décommenter la ligne ci-dessus. Après cela, vous indiquez à la page d'index le nombre d'articles que vous souhaitez voir. Je pense que dix posts par page suffisent. Dans “source / index.html.erb”:

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

La dernière étape avant d'appliquer un certain style consiste à placer les deux liens en bas de la liste. Premièrement, nous devons nous débarrasser de ces lignes de code ci-dessous, qui ont été commentées. Ils ont été placés tout en haut de votre page d'index.

Et puis placez ceci au bas de cette page:

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

Cela nous donne les liens de navigation dont nous avons besoin côte à côte et nous fournit une classe pour peaufiner quelques petites choses. J'ai décidé d'opter pour un code partiel pour le code Sass, car il ne correspond ni au pied de page, ni aux styles de publication d'index. De plus, il mérite un code en particulier, surtout si sa taille augmente. Dans “source / stylesheets / all.sass”:

 @import 'pagination' 

Et dans la partie «source / stylesheets / _pagination.sass»:

 .pagination-link + shift (2) margin-bottom: 4em &: premier-du-type float: left margin-right: 4em une transition + (couleur 0,25s au maximum) couleur: $ text-color police-size : 1.1em &: hover couleur: $ matcha-green 

Nous décalons les liens un peu vers la droite, les organisons de manière à ce qu'ils flottent les uns à côté des autres - le comportement par défaut serait un comportement de bloc empilé les uns sur les autres - et appliquons un petit effet de transition lorsque l'utilisateur survole le lien. C'est tout ce dont nous avons besoin maintenant. Regardons.

Très bien, il est temps pour un autre commit.

 git add -all git commit -m 'Ajoute la pagination à la liste d'index posts Ajuste config.rb Ajuste le balisage sur la page d'index Ajoute des styles dans _pagination Intermédiaire Sass partiel' déployer 

Dernières pensées

Je suppose que cela devrait suffire pour la version 01! La prochaine étape consiste à jouer avec les requêtes multimédia pour que la disposition soit adaptée aux différentes tailles d'écran. La typographie pourrait aussi avoir besoin d'un amour sérieux.

Choisissez une ou deux polices de caractères qui correspondent le mieux au thème de votre podcast. N'oubliez pas de le garder très lisible..

De plus, si vous décidez de faire un podcast pour de vrai, je ne peux que vous en féliciter. C'est un excellent moyen d'apprendre des experts et également d'accroître considérablement votre réseau. Faire quelque chose de précieux pour la communauté est toujours une bonne idée et peut rapporter beaucoup d'argent. Un dernier conseil, essayez d'apprendre par la pratique et l'expérience autant que vous le pouvez! La lecture seule ne suffit pas - ça y est, ça fait! Si vous aimez partager les leçons apprises en écrivant à ce sujet, vous approfondirez encore plus votre compréhension du sujet. S'amuser!