v1.1.1

Author: ngeorger

assets/built/screen.css

@@ -426,16 +426,14 @@ figcaption a {
 
 /* Tags Page */
 
-@media only screen and (min-width:48rem) {
-
+@media (min-width: 48rem) {
   .l-tags-container,
   .recommendations {
     @apply flex flex-wrap justify-center mx-auto max-w-[720px];
   }
 }
 
-@media only screen and (min-width:64rem) {
-
+@media (min-width: 64rem) {
   .l-tags-container,
   .recommendations {
     @apply max-w-[1080px];
@@ -457,8 +455,7 @@ figcaption a {
   @apply shadow-[var(--article-shadow-hover),0_0_0_transparent];
 }
 
-@media only screen and (min-width:48rem) {
-
+@media (min-width: 48rem) {
   .m-tag-card,
   .recommendation {
     @apply my-0 mb-[40px] mx-[20px] w-[320px];
@@ -482,16 +479,16 @@ figcaption a {
 
 .m-tag-card__picture,
 .recommendation-favicon {
-  @apply relative  top-0 left-0 w-[75px] h-[75px];
+  @apply relative top-0 left-0 w-[75px] h-[75px];
 }
 
 .recommendation-favicon {
-  @apply relative  top-[5px] left-[5px] max-w-[45px] max-h-[45px];
+  @apply relative top-[5px] left-[5px] max-w-[45px] max-h-[45px];
 }
 
 .m-tag-card__info,
 .recommendation__description {
-  @apply bottom-[15px] text-white left-[15px] absolute ;
+  @apply bottom-[15px] text-white left-[15px] absolute;
 }
 
 .m-tag-card__info.no-picture {
@@ -649,15 +646,15 @@ figcaption a {
 }
 
 .recommendation {
-    @apply flex flex-col gap-y-3;
+    @apply flex flex-col p-2 gap-y-3;
 }
 
 .recommendation-title {
     @apply p-2 text-xl font-medium;
 }
 
 .recommendation-favicon {
-    @apply block w-10 h-10 mr-2 align-top;
+    @apply w-10 h-10 mr-2;
 }
 .recommendation-url {
   @apply text-xs text-lighter;

assets/css/screen.css

@@ -4,12 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{meta_title}}</title>
-    {{#is "home"}}
-    <link rel="alternate" hreflang="pt-BR" href="{{@site.url}}/br/" />
-    <link rel="alternate" hreflang="en" href="{{@site.url}}/en/" />
-    <link rel="alternate" hreflang="es" href="{{@site.url}}/es/" />
-    <link rel="alternate" hreflang="x-default" href="{{@site.url}}" />
-    {{/is}}
+    
 
     {{> "typography/noto"}}
 

default.hbs

@@ -2,7 +2,7 @@
     "name": "sredevopsorg-ghost-theme",
     "description": "Ghost v5 Theme made for SREDevOps.org (https://sredevops.org) based on Tailwind CSS v3, responsive, dark color schema, SVG icons, sidebar + footer navgation, customized tags and recommendations pages.",
     "demo": "https://sredevops.org",
-    "version": "1.1.0",
+    "version": "1.1.1",
     "engines": {
         "ghost": ">=5.0.0"
     },
@@ -67,19 +67,19 @@
         "card_assets": true,
         "image_sizes": {
             "xs": {
-                "width": 120
+                "width": 100
             },
             "s": {
                 "width": 220
             },
             "m": {
-                "width": 400
+                "width": 300
             },
             "l": {
-                "width": 600
+                "width": 400
             },
             "xl": {
-                "width": 900
+                "width": 500
             }
         }
     }

package.json

@@ -17,8 +17,8 @@
                             <img class="m-tag-card__picture" src="{{img_url feature_image size="xs"}}" loading="lazy" alt="{{name}}">
                           {{/if}}
                           <div class="m-tag-card__info {{#unless feature_image}}no-picture{{/unless}}">
-                            <h4 class="m-tag-card__name">{{name}}</h4>
-                            <span class="m-tag-card__description">{{description}}</span>
+                            <h4 class="text-xl font-semibold">{{name}}</h4>
+                            <span class="text-sm text-clip font-extralight max-h-fit">{{description}}</span>
                             <span class="m-tag-card__counter">
                               {{plural count.posts empty=(t "No posts") singular=(t "1 post") plural=(t "% posts")}}
                             </span>

page-tags.hbs

@@ -1,16 +1,12 @@
 {{#if feature_image}}
     <figure>
         <picture>
-            <source srcset="{{img_url feature_image format="webp" size="xl"}}" media="(min-width: {{image_sizes.xl}})">
-            <source srcset="{{img_url feature_image format="webp" size="l"}}" media="(min-width: {{image_sizes.l}})">
-            <source srcset="{{img_url feature_image format="webp" size="m"}}" media="(min-width: {{image_sizes.m}})">
-            <source srcset="{{img_url feature_image format="webp" size="s"}}" media="(min-width: {{image_sizes.s}})">
-            <source srcset="{{img_url feature_image format="webp" size="xs"}}" media="(min-width: {{image_sizes.xs}})">
-            <img src="{{img_url feature_image format="webp" size="m"}}" alt="{{title}}"
+            <img src="{{img_url feature_image format='webp' size='m'}}" 
+                alt="{{title}}"
                 {{#is "home, index, tag, author, paged" }}
-                    class="object-cover w-full h-56 "
+                    class="object-cover w-full"
                 {{else}}
-                    class="object-center "
+                    class="items-center clear-both mx-auto "
                 {{/is}}
             >
         </picture>

partials/feature-image.hbs

@@ -13,9 +13,9 @@
 <aside id="sidebar" class="fixed z-10 hidden w-64 h-screen p-6 overflow-y-scroll transition-transform duration-300 transform -translate-x-full bg-darker md:block md:translate-x-0">
     <div id="logo" class="mb-6">
         {{#if @site.logo}}
-        <a class="logo" href="{{@site.url}}">
-            <img src="{{@site.logo}}" alt="{{@site.title}}" class="w-full h-auto" loading="lazy">
-        </a>
+                <a href="{{@site.url}}" rel="me" alt="{{@site.title}}" aria-label="SREDevOps.org">
+                    <img src="{{asset "img/sredevopsorg.svg"}}" alt="SREDevOps.org" />
+                </a>
         {{else}}
         <div class="text-lg font-bold text-lighter">{{@site.title}}</div>
         {{/if}}
@@ -54,11 +54,13 @@
     <section id="nav" class="mb-6">
         {{navigation}}
     </section>
-    <section id="members" class="text-light">
+    <section id="members" class="pb-4 text-light">
         {{#if @member}}
         <div class="flex items-center gap-2">
-            <img src="{{@member.avatar}}" alt="{{@member.name}}" class="w-8 h-8 rounded-full">
-            <span><a href="/#/portal/account/profile">{{@member.name}} Settings</a> | <a href="javascript:" data-members-signout>Sign out</a> </span> 
+            <ul>
+                <li><a href="/#/portal/account/profile"><img src="{{@member.avatar}}" alt="{{@member.name}} Settings" aria-label="{{@member.name}} Settings" class="w-8 h-8 rounded-full"></a></li>
+                <li><a href="javascript:" data-members-signout>Sign out</a></li>
+            </ul> 
         </div>
         {{else}}
         {{> "social-sso"}}

partials/header.hbs

@@ -5,7 +5,7 @@
 
             <a href="{{url absolute="true"}}" alt="{{title}}">
             <img alt="{{title}}"
-                src="{{img_url feature_image absolute size="xs" format="webp"}}"
+                src="{{img_url feature_image size='s' format='webp'}}"
                 class="object-cover w-full h-56 " {{#is "paged, tag"}} loading="lazy"{{/is}} />
             </a>
 
@@ -20,9 +20,9 @@
                     {{excerpt}}
                 </p>
 
-                <a href="{{url absolute="true"}}" class="inline-flex items-center gap-1 mt-4 text-sm font-medium group" alt="{{title}}" rel="" >
-                    <h3 id="{{slug}}" class="block transition-all group-hover:ms-0.5">
-                        Full post &rarr;
+                <a href="{{url absolute="true"}}" class="inline-flex items-center gap-1 mt-4 text-sm font-medium group" alt="{{title}}" rel="bookmark">
+                    <h3 id="{{slug}}" class="block transition-all group-hover:ms-0.5" alt="{{title}}">
+                        Read the full post &rarr;
                     </h3>
                 </a>
             </div>