Improved readability in single posts, improved assets loading based o… (#91)

Author: ngeorger

.gitignore

@@ -32,4 +32,5 @@ old/
 !assets/js/lib/**
 .cursorignore
 .env
-docker-compose.yml
+docker-compose.yml
+demo.html

README.md

@@ -1,6 +1,6 @@
 # SREDevOps.org Ghost Theme
 
-Our Ghost v5 Theme made for [SREDevOps.org](https://sredevops.org) based on Tailwind CSS v3, responsive, dark color schema, SVG icons, sidebar + footer navigation, customized tags, and recommendations pages. Highly inspired by [Priority Vision's "Aspect" Theme](https://www.priority.vision/themes/aspect/) and took many functionalities from [@TryGhost "Source" default theme](https://github.com/TryGhost/Source).
+Our Ghost v6 Theme made for [SREDevOps.org](https://www.sredevops.org) based on Tailwind CSS v3, responsive, dark color schema, SVG icons, sidebar + footer navigation, customized tags, and recommendations pages. Highly inspired by [Priority Vision's "Aspect" Theme](https://www.priority.vision/themes/aspect/) and took many functionalities from [@TryGhost "Source" default theme](https://github.com/TryGhost/Source).
 
 ## Table of Contents
 
@@ -17,9 +17,8 @@ Our Ghost v5 Theme made for [SREDevOps.org](https://sredevops.org) based on Tail
 
 - [x] Missing SVG Icons
 - [ ] Granular internationalization using custom post templates
-- [ ] Ghost Cards assets CSS Cleanup
+- [x] Ghost Cards assets CSS Cleanup
 - [ ] Migrate Tailwind classes from inline styles into stylesheets files
-- ~~[ ] Improve Algolia Search~~ (Replaced with Ghost Search)
 - [x] Implement custom options
 
 ## Repo
@@ -28,7 +27,7 @@ Find the source code on [GitHub Repo](https://github.com/sredevopsorg/sredevopso
 
 ## Demo
 
-Check out the live demo at [SREDevOps.org](https://sredevops.org).
+Check out the live demo at [www.SREDevOps.org](https://www.sredevops.org).
 
 ## Installation
 

assets/built/cards.css

@@ -0,0 +1,205 @@
+
+/****************************************/
+/* 16. Cards
+/* ---------------------------------------------------------- */
+
+/* Add extra margin before/after any cards, except for when immediately preceeded by a heading */
+
+.gh-content :not(.kg-card):not(table):not([id])+ :is(.kg-card, table) {
+  margin-top: calc(48px * var(--content-spacing-factor, 1));
+}
+
+.gh-content :is(.kg-card, table)+ :not(.kg-card):not(table):not([id]) {
+  margin-top: calc(48px * var(--content-spacing-factor, 1));
+}
+
+.gh-content :not(.kg-card):not([id])+.kg-card.kg-width-full {
+  margin-top: calc(68px * var(--content-spacing-factor, 1));
+}
+
+.gh-content .kg-card.kg-width-full+ :not(.kg-card):not([id]) {
+  margin-top: calc(68px * var(--content-spacing-factor, 1));
+}
+
+/* Image */
+
+.kg-image {
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 90%;
+}
+
+/* Gallery */
+
+.kg-image[width][height],
+.kg-gallery-image {
+  cursor: pointer;
+}
+
+.kg-image-card a:hover,
+.kg-gallery-image a:hover {
+  opacity: 1 !important;
+}
+
+/* Toggle */
+
+.kg-card.kg-toggle-card .kg-toggle-heading-text {
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+.has-serif-title .kg-toggle-card .kg-toggle-heading-text {
+    @apply font-serif;
+}
+
+.has-mono-title .kg-toggle-card .kg-toggle-heading-text {
+    @apply font-mono;
+}
+
+/* Callout */
+
+.kg-callout-card.kg-card {
+  border-radius: 0.25em;
+}
+
+.kg-callout-card-accent a {
+  text-decoration: underline;
+}
+
+/* Blockquote */
+
+blockquote:not([class]) {
+  padding-left: 2rem;
+  border-left: 4px solid var(--ghost-accent-color);
+    @apply text-light;
+}
+
+blockquote.kg-blockquote-alt {
+  @apply text-light;
+  font-style: normal;
+  font-weight: 400;
+}
+
+/* Button */
+
+.kg-card.kg-button-card .kg-btn {
+  height: unset;
+  padding: .6em 1.2em;
+  text-align: center;
+  font-size: 1em;
+  line-height: 1.2em;
+}
+
+/* Header */
+
+.has-serif-title .kg-card.kg-header-card h2.kg-header-card-header {
+    @apply font-serif;
+}
+
+.has-mono-title .kg-card.kg-header-card h2.kg-header-card-header {
+    @apply font-mono;
+}
+
+.has-serif-body .kg-header-card h3.kg-header-card-subheader {
+    @apply font-serif;
+}
+
+/* Bookmark */
+
+.kg-bookmark-card .kg-bookmark-container {
+  border-radius: 0.25em !important;
+  @apply text-light
+}
+
+.kg-bookmark-card .kg-bookmark-container:hover {
+  opacity: 1;
+}
+
+.kg-bookmark-card a.kg-bookmark-container,
+.kg-bookmark-card a.kg-bookmark-container:hover {
+    @apply bg-dark text-lighter;
+    background: #212121!important;
+    color: #fefefe!important;
+
+
+}
+
+.kg-bookmark-card .kg-bookmark-content {
+  padding: 1.15em;
+}
+
+.kg-bookmark-card .kg-bookmark-title {
+  font-size: 0.9em;
+}
+
+.kg-bookmark-card .kg-bookmark-description {
+  max-height: none;
+  margin-top: 0.3em;
+  font-size: 0.8em;
+}
+
+.kg-bookmark-card .kg-bookmark-metadata {
+  font-size: 0.8em;
+}
+
+.kg-bookmark-card .kg-bookmark-thumbnail img {
+  border-radius: 0 0.2em 0.2em 0;
+  margin-top: 0;
+
+}
+
+/* Product */
+
+.kg-product-card.kg-card .kg-product-card-image {
+  margin-bottom: 12px;
+}
+
+.kg-product-card.kg-card a.kg-product-card-button {
+  height: 2.8em;
+  margin-top: 12px;
+}
+
+.has-serif-title .kg-product-card.kg-card .kg-product-card-title {
+    @apply font-serif;
+}
+
+.has-mono-title .kg-product-card.kg-card .kg-product-card-title {
+    @apply font-mono;
+}
+
+.has-serif-body .kg-product-card-description :is(p, ul, ol) {
+  font-family: var(--font-serif-alt);
+}
+
+/* File */
+
+.kg-file-card.kg-card .kg-file-card-container {
+  padding: 0.6em;
+}
+
+.kg-file-card.kg-card .kg-file-card-contents {
+  margin: 4px 8px 6px;
+}
+
+.kg-file-card.kg-card .kg-file-card-metadata {
+  font-size: 0.9em;
+}
+
+.kg-file-card.kg-card .kg-file-card-filesize::before {
+  margin-right: 6px;
+  margin-left: 6px;
+}
+
+/* Caption */
+
+figcaption {
+  @apply mt-3 text-sm text-light text-center
+}
+
+.kg-card.kg-width-full figcaption {
+  padding: 0 16px;
+}
+
+figcaption a {
+  text-decoration: underline;
+}