Libro Diario

Cuaderno de viaje del diseño.

7/12

Partials creados

Agrupamos las últimas 3 publicaciones de una Etiqueta y los mostramos. En este caso, seleccionamos latag Ofertas

<section>
<div class="posts">
    {{#each @website.contentStructure.tags}}
  {{#checkIf this.name '==' 'Ofertas'}}
    {{#if this.postsNumber}}
    {{#each this.posts}}
      {{#checkIf @index '<' 3}}
    <article class="item-wrapper carta">
         {{#featuredImage}}
                        {{#if url}}
                           <a href="{{../url}}" class="image">
                           <img src="{{url}}" lazyload="lazy" class="item features-image item-img">
                              
                           </a>
                               {{/if}}
                     {{/featuredImage}}
                      <div class="item-content">
                     <h2 class="item-title">
                        <a href="{{url}}"><strong><font style="vertical-align: inherit;">{{title}}</font></strong></a>
                     </h2>
                     <p class="item-subtitle "><font style="vertical-align: inherit;">
							$10.00
						</font></p>
                     <p>{{{excerpt }}}</p>
</div>
 </article>
   {{/checkIf}}
    {{/each}}
    {{else}}
      There are no posts connected with TAGNAME :(
    {{/if}}
  {{/checkIf}}
{{/each}}
</div>
</section>

Tarjeta animada con sombra deslizante 

Utilizada en los Partials de Destacadas y Ofertas como clase de article

 /* Tarjeta animada con sombra deslizante */
.carta {
  padding: 1.5rem;
  border-radius:  16px;
  background: linear-gradient(85deg, #ffffff, #f1f1f1);
  color:#3f3f3f;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: 0.4s;
   
  &:hover {
     box-shadow: -2rem 0 3rem -2rem #000;
      transform: translateY(-10px);
  }
}

Botón Arriba

<style>
  /* Estilo y posicion del boton */
.button-up{
	display: none;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #2980b9;
	color: #fff; 
	font-size: 20px;
  border-radius: 50%;
	cursor: pointer;
	position: fixed;
	z-index: 3;
	bottom: 5px;
  left: 550px;
}

/* Estilo para el hover del boton */
#up :hover{
	background-color: #fff;
	color: #2980b9;
	border: #2980b9 solid 2px;
}

/* Eliminando el estilo de bordes para el fontawesome
interior del span*/
#up i:hover{
	border: #fff solid 0px;
	padding: 0px;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" integrity="sha384-PmY9l28YgO4JwMKbTvgaS7XNZJ30MK9FAZjjzXtlqyZCqBY6X6bXIkM++IkyinN+" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <!-- Floating arriba Button -->
 <script>
   /* Forzamos a que el script se ejecute despues de leer toda la pagina html */
$(document).ready(function(){
      /*Al hacer click en el boton, el scrollTop sube hasta 0px con una
      animacion de 300*/
    	$('.button-up').click(function(){
    		$('body, html').animate({
    			scrollTop: '0px'
    		}, 300);
    	});
      /*Si el scrollTop es mayor a cero, hacemos aparecer el boton con el
      efecto de slideDown a 300, si no pues hacemos desaparecer el boton con
      el efecto de slideUp a 300*/
    	$(window).scroll(function(){
    		if ($(this).scrollTop() > 0){
    			$('.button-up').slideDown(300);
    		}else{
    			$('.button-up').slideUp(300);
    		}
    	});
    });
   </script>
   <span id="up">
          <span class="button-up"><i class="fa fa-angle-up"></i></span>
        </span>
arriba