Bugfixes and changes to improve speed and accessibility 💪🏼

This commit is contained in:
Eduardo 2019-03-17 17:16:17 +01:00
parent 5c043d3d5e
commit 6b248c88cd
13 changed files with 61 additions and 35 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{36:function(n,t,s){n.exports=s(37)},37:function(n,t,s){"use strict";s.r(t);var r=s(0),o=s.n(r);s(4);o()(document).ready(function(){var n=o()(".js-featured-articles");n.length>0&&n.slick({arrows:!0,infinite:!0,prevArrow:'<button class="m-icon-button in-featured-articles slick-prev"><span class="icon-arrow-left"></span></button>',nextArrow:'<button class="m-icon-button in-featured-articles slick-next"><span class="icon-arrow-right"></span></button>',mobileFirst:!0})})}},[[36,0,1]]]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{36:function(n,t,r){n.exports=r(37)},37:function(n,t,r){"use strict";r.r(t);var a=r(0),s=r.n(a);r(4);s()(document).ready(function(){var n=s()(".js-featured-articles");n.length>0&&n.slick({arrows:!0,infinite:!0,prevArrow:'<button class="m-icon-button in-featured-articles slick-prev" aria-label="Previous"><span class="icon-arrow-left"></span></button>',nextArrow:'<button class="m-icon-button in-featured-articles slick-next" aria-label="Next"><span class="icon-arrow-right"></span></button>',mobileFirst:!0})})}},[[36,0,1]]]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -20,21 +20,21 @@
<ul class="m-hero-social">
{{#if website}}
<li>
<a href="{{website}}" target="_blank" rel="noopener">
<a href="{{website}}" target="_blank" rel="noopener" aria-label="Website">
<span class="icon-globe"></span>
</a>
</li>
{{/if}}
{{#if facebook}}
<li>
<a href="https://facebook.com/{{facebook}}" target="_blank" rel="noopener">
<a href="https://facebook.com/{{facebook}}" target="_blank" rel="noopener" aria-label="Facebook">
<span class="icon-facebook"></span>
</a>
</li>
{{/if}}
{{#if twitter}}
<li>
<a href="https://twitter.com/{{twitter}}" target="_blank" rel="noopener">
<a href="https://twitter.com/{{twitter}}" target="_blank" rel="noopener" aria-label="Twitter">
<span class="icon-twitter"></span>
</a>
</li>

View file

@ -11,15 +11,29 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{{!-- Styles'n'Scripts --}}
<link rel="stylesheet" type="text/css" href="{{asset "css/app.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/app.css"}}" media="screen" />
{{{block "herobackground"}}}
{{!-- This tag outputs SEO meta+structured data and other important settings --}}
{{ghost_head}}
<script>
const ghostHost = "{{@site.url}}"
</script>
<script>
WebFontConfig = {
google: { families: ['Source+Sans+Pro:400,600,700'] }
};
(function (d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
wf.async = true;
s.parentNode.insertBefore(wf, s);
})(document);
</script>
</head>
<body class="{{body_class}}">
{{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}

View file

@ -22,9 +22,9 @@
{{#get "posts" filter="featured:true" include="authors,tags" limit="5" as |featured|}}
{{#if featured}}
<div class="m-featured-slider">
<ul class="m-featured-slider__list js-featured-articles">
<div class="m-featured-slider__list js-featured-articles">
{{#foreach featured}}
<li class="m-featured-slider__list__item">
<div class="m-featured-slider__list__item">
{{#if feature_image}}
<article class="m-featured-article">
{{else}}
@ -36,8 +36,7 @@
{{/if}}
</div>
<div class="m-featured-article__meta">
<a href="{{primary_author.url}}" class="m-featured-article__author js-tooltip"
data-tippy-content="Posted by {{primary_author.name}} {{authors autolink="false" from="2" prefix="<br> Among with " separator=" , "}}">
<a href="{{primary_author.url}}" class="m-featured-article__author js-tooltip" aria-label="Authors" data-tippy-content="Posted by {{primary_author.name}} {{authors autolink="false" from="2" prefix="<br> Among with " separator=" , "}}">
{{#if primary_author.profile_image}}
<div style="background-image: url({{primary_author.profile_image}});"></div>
{{else}}
@ -55,15 +54,15 @@
<a href="{{url}}" class="m-featured-article__content">
<h1 class="m-featured-article__title">{{title}}</h1>
<div class="m-featured-article__timestamp">
<time datetime="{{published_at}}">{{date published_at timeago="true"}}</time>
<span>{{date published_at timeago="true"}}</span>
<span>&bull;</span>
<span>{{reading_time}}</span>
</div>
</a>
</article>
</li>
</div>
{{/foreach}}
</ul>
</div>
</div>
{{/if}}
{{/get}}

View file

@ -1,6 +1,6 @@
{{#foreach posts}}
{{#is "post"}}
<li class="m-recommended-slider__item">
<div class="m-recommended-slider__item">
{{/is}}
{{#if feature_image}}
<article class="m-article-card {{post_class}}">
@ -10,7 +10,7 @@
<div class="m-article-card__picture">
{{/if}}
<a href="{{url}}" class="m-article-card__picture-link" aria-label="Article"></a>
<a href="{{primary_author.url}}" class="m-article-card__author js-tooltip" data-tippy-content="Posted by {{primary_author.name}} {{authors autolink="false" from="2" prefix="<br>Among with " separator=" , "}}">
<a href="{{primary_author.url}}" class="m-article-card__author js-tooltip" aria-label="Authors" data-tippy-content="Posted by {{primary_author.name}} {{authors autolink="false" from="2" prefix="<br>Among with " separator=" , "}}">
{{#if primary_author.profile_image}}
<div style="background-image: url({{primary_author.profile_image}});"></div>
{{else}}
@ -34,7 +34,7 @@
<h2 class="m-article-card__title">{{title}}</h2>
</div>
<div class="m-article-card__timestamp">
<time datetime="{{published_at}}">{{date published_at timeago="true"}}</time>
<span>{{date published_at timeago="true"}}</span>
<span>&bull;</span>
<span>{{reading_time}}</span>
</div>
@ -42,7 +42,7 @@
</div>
</article>
{{#is "post"}}
</li>
</div>
{{/is}}
{{else}}
<header class="m-heading">

View file

@ -6,7 +6,7 @@
<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="Type to search">
<input type="text" class="m-input in-search js-input-search" placeholder="Type to search" aria-label="Type to search">
</fieldset>
</form>
<div class="js-search-results"></div>

View file

@ -2,6 +2,7 @@
{{hidden}}
<fieldset>
<label for="{{input_id}}" class="sr-only">{{placeholder}}</label>
{{input_email id=input_id class=input_class placeholder=placeholder value=email autofocus=autofocus}}
</fieldset>
<button id="{{button_id}}" class="{{button_class}}" type="submit">Subscribe</button>

View file

@ -12,8 +12,12 @@
<article>
<div class="l-content">
{{#post}}
<div class="l-wrapper in-post js-wrapper-aos" data-aos="fade-up" data-aos-delay="300">
<div class="l-post-content js-progress-content">
<div class="l-wrapper in-post js-aos-wrapper" data-aos="fade-up" data-aos-delay="300">
{{#if @labs.subscribers}}
<div class="l-post-content has-subscribe-form js-progress-content">
{{else}}
<div class="l-post-content js-progress-content"></div>
{{/if}}
<header class="m-heading">
<h1 class="m-heading__title in-post">{{title}}</h1>
<div class="m-heading__meta">
@ -21,22 +25,22 @@
<a href="{{primary_tag.url}}" class="m-heading__meta__tag">{{primary_tag.name}}</a>
<span class="m-heading__meta__divider">&bull;</span>
{{/if}}
<time class="m-heading__meta__time">{{date published_at}}</time>
<span class="m-heading__meta__time">{{date published_at}}</span>
</div>
</header>
<div class="pos-relative js-post-content">
<div class="m-share">
<div class="m-share__content js-sticky">
<a href="#" class="m-icon-button filled in-share">
<a href="#" class="m-icon-button filled in-share" aria-label="Facebook">
<span class="icon-facebook"></span>
</a>
<a href="#" class="m-icon-button filled in-share">
<a href="#" class="m-icon-button filled in-share" aria-label="Twitter">
<span class="icon-twitter"></span>
</a>
<button class="m-icon-button filled in-share progress js-scrolltop">
<button class="m-icon-button filled in-share progress js-scrolltop" aria-label="Scroll to top">
<span class="icon-arrow-top"></span>
<svg>
<circle class="progress-ring__circle js-progress" stroke="#04aeee" fill="transparent" />
<circle class="progress-ring__circle js-progress" stroke="#04aeee" fill="transparent" r="0" />
</svg>
</button>
</div>
@ -45,6 +49,7 @@
</div>
</div>
</div>
{{#if @labs.subscribers}}
<section class="m-subscribe-section">
<div class="l-wrapper in-post">
<div class="m-subscribe-section__content">
@ -56,8 +61,11 @@
</div>
<div class="m-subscribe-section__form">
{{subscribe_form
form_id="subscribe-form"
form_class="m-subscribe-section__form"
input_id="subscribe_input"
input_class="m-input in-subscribe-section"
button_id="subscribe_button"
button_class="m-button primary block"
placeholder="Your email address"
}}
@ -65,10 +73,11 @@
</div>
</div>
</section>
{{/if}}
<section class="m-author">
<div class="m-author__content">
<div class="m-author__picture">
<a href="{{primary_author.url}}" class="m-author-picture">
<a href="{{primary_author.url}}" class="m-author-picture" aria-label="Author picture">
{{#if primary_author.profile_image}}
<div style="background-image: url({{primary_author.profile_image}});"></div>
{{else}}
@ -91,21 +100,21 @@
<ul class="m-author-links">
{{#if primary_author.website}}
<li>
<a href="{{primary_author.website}}" target="_blank" rel="noopener">
<a href="{{primary_author.website}}" target="_blank" rel="noopener" aria-label="Website">
<span class="icon-globe"></span>
</a>
</li>
{{/if}}
{{#if primary_author.facebook}}
<li>
<a href="https://facebook.com/{{primary_author.facebook}}" target="_blank" rel="noopener">
<a href="https://facebook.com/{{primary_author.facebook}}" target="_blank" rel="noopener" aria-label="Facebook">
<span class="icon-facebook"></span>
</a>
</li>
{{/if}}
{{#if primary_author.twitter}}
<li>
<a href="https://twitter.com/{{primary_author.twitter}}" target="_blank" rel="noopener">
<a href="https://twitter.com/{{primary_author.twitter}}" target="_blank" rel="noopener" aria-label="Twitter">
<span class="icon-twitter"></span>
</a>
</li>
@ -145,9 +154,9 @@
<div class="l-wrapper in-recommended">
<h3 class="m-section-title in-recommended">Recommended for you</h3>
<div class="m-recommended-articles">
<ul class="m-recommended-slider js-recommended-articles">
<div class="m-recommended-slider js-recommended-articles">
{{> "loop"}}
</ul>
</div>
</div>
</div>
</section>

View file

@ -18,8 +18,11 @@
</p>
</header>
{{subscribe_form
form_id="subscribe-form"
form_class="m-subscribe-section__form"
input_id="subscribe_input"
input_class="m-input in-subscribe-section"
button_id="subscribe_button"
button_class="m-button primary block"
placeholder="Your email address"
autofocus="true"