a11y and performance updates

TryGhost · May 15, 2023 · 9c10219 · 9c10219
1 parent b0a6902
commit 9c10219
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 20 deletions.
diff --git a/assets/built/index.css b/assets/built/index.css
diff --git a/assets/built/index.css.map b/assets/built/index.css.map
diff --git a/assets/css/components/buttons.css b/assets/css/components/buttons.css
@@ -45,9 +45,9 @@
 }
 
 .gh-button {
-    color: var(--color-primary) !important;
+    color: inherit;
     background-color: transparent;
-    box-shadow: inset 0 0 0 2px var(--color-primary);
+    box-shadow: inset 0 0 0 2px currentColor
 }
 
 .gh-button:hover {

diff --git a/assets/css/components/global.css b/assets/css/components/global.css
@@ -8,8 +8,8 @@
 }
 
 html {
-    overflow-x: hidden;
-    overflow-y: scroll;
+    /* overflow-x: hidden;
+    overflow-y: scroll; */
     font-size: 62.5%;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }

diff --git a/assets/css/ghost/footer.css b/assets/css/ghost/footer.css
@@ -47,7 +47,7 @@
     margin: 2rem 0;
     font-size: 1.5rem;
     text-align: center;
-    opacity: 0.5;
+    opacity: 0.75;
 }
 
 @media (max-width: 700px) {

diff --git a/assets/css/index.css b/assets/css/index.css
@@ -103,11 +103,17 @@ html,
 
 .gh-card-image {
     width: 100%;
-    max-height: 700px;
+    /* max-height: 700px; */
     object-fit: cover;
     margin-bottom: 4vmin;
+    aspect-ratio: 1 / 1;
 }
 
+.gh-card-image:first-of-type {
+    aspect-ratio: 16 / 9;
+}
+
+
 .gh-card-meta {
     display: block;
     margin: 0 0 1rem;
@@ -135,7 +141,7 @@ html,
     padding: 1px 0;
     font-weight: 500;
     box-shadow: 0 -1px 0 0 inset currentColor;
-    opacity: 0.5;
+    opacity: 0.75;
 }
 
 

diff --git a/default.hbs b/default.hbs
@@ -27,7 +27,7 @@
                     {{@site.title}}
                 {{/if}}
             </a>
-            <a class="gh-burger" role="button">
+            <a class="gh-burger" role="button" aria-label="menu">
                 <div class="gh-burger-box">
                     <div class="gh-burger-inner"></div>
                 </div>
@@ -40,10 +40,10 @@
             <div class="gh-head-actions-list">
                 {{search}}
                 {{#if @site.members_enabled}}
-                    {{#if @member}}
-                    <a class="gh-button" href="{{@site.signup_url}}">Sign up</a>
+                    {{^if @member}}
+                    <a class="gh-button" href="{{@site.signup_url}}">Subscribe</a>
                     {{else}}
-                    <a class="gh-button" href="https://starter.ghost.io/#/portal/account">Account</a>
+                    <a class="gh-button" href="#/portal/account">Account</a>
                     {{/if}}
                 {{/if}}
             </div>

diff --git a/partials/card.hbs b/partials/card.hbs
@@ -5,15 +5,47 @@ Re-usable card for linking to posts
 <article class="gh-card {{post_class}}">
     <a class="gh-card-link" href="{{url}}">
         {{#if feature_image}}
-            <img class="gh-card-image"
-                srcset="{{img_url feature_image size="s"}} 300w,
-                        {{img_url feature_image size="m"}} 600w,
-                        {{img_url feature_image size="l"}} 1000w,
-                        {{img_url feature_image size="xl"}} 2000w"
-                sizes="(max-width: 1000px) 400px, 700px"
+            <picture class="gh-card-picture">
+              <source 
+                srcset="
+                {{img_url feature_image size="xxs" format="avif"}} 30w,
+                {{img_url feature_image size="xs" format="avif"}} 100w,
+                {{img_url feature_image size="s" format="avif"}} 300w,
+                {{img_url feature_image size="m" format="avif"}} 600w,
+                {{img_url feature_image size="l" format="avif"}} 1200w,
+                {{img_url feature_image size="xl" format="avif"}} 2000w"
+                {{^if @first}}sizes="(min-width: 1200px) 1200px, 100vw)"{{else}}sizes="(min-width: 800px) 100vw, 700px"{{/if}}
+                type="image/avif"
+                {{^if @first}}loading="lazy"{{/if}}
+              >
+              <source 
+                srcset="
+                {{img_url feature_image size="xxs" format="webp"}} 30w,
+                {{img_url feature_image size="xs" format="webp"}} 100w,
+                {{img_url feature_image size="s" format="webp"}} 300w,
+                {{img_url feature_image size="m" format="webp"}} 600w,
+                {{img_url feature_image size="l" format="webp"}} 1200w,
+                {{img_url feature_image size="xl" format="webp"}} 2000w"
+                {{^if @first}}sizes="(min-width: 1200px) 1200px, 100vw)"{{else}}sizes="(min-width: 800px) 100vw, 700px"{{/if}}
+                type="image/webp"
+                {{^if @first}}loading="lazy"{{/if}}
+
+              >
+              <img
+                srcset="
+                {{img_url feature_image size="xxs"}} 30w,
+                {{img_url feature_image size="xs"}} 100w,
+                {{img_url feature_image size="s"}} 300w,
+                {{img_url feature_image size="m"}} 600w,
+                {{img_url feature_image size="l"}} 1200w,
+                {{img_url feature_image size="xl"}} 2000w"
+                {{^if @first}}sizes="(min-width: 1200px) 1200px, 100vw)"{{else}}sizes="(min-width: 800px) 100vw, 700px"{{/if}}
                 src="{{img_url feature_image size="m"}}"
                 alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
-            />
+                class="gh-card-image"
+                {{^if @first}}loading="lazy"{{/if}}
+              >
+            </picture>
         {{/if}}
         <div class="gh-card-content">
             <span class="gh-card-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span>