Taglist (#228)
This commit is contained in:
Eduardo Gómez
GitHub
parent
468099f7a3
commit
3108ad1334
1
assets/css/tags.css
Normal file
1
assets/css/tags.css
Normal 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}
|
||||
|
|
@ -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]]]);
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
"% min read": "% min read",
|
||||
"% posts": "% posts",
|
||||
"1 min read": "1 min read",
|
||||
"1 post": "One post",
|
||||
"1 post": "1 post",
|
||||
"Among with": "<br>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.",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"% min read": "% min de lectura",
|
||||
"% posts": "% artículos",
|
||||
"1 min read": "1 min de lectura",
|
||||
"1 post": "Un artículo",
|
||||
"1 post": "1 artículo",
|
||||
"Among with": "<br>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.",
|
||||
|
|
|
|||
|
|
@ -54,5 +54,5 @@
|
|||
"desktop": "assets/screenshot-desktop.jpg",
|
||||
"mobile": "assets/screenshot-mobile.jpg"
|
||||
},
|
||||
"version": "0.7.6"
|
||||
"version": "0.7.7"
|
||||
}
|
||||
|
|
|
|||
61
page-tags.hbs
Normal file
61
page-tags.hbs
Normal 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>
|
||||
|
|
@ -4,11 +4,7 @@
|
|||
{{#is "post"}}
|
||||
<div class="m-recommended-slider__item glide__slide">
|
||||
{{/is}}
|
||||
{{#if feature_image}}
|
||||
<article class="m-article-card {{post_class}}">
|
||||
{{else}}
|
||||
<article class="m-article-card no-picture {{post_class}}">
|
||||
{{/if}}
|
||||
<article class="m-article-card {{#unless feature_image}}no-picture{{/unless}} {{post_class}}">
|
||||
<div class="m-article-card__picture">
|
||||
<a href="{{url}}" class="m-article-card__picture-link" aria-hidden="true" tabindex="-1"></a>
|
||||
{{#if feature_image}}
|
||||
|
|
|
|||
87
src/sass/components/tags/_tag-card.scss
Normal file
87
src/sass/components/tags/_tag-card.scss
Normal 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;
|
||||
}
|
||||
13
src/sass/layouts/_tags-container.scss
Normal file
13
src/sass/layouts/_tags-container.scss
Normal 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
6
src/sass/tags.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@import "common/mixins";
|
||||
@import "common/variables";
|
||||
|
||||
@import "layouts/tags-container";
|
||||
|
||||
@import "components/tags/tag-card";
|
||||
|
|
@ -29,6 +29,7 @@ mix.js('js/helpers.js', 'js/')
|
|||
.sass('sass/listing.scss', 'css/')
|
||||
.sass('sass/post.scss', 'css/')
|
||||
.sass('sass/newsletter.scss', 'css/')
|
||||
.sass('sass/tags.scss', 'css/')
|
||||
.sass('sass/404.scss', 'css/')
|
||||
.options({
|
||||
processCssUrls: false
|
||||
|
|
|
|||
Loading…
Reference in a new issue