Improvements in accessibility and responsiveness

Backbase · May 22, 2021 · 2a9ff76 · 2a9ff76
1 parent 8d95f9b
commit 2a9ff76
Show file tree

Hide file tree

Showing 14 changed files with 53 additions and 24 deletions.
diff --git a/_includes/about.html b/_includes/about.html
@@ -1,8 +1,8 @@
-<aside class="offset-md-2 col-md-2 floating-block">
+<aside class="offset-lg-2 col-md-4 col-xl-2 mb-3 floating-block">
   power the <span class="fw-bolder">digital banking revolution</span>
 </aside>
 
-<article class="col-md-6">
+<article class="col-md-8 col-lg-6">
   {{ include.content }}
 
   <a class="btn btn-sm btn-link keep-aligned" href="https://backbase.com" target="_blank" rel="noopener noreferrer">backbase.com</a>

diff --git a/_includes/archive-single.html b/_includes/archive-single.html
@@ -12,12 +12,12 @@
 
 <div class="grid__item col-12 {% if include.type == 'grid' %}col-md{% if include.columns %}-{{ 12 | divided_by: include.columns }}{% endif %}{% endif %} mb-4">
   <article class="archive__item card" itemscope itemtype="https://schema.org/CreativeWork">
+    {% if include.type == "grid" and teaser %}
+      <div class="archive__item-teaser">
+        <img src="{{ teaser | relative_url }}" alt="{{ post.header.teaser_alt }}" class="rounded-top">
+      </div>
+    {% endif %}
     <div class="card-body d-flex flex-column">
-      {% if include.type == "grid" and teaser %}
-        <div class="archive__item-teaser">
-          <img src="{{ teaser | relative_url }}" alt="">
-        </div>
-      {% endif %}
       <h2 class="archive__item-title no_toc">
         {% if post.link %}
           <a class="text-decoration-none" href="{{ post.link }}">{{ title }}</a> <a href="{{ post.url | relative_url }}" rel="permalink"><i class="fas fa-link" aria-hidden="true" title="permalink"></i><span class="sr-only">Permalink</span></a>
@@ -27,8 +27,8 @@ <h2 class="archive__item-title no_toc">
       </h2>
       {% include page__meta.html type=include.type %}
       {% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
-      <div class="mt-auto d-flex mt-auto justify-content-end">
-        <a href="{{ post.url | relative_url }}" rel="permalink" class="btn btn-sm btn-link">Read more</a>
+      <div class="d-flex mt-auto justify-content-end">
+        <a href="{{ post.url | relative_url }}" rel="permalink" class="btn btn-sm btn-link stretched-link">Read more</a>
       </div>
     </div>
   </article>

diff --git a/_includes/bb_splash.html b/_includes/bb_splash.html
@@ -1,14 +1,14 @@
 {% if page.splash %}
   <div class="bb-splash">
     <div class="bb-splash__background">
-      <img src="/assets/images/NEO-People_Email-Headers_0020_43.png" alt="" />
+      <img src="/assets/images/NEO-People_Email-Headers_0020_43.png" alt="Woman working on a computer" />
     </div>
 
     <div class="bb-splash__content">
       <div class="container">
         <div class="offset-md-2 col-md-4">
-          <h2 class="fs-1">power the <span class="fw-bolder">digital banking revolution</span></h2>
-          <h4>Take the initiative. Bring new ideas. Make mistakes. Learn. Keep making it happen. We trust you.</h4>
+          <h1 class="fs-1">power the <span class="fw-bolder">digital banking revolution</span></h1>
+          <h2 class="h4">Take the initiative. Bring new ideas. Make mistakes. Learn. Keep making it happen. We trust you.</h2>
         </div>
       </div>
     </div>

diff --git a/_includes/components/figure.html b/_includes/components/figure.html
@@ -1,4 +1,4 @@
 <figure class="figure d-block text-center mb-4">
-  <img class="figure-img img-fluid" src="{{ include.url }}" alt="{{ include.description }}">
+  <img class="figure-img img-fluid" src="{{ include.url }}" alt="{{ include.alt }}">
   <figcaption class="figure-caption">{{ include.description }}</figcaption>
 </figure>
diff --git a/_includes/components/link-card.html b/_includes/components/link-card.html
@@ -9,7 +9,7 @@ <h5>{{ include.heading }}</h5>
     </div>
     {% if include.image %}
     <div class="col-md-4 d-flex">
-      <img class="w-100 fit-cover rounded-top rounded-start-md-0 rounded-end-md" src="{{ include.image }}">
+      <img class="w-100 fit-cover rounded-top rounded-start-md-0 rounded-end-md" src="{{ include.image }}" alt="{{ include.alt }}">
     </div>
     {% endif %}
   </div>

diff --git a/_includes/page__meta.html b/_includes/page__meta.html
@@ -9,7 +9,7 @@
     {% else %}
       {% if document.authors %}
       <span class="page__meta-readtime small text-muted">
-      By 
+      By
       {% for author in document.authors %}
         {{ author }}{% if forloop.last %}{% else %}, {% endif %}
       {% endfor %}
@@ -24,7 +24,6 @@
       {% assign words = document.content | strip_html | number_of_words %}
 
       <span class="page__meta-readtime small text-muted">
-        &nbsp;&nbsp;|&nbsp;&nbsp;
         <i class="far {% if include.type == 'grid' and document.read_time and document.show_date %}fa-fw {% endif %}fa-clock" aria-hidden="true"></i>
         {% if words < words_per_minute %}
           {{ site.data.ui-text[site.locale].less_than | default: "less than" }} 1 {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}

diff --git a/_posts/2020-03-04-kubernetes-application-developer-certification-tips.md b/_posts/2020-03-04-kubernetes-application-developer-certification-tips.md
@@ -6,6 +6,7 @@ authors:
 - Andrés Torres
 header:
   teaser: /assets/images/post/1_KjxjnnQLnPaQWtAiPmG1uw.png
+  teaser_alt: Kubernetes certificate
 ---
 
 ![](/assets/images/post/1_z6NGFcNqfSgJaIvuzaY0sA.png)
@@ -40,7 +41,8 @@ For something more academic I would recommend following the course:
   components/link-card.html
   heading="Introduction to Kubernetes"
   body="Want to learn Kubernetes? Get an in-depth primer on this powerful system for managing containerized applications."
-  link="https://www.edx.org"
+  link="https://www.edx.org/course/introduction-to-kubernetes"
+  linkLabel="www.edx.org"
   image="/assets/images/post/0_XDOX4FxMG8-4iWZl.png"
 %}
 

diff --git a/_sass/_reboot.scss b/_sass/_reboot.scss
@@ -0,0 +1,9 @@
+a  {
+  @at-root .bg-dark &, .bg-primary & {
+    color: $white;
+  }
+}
+
+p {
+  max-width: 60ch;
+}
diff --git a/_sass/abstract/_bootstrap.scss b/_sass/abstract/_bootstrap.scss
@@ -1,4 +1,4 @@
-$primary: map-get($bb-palette, 'dark-blue');
+$primary: map-get($bb-palette, "dark-blue");
 $secondary: map-get($bb-palette, "red");
 $info: map-get($bb-palette, "bright-blue");
 $warning: map-get($bb-palette, "light-orange");
@@ -24,9 +24,12 @@ $headings-color: $primary;
 $body-bg: map-get($bb-palette, "white");
 $body-color: $dark;
 
-$link-color: map-get($bb-palette, "bright-blue");
+$text-muted: map-get($bb-palette, "grey");
+$figure-caption-color: $text-muted;
 
-$font-family-sans-serif: 'Inter', sans-serif;
+$link-color: map-get($bb-palette, "dark-blue");
+
+$font-family-sans-serif: "Inter", sans-serif;
 
 $headings-font-weight: 200;
 

diff --git a/_sass/components/_buttons.scss b/_sass/components/_buttons.scss
@@ -3,18 +3,20 @@
     font-weight: 500;
     text-decoration: none;
     text-transform: uppercase;
+    display: flex;
+    flex-direction: row-reverse;
     $this: &;
 
-    &::after {
+    &::before {
       @extend %material-icons-round;
       content: 'east';
       color: map-get($bb-palette, 'red');
       text-transform: initial;
-      margin-left: .5em;
+      margin-left: map-get($spacers, 2);
       transition: transform .3s;
       display: inline-block;
 
-      @at-root #{$this}:hover:after {
+      @at-root #{$this}:hover:before {
         transform: translateX(.15em);
         transition: transform .1s;
       }

diff --git a/_sass/components/_page-meta.scss b/_sass/components/_page-meta.scss
@@ -0,0 +1,9 @@
+.page__meta {
+  > span:not(:last-child) {
+    &::after {
+      content: "|";
+      margin-left: map-get($spacers, 2);
+      margin-right: map-get($spacers, 2);
+    }
+  }
+}
diff --git a/_sass/components/components.scss b/_sass/components/components.scss
@@ -6,3 +6,4 @@
 @import "icons";
 @import "floating-block";
 @import "code";
+@import "page-meta";
diff --git a/_sass/layout/_single.scss b/_sass/layout/_single.scss
@@ -41,7 +41,8 @@
       width: 25%;
 
       &__avatar {
-        width: auto;
+        width: 7rem;
+        margin: 0 auto map-get($spacers, 3);
       }
 
       > div {
@@ -53,6 +54,7 @@
   &__content {
     position: relative;
     font-size: 1.2em;
+    overflow-wrap: break-word;
 
     .sidebar {
       &__right {

diff --git a/_sass/main.scss b/_sass/main.scss
@@ -4,6 +4,8 @@
 
 @import "bootstrap";
 
+@import "reboot";
+
 @import "layout/layout";
 
 @import "components/components";