Aquí también copié los estilos de la sección de patrones de Recargas, colocándolos en un nuevo archivo dedicado a esta sección de banner. Los estilos proporcionados están en el .scss sintaxis y así voy con el flujo, no hay necesidad de convertir esto en .hablar con descaro a De Verdad.

En "source / stylesheets / _hero_banner.scss":

 .hero $ base-border-radius: 3px! default; $ action-color: # 477DCA! por defecto; $ pantalla grande: em (860)! predeterminado; $ hero-background-top: # 7F99BE; $ hero-background-bottom: # 20392B; $ color del héroe: blanco; $ gradient-angle: 10deg; $ hero-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png'; @include background (url ($ hero-image), gradiente lineal ($ gradient-angle, $ hero-background-bottom, $ hero-background-top), no-repetir $ hero-background-top scroll superior); color de fondo: # 324766; posición de fondo: superior; repetición de fondo: no repetición; tamaño de fondo: cubierta; parte inferior de relleno: 3em; .hero-logo img altura: 4em; margen inferior: 1em;  .hero-inner @include external-container; @include clearfix; margen: auto; relleno: 3.5em; text-align: center; .hero-copy text-align: center; h1 color: $ hero-color; tamaño de fuente: 1.6em; margen inferior: 0.5em; @include media ($ large-screen) font-size: 1.8em;  p color: $ hero-color; altura de la línea: 1.4em; margen: 0 auto 3em auto; @include media ($ large-screen) font-size: 1.1em; ancho máximo: 40%;  

Vamos a ajustar esto en un segundo, pero vamos a echar un vistazo primero:

Encaja perfectamente, así es como me gusta. Vamos a ajustar esto a nuestras necesidades mediante la eliminación de la imagen y el icono. Pero comencemos con el texto, así que en "source / index.html.erb":

Puedes modificar esto como quieras. Quiero hacer esto rápido y solo aumentar el tamaño del h1 Tanto para pantallas grandes como para dispositivos más pequeños. El encabezado de la unidad de héroe es ahora. 2em y 3em respectivamente -no demasiado. El relleno en .héroe interno También necesita mover un codazo.

De nuevo en "source / stylesheets / _hero_banner.scss":

 .hero-inner // padding: 3.5em; relleno superior: 1.2em;  .hero-copy text-align: center; h1 color: $ hero-color; tamaño de letra: 2em; margen inferior: 0.5em; @include media ($ large-screen) font-size: 3em;  

A continuación vamos a matar el marcador de posición logo. Los encuentro a menudo un poco molestos. En "source / index.html.erb":

 
 
 
 
MATCHA NERDZ
 
Podcast para los conocedores del té verde
 
 
 
 

Eso es todo lo que necesitamos. Ya que no usamos el logo del héroe, eliminemos su peso de estilos muertos, así que en "source / stylesheets / _hero_banner.scss":

 //.hero-logo img // altura: 4em; // margen inferior: 1em; // 

Imagen de fondo

La imagen de fondo genérica también tiene que irse. Primero te mostraré cómo quiero que se vea, luego te explicaré cómo llegar allí..

Ignore la tipografía por ahora, puede ajustarla más tarde. Reemplacé la imagen y puse un ligero degradado encima. Como el tipo es blanco, necesitaba un poco más de contraste para una mejor experiencia de lectura. Si elige una imagen que no necesita un degradado adicional, hágalo!

Ajusté el código de Recargas con un par de cambios. Primero, agregué una imagen a "fuente / imágenes" y guardé esta imagen en la variable $ imagen-héroe. Luego reutilizé esta variable en el fondo Mixin de Bourbon y reordenado la imagen y la gradiente lineal (Una mezcla de borbones también). Debido a que el gradiente es lo primero, se superpone sobre el Matcha_Nerdz.png. Una vez más, en "source / stylesheets / _hero_banner.scss":

 .hero $ hero-image: '… /images/Matcha_Nerdz.png'; $ hero-background-top: se oscurece ($ matcha-green, 65%); $ hero-background-bottom: rgba (aclarar ($ matcha-verde, 10%), .3); @include background (gradiente lineal ($ gradient-angle, $ hero-background-bottom, $ hero-background-top), url ($ hero-image), no-repetir $ hero-background-top scroll); margen inferior: 2em; // color de fondo: # 324766; // tamaño de fondo: cubierta; 

Para el gradiente en sí, reutilizé nuestra $ matcha-green que almacenamos en "source / stylesheets / base / _variables.scss". El color superior es oscuro en un 65% con una función Sass; el otro se aligera en un 10% y también se hace transparente a través de otra función Sass llamada rgba. Luego reutilizamos estas variables en nuestro fondo mezclar los ángulo de gradiente se mantuvo igual. También agregué un pequeño margen de 2em para empujar la lista de índice hacia abajo un poco. Los estilos que comenté para ti son de peso muerto, así que los borré..

Por supuesto, también puedes jugar con tal gradiente directamente en Photoshop, pero quería mostrarte cómo puedes usarlos en Sass. A continuación se muestra una captura de pantalla que no tiene un degradado lineal agregado a la unidad del héroe. Como un pequeño ejercicio, le dejaré la limpieza de los estilos que le copiamos. Si encuentra duplicados o estilos no utilizados, le recomiendo que arregle esto antes de continuar.

Comprometerse y desplegar

Tiempo para otro commit y despliegue..

 git add --all git commit -m 'Agrega una unidad de héroe a index.html.erb Agrega una imagen de héroe con un gradiente Agrega _hero_banner Importa parcial Importa Despliegue parcial de intermediario' sass 

Sin la cuadrícula visual, no parece que tenga mucho trabajo por ajustar esta página para sus necesidades de podcasting. Algunas cosas que recomiendo que hagas es encontrar un tipo de letra que comunique tu proyecto de manera distintiva sin ser demasiado exótico y ajusta el tamaño y el espaciado del texto para que se ajuste a la imagen de fondo de tu unidad de héroe. Como esto forma parte de su marca, le sugiero que se tome su tiempo y se divierta.!

Navegación

Es un buen momento para agregar una barra de navegación. Nuevamente, usaremos un patrón existente de Recargas y lo adaptaremos a nuestras propias necesidades. Elegí la "Navegación centrada" que encontrarás en "Patrones". Para este, necesitamos copiar el código HTML, SCSS y el código de CoffeeScript. Comenzaré primero agregando el marcado a nuestro archivo “layout.erb” global

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

Whoa! Eso es una buena parte del código. ¿Estás pensando lo mismo que yo? Esto se ve desagradable, ¿verdad? Vamos a poner esto en un parcial. Cambiaremos "source / layouts / layout.erb" a:

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

Y añada "source / partials / _navbar.erb":

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

He eliminado un montón de cosas que no necesito y solo termino con mi logotipo que almacené en “/ images” y dos enlaces para el hogar y sobre las páginas. Para los dos enlaces utilicé el enlace a método de ayuda Se necesitan dos argumentos:

• La cadena en la que los usuarios quieren hacer clic.
• y la ubicación a la que desea enlazar.

Estoy seguro de que las personas que han jugado un poco con Rails o Sinatra están familiarizadas con esto. Práctico, pero no es gran cosa. El enlace para "Inicio" (/ matcha-nerd) se romperá para tu host local, pero está funcionando en las páginas de GitHub donde necesitamos el espacio de nombres..

El ávido lector también podría haber descubierto que nuestro enlace sobre enlaces a una página HTML simple que coloqué en un nuevo directorio llamado "páginas". Le sugiero que coloque páginas HTML como contacto, preguntas frecuentes o lo que sea, también en este directorio. Si coloca estas páginas estáticas allí, no debería tener problemas para personalizarlas según sus necesidades. Simplemente diviértase y aplique lo que ha aprendido hasta ahora con estas páginas. A partir de aquí, usted está solo con estos, pero ahora sabe todo lo que necesita. Samo, Samo!

Camino de activos

Una palabra sobre las etiquetas de imagen y la ruta de recursos en las páginas de GitHub. Decidí reemplazar la llanura img Etiquetas para el logotipo con un ayudante de Middleman llamado etiqueta_imagen. No solo es bastante conciso y legible, sino que también soluciona un problema que se encontrará con el img etiqueta cuando construyas el sitio y lo implementas en GitHub Pages. La url para el enlace de activos en artículos individuales se arruina y esta es la solución más sencilla para arreglar eso..

Antes de usar etiqueta_imagen, La url para el logo se veía así: http://su_nombre_de_usuario.github.io/images/matcha_nerdz_logo-hash_numbers.png

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

Este ayudante de Middleman proporcionó la url con el nombre de la aplicación matcha-nerdz-colocó correctamente el espacio de nombre del recurso y le dio acceso a GitHub Pages a este archivo de imagen (http://su_nombre_de_usuario.github.io/matcha-nerdz/images/matcha_nerdz_logo-hash_numbers.png).

Más organización

Los estilos que copié de Recargas están en un nuevo Sass parcial, por supuesto. En "source / stylesheets / all.sass" hacemos referencia a:

 @import 'header_navbar' 

Y el real parcial "source / stylesheets / _header_navbar.scss" se ve así:

 .navegación centrada $ base-borde-radio: 3px! por defecto; $ gris oscuro: # 333! por defecto; $ pantalla grande: em (860)! predeterminado; $ base-font-color: blanco; $ centrado-navegación-relleno: 1em; $ centrado-navegación-logo-altura: 2em; $ centrado-navegación-fondo: # E7F1EC; $ centrado-navegación-color: $ base-font-color; $ centrado-navegación-color-hover: $ texto-color; $ centrado-navegación-altura: 60px; $ centrado-navegación-elemento-relleno: 1em; $ centrado-navegación-submenú-relleno: 1em; $ centrado-navegación-item-nudge: 2.2em; $ modo de barra horizontal: $ pantalla grande; color de fondo: $ matcha-verde; borde inferior: 1px sólido se oscurece ($ matcha-verde, 5%); min-height: $ centrado-altura-navegación; ancho: 100%; índice z: 9999; // Mobile view .mobile-logo display: inline; flotador izquierdo; altura máxima: $ altura de navegación centrada; padding-left: $ centrado-navegación-padding; img max-height: $ centrado-navegación-altura; relleno: .8em 0;  @include media ($ horizontal-bar-mode) display: none;  .centered-navigation-mobile-menu color: $ centrado-navegación-color; bloqueo de pantalla; flotar derecho; línea de altura: $ centrado de navegación de altura; margen: 0; padding-right: $ centrado-navegación-submenú-padding; texto-decoración: ninguno; transformación de texto: mayúsculas; @include media ($ horizontal-bar-mode) display: none;  &: focus, &: hover color: $ center-navigation-color-hover;  // menú de navegación .centered-navigation-wrapper @include outer-container; @include clearfix; posición: relativa; índice z: 999;  ul.centered-navigation-menu -webkit-transform-style: preserve-3d; // Detener el parpadeo del webkit: ambos; pantalla: ninguna; margen: 0 auto; desbordamiento: visible; relleno: 0; ancho: 100%; índice z: 99999; & .show display: block;  @include media ($ horizontal-bar-mode) display: block; text-align: center;  // Los elementos de navegación .nav-link: first-child @include media ($ horizontal-bar-mode) margen-izquierda: $ centrado-navegación-elemento-desplazamiento; derecho de relleno: 0px;  ul li.nav-link fondo: aclarar ($ matcha-green, 8%); bloqueo de pantalla; línea de altura: $ centrado de navegación de altura; desbordamiento: oculto; padding-right: $ centrado-navegación-submenú-padding; text-align: right; ancho: 100%; índice z: 9999; a color: $ centrado-navegación-color; pantalla: bloque en línea; esquema: ninguno; texto-decoración: ninguno; &: focus, &: hover color: $ center-navigation-color-hover;  @include media ($ horizontal-bar-mode) background: transparent; pantalla: en línea; línea de altura: $ centrado de navegación de altura; a padding-right: $ center-navigation-item-padding;  li.logo.nav-link display: none; línea de altura: 0; @include media ($ large-screen) display: inline;  .logo img margin-bottom: - $ centrado-navegación-logo-altura / 3; altura máxima: $ centrado-navegación-logo-altura;  

Puse el código de CoffeeScript de Recargas en "all.coffee". Tan pronto como tuve que agregar más código que eso, lo puse en su propio lugar designado. “Source / javascripts / all.coffee”:

 // = requiere jquery $ (documento) .ready -> menuToggle = $ ('# js-centrado-navegación-menú-móvil'). unbind () $ ('# # js-centrado-navegación-menú'). removeClass ' muestre 'menuToggle.on' haga clic ', (e) -> e.preventDefault () $ (' # js-centrado-navegación-menú '). slideToggle -> if $ (' # js-centrado-navegación-menú ') .es (': hidden') $ ('# js-centrado-menú-navegación'). removeAttr 'style' return return 

Este fragmento es responsable de alternar el menú para pantallas más pequeñas.

Debido a que eliminé un montón de cosas que no necesitaba de la barra de navegación, como el submenú, pude deshacerme de una parte significativa de los estilos relevantes en este archivo. Como no sé si necesita una barra de navegación más elaborada y desea tomar el código directamente de estos ejemplos, le sugiero que copie el código original si tiene planes más grandes para la barra de navegación. Juega con el Sass para adaptarlo a tu estilo, elimina el código muerto y los duplicados. Ajusté el color de fondo y los colores del enlace, jugué con la transparencia del logotipo, cambié el borde y seguí adelante. Diviértete y vuelve loco si quieres. Solo quería usar una barra de navegación súper simple con el color de la marca y un logotipo centrado. Resultó bastante bueno para este pequeño trabajo, diría.

Aquí está la página de índice:

Y aquí está la página de detalles:

Es hora de empaquetar esto en un git commit y para implementar el sitio.

 git add --todos git commit -m 'Implementa un encabezado con la barra de navegación Agrega el encabezado parcial al diseño Se ocupa de la URL de los activos desplegados para el logotipo Imports Sass parcial para la barra de navegación Agrega el logotipo de CoffeeScript Adapta los estilos de recargas Ajusta los rellenos 

Título

El siguiente cambio es pequeño, solo un toque realmente. Necesitamos actualizar la etiqueta del título en nuestro diseño ("source / layouts / layout.erb"):

Esto nos da un título dinámico que siempre comienza con el nombre de nuestro sitio y adjunta el título del artículo si está disponible.

 git add --all git commit -m 'Ajusta el título del sitio' despliegue de intermediarios 

Paginación

Cuando vea la parte inferior de la lista de artículos de índice, verá que falta algo esencial: navegar por nuestra lista de publicaciones..

No soy un fanático de los enlaces de paginación demasiado inteligentes, los voluminosos tampoco están ganando ningún premio conmigo. Mantengámoslo simple y proporcionemos dos enlaces para las páginas siguientes y anteriores. Middleman hace esto increíblemente conveniente. Solo tenemos que ajustar nuestro "config.rb" y decirle al frontmatter de nuestra página de índice para que lo ajuste.

 blog.paginate = true 

Primero descomenta la línea de arriba. Después de eso, le dices a la página de índice cuántos artículos quieres ver. Creo que diez publicaciones por página es suficiente. En "source / index.html.erb":

 --- per_page: 10 paginable: verdadero --- 

El último paso antes de que apliquemos un poco de estilo es colocar ambos enlaces convenientemente en la parte inferior de la lista. Primero necesitamos deshacernos de estas líneas de código que se comentaron a continuación. Fueron colocados en la parte superior de su página de índice.

Y luego coloque esto en la parte inferior de esta página:

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

Esto nos da los enlaces de navegación que necesitamos de lado a lado y nos brinda una clase para modificar algunas cosas. Decidí optar por un parcial para el código Sass porque no encajaba en el pie de página, ni en los estilos de publicación de índice, y además merece un parcial propio, especialmente si crece más en tamaño. En "source / stylesheets / all.sass":

 @importar 'paginación' 

Y en el parcial "source / stylesheets / _pagination.sass":

 .paginación-link + shift (2) margin-bottom: 4em &: primer flotante de tipo: left margin-right: 4em a + transición (color 0.25s eas-in-out) color: $ text-color font-size : 1.1em &: hover color: $ matcha-green 

Desplazamos los enlaces un poco hacia la derecha, los ordenamos para que floten uno junto al otro; el comportamiento del bloque se apilará uno encima del otro y aplicará un poco de efecto de transición cuando el usuario se desplace sobre el enlace. Eso es todo lo que necesitamos ahora. Echemos un vistazo.

Muy bien, es hora de otro commit..

 git add -all git commit -m 'Agrega paginación a la lista de índice de publicaciones Ajusta config.rb Ajusta el marcado en la página de índice Agrega estilos en _pagination Despliegue parcial del intermediario de Sass 

Pensamientos finales

¡Supongo que eso debería ser suficiente para la versión 01! Como paso siguiente, debe jugar con consultas de medios para que el diseño responda a varios tamaños de pantalla. La tipografía también podría necesitar un poco de amor serio..

Elija uno o dos de los tipos de letra que mejor se adapten al tema de su podcast; no olvide mantenerlo súper legible..

Además, si decides hacer un podcast de verdad, solo puedo felicitarte. Es una excelente manera de aprender de los expertos y también de aumentar significativamente su red. Hacer algo de valor para la comunidad siempre es una buena idea y puede ser rentable. ¡Un último consejo, trata de aprender haciendo y experimentando todo lo que puedas! ¡Leer solo no es suficiente, he estado allí, hecho eso! Si desea compartir las lecciones aprendidas al escribir sobre esto, profundizará aún más su comprensión del tema. Que te diviertas!