fix(theme): fixes page layout bugs

custom-post-with-author.hbs

@@ -8,7 +8,6 @@
 
     <header class="mt-10 prose prose-lg dark:prose-dark max-w-none">
 
-
       {{#if feature_image}}
         <img class="gh-feature-image mx-auto w-full max-w-full"
           srcset="{{img_url feature_image size="s"}} 300w,
@@ -28,14 +27,14 @@
         </p>
       {{/if}}
 
-       <p class="text-sm">
-          Written by
-          {{#foreach authors}}
-            {{name}}
-          {{/foreach}}
-          <span class="text-gray-500">on <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time></span>
+      <p class="text-sm">
+        Written by
+        {{#foreach authors}}
+          {{name}}
+        {{/foreach}}
+        <span class="text-gray-500">on <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time></span>
 
-        </p>
+      </p>
 
     </header>
 

gulpfile.js

@@ -40,8 +40,8 @@ function hbs( done ) {
 
 function css( done ) {
   var processors = [
-    tailwind(),
     easyimport,
+    tailwind(),
     colorFunction(),
     // autoprefixer(),
     // cssnano()

package.json

@@ -2,7 +2,7 @@
   "name": "speckle-starter-theme",
   "description": "A custom theme for speckle",
   "demo": "https://starter.ghost.io",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "engines": {
     "ghost": ">=3.0.0",
     "ghost-api": "v3"

page-partnerships.hbs

@@ -3,35 +3,28 @@
 
 {{#post}}
 
-  <article class="relative">
+  <article class="relative max-w-2xl mx-auto px-4 md:px-0">
 
     {{!-- Header --}}
-    {{> extras/patterns}}
 
-    <header class="relative px-4 sm:px-6 lg:px-8 mt-24">
-      <div class="max-w-prose mx-auto object-center">
-
-        <h1>
-          <span class="mt-12 block text-4xl text-center leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl">
-            {{title}}
-          </span>
-        </h1>
-        {{#if custom_excerpt}}
-          <p class="mt-8 text-2xl text-gray-500 dark:text-gray-300 leading-8">
-            {{custom_excerpt}}
-          </p>
-        {{/if}}
-      </div>
+    <header class="mt-10 prose prose-lg dark:prose-dark max-w-none">
+      <h1>
+        {{title}}
+      </h1>
+      {{#if custom_excerpt}}
+        <p>
+          {{custom_excerpt}}
+        </p>
+      {{/if}}
     </header>
 
-    <div class="post-body mt-10 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
+    <div class="prose prose-blue dark:prose-dark max-w-none mt-10">
 
       {{content}}
 
     </div>
 
-    <div class="max-w-prose mx-auto py-10 px-5 lg:px-0">
-
+    <div class="py-10">
       <div class="relative py-10 my-5 rounded-2xl overflow-hidden flex col-span-2 transition hover:shadow-2xl bg-white dark:bg-gray-900">
         <div class="relative block mx-auto self-center text-center">
           <a href="mailto:hello@speckle.systems" class="w-full h-full flex content-center">
@@ -47,7 +40,6 @@
           </a>
         </div>
       </div>
-
     </div>
 
   </article>

page.hbs

@@ -3,39 +3,31 @@
 
 {{#post}}
 
-  <article class="relative">
+  <article class="relative max-w-2xl mx-auto px-4 md:px-0">
 
     {{!-- Header --}}
-    {{> extras/patterns}}
 
-    <header class="relative px-4 sm:px-6 lg:px-8 mt-24">
-
-
-      <div class="max-w-prose mx-auto object-center">
-        {{#if feature_image}}
-          <img class="gh-feature-image mx-auto" srcset="{{img_url feature_image size="s"}} 300w,
+    <header class="mt-10 prose prose-lg dark:prose-dark max-w-none">
+      {{#if feature_image}}
+        <img class="gh-feature-image mx-auto" 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) 1000px, 2000px"
-            loading="lazy" src="{{img_url feature_image size="xl"}}"
-            alt="{{title}}" />
-        {{/if}}
-        <h1>
-          <span class="mt-12 block text-4xl text-center leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl">
-            {{title}}
-          </span>
-        </h1>
-        {{#if custom_excerpt}}
-          <p class="mt-8 text-2xl text-gray-500 dark:text-gray-300 leading-8">
-            {{custom_excerpt}}
-          </p>
-        {{/if}}
-
-      </div>
+          sizes="(max-width: 1000px) 1000px, 2000px"
+          loading="lazy" src="{{img_url feature_image size="xl"}}"
+          alt="{{title}}" />
+      {{/if}}
+      <h1>
+        {{title}}
+      </h1>
+      {{#if custom_excerpt}}
+        <p>
+          {{custom_excerpt}}
+        </p>
+      {{/if}}
     </header>
 
-    <div class="post-body mt-10 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
+    <div class="prose prose-blue dark:prose-dark max-w-none mt-10">
 
       {{content}}