This commit is contained in:
Eduardo Gómez 2020-07-12 16:16:48 +02:00 committed by GitHub
parent 468099f7a3
commit 3108ad1334
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 174 additions and 9 deletions

1
assets/css/tags.css Normal file
View file

@ -0,0 +1 @@
@media only screen and (min-width:48rem){.l-tags-container{display:flex;flex-wrap:wrap;justify-content:center;margin:0 auto;max-width:720px}}@media only screen and (min-width:64rem){.l-tags-container{max-width:1080px}}.m-tag-card{height:180px;margin:0 0 20px;position:relative;border-radius:10px;border:1px solid var(--secondary-border-color);transition:all .25s cubic-bezier(.02,.01,.47,1)}.m-tag-card:hover{transform:translateY(-5px)}.m-tag-card:hover:before{box-shadow:var(--article-shadow-hover),0 0 0 transparent}@media only screen and (min-width:48rem){.m-tag-card{width:320px;margin:0 20px 40px}}.m-tag-card:before{content:"";position:absolute;top:10px;right:10px;bottom:0;left:10px;border-radius:10px;z-index:1;box-shadow:var(--article-shadow-normal),0 0 0 transparent;transition:all .25s cubic-bezier(.02,.01,.47,1)}.m-tag-card__link{display:block;width:100%;height:100%;border-radius:10px;overflow:hidden;position:relative;background-color:#000;z-index:2}.m-tag-card__link.no-picture{background-color:var(--secondary-subtle-color)}.m-tag-card__picture{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:10px;-o-object-fit:cover;object-fit:cover;opacity:.7;z-index:1}.m-tag-card__info{position:absolute;left:15px;bottom:15px;color:#fff;z-index:2}.m-tag-card__info.no-picture{color:var(--titles-color)}.m-tag-card__name{letter-spacing:.3px;line-height:1.3;font-size:1.25rem;font-weight:600;margin:0 0 5px}.m-tag-card__counter{display:block;letter-spacing:.2px;font-size:.875rem}

View file

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return r})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return c})),n.d(t,"adjustImageGallery",(function(){return s})),n.d(t,"managePostImages",(function(){return u})),n.d(t,"makeImagesZoomable",(function(){return l}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},c=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},s=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(o," 1 0%")}},u=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).parent().is("a")||e(this).addClass("js-zoomable");var t=e(this).parent().find("figcaption");t?e(this).attr("alt",t.text()):e(this).attr("alt","")}))},l=function(e,t){var n=t(".js-zoomable");n.on("open",(function(t){o()&&e(t.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var t=e(".medium-zoom-image--opened"),n=t[0].style.transform,a=n.substr(0,n.indexOf(" ")),o=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),r=n.substr(n.indexOf(" ")+1),i=parseFloat(r.split(",")[1]),c="scale(1) translate3d(0, ".concat(i<0?o*i+i:o*i-i,"px, 0)");t.addClass("medium-zoom-image-mobile"),t[0].style.transform=c}),10)})),n.on("close",(function(){o()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},12:function(e,t,n){n(1),n(22),n(27),n(29),n(31),n(33),e.exports=n(35)},22:function(e,t){},27:function(e,t){},29:function(e,t){},31:function(e,t){},33:function(e,t){},35:function(e,t){}},[[12,0,1]]]); (window.webpackJsonp=window.webpackJsonp||[]).push([[3],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return r})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return c})),n.d(t,"adjustImageGallery",(function(){return s})),n.d(t,"managePostImages",(function(){return u})),n.d(t,"makeImagesZoomable",(function(){return l}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},c=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},s=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(o," 1 0%")}},u=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).parent().is("a")||e(this).addClass("js-zoomable");var t=e(this).parent().find("figcaption");t?e(this).attr("alt",t.text()):e(this).attr("alt","")}))},l=function(e,t){var n=t(".js-zoomable");n.on("open",(function(t){o()&&e(t.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var t=e(".medium-zoom-image--opened"),n=t[0].style.transform,a=n.substr(0,n.indexOf(" ")),o=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),r=n.substr(n.indexOf(" ")+1),i=parseFloat(r.split(",")[1]),c="scale(1) translate3d(0, ".concat(i<0?o*i+i:o*i-i,"px, 0)");t.addClass("medium-zoom-image-mobile"),t[0].style.transform=c}),10)})),n.on("close",(function(){o()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},12:function(e,t,n){n(1),n(22),n(27),n(29),n(31),n(33),n(35),e.exports=n(37)},22:function(e,t){},27:function(e,t){},29:function(e,t){},31:function(e,t){},33:function(e,t){},35:function(e,t){},37:function(e,t){}},[[12,0,1]]]);

View file

@ -2,7 +2,7 @@
"% min read": "% min read", "% min read": "% min read",
"% posts": "% posts", "% posts": "% posts",
"1 min read": "1 min read", "1 min read": "1 min read",
"1 post": "One post", "1 post": "1 post",
"Among with": "<br>Among with ", "Among with": "<br>Among with ",
"Among with no break line": "Among with ", "Among with no break line": "Among with ",
"Apparently there are no posts at the moment, check again later.": "Apparently there are no posts at the moment, check again later.", "Apparently there are no posts at the moment, check again later.": "Apparently there are no posts at the moment, check again later.",

View file

@ -2,7 +2,7 @@
"% min read": "% min de lectura", "% min read": "% min de lectura",
"% posts": "% artículos", "% posts": "% artículos",
"1 min read": "1 min de lectura", "1 min read": "1 min de lectura",
"1 post": "Un artículo", "1 post": "1 artículo",
"Among with": "<br>Junto con ", "Among with": "<br>Junto con ",
"Among with no break line": "Junto con ", "Among with no break line": "Junto con ",
"Apparently there are no posts at the moment, check again later.": "Aparentemente no hay artículos en este momento, revisa más tarde.", "Apparently there are no posts at the moment, check again later.": "Aparentemente no hay artículos en este momento, revisa más tarde.",

View file

@ -54,5 +54,5 @@
"desktop": "assets/screenshot-desktop.jpg", "desktop": "assets/screenshot-desktop.jpg",
"mobile": "assets/screenshot-mobile.jpg" "mobile": "assets/screenshot-mobile.jpg"
}, },
"version": "0.7.6" "version": "0.7.7"
} }

61
page-tags.hbs Normal file
View file

@ -0,0 +1,61 @@
{{!--
This template is used for the tags page.
You must first create a page called Tags in the dashboard to enable it.
--}}
{{!-- This block loads specific styles for the authors page --}}
{{#contentFor "styles"}}
<link rel="preload" href="{{asset "css/tags.css"}}" as="style" />
<link rel="stylesheet" type="text/css" href="{{asset "css/tags.css"}}" media="screen" />
{{/contentFor}}
{{!-- The tag below means: insert everything in this file
into the {body} of the default.hbs template --}}
{{!< default}}
{{!-- Special header.hbs partial to generate the <header> tag --}}
{{#post}}
{{> header background=feature_image}}
{{/post}}
<main class="main-wrap">
{{#post}}
{{!-- Inject styles of the hero image to make it responsive --}}
{{> hero background=feature_image}}
<div class="m-hero__content" data-aos="fade-down">
<h1 class="m-hero-title bigger">{{title}}</h1>
{{#if custom_excerpt}}
<p class="m-hero-description">{{custom_excerpt}}</p>
{{/if}}
</div>
</section>
{{/post}}
<div class="l-content">
<div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
<div class="l-tags-container">
{{#get 'tags' limit='all' include='count.posts'}}
{{#foreach tags}}
<div class="m-tag-card">
<a href="{{url}}" class="m-tag-card__link {{#unless feature_image}}no-picture{{/unless}}" aria-label="{{name}}">
{{#if feature_image}}
<img class="m-tag-card__picture" src="{{img_url feature_image size="m"}}" loading="lazy" alt="">
{{/if}}
<div class="m-tag-card__info {{#unless feature_image}}no-picture{{/unless}}">
<h4 class="m-tag-card__name">{{name}}</h4>
<span class="m-tag-card__counter">
{{plural count.posts empty=(t "No posts") singular=(t "1 post") plural=(t "% posts")}}
</span>
</div>
</a>
</div>
{{else}}
<p class="m-not-found">
{{t "No tags found :("}}
</p>
{{/foreach}}
{{/get}}
</div>
</div>
</div>
</main>

View file

@ -4,11 +4,7 @@
{{#is "post"}} {{#is "post"}}
<div class="m-recommended-slider__item glide__slide"> <div class="m-recommended-slider__item glide__slide">
{{/is}} {{/is}}
{{#if feature_image}} <article class="m-article-card {{#unless feature_image}}no-picture{{/unless}} {{post_class}}">
<article class="m-article-card {{post_class}}">
{{else}}
<article class="m-article-card no-picture {{post_class}}">
{{/if}}
<div class="m-article-card__picture"> <div class="m-article-card__picture">
<a href="{{url}}" class="m-article-card__picture-link" aria-hidden="true" tabindex="-1"></a> <a href="{{url}}" class="m-article-card__picture-link" aria-hidden="true" tabindex="-1"></a>
{{#if feature_image}} {{#if feature_image}}

View file

@ -0,0 +1,87 @@
.m-tag-card {
height: 180px;
margin: 0 0 20px;
position: relative;
border-radius: 10px;
border: 1px solid var(--secondary-border-color);
@include transition(all .25s cubic-bezier(.02,.01,.47,1));
&:hover {
@include transform(translateY(-5px));
&:before {
@include bs(var(--article-shadow-hover));
}
}
@include respond-to('medium') {
width: 320px;
margin: 0 20px 40px;
}
&:before {
content: '';
position: absolute;
top: 10px;
right: 10px;
bottom: 0;
left: 10px;
border-radius: 10px;
z-index: 1;
@include bs(var(--article-shadow-normal));
@include transition(all .25s cubic-bezier(.02,.01,.47,1));
}
}
.m-tag-card__link {
display: block;
width: 100%;
height: 100%;
border-radius: 10px;
overflow: hidden;
position: relative;
background-color: $black;
z-index: 2;
&.no-picture {
background-color: var(--secondary-subtle-color);
}
}
.m-tag-card__picture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
object-fit: cover;
opacity: 0.7;
z-index: 1;
}
.m-tag-card__info {
position: absolute;
left: 15px;
bottom: 15px;
color: $white;
z-index: 2;
&.no-picture {
color: var(--titles-color);
}
}
.m-tag-card__name {
letter-spacing: 0.3px;
line-height: 1.3;
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 5px;
}
.m-tag-card__counter {
display: block;
letter-spacing: 0.2px;
font-size: 0.875rem;
}

View file

@ -0,0 +1,13 @@
.l-tags-container {
@include respond-to('medium') {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
max-width: 720px;
}
@include respond-to('large') {
max-width: 1080px;
}
}

6
src/sass/tags.scss Normal file
View file

@ -0,0 +1,6 @@
@import "common/mixins";
@import "common/variables";
@import "layouts/tags-container";
@import "components/tags/tag-card";

View file

@ -29,6 +29,7 @@ mix.js('js/helpers.js', 'js/')
.sass('sass/listing.scss', 'css/') .sass('sass/listing.scss', 'css/')
.sass('sass/post.scss', 'css/') .sass('sass/post.scss', 'css/')
.sass('sass/newsletter.scss', 'css/') .sass('sass/newsletter.scss', 'css/')
.sass('sass/tags.scss', 'css/')
.sass('sass/404.scss', 'css/') .sass('sass/404.scss', 'css/')
.options({ .options({
processCssUrls: false processCssUrls: false