Improve accessibility (#221)
This commit is contained in:
Eduardo Gómez
GitHub
parent
7ce1faca6f
commit
42d726ec5f
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
.m-featured-slider{position:relative;overflow:hidden!important;height:350px;margin:-40px -20px 40px;transition:all .25s cubic-bezier(.02,.01,.47,1)}@media only screen and (min-width:48rem){.m-featured-slider:hover{transform:translateY(-5px);box-shadow:var(--article-shadow-hover),0 0 0 transparent}}@media only screen and (min-width:48rem){.m-featured-slider{width:100%;height:420px;margin:-40px 10px 20px;border-radius:10px}}@media only screen and (min-width:64rem){.m-featured-slider{width:calc(66.66667% - 40px);margin:0 20px 40px;overflow:unset}}.m-featured-slider:not(:root:root){overflow:hidden!important}.m-featured-slider__list{list-style-type:none;padding:0;margin:0;height:100%}@media only screen and (min-width:48rem){.m-featured-slider__list{border-radius:10px;overflow:hidden}}.m-featured-slider__list .slick-list,.m-featured-slider__list .slick-slide>div,.m-featured-slider__list .slick-track,.m-featured-slider__list__item{height:100%}.m-featured-article{position:relative;height:100%;overflow:hidden;background-color:var(--primary-subtle-color);z-index:1}.m-featured-article:hover .m-featured-article__author{box-shadow:0 4px 8px rgba(0,0,0,.3),0 0 0 transparent}.m-featured-article.no-picture .m-featured-article__picture{background-color:var(--link-color)}.m-featured-article__picture{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:1}.m-featured-article__picture img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;opacity:.7}.m-featured-article__meta{position:absolute;top:20px;left:20px;z-index:4}@media only screen and (min-width:48rem){.m-featured-article__meta{top:40px;left:40px}}.rtl .m-featured-article__meta{left:auto;right:20px}@media only screen and (min-width:48rem){.rtl .m-featured-article__meta{left:auto;right:40px}}.m-featured-article__author{display:block;width:35px;height:35px;background-color:#fff;border:2px solid #fff;border-radius:50%;margin-bottom:20px;transition:all .25s cubic-bezier(.02,.01,.47,1)}.m-featured-article__author div{width:100%;height:100%;background-repeat:no-repeat;background-position:50%;background-size:cover;border-radius:50%}.m-featured-article__tag{color:#fff;letter-spacing:.3px;font-weight:700;font-size:1rem}.m-featured-article__ribbon{display:flex;align-items:center;justify-content:center;position:absolute;top:26px;right:20px;width:24px;height:24px;color:#000;background-color:#fff;border-radius:50%;z-index:2}@media only screen and (min-width:48rem){.m-featured-article__ribbon{justify-content:flex-start;top:47px;right:40px;width:auto;height:22px;padding:0 7px;font-size:.875rem;font-weight:600;border-radius:15px}}.m-featured-article__ribbon span{display:inline-block}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:first-of-type{font-size:.75rem;margin-right:4px}}.m-featured-article__ribbon span:last-of-type{display:none}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:last-of-type{display:block}}.rtl .m-featured-article__ribbon{right:auto;left:20px}@media only screen and (min-width:48rem){.rtl .m-featured-article__ribbon{right:auto;left:40px}}@media only screen and (min-width:48rem){.rtl .m-featured-article__ribbon span:first-of-type{margin-right:0;margin-left:4px}}.m-featured-article__content{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:120px 20px 20px;position:relative;z-index:3}@media only screen and (min-width:48rem){.m-featured-article__content{padding:125px 40px 40px}}.m-featured-article__title{color:#fff;letter-spacing:.4px;line-height:1.3;font-size:1.625rem;font-weight:600;margin:0}@media only screen and (min-width:48rem){.m-featured-article__title{letter-spacing:.5px;font-size:2.25em;max-width:80%}}.m-featured-article__timestamp{display:flex;align-items:center;color:#fff;letter-spacing:.2px;font-size:.875rem;font-weight:600}.m-featured-article__timestamp span:nth-child(2){padding:0 10px}
|
||||
.m-featured-slider{position:relative;overflow:hidden!important;height:350px;margin:-40px -20px 40px;transition:all .25s cubic-bezier(.02,.01,.47,1)}@media only screen and (min-width:48rem){.m-featured-slider:hover{transform:translateY(-5px);box-shadow:var(--article-shadow-hover),0 0 0 transparent}}@media only screen and (min-width:48rem){.m-featured-slider{width:100%;height:420px;margin:-40px 10px 20px;border-radius:10px}}@media only screen and (min-width:64rem){.m-featured-slider{width:calc(66.66667% - 40px);margin:0 20px 40px;overflow:unset}}.m-featured-slider:not(:root:root){overflow:hidden!important}.m-featured-slider__list{list-style-type:none;padding:0;margin:0;height:100%}@media only screen and (min-width:48rem){.m-featured-slider__list{border-radius:10px;overflow:hidden}}.m-featured-slider__list__item{height:100%;overflow:hidden}@media only screen and (min-width:48rem){.m-featured-slider__list__item{border-radius:10px}}.m-featured-article{position:relative;height:100%;overflow:hidden;background-color:var(--primary-subtle-color);z-index:1}.m-featured-article:hover .m-featured-article__author{box-shadow:0 4px 8px rgba(0,0,0,.3),0 0 0 transparent}.m-featured-article.no-picture .m-featured-article__picture{background-color:var(--primary-subtle-color)}.m-featured-article__picture{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:1}.m-featured-article__picture img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;opacity:.7}.m-featured-article__meta{position:absolute;top:20px;left:20px;z-index:4}@media only screen and (min-width:48rem){.m-featured-article__meta{top:40px;left:40px}}.rtl .m-featured-article__meta{left:auto;right:20px}@media only screen and (min-width:48rem){.rtl .m-featured-article__meta{left:auto;right:40px}}.m-featured-article__author{display:block;width:35px;height:35px;background-color:#fff;border:2px solid #fff;border-radius:50%;margin-bottom:20px;transition:all .25s cubic-bezier(.02,.01,.47,1)}.m-featured-article__author div{width:100%;height:100%;background-repeat:no-repeat;background-position:50%;background-size:cover;border-radius:50%}.m-featured-article__tag{color:#fff;letter-spacing:.3px;font-weight:700;font-size:1rem}.m-featured-article__ribbon{display:flex;align-items:center;justify-content:center;position:absolute;top:26px;right:20px;width:24px;height:24px;color:#000;background-color:#fff;border-radius:50%;z-index:2}@media only screen and (min-width:48rem){.m-featured-article__ribbon{justify-content:flex-start;top:47px;right:40px;width:auto;height:22px;padding:0 7px;font-size:.875rem;font-weight:600;border-radius:15px}}.m-featured-article__ribbon span{display:inline-block}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:first-of-type{font-size:.75rem;margin-right:4px}}.m-featured-article__ribbon span:last-of-type{display:none}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:last-of-type{display:block}}.rtl .m-featured-article__ribbon{right:auto;left:20px}@media only screen and (min-width:48rem){.rtl .m-featured-article__ribbon{right:auto;left:40px}}@media only screen and (min-width:48rem){.rtl .m-featured-article__ribbon span:first-of-type{margin-right:0;margin-left:4px}}.m-featured-article__content{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:120px 20px 20px;position:relative;z-index:3}@media only screen and (min-width:48rem){.m-featured-article__content{padding:125px 40px 40px}}.m-featured-article__title{color:#fff;letter-spacing:.4px;line-height:1.3;font-size:1.625rem;font-weight:600;margin:0}@media only screen and (min-width:48rem){.m-featured-article__title{letter-spacing:.5px;font-size:2.25em;max-width:80%}}.m-featured-article__timestamp{display:flex;align-items:center;color:#fff;letter-spacing:.2px;font-size:.875rem;font-weight:600}.m-featured-article__timestamp span:nth-child(2){padding:0 10px}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return r})),n.d(t,"isDarkMode",(function(){return o})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return s})),n.d(t,"adjustImageGallery",(function(){return c})),n.d(t,"managePostImages",(function(){return l})),n.d(t,"makeImagesZoomable",(function(){return u}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},r=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},o=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"}):""},s=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},c=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"),r=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(r," 1 0%")}},l=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","")}))},u=function(e,t){var n=t(".js-zoomable");n.on("open",(function(t){r()&&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(" ")),r=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),o=n.substr(n.indexOf(" ")+1),i=parseFloat(o.split(",")[1]),s="scale(1) translate3d(0, ".concat(i<0?r*i+i:r*i-i,"px, 0)");t.addClass("medium-zoom-image-mobile"),t[0].style.transform=s}),10)})),n.on("close",(function(){r()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},16:function(e,t,n){e.exports=n(17)},17:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(3),i=n(2),s=n(1);r()(document).ready((function(){var e=r()(".js-featured-slider");if(e.length>0){var t=e.find(".js-featured-slide").length,n=new i.d(".js-featured-slider",{type:1===t?"slider":"carousel",rewind:!1,gap:0,swipeThreshold:!1,dragThreshold:!1,direction:Object(s.isRTL)()?"rtl":"ltr",breakpoints:{768:{swipeThreshold:1!==t&&80,dragThreshold:1!==t&&120}}});1===t&&e.find(".js-controls").remove(),n.on("mount.after",(function(){Object(o.a)(".js-featured-article-title",200)})),n.mount({Controls:i.b,Swipe:i.c,Breakpoints:i.a}),setTimeout((function(){window.dispatchEvent(new Event("resize"))}),350)}Object(o.a)(".js-featured-article-title",200)}))}},[[16,0,1]]]);
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return r})),n.d(t,"isMobile",(function(){return a})),n.d(t,"isDarkMode",(function(){return i})),n.d(t,"formatDate",(function(){return o})),n.d(t,"getParameterByName",(function(){return s})),n.d(t,"adjustImageGallery",(function(){return l})),n.d(t,"managePostImages",(function(){return u})),n.d(t,"makeImagesZoomable",(function(){return d}));var r=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},a=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},i=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},o=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=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},l=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var r=e[t].closest(".kg-gallery-image"),a=e[t].attributes.width.value/e[t].attributes.height.value;r.style.flex="".concat(a," 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","")}))},d=function(e,t){var n=t(".js-zoomable");n.on("open",(function(t){a()&&e(t.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var t=e(".medium-zoom-image--opened"),n=t[0].style.transform,r=n.substr(0,n.indexOf(" ")),a=parseFloat(r.substr(r.indexOf("(")+1).split(")")[0]),i=n.substr(n.indexOf(" ")+1),o=parseFloat(i.split(",")[1]),s="scale(1) translate3d(0, ".concat(o<0?a*o+o:a*o-o,"px, 0)");t.addClass("medium-zoom-image-mobile"),t[0].style.transform=s}),10)})),n.on("close",(function(){a()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},16:function(e,t,n){e.exports=n(17)},17:function(e,t,n){"use strict";n.r(t);var r=n(0),a=n.n(r),i=n(3),o=n(2),s=n(1);a()(document).ready((function(){var e=a()(".js-featured-slider");if(e.length>0){var t=e.find(".js-featured-slide").length,n=new o.d(".js-featured-slider",{type:"slider",rewind:!1,gap:0,swipeThreshold:!1,dragThreshold:!1,direction:Object(s.isRTL)()?"rtl":"ltr",breakpoints:{768:{swipeThreshold:1!==t&&80,dragThreshold:1!==t&&120}}});1===t&&e.find(".js-featured-slider-controls").remove(),n.on("mount.after",(function(){Object(i.a)(".js-featured-article-title",200)})),n.mount({Controls:o.b,Swipe:o.c,Breakpoints:o.a,ArrowDisabler:function(e,n){var r="js-featured-slider-controls",a="js-featured-slider-previous",i="js-featured-slider-next";return{mount:function(){e.settings.rewind||1===t||e.on(["mount.after","run"],(function(){var t=!0,o=!1,s=void 0;try{for(var l,u=n.Controls.items[Symbol.iterator]();!(t=(l=u.next()).done);t=!0){var d=l.value;if(d.className.includes(r)){var c=d.querySelector(".".concat(a));c&&(0===e.index?c.setAttribute("disabled",""):c.removeAttribute("disabled"));var m=d.querySelector(".".concat(i));if(m)(e.settings.bound?e.index+(e.settings.perView-1):e.index)===n.Sizes.length-1?m.setAttribute("disabled",""):m.removeAttribute("disabled")}}}catch(e){o=!0,s=e}finally{try{t||null==u.return||u.return()}finally{if(o)throw s}}}))}}}}),setTimeout((function(){window.dispatchEvent(new Event("resize"))}),350)}Object(i.a)(".js-featured-article-title",200)}))}},[[16,0,1]]]);
|
||||
17
author.hbs
17
author.hbs
|
|
@ -4,18 +4,23 @@ This template is used for the author page.
|
|||
|
||||
{{!-- This block loads specific styles for the author page --}}
|
||||
{{#contentFor "styles"}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" rel="preload" as="style" />
|
||||
<link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
|
||||
{{/contentFor}}
|
||||
|
||||
{{!-- The tag below means: insert everything in this file
|
||||
into the {body} of the default.hbs template --}}
|
||||
{{!< default}}
|
||||
|
||||
<div class="main-wrap">
|
||||
{{!-- Special header.hbs partial to generate the <header> tag --}}
|
||||
{{#author}}
|
||||
{{> header background=cover_image}}
|
||||
{{/author}}
|
||||
|
||||
<main class="main-wrap">
|
||||
{{!-- Everything inside the #author tags pulls data from the author --}}
|
||||
{{#author}}
|
||||
{{!-- Special header.hbs partial to generate the <header> tag --}}
|
||||
{{> header background=cover_image}}
|
||||
{{!-- Inject styles of the hero image to make it responsive --}}
|
||||
{{> hero background=cover_image}}
|
||||
<div class="m-hero__content" data-aos="fade-down">
|
||||
|
|
@ -33,7 +38,7 @@ into the {body} of the default.hbs template --}}
|
|||
<ul class="m-hero-social">
|
||||
{{#if website}}
|
||||
<li>
|
||||
<a href="{{website}}" target="_blank" rel="noopener" aria-label="Website">
|
||||
<a href="{{website}}" target="_blank" rel="noopener" aria-label="{{t "Website"}}">
|
||||
<span class="icon-globe"></span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -68,7 +73,6 @@ into the {body} of the default.hbs template --}}
|
|||
</section>
|
||||
{{/author}}
|
||||
|
||||
<main>
|
||||
<div class="l-content">
|
||||
<div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
|
||||
<div class="l-grid centered">
|
||||
|
|
@ -80,4 +84,3 @@ into the {body} of the default.hbs template --}}
|
|||
{{pagination}}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
18
default.hbs
18
default.hbs
|
|
@ -10,7 +10,20 @@
|
|||
<meta name="HandheldFriendly" content="True" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
{{!-- Styles'n'Scripts --}}
|
||||
{{!-- Preload assets --}}
|
||||
<link rel="preload" href="{{asset "css/app.css"}}" as="style" />
|
||||
<link rel="preload" href="{{asset 'fonts/icomoon.woff?vukg2s'}}" as="font" type="font/woff2" crossorigin="anonymous">
|
||||
<link rel="preload" href="{{asset "js/vendor/content-api.min.js"}}" as="script" />
|
||||
<link rel="preload" href="{{asset "js/manifest.js"}}" as="script" />
|
||||
<link rel="preload" href="{{asset "js/vendor.js"}}" as="script" />
|
||||
<link rel="preload" href="{{asset "js/app.js"}}" as="script" />
|
||||
<link rel="preconnect" href="https://polyfill.io">
|
||||
<link rel="dns-prefetch" href="https://polyfill.io">
|
||||
|
||||
{{!-- This #block helper will try to preload page-specific assets --}}
|
||||
{{{block "preload"}}}
|
||||
|
||||
{{!-- Styles & Scripts --}}
|
||||
<style>
|
||||
/* This font-face is here to make icons work if the Ghost instance is installed in a subdirectory */
|
||||
@font-face {
|
||||
|
|
@ -25,7 +38,8 @@
|
|||
font-display: swap;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/app.css"}}" media="screen" rel="preload" as="style" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/app.css"}}" media="screen" />
|
||||
|
||||
{{!-- This #block helper will inject a stylesheet for a specific page --}}
|
||||
{{{block "styles"}}}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@ This error template is used for all 404 errors, which might occur on your site.
|
|||
|
||||
{{!-- This block loads specific styles for the 404 page --}}
|
||||
{{#contentFor "styles"}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/404.css"}}" media="screen" rel="preload" as="style" />
|
||||
<link rel="preload" href="{{asset "css/404.css"}}" as="style" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/404.css"}}" media="screen" />
|
||||
{{/contentFor}}
|
||||
|
||||
{{!-- The tag below means: insert everything in this file
|
||||
|
|
|
|||
25
index.hbs
25
index.hbs
|
|
@ -3,19 +3,27 @@ This template is used for the index page.
|
|||
It can be used also as the home page or the default page.
|
||||
--}}
|
||||
|
||||
{{!-- This block preloads specific assets for the index page --}}
|
||||
{{#contentFor "preload"}}
|
||||
<link rel="preload" href="{{asset "css/home.css"}}" as="style" />
|
||||
<link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
|
||||
<link rel="preload" href="{{asset "js/home.js"}}" as="script" />
|
||||
{{/contentFor}}
|
||||
|
||||
{{!-- This block loads specific styles for the index page --}}
|
||||
{{#contentFor "styles"}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/home.css"}}" media="screen" rel="preload" as="style" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" rel="preload" as="style" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/home.css"}}" media="screen" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
|
||||
{{/contentFor}}
|
||||
|
||||
{{!-- The tag below means: insert everything in this file
|
||||
into the {body} of the default.hbs template --}}
|
||||
{{!< default}}
|
||||
|
||||
<div class="main-wrap">
|
||||
{{!-- Special header.hbs partial to generate the <header> tag --}}
|
||||
{{> header background=@site.cover_image}}
|
||||
|
||||
<main class="main-wrap">
|
||||
{{!-- Inject styles of the hero image to make it responsive --}}
|
||||
{{> hero background=@site.cover_image}}
|
||||
<div class="m-hero__content" data-aos="fade-down">
|
||||
|
|
@ -31,8 +39,6 @@ into the {body} of the default.hbs template --}}
|
|||
{{/if}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main>
|
||||
<div class="l-content">
|
||||
<div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
|
||||
<div class="l-grid centered">
|
||||
|
|
@ -50,7 +56,7 @@ into the {body} of the default.hbs template --}}
|
|||
{{/if}}
|
||||
</div>
|
||||
<div class="m-featured-article__meta">
|
||||
<a href="{{primary_author.url}}" class="m-featured-article__author js-tooltip" aria-label="Authors" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
|
||||
<a href="{{primary_author.url}}" class="m-featured-article__author js-tooltip" aria-label="{{primary_author.name}}" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
|
||||
{{#if primary_author.profile_image}}
|
||||
<div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>
|
||||
{{else}}
|
||||
|
|
@ -80,11 +86,11 @@ into the {body} of the default.hbs template --}}
|
|||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
<div data-glide-el="controls" class="glide__arrows js-controls">
|
||||
<button data-glide-dir="<" class="m-icon-button in-featured-articles glide-prev" aria-label="Previous">
|
||||
<div data-glide-el="controls" class="glide__arrows js-featured-slider-controls">
|
||||
<button data-glide-dir="<" class="m-icon-button in-featured-articles glide-prev js-featured-slider-previous" aria-label="{{t "Previous"}}">
|
||||
<span class="icon-arrow-left" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button data-glide-dir=">" class="m-icon-button in-featured-articles glide-next" aria-label="Next">
|
||||
<button data-glide-dir=">" class="m-icon-button in-featured-articles glide-next js-featured-slider-next" aria-label="{{t "Next"}}">
|
||||
<span class="icon-arrow-right" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -99,7 +105,6 @@ into the {body} of the default.hbs template --}}
|
|||
{{pagination}}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
|
||||
{{#contentFor "scripts"}}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@
|
|||
"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.",
|
||||
"Back to home": "Back to home",
|
||||
"Close": "Close",
|
||||
"Close menu": "Close menu",
|
||||
"Close search": "Close search",
|
||||
"Email cannot be blank.": "Email cannot be blank.",
|
||||
"Featured": "Featured",
|
||||
"Get the latest posts delivered right to your inbox.": "Get the latest posts delivered right to your inbox.",
|
||||
|
|
@ -14,21 +17,32 @@
|
|||
"Great! Next, complete checkout for full access.": "Great! Next, complete checkout for full access.",
|
||||
"Great! You've successfully subscribed.": "Great! You've successfully subscribed.",
|
||||
"JavaScript license information": "JavaScript license information",
|
||||
"Main menu": "Main menu",
|
||||
"More": "More",
|
||||
"Newer posts": "Newer posts",
|
||||
"Next": "Next",
|
||||
"No posts": "No posts",
|
||||
"No posts found": "No posts found",
|
||||
"No recent articles found :(": "No recent articles found :(",
|
||||
"No results for your search, try something different.": "No results for your search, please try with something else.",
|
||||
"No tags found :(": "No tags found :(",
|
||||
"Now check your inbox and click the link to confirm your subscription.": "Now check your inbox and click the link to confirm your subscription.",
|
||||
"Older posts": "Older posts",
|
||||
"Oops! There was an error sending the email, please try later.": "Oops! There was an error sending the email, please try later.",
|
||||
"Open menu": "Open menu",
|
||||
"Open search": "Open search",
|
||||
"Open submenu": "Open submenu",
|
||||
"Page": "Page",
|
||||
"Page not found": "Page not found",
|
||||
"Pagination": "Pagination",
|
||||
"Please enter a valid email address": "Please enter a valid email address",
|
||||
"Posted by": "Posted by",
|
||||
"Previous": "Previous",
|
||||
"Published with": "Published with",
|
||||
"Recent articles": "Recent articles",
|
||||
"Recommended for you": "Recommended for you",
|
||||
"Scroll to top": "Scroll to top",
|
||||
"Search": "Search",
|
||||
"Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.": "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.",
|
||||
"Subscribe": "Subscribe",
|
||||
"Subscribe to": "Subscribe to",
|
||||
|
|
@ -39,6 +53,7 @@
|
|||
"Toggle dark mode": "Toggle dark mode",
|
||||
"Type to search": "Type to search",
|
||||
"Unfortunately the page you were looking for could not be found.": "Unfortunately the page you were looking for could not be found.",
|
||||
"Website": "Website",
|
||||
"Welcome back! You've successfully signed in.": "Welcome back! You've successfully signed in.",
|
||||
"You've successfully subscribed to": "You've successfully subscribed to",
|
||||
"Your email address": "Your email address",
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@
|
|||
"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.",
|
||||
"Back to home": "Regresar al inicio",
|
||||
"Close": "Cerrar",
|
||||
"Close menu": "Cerrar menú",
|
||||
"Close search": "Cerrar búsqueda",
|
||||
"Email cannot be blank.": "El correo electrónico no puede estar vacío.",
|
||||
"Featured": "Destacado",
|
||||
"Get the latest posts delivered right to your inbox.": "Recibe los últimos artículos directamente en tu bandeja de entrada.",
|
||||
|
|
@ -14,21 +17,32 @@
|
|||
"Great! Next, complete checkout for full access.": "¡Genial! Ahora, completa el checkout para tener acceso completo.",
|
||||
"Great! You've successfully subscribed.": "¡Genial! Te has suscrito con éxito.",
|
||||
"JavaScript license information": "Información de licencia JavaScript",
|
||||
"Main menu": "Menú principal",
|
||||
"More": "Más",
|
||||
"Newer posts": "Entradas más recientes",
|
||||
"Next": "Siguiente",
|
||||
"No posts": "No hay artículos",
|
||||
"No posts found": "No se encontraron artículos",
|
||||
"No recent articles found :(": "No se han encontrado artículos recientes :(",
|
||||
"No results for your search, try something different.": "No hay resultados para tu búsqueda, prueba algo diferente.",
|
||||
"No tags found :(": "No se encontraron etiquetas :(",
|
||||
"Now check your inbox and click the link to confirm your subscription.": "Ahora revisa tu bandeja de entrada y haz click en el enlace para confirmar tu suscripción.",
|
||||
"Older posts": "Entradas más antiguas",
|
||||
"Oops! There was an error sending the email, please try later.": "Oops! Ha ocurrido un error, por favor inténtalo más tarde.",
|
||||
"Open menu": "Abrir menú",
|
||||
"Open search": "Abrir búsqueda",
|
||||
"Open submenu": "Abrir submenú",
|
||||
"Page": "Página",
|
||||
"Page not found": "Página no encontrada",
|
||||
"Pagination": "Paginación",
|
||||
"Please enter a valid email address": "Por favor introduce una dirección de correo electrónico válida",
|
||||
"Posted by": "Publicado por",
|
||||
"Previous": "Anterior",
|
||||
"Published with": "Publicado con",
|
||||
"Recent articles": "Artículos recientes",
|
||||
"Recommended for you": "Recomendado para ti",
|
||||
"Scroll to top": "Ir arriba",
|
||||
"Search": "Búsqueda",
|
||||
"Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.": "Mantente al día! Recibe todos los mejores y más recientes artículos directamente en tu bandeja de entrada.",
|
||||
"Subscribe": "Suscríbete",
|
||||
"Subscribe to": "Suscríbete a",
|
||||
|
|
@ -39,6 +53,7 @@
|
|||
"Toggle dark mode": "Alternar modo oscuro",
|
||||
"Type to search": "Escribe para buscar",
|
||||
"Unfortunately the page you were looking for could not be found.": "Desafortunadamente, la página que estabas buscando no pudo ser encontrada.",
|
||||
"Website": "Sitio web",
|
||||
"Welcome back! You've successfully signed in.": "¡Bienvenido de nuevo! Has iniciado sesión con éxito.",
|
||||
"You've successfully subscribed to": "Te has suscrito con éxito a",
|
||||
"Your email address": "Tu dirección de correo electrónico",
|
||||
|
|
|
|||
|
|
@ -54,5 +54,5 @@
|
|||
"desktop": "assets/screenshot-desktop.jpg",
|
||||
"mobile": "assets/screenshot-mobile.jpg"
|
||||
},
|
||||
"version": "0.7.4"
|
||||
"version": "0.7.5"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,17 +5,22 @@ You must first create a page called Authors in the dashboard to enable it.
|
|||
|
||||
{{!-- This block loads specific styles for the authors page --}}
|
||||
{{#contentFor "styles"}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" rel="preload" as="style" />
|
||||
<link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
|
||||
{{/contentFor}}
|
||||
|
||||
{{!-- The tag below means: insert everything in this file
|
||||
into the {body} of the default.hbs template --}}
|
||||
{{!< default}}
|
||||
|
||||
{{#post}}
|
||||
<div class="main-wrap">
|
||||
{{!-- Special header.hbs partial to generate the <header> tag --}}
|
||||
{{#post}}
|
||||
{{> header background=feature_image}}
|
||||
{{/post}}
|
||||
|
||||
{{#post}}
|
||||
<main class="main-wrap">
|
||||
{{!-- Inject styles of the hero image to make it responsive --}}
|
||||
{{> hero background=feature_image}}
|
||||
<div class="m-hero__content" data-aos="fade-down">
|
||||
|
|
@ -25,7 +30,6 @@ into the {body} of the default.hbs template --}}
|
|||
{{/if}}
|
||||
</div>
|
||||
</section>
|
||||
<main>
|
||||
<div class="l-content">
|
||||
<div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
|
||||
{{#get 'authors' limit='all' include='count.posts' order='count.posts desc'}}
|
||||
|
|
@ -38,11 +42,11 @@ into the {body} of the default.hbs template --}}
|
|||
{{else}}
|
||||
<img clasS="m-article-card__picture-background" src="{{asset "images/default-avatar-rectangle.jpg"}}" loading="lazy" alt="">
|
||||
{{/if}}
|
||||
<a href="{{url}}" class="m-article-card__picture-link" aria-label="Author"></a>
|
||||
<a href="{{url}}" class="m-article-card__picture-link" aria-label="{{name}}"></a>
|
||||
<h3 class="m-article-card__name">{{name}}</h3>
|
||||
</div>
|
||||
<div class="m-article-card__info">
|
||||
<a href="{{url}}" class="m-article-card__info-link">
|
||||
<a href="{{url}}" class="m-article-card__info-link" aria-hidden="true" tabindex="-1">
|
||||
{{#if bio}}
|
||||
<p class="m-article-card__excerpt js-article-card-title">
|
||||
{{bio}}
|
||||
|
|
@ -57,22 +61,22 @@ into the {body} of the default.hbs template --}}
|
|||
<ul class="m-article-card__social">
|
||||
{{#if website}}
|
||||
<li>
|
||||
<a href="{{website}}" target="_blank" rel="noopener">
|
||||
<span class="icon-globe"></span>
|
||||
<a href="{{website}}" target="_blank" rel="noopener" aria-label="{{t "Website"}}">
|
||||
<span class="icon-globe" aria-hidden="true"></span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if facebook}}
|
||||
<li>
|
||||
<a href="https://facebook.com/{{facebook}}" target="_blank" rel="noopener">
|
||||
<span class="icon-facebook"></span>
|
||||
<a href="https://facebook.com/{{facebook}}" target="_blank" rel="noopener" aria-label="Facebook">
|
||||
<span class="icon-facebook" aria-hidden="true"></span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if twitter}}
|
||||
<li>
|
||||
<a href="https://twitter.com/{{twitter}}" target="_blank" rel="noopener">
|
||||
<span class="icon-twitter"></span>
|
||||
<a href="https://twitter.com/{{twitter}}" target="_blank" rel="noopener" aria-label="Twitter">
|
||||
<span class="icon-twitter" aria-hidden="true"></span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
|
@ -87,5 +91,4 @@ into the {body} of the default.hbs template --}}
|
|||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{{/post}}
|
||||
|
|
|
|||
|
|
@ -4,13 +4,16 @@ This template is used for the subscription page.
|
|||
|
||||
{{!-- This block loads specific styles for the newsletter page --}}
|
||||
{{#contentFor "styles"}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/newsletter.css"}}" media="screen" rel="preload" as="style" />
|
||||
<link rel="preload" href="{{asset "css/newsletter.css"}}" as="style" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/newsletter.css"}}" media="screen" />
|
||||
{{/contentFor}}
|
||||
|
||||
{{!-- The tag below means: insert everything in this file
|
||||
into the {body} of the default.hbs template --}}
|
||||
{{!< default}}
|
||||
|
||||
<main>
|
||||
<div class="l-wrapper" data-aos="fade-down">
|
||||
<a href="{{@site.url}}" class="m-back">
|
||||
<span class="m-back__icon icon-arrow-left"></span>
|
||||
|
|
@ -18,7 +21,7 @@ into the {body} of the default.hbs template --}}
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<main class="l-fullscreen">
|
||||
<div class="l-fullscreen">
|
||||
<section class="l-fullscreen__content in-subscribe-page" data-aos="fade-up" data-aos-delay="300">
|
||||
<div>
|
||||
<header class="m-heading in-subscribe-page">
|
||||
|
|
@ -30,4 +33,5 @@ into the {body} of the default.hbs template --}}
|
|||
{{> "newsletter-form"}}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
21
page.hbs
21
page.hbs
|
|
@ -2,20 +2,29 @@
|
|||
This template is used for the posts that are marked as pages.
|
||||
--}}
|
||||
|
||||
{{!-- This block preloads specific assets for the post page --}}
|
||||
{{#contentFor "preload"}}
|
||||
<link rel="preload" href="{{asset "css/post.css"}}" as="style" />
|
||||
<link rel="preload" href="{{asset "js/page.js"}}" as="script" />
|
||||
{{/contentFor}}
|
||||
|
||||
{{!-- This block loads specific styles for the post page --}}
|
||||
{{#contentFor "styles"}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" rel="preload" as="style" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/post.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">
|
||||
{{!-- Everything inside the #post tags pulls data from the post --}}
|
||||
{{#post}}
|
||||
<div class="main-wrap">
|
||||
{{!-- Special header.hbs partial to generate the <header> tag --}}
|
||||
{{> header background=feature_image}}
|
||||
{{!-- Inject styles of the hero image to make it responsive --}}
|
||||
{{> hero background=feature_image}}
|
||||
<div class="m-hero__content" data-aos="fade-down">
|
||||
|
|
@ -25,7 +34,6 @@ into the {body} of the default.hbs template --}}
|
|||
{{/if}}
|
||||
</div>
|
||||
</section>
|
||||
<main>
|
||||
<article>
|
||||
<div class="l-content">
|
||||
<div class="l-wrapper in-post" data-aos="fade-up" data-aos-delay="300">
|
||||
|
|
@ -37,9 +45,8 @@ into the {body} of the default.hbs template --}}
|
|||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
{{/post}}
|
||||
</main>
|
||||
|
||||
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
|
||||
{{#contentFor "scripts"}}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ This header template is shared across all the pages.
|
|||
|
||||
<header class="m-header {{#if background}}with-picture{{/if}} js-header">
|
||||
<div class="m-mobile-topbar" data-aos="fade-down">
|
||||
<button class="m-icon-button in-mobile-topbar js-open-menu" aria-label="Open menu">
|
||||
<span class="icon-menu"></span>
|
||||
<button class="m-icon-button in-mobile-topbar js-open-menu" aria-label="{{t "Open menu"}}">
|
||||
<span class="icon-menu" aria-hidden="true"></span>
|
||||
</button>
|
||||
{{#if @site.logo}}
|
||||
<a href="{{@site.url}}" class="m-logo in-mobile-topbar">
|
||||
|
|
@ -16,28 +16,28 @@ This header template is shared across all the pages.
|
|||
{{@site.title}}
|
||||
</a>
|
||||
{{/if}}
|
||||
<button class="m-icon-button in-mobile-topbar js-open-search" aria-label="Open search">
|
||||
<span class="icon-search"></span>
|
||||
<button class="m-icon-button in-mobile-topbar js-open-search" aria-label="{{t "Open search"}}">
|
||||
<span class="icon-search" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="m-menu js-menu">
|
||||
<button class="m-icon-button outlined as-close-menu js-close-menu" aria-label="Close menu">
|
||||
<button class="m-icon-button outlined as-close-menu js-close-menu" aria-label="{{t "Close menu"}}">
|
||||
<span class="icon-close"></span>
|
||||
</button>
|
||||
<div class="m-menu__main" data-aos="fade-down">
|
||||
<div class="l-wrapper">
|
||||
<div class="m-nav">
|
||||
<nav class="m-nav__left">
|
||||
<ul role="submenu">
|
||||
<nav class="m-nav__left" role="navigation" aria-label="{{t "Main menu"}}">
|
||||
<ul>
|
||||
{{#if @site.logo}}
|
||||
<li class="only-desktop" role="menuitem">
|
||||
<li class="only-desktop">
|
||||
<a href="{{@site.url}}" class="m-logo">
|
||||
<img src="{{@site.logo}}" alt="{{@site.title}}">
|
||||
</a>
|
||||
</li>
|
||||
{{else}}
|
||||
<li class="only-desktop" role="menuitem">
|
||||
<li class="only-desktop">
|
||||
<a href="{{@site.url}}" class="m-site-name in-desktop-menu">
|
||||
{{@site.title}}
|
||||
</a>
|
||||
|
|
@ -47,16 +47,16 @@ This header template is shared across all the pages.
|
|||
{{navigation}}
|
||||
{{/if}}
|
||||
{{#if @site.secondary_navigation}}
|
||||
<li class="more" role="menuitem">
|
||||
<li class="more">
|
||||
<a href="javascript:void(0);" class="js-open-secondary-menu">
|
||||
{{t "More"}}
|
||||
<span class="icon-chevron-down"></span>
|
||||
<span class="icon-chevron-down" aria-hidden="true"></span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
<li role="menuitem" class="js-submenu-option">
|
||||
<button class="m-icon-button in-menu-main more js-toggle-submenu" aria-label="Toggle submenu">
|
||||
<span class="icon-more"></span>
|
||||
<li class="js-submenu-option">
|
||||
<button class="m-icon-button in-menu-main more js-toggle-submenu" aria-label="{{t "Open submenu"}}">
|
||||
<span class="icon-more" aria-hidden="true"></span>
|
||||
</button>
|
||||
<div class="m-submenu js-submenu">
|
||||
<div class="l-wrapper in-submenu">
|
||||
|
|
@ -112,11 +112,14 @@ This header template is shared across all the pages.
|
|||
</ul>
|
||||
</nav>
|
||||
<div class="m-nav__right">
|
||||
<button class="m-icon-button in-menu-main js-open-search" aria-label="Open search">
|
||||
<span class="icon-search"></span>
|
||||
<button class="m-icon-button in-menu-main js-open-search" aria-label="{{t "Open search"}}">
|
||||
<span class="icon-search" aria-hidden="true"></span>
|
||||
</button>
|
||||
<div class="m-toggle-darkmode js-tooltip" data-tippy-content="{{t "Toggle dark mode"}}">
|
||||
<input type="checkbox" class="js-toggle-darkmode">
|
||||
<div class="m-toggle-darkmode js-tooltip" data-tippy-content="{{t "Toggle dark mode"}}" tabindex="0">
|
||||
<label for="toggle-darkmode" class="sr-only">
|
||||
{{t "Toggle dark mode"}}
|
||||
</label>
|
||||
<input id="toggle-darkmode" type="checkbox" class="js-toggle-darkmode">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@
|
|||
<article class="m-article-card no-picture {{post_class}}">
|
||||
{{/if}}
|
||||
<div class="m-article-card__picture">
|
||||
<a href="{{url}}" class="m-article-card__picture-link" aria-label="Article"></a>
|
||||
<a href="{{url}}" class="m-article-card__picture-link" aria-hidden="true" tabindex="-1"></a>
|
||||
{{#if feature_image}}
|
||||
<img clasS="m-article-card__picture-background" src="{{img_url feature_image size="m"}}" loading="lazy" alt="">
|
||||
{{/if}}
|
||||
<a href="{{primary_author.url}}" class="m-article-card__author js-tooltip" aria-label="Authors" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
|
||||
<a href="{{primary_author.url}}" class="m-article-card__author js-tooltip" aria-label="{{primary_author.name}}" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
|
||||
{{#if primary_author.profile_image}}
|
||||
<div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>
|
||||
{{else}}
|
||||
|
|
@ -22,8 +22,8 @@
|
|||
{{/if}}
|
||||
</a>
|
||||
{{#if featured}}
|
||||
<a href="{{url}}" class="m-article-card__featured js-tooltip" data-tippy-content="{{t "Featured"}}" aria-label="Article">
|
||||
<span class="icon-star"></span>
|
||||
<a href="{{url}}" class="m-article-card__featured js-tooltip" data-tippy-content="{{t "Featured"}}" aria-label="{{t "Featured"}}">
|
||||
<span class="icon-star" aria-hidden="true"></span>
|
||||
</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
{{else}}
|
||||
<div class="m-article-card__info no-tag">
|
||||
{{/if}}
|
||||
<a href="{{url}}" class="m-article-card__info-link">
|
||||
<a href="{{url}}" class="m-article-card__info-link" aria-label="{{title}}">
|
||||
<div>
|
||||
<h2 class="m-article-card__title js-article-card-title {{#unless feature_image}}js-article-card-title-no-image{{/unless}}" title="{{title}}">
|
||||
{{title}}
|
||||
|
|
|
|||
|
|
@ -4,16 +4,16 @@ Also it includes the big submenu.
|
|||
--}}
|
||||
|
||||
{{#if isSecondary}}
|
||||
<ul class="m-secondary-menu" role="menu">
|
||||
<ul class="m-secondary-menu">
|
||||
{{#foreach navigation}}
|
||||
<li class="nav-{{slug}}{{#if current}} nav-current{{/if}}" role="menuitem">
|
||||
<li class="nav-{{slug}}{{#if current}} nav-current{{/if}}">
|
||||
<a href="{{url absolute="true"}}">{{label}}</a>
|
||||
</li>
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
{{else}}
|
||||
{{#foreach navigation}}
|
||||
<li class="nav-{{slug}}{{#if current}} nav-current{{/if}}" role="menuitem">
|
||||
<li class="nav-{{slug}}{{#if current}} nav-current{{/if}}">
|
||||
<a href="{{url absolute="true"}}">{{label}}</a>
|
||||
</li>
|
||||
{{/foreach}}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@ You need to enable the members feature first.
|
|||
<div class="m-subscribe-section__form">
|
||||
<form data-members-form="subscribe" id="newsletter-form" class="m-subscribe-section__container">
|
||||
<div class="m-subscribe__form">
|
||||
<fieldset>
|
||||
<label for="newsletter_input" class="sr-only">{{t "Your email address"}}</label>
|
||||
<div class="pos-relative">
|
||||
<label for="newsletter-input" class="sr-only">{{t "Your email address"}}</label>
|
||||
<input data-members-email id="newsletter-input" class="m-input in-subscribe-section" type="email"
|
||||
placeholder="{{t "Your email address"}}" required />
|
||||
</fieldset>
|
||||
<button id="newsletter_button" class="m-button primary block" type="submit">{{t "Subscribe"}}</button>
|
||||
</div>
|
||||
<button id="newsletter-button" class="m-button primary block" type="submit">{{t "Subscribe"}}</button>
|
||||
</div>
|
||||
<div class="m-subscribe__success">
|
||||
<header class="m-heading no-margin">
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
<div class="m-alert success subscribe js-alert" data-notification="subscribe">
|
||||
{{t "Great! You've successfully subscribed."}}
|
||||
<button class="m-alert__close js-notification-close" aria-label="Close">
|
||||
<button class="m-alert__close js-notification-close" aria-label="{{t "Close"}}">
|
||||
<span class="icon-close"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="m-alert success signup js-alert" data-notification="signup">
|
||||
{{t "Great! Next, complete checkout for full access."}}
|
||||
<button class="m-alert__close js-notification-close" aria-label="Close">
|
||||
<button class="m-alert__close js-notification-close" aria-label="{{t "Close"}}">
|
||||
<span class="icon-close"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="m-alert success signin js-alert" data-notification="signin">
|
||||
{{t "Welcome back! You've successfully signed in."}}
|
||||
<button class="m-alert__close js-notification-close" aria-label="Close">
|
||||
<button class="m-alert__close js-notification-close" aria-label="{{t "Close"}}">
|
||||
<span class="icon-close"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="m-alert success checkout js-alert" data-notification="checkout">
|
||||
{{t "Success! Your account is fully activated, you now have access to all content."}}
|
||||
<button class="m-alert__close js-notification-close" aria-label="Close">
|
||||
<button class="m-alert__close js-notification-close" aria-label="{{t "Close"}}">
|
||||
<span class="icon-close"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -3,15 +3,15 @@ This pagination template is used to navigate through newer and older articles.
|
|||
--}}
|
||||
|
||||
<div class="l-wrapper">
|
||||
<nav class="m-pagination">
|
||||
<nav class="m-pagination" aria-label="{{t "Pagination"}}">
|
||||
{{#if prev}}
|
||||
<a href="{{page_url prev}}" class="m-icon-button filled in-pagination-left" aria-label="Newer posts">
|
||||
<a href="{{page_url prev}}" class="m-icon-button filled in-pagination-left" aria-label="{{t "Newer posts"}}">
|
||||
<span class="icon-arrow-left"></span>
|
||||
</a>
|
||||
{{/if}}
|
||||
<span class="m-pagination__text">{{t "Page"}} {{page}} {{t "of"}} {{pages}}</span>
|
||||
{{#if next}}
|
||||
<a href="{{page_url next}}" class="m-icon-button filled in-pagination-right" aria-label="Older posts">
|
||||
<a href="{{page_url next}}" class="m-icon-button filled in-pagination-right" aria-label="{{t "Older posts"}}">
|
||||
<span class="icon-arrow-right"></span>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -4,16 +4,19 @@ You need to create a custom integration first to get a Content API key and then
|
|||
follow the instructions to enable the search feature.
|
||||
--}}
|
||||
|
||||
<div class="m-search js-search">
|
||||
<div class="m-search js-search" role="dialog" aria-modal="true" aria-label="Search">
|
||||
<button class="m-icon-button outlined as-close-search js-close-search" aria-label="Close search">
|
||||
<span class="icon-close"></span>
|
||||
<span class="icon-close" aria-hidden="true"></span>
|
||||
</button>
|
||||
<div class="m-search__content">
|
||||
<form class="m-search__form">
|
||||
<fieldset>
|
||||
<span class="icon-search m-search-icon"></span>
|
||||
<input type="text" class="m-input in-search js-input-search" placeholder="{{t "Type to search"}}" aria-label="Type to search">
|
||||
</fieldset>
|
||||
<div class="pos-relative">
|
||||
<span class="icon-search m-search-icon" aria-hidden="true"></span>
|
||||
<label for="search-input" class="sr-only">
|
||||
{{t "Type to search"}}
|
||||
</label>
|
||||
<input id="search-input" type="text" class="m-input in-search js-input-search" placeholder="{{t "Type to search"}}">
|
||||
</div>
|
||||
</form>
|
||||
<div class="js-search-results hide"></div>
|
||||
<p class="m-not-found align-center hide js-no-results">
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ You need to enable the subscription feature first.
|
|||
<form method="post" action="{{action}}" id="{{form_id}}" class="{{form_class}}">
|
||||
{{hidden}}
|
||||
|
||||
<fieldset>
|
||||
<div class="pos-relative">
|
||||
<label for="{{input_id}}" class="sr-only">{{placeholder}}</label>
|
||||
{{input_email id=input_id class=input_class placeholder=placeholder value=email autofocus=autofocus}}
|
||||
</fieldset>
|
||||
</div>
|
||||
<button id="{{button_id}}" class="{{button_class}}" type="submit">{{t "Subscribe"}}</button>
|
||||
|
||||
{{script}}
|
||||
|
|
|
|||
56
post.hbs
56
post.hbs
|
|
@ -2,38 +2,47 @@
|
|||
This template is used for the post page.
|
||||
--}}
|
||||
|
||||
{{!-- This block preloads specific assets for the post page --}}
|
||||
{{#contentFor "preload"}}
|
||||
<link rel="preload" href="{{asset "css/post.css"}}" as="style" />
|
||||
<link rel="preload" href="{{asset "js/post.js"}}" as="script" />
|
||||
{{/contentFor}}
|
||||
|
||||
{{!-- This block loads specific styles for the post page --}}
|
||||
{{#contentFor "styles"}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" rel="preload" as="style" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" />
|
||||
{{/contentFor}}
|
||||
|
||||
{{!-- The tag below means: insert everything in this file
|
||||
into the {body} of the default.hbs template --}}
|
||||
{{!< default}}
|
||||
|
||||
<div class="main-wrap">
|
||||
{{!-- Everything inside the #post tags pulls data from the post --}}
|
||||
{{#post}}
|
||||
{{!-- 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}}
|
||||
</section>
|
||||
{{/post}}
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<div class="l-content in-post">
|
||||
{{!-- Everything inside the #post tags pulls data from the post --}}
|
||||
{{#post}}
|
||||
<div class="l-wrapper in-post {{#unless feature_image}}no-image{{/unless}} js-aos-wrapper" data-aos="fade-up" data-aos-delay="300">
|
||||
<div class="l-post-content {{#if @labs.subscribers}}has-subscribe-form{{/if}} {{#if @labs.members}}has-subscribe-form{{/if}} js-progress-content">
|
||||
<div class="l-wrapper in-post {{#unless feature_image}}no-image{{/unless}} js-aos-wrapper" data-aos="fade-up"
|
||||
data-aos-delay="300">
|
||||
<div
|
||||
class="l-post-content {{#if @labs.subscribers}}has-subscribe-form{{/if}} {{#if @labs.members}}has-subscribe-form{{/if}} js-progress-content">
|
||||
<header class="m-heading">
|
||||
<h1 class="m-heading__title in-post">{{title}}</h1>
|
||||
<div class="m-heading__meta">
|
||||
{{#if primary_tag}}
|
||||
<a href="{{primary_tag.url}}" class="m-heading__meta__tag">{{primary_tag.name}}</a>
|
||||
<span class="m-heading__meta__divider">•</span>
|
||||
<span class="m-heading__meta__divider" aria-hidden="true">•</span>
|
||||
{{/if}}
|
||||
<span class="m-heading__meta__time">{{date published_at}}</span>
|
||||
</div>
|
||||
|
|
@ -41,15 +50,17 @@ into the {body} of the default.hbs template --}}
|
|||
<div class="pos-relative js-post-content">
|
||||
<div class="m-share">
|
||||
<div class="m-share__content js-sticky">
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u={{url absolute='true'}}" class="m-icon-button filled in-share" target="_blank" rel="noopener" aria-label="Facebook">
|
||||
<span class="icon-facebook"></span>
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u={{url absolute='true'}}"
|
||||
class="m-icon-button filled in-share" target="_blank" rel="noopener" aria-label="Facebook">
|
||||
<span class="icon-facebook" aria-hidden="true"></span>
|
||||
</a>
|
||||
<a href="https://twitter.com/intent/tweet?text={{encode title}}&url={{url absolute='true'}}" class="m-icon-button filled in-share" target="_blank" rel="noopener" aria-label="Twitter">
|
||||
<span class="icon-twitter"></span>
|
||||
<a href="https://twitter.com/intent/tweet?text={{encode title}}&url={{url absolute='true'}}"
|
||||
class="m-icon-button filled in-share" target="_blank" rel="noopener" aria-label="Twitter">
|
||||
<span class="icon-twitter" aria-hidden="true"></span>
|
||||
</a>
|
||||
<button class="m-icon-button filled in-share progress js-scrolltop" aria-label="Scroll to top">
|
||||
<span class="icon-arrow-top"></span>
|
||||
<svg>
|
||||
<button class="m-icon-button filled in-share progress js-scrolltop" aria-label="{{t "Scroll to top"}}">
|
||||
<span class="icon-arrow-top" aria-hidden="true"></span>
|
||||
<svg aria-hidden="true">
|
||||
<circle class="progress-ring__circle js-progress" fill="transparent" r="0" />
|
||||
</svg>
|
||||
</button>
|
||||
|
|
@ -105,7 +116,7 @@ into the {body} of the default.hbs template --}}
|
|||
<section class="m-author">
|
||||
<div class="m-author__content">
|
||||
<div class="m-author__picture">
|
||||
<a href="{{primary_author.url}}" class="m-author-picture" aria-label="Author picture">
|
||||
<a href="{{primary_author.url}}" class="m-author-picture" aria-label="{{primary_author.name}}">
|
||||
{{#if primary_author.profile_image}}
|
||||
<div style="background-image: url({{primary_author.profile_image}});"></div>
|
||||
{{else}}
|
||||
|
|
@ -128,22 +139,22 @@ into the {body} of the default.hbs template --}}
|
|||
<ul class="m-author-links">
|
||||
{{#if primary_author.website}}
|
||||
<li>
|
||||
<a href="{{primary_author.website}}" target="_blank" rel="noopener" aria-label="Website">
|
||||
<span class="icon-globe"></span>
|
||||
<a href="{{primary_author.website}}" target="_blank" rel="noopener" aria-label="{{t "Website"}}">
|
||||
<span class="icon-globe" aria-hidden="true"></span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if primary_author.facebook}}
|
||||
<li>
|
||||
<a href="https://facebook.com/{{primary_author.facebook}}" target="_blank" rel="noopener" aria-label="Facebook">
|
||||
<span class="icon-facebook"></span>
|
||||
<span class="icon-facebook" aria-hidden="true"></span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if primary_author.twitter}}
|
||||
<li>
|
||||
<a href="https://twitter.com/{{primary_author.twitter}}" target="_blank" rel="noopener" aria-label="Twitter">
|
||||
<span class="icon-twitter"></span>
|
||||
<span class="icon-twitter" aria-hidden="true"></span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
|
@ -192,10 +203,10 @@ into the {body} of the default.hbs template --}}
|
|||
</div>
|
||||
</div>
|
||||
<div data-glide-el="controls" class="glide__arrows js-controls">
|
||||
<button data-glide-dir="<" class="m-icon-button filled in-recommended-articles glide-prev" aria-label="Previous">
|
||||
<button data-glide-dir="<" class="m-icon-button filled in-recommended-articles glide-prev" aria-label="{{t "Previous"}}">
|
||||
<span class="icon-arrow-left" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button data-glide-dir=">" class="m-icon-button filled in-recommended-articles glide-next" aria-label="Next">
|
||||
<button data-glide-dir=">" class="m-icon-button filled in-recommended-articles glide-next" aria-label="{{t "Next"}}">
|
||||
<span class="icon-arrow-right" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -207,7 +218,6 @@ into the {body} of the default.hbs template --}}
|
|||
</div>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
|
||||
{{#contentFor "scripts"}}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ $(document).ready(() => {
|
|||
if ($featuredSlider.length > 0) {
|
||||
const numSlides = $featuredSlider.find('.js-featured-slide').length
|
||||
const featuredSlider = new Glide('.js-featured-slider', {
|
||||
type: numSlides === 1 ? 'slider' : 'carousel',
|
||||
type: 'slider',
|
||||
rewind: false,
|
||||
gap: 0,
|
||||
swipeThreshold: false,
|
||||
|
|
@ -27,15 +27,63 @@ $(document).ready(() => {
|
|||
}
|
||||
})
|
||||
|
||||
const ArrowDisabler = (Glide, Components) => {
|
||||
const controlClasses = {
|
||||
'controls': 'js-featured-slider-controls',
|
||||
'backArrow': 'js-featured-slider-previous',
|
||||
'nextArrow': 'js-featured-slider-next',
|
||||
}
|
||||
|
||||
return {
|
||||
mount() {
|
||||
if (Glide.settings.rewind || numSlides === 1) {
|
||||
return
|
||||
}
|
||||
|
||||
Glide.on(['mount.after', 'run'], () => {
|
||||
for (let controlItem of Components.Controls.items) {
|
||||
if (!controlItem.className.includes(controlClasses.controls)) {
|
||||
continue
|
||||
}
|
||||
|
||||
const left = controlItem.querySelector(`.${controlClasses.backArrow}`)
|
||||
|
||||
if (left) {
|
||||
if (Glide.index === 0) {
|
||||
left.setAttribute('disabled', '')
|
||||
} else {
|
||||
left.removeAttribute('disabled')
|
||||
}
|
||||
}
|
||||
|
||||
const right = controlItem.querySelector(`.${controlClasses.nextArrow}`)
|
||||
|
||||
if (right) {
|
||||
const lastSlideIndex = Glide.settings.bound
|
||||
? Glide.index + (Glide.settings.perView - 1)
|
||||
: Glide.index
|
||||
|
||||
if (lastSlideIndex === Components.Sizes.length - 1) {
|
||||
right.setAttribute('disabled', '')
|
||||
} else {
|
||||
right.removeAttribute('disabled')
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (numSlides === 1) {
|
||||
$featuredSlider.find('.js-controls').remove()
|
||||
$featuredSlider.find('.js-featured-slider-controls').remove()
|
||||
}
|
||||
|
||||
featuredSlider.on('mount.after', () => {
|
||||
shave('.js-featured-article-title', 200)
|
||||
})
|
||||
|
||||
featuredSlider.mount({ Controls, Swipe, Breakpoints })
|
||||
featuredSlider.mount({ Controls, Swipe, Breakpoints, ArrowDisabler })
|
||||
|
||||
setTimeout(() => {
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
|
|
|
|||
|
|
@ -65,19 +65,3 @@ fieldset {
|
|||
.medium-zoom-image {
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
color: $gray;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,19 +14,10 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " "; /* 1 */
|
||||
line-height: 0;
|
||||
display: table; /* 2 */
|
||||
.focusable {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2px #2997ff !important;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.content-centered {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
--background-color: #fff;
|
||||
--primary-foreground-color: #4a4a4a;
|
||||
--secondary-foreground-color: #000;
|
||||
--primary-subtle-color: #04aeee;
|
||||
--primary-subtle-color: #0470ee;
|
||||
--secondary-subtle-color: #f4f8fd;
|
||||
--titles-color: #333;
|
||||
--link-color: #293951;
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
--article-shadow-normal: 0 10px 10px rgba(0,0,0,0.08);
|
||||
--article-shadow-hover: 0 4px 60px 0 rgba(0,0,0,0.2);
|
||||
--transparent-background-color: rgba(255,255,255,0.99);
|
||||
--footer-background-color: #293951;
|
||||
--footer-background-color: #133467;
|
||||
--submenu-shadow-color-opacity: 0.25;
|
||||
--button-shadow-color-normal: rgba(108, 108, 108, 0.2);
|
||||
--button-shadow-color-hover: rgba(108, 108, 108, 0.3);
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
--primary-subtle-color: #2c2fe6;
|
||||
--secondary-subtle-color: #141920;
|
||||
--titles-color: #b4b4b4;
|
||||
--link-color: #2c2fe6;
|
||||
--link-color: #b6b7f6;
|
||||
--primary-border-color: #1d1d1d;
|
||||
--secondary-border-color: #0f0f0f;
|
||||
--article-shadow-normal: 0 4px 5px 5px rgba(0,0,0,0.1);
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
--primary-subtle-color: #2c2fe6;
|
||||
--secondary-subtle-color: #141920;
|
||||
--titles-color: #b4b4b4;
|
||||
--link-color: #2c2fe6;
|
||||
--link-color: #b6b7f6;
|
||||
--primary-border-color: #1d1d1d;
|
||||
--secondary-border-color: #0f0f0f;
|
||||
--article-shadow-normal: 0 4px 5px 5px rgba(0,0,0,0.1);
|
||||
|
|
|
|||
|
|
@ -53,6 +53,10 @@
|
|||
}
|
||||
|
||||
&.as-author {
|
||||
.m-article-card__picture {
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
.m-article-card__picture-link {
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
&.no-picture {
|
||||
.m-featured-article__picture {
|
||||
background-color: var(--link-color);
|
||||
background-color: var(--primary-subtle-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,14 +40,13 @@
|
|||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slick-list,
|
||||
.slick-track,
|
||||
.slick-slide > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.m-featured-slider__list__item {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@include respond-to('medium') {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
cursor: pointer;
|
||||
z-index: 2;
|
||||
@extend .no-appearance;
|
||||
@extend .focusable;
|
||||
}
|
||||
|
||||
input::-moz-focus-inner {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
position: relative;
|
||||
background-color: transparent;
|
||||
@extend .no-appearance;
|
||||
@extend .focusable;
|
||||
@include transition(all .25s cubic-bezier(.02,.01,.47,1));
|
||||
|
||||
&.outlined {
|
||||
|
|
|
|||
|
|
@ -5,18 +5,18 @@
|
|||
outline: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
@extend .content-centered;
|
||||
@extend .no-appearance;
|
||||
@extend .focusable;
|
||||
|
||||
&.outlined {
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--primary-foreground-color);
|
||||
}
|
||||
|
||||
&.filled {
|
||||
background-color: var(--background-color);
|
||||
border-radius: 50%;
|
||||
@include bs(0 2px 4px var(--button-shadow-color-normal));
|
||||
@include transition(all .25s cubic-bezier(.02,.01,.47,1));
|
||||
|
||||
|
|
@ -25,6 +25,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.in-mobile-topbar {
|
||||
width: 65px;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,10 @@
|
|||
background-color: var(--background-color);
|
||||
@extend .no-appearance;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary-subtle-color);
|
||||
}
|
||||
|
||||
&.in-search {
|
||||
font-weight: 600;
|
||||
padding-left: 40px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.m-small-text {
|
||||
color: $gray;
|
||||
color: var(--titles-color);
|
||||
font-size: 0.875rem;
|
||||
|
||||
&.in-subscribe-page {
|
||||
|
|
|
|||
|
|
@ -494,7 +494,7 @@
|
|||
flex-wrap: wrap;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 400;
|
||||
color: $gray;
|
||||
color: var(--titles-color);
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,13 +4,16 @@ This template is used for the subscription page.
|
|||
|
||||
{{!-- This block loads specific styles for the newsletter page --}}
|
||||
{{#contentFor "styles"}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/newsletter.css"}}" media="screen" rel="preload" as="style" />
|
||||
<link rel="preload" href="{{asset "css/newsletter.css"}}" as="style" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/newsletter.css"}}" media="screen" />
|
||||
{{/contentFor}}
|
||||
|
||||
{{!-- The tag below means: insert everything in this file
|
||||
into the {body} of the default.hbs template --}}
|
||||
{{!< default}}
|
||||
|
||||
<main>
|
||||
<div class="l-wrapper" data-aos="fade-down">
|
||||
<a href="{{@site.url}}" class="m-back">
|
||||
<span class="m-back__icon icon-arrow-left"></span>
|
||||
|
|
@ -18,7 +21,7 @@ into the {body} of the default.hbs template --}}
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<main class="l-fullscreen">
|
||||
<div class="l-fullscreen">
|
||||
<section class="l-fullscreen__content in-subscribe-page" data-aos="fade-up" data-aos-delay="300">
|
||||
{{^if success}}
|
||||
<div>
|
||||
|
|
@ -44,11 +47,13 @@ into the {body} of the default.hbs template --}}
|
|||
<header class="m-heading in-subscribe-page">
|
||||
<h1 class="m-heading__title">{{t "Subscribed!"}}</h1>
|
||||
<p class="m-heading__description in-subscribe-page">
|
||||
{{t "You've successfully subscribed to"}} <strong>{{@site.title}}</strong> {{t "with the email address"}} <strong>{{email}}</strong>
|
||||
{{t "You've successfully subscribed to"}} <strong>{{@site.title}}</strong> {{t "with the email address"}}
|
||||
<strong>{{email}}</strong>
|
||||
</p>
|
||||
</header>
|
||||
<a href="{{@site.url}}" class="m-button outlined">{{t "Back to home"}}</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
15
tag.hbs
15
tag.hbs
|
|
@ -4,18 +4,23 @@ This template is used for the tag page.
|
|||
|
||||
{{!-- This block loads specific styles for the tag page --}}
|
||||
{{#contentFor "styles"}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" rel="preload" as="style" />
|
||||
<link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
|
||||
{{/contentFor}}
|
||||
|
||||
{{!-- The tag below means: insert everything in this file
|
||||
into the {body} of the default.hbs template --}}
|
||||
{{!< default}}
|
||||
|
||||
<div class="main-wrap">
|
||||
{{!-- Special header.hbs partial to generate the <header> tag --}}
|
||||
{{#tag}}
|
||||
{{> header background=feature_image}}
|
||||
{{/tag}}
|
||||
|
||||
<main class="main-wrap">
|
||||
{{!-- Everything inside the #tag tags pulls data from the tag --}}
|
||||
{{#tag}}
|
||||
{{!-- Special header.hbs partial to generate the <header> tag --}}
|
||||
{{> header background=feature_image}}
|
||||
{{!-- Inject styles of the hero image to make it responsive --}}
|
||||
{{> hero background=feature_image}}
|
||||
<div class="m-hero__content" data-aos="fade-down">
|
||||
|
|
@ -36,7 +41,6 @@ into the {body} of the default.hbs template --}}
|
|||
</section>
|
||||
{{/tag}}
|
||||
|
||||
<main>
|
||||
<div class="l-content">
|
||||
<div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
|
||||
<div class="l-grid centered">
|
||||
|
|
@ -48,4 +52,3 @@ into the {body} of the default.hbs template --}}
|
|||
{{pagination}}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue