Merge branch 'TryGhost-main' into v5.4.2-merge

assets/css/screen.css

@@ -273,7 +273,7 @@ production stylesheet in assets/built/screen.css
     color: #fff;
 }
 
-.home-template.has-cover .gh-head {
+:is(.home-template, .paged:not(.tag-template):not(.author-template)).has-cover .gh-head {
     position: absolute;
     top: 0;
     right: 0;
@@ -1145,6 +1145,41 @@ make sure this only happens on large viewports / desktop-ish devices.
     }
 }
 
+/* Pagination
+/* ---------------------------------------------------------- */
+
+.pagination {
+    display: none;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    margin-top: 8vmin;
+}
+
+html.no-infinite-scroll .pagination {
+    display: grid;
+}
+
+.pagination a {
+    font-size: 1.7rem;
+    font-weight: 600;
+}
+
+.pagination .page-number {
+    grid-column-start: 2;
+    color: var(--color-secondary-text);
+}
+
+.pagination .older-posts {
+    grid-column-start: 3;
+    text-align: right;
+}
+
+@media (max-width: 767px) {
+    .pagination .page-number {
+        display: none;
+    }
+}
+
 
 /* 7. Single Post
 /* ---------------------------------------------------------- */

assets/js/infinite-scroll.js

@@ -14,6 +14,8 @@
  */
 
 (function (window, document) {
+    if (document.documentElement.classList.contains('no-infinite-scroll')) return;
+
     // next link element
     var nextElement = document.querySelector('link[rel=next]');
     if (!nextElement) {

author.hbs

@@ -2,69 +2,75 @@
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
 <main id="site-main" class="site-main outer">
-<div class="post-feed inner">
+<div class="inner posts">
 
-    {{#author}}
-    <section class="post-card post-card-large">
+    <div class="post-feed">
 
-        {{#if feature_image}}
-        <div class="post-card-image-link">
-            {{!-- This is a responsive image, it loads different sizes depending on device
-            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
-            <img class="post-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, 800px"
-                src="{{img_url feature_image size="m"}}"
-                alt="{{title}}"
-            />
-        </div>
-        {{/if}}
+        {{#author}}
+        <section class="post-card post-card-large">
 
-        <div class="post-card-content">
-        <div class="post-card-content-link">
-
-            {{#if profile_image}}
-                <img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" />
+            {{#if feature_image}}
+            <div class="post-card-image-link">
+                {{!-- This is a responsive image, it loads different sizes depending on device
+                https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+                <img class="post-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, 800px"
+                    src="{{img_url feature_image size="m"}}"
+                    alt="{{title}}"
+                />
+            </div>
             {{/if}}
 
-            <header class="post-card-header">
-                <h2 class="post-card-title">{{name}}</h2>
-            </header>
+            <div class="post-card-content">
+            <div class="post-card-content-link">
 
-            {{#if bio}}
-                <div class="post-card-excerpt">{{bio}}</div>
-            {{/if}}
-
-            <footer class="author-profile-footer">
-                {{#if location}}
-                    <div class="author-profile-location">{{location}}</div>
+                {{#if profile_image}}
+                    <img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" />
                 {{/if}}
-                <div class="author-profile-meta">
-                    {{#if website}}
-                        <a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
-                    {{/if}}
-                    {{#if twitter}}
-                        <a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
-                    {{/if}}
-                    {{#if facebook}}
-                        <a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
-                    {{/if}}
-                </div>
-            </footer>
 
-        </div>
-        </div>
+                <header class="post-card-header">
+                    <h2 class="post-card-title">{{name}}</h2>
+                </header>
 
-    </section>
-    {{/author}}
+                {{#if bio}}
+                    <div class="post-card-excerpt">{{bio}}</div>
+                {{/if}}
 
-    {{#foreach posts}}
-        {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
-        {{> "post-card"}}
-    {{/foreach}}
+                <footer class="author-profile-footer">
+                    {{#if location}}
+                        <div class="author-profile-location">{{location}}</div>
+                    {{/if}}
+                    <div class="author-profile-meta">
+                        {{#if website}}
+                            <a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
+                        {{/if}}
+                        {{#if twitter}}
+                            <a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
+                        {{/if}}
+                        {{#if facebook}}
+                            <a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
+                        {{/if}}
+                    </div>
+                </footer>
+
+            </div>
+            </div>
+
+        </section>
+        {{/author}}
+
+        {{#foreach posts}}
+            {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
+            {{> "post-card"}}
+        {{/foreach}}
+
+    </div>
+
+    {{pagination}}
     
 </div>
 </main>

index.hbs

@@ -48,5 +48,7 @@ into the {body} of the default.hbs template --}}
         {{/foreach}}
     </div>
 
+    {{pagination}}
+
 </div>
 </main>

package.json

@@ -2,7 +2,7 @@
     "name": "casper-aytac",
     "description": "A clean, minimal default theme for the Ghost publishing platform with little modifications by Aytac",
     "demo": "https://aytac.kirmizi.online",
-    "version": "5.4.1",
+    "version": "5.4.2",
     "engines": {
         "ghost": ">=5.0.0"
     },

tag.hbs

@@ -30,5 +30,8 @@
         {{/foreach}}
 
     </div>
+
+    {{pagination}}
+    
 </div>
 </main>