Remove Noto Sans font and update styles for improved typography and layout (#47)

Author: ngeorger

assets/built/screen.css

@@ -2,11 +2,7 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@layer base {
-  html {
-    font-family: 'Noto Sans', system-ui, sans-serif;
-  }
-}
+
 /* #sidebar {
   @apply w-64 bg-darker h-screen p-6 fixed md:block hidden z-10 transform md:translate-x-0 -translate-x-full transition-transform duration-300 overflow-y-scroll
 } */
@@ -70,13 +66,11 @@ a:hover h3 {
 #main h3,
 #main h4,
 #main h5 {
-  font-family: 'Noto Sans', sans-serif;
   font-weight: 500;
   @apply text-lighter;
 }
 
 p {
-  font-family: 'Noto Sans', sans-serif;
   font-weight: 400;
   text-align: justify;
   hyphens: auto;
@@ -92,7 +86,7 @@ p {
 /* All Tables */
 
 .post-content{
-  @apply container p-6 mx-auto md:ml-64 md:px-32 md:py-12;
+  @apply px-6 mx-auto md:ml-64 md:p-32 md:py-12;
 }
 
 
@@ -230,6 +224,7 @@ p {
 .kg-image {
   margin-right: auto;
   margin-left: auto;
+  max-width: 80%;
 }
 
 /* Gallery */

assets/css/screen.css

@@ -10,8 +10,6 @@
         <link rel="stylesheet" href="{{asset "built/prism.css"}}">
     {{/is}}
 
-    {{!-- {{> "typography/noto"}} --}}
-
     {{#is "home, tag, author, index"}}
         {{ghost_head exclude="card_assets,cta_styles,comment_counts,announcement"}}
     {{else}}

assets/fonts/NotoSans.woff2

@@ -1,6 +1,12 @@
 {{!< default}}
 <main id="main" class="container pt-6 pb-6 mx-auto md:pl-64">
 {{> "tags-nav" }}
+{{#tag}}
+<h1 class="pb-4 text-4xl">{{name}}</h1>
+{{#if description}}
+<h2 class="pb-4 text-xl">{{description}}</h2>
+{{/if}}
+{{/tag}}
 
 {{> "posts-list" }}
 

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.8",
+    "version": "1.2.0",
     "engines": {
         "ghost": ">=5.0.0"
     },
@@ -41,17 +41,17 @@
         "https://github.com/sredevopsorg/sredevopsorg-ghost-theme/graphs/contributors"
     ],
     "devDependencies": {
-        "@tailwindcss/forms": "^0.5.9",
-        "@tailwindcss/typography": "^0.5.15",
-        "autoprefixer": "^10.4.20",
+        "@tailwindcss/forms": "^0.5.10",
+        "@tailwindcss/typography": "^0.5.16",
+        "autoprefixer": "^10.4.21",
         "cssnano": "7.0.6",
         "gulp": "^5.0.0",
         "gulp-concat": "2.6.1",
         "gulp-livereload": "4.0.2",
         "gulp-postcss": "10.0.0",
         "gulp-uglify": "3.0.2",
-        "postcss": "^8.4.49",
-        "postcss-import": "^15.1.0",
+        "postcss": "^8.5.3",
+        "postcss-import": "^16.1.0",
         "pump": "3.0.2",
         "tailwindcss": "^3.4.17"
     },
@@ -83,10 +83,10 @@
                 "width": 300
             },
             "l": {
-                "width": 400
+                "width": 600
             },
             "xl": {
-                "width": 500
+                "width": 900
             }
         }
     },

home.hbs

@@ -4,7 +4,7 @@
 {{#post}}
 <main id="main">
 
-<article class="container p-6 md:ml-32 md:pl-32">
+<article class="prose-lg post-content prose-invert text-light">
 <section class="py-0 md:py-0">
           <div class="l-content">
               <div class="l-wrapper" data-animate="fade-up">

package.json

@@ -1,19 +1,17 @@
 {{#if feature_image}}
-    <figure>
-        <picture>
-            <img src="{{img_url feature_image format='webp' size='xl'}}" 
-                alt="{{title}}"
-                {{#is "home, index, tag, author, paged" }}
-                    class="object-cover w-full"
-                {{else}}
-                    class="items-center clear-both mx-auto "
-                {{/is}}
-            >
-        </picture>
-        {{#unless "post" }}
-            {{#if feature_image_caption}}
-                <figcaption class="text-xs text-center text-light">{{feature_image_caption}}</figcaption>
-            {{/if}}
-        {{/unless}}
-    </figure>
-{{/if}}
+<figure>
+    <picture>
+        {{#is "home, index, tag, author, paged" }}
+        <img src="{{img_url feature_image format='webp' size='s'}}" alt="{{title}}" class="object-cover w-full">
+        {{else}}
+        <img src="{{img_url feature_image format='webp' size='xl'}}" alt="{{title}}"
+            class="items-center clear-both mx-auto">
+        {{/is}}
+    </picture>
+    {{#unless "post" }}
+    {{#if feature_image_caption}}
+    <figcaption class="text-xs text-center text-light">{{feature_image_caption}}</figcaption>
+    {{/if}}
+    {{/unless}}
+</figure>
+{{/if}}

page-tags.hbs

@@ -4,7 +4,7 @@
         <article id="{{slug}}">   
             <a href="{{url absolute="true"}}" alt="{{title}}">
             <img alt="{{title}}"
-                src="{{img_url feature_image size='s' format='webp'}}"
+                src="{{img_url feature_image size='m' format='webp'}}"
                 width="220px"
                 {{#if @custom.lazy_images}} loading="lazy"{{/if}} />
             </a>