Merge pull request #3 from lukencode/css-fixes

5.0.2

assets/css/content.css

@@ -5,7 +5,6 @@
     display: grid;
     grid-template-columns: [full-start] minmax(calc(calc(100% - 1200px) / 2), 1fr) [wide-start] auto [main-start] 820px [main-end] auto [wide-end] minmax(calc(calc(100% - 1200px) / 2), 1fr) [full-end];
     max-width: 100% !important;
-    overflow-x: auto;
 }
 
 .gh-canvas.no-grid {
@@ -108,23 +107,13 @@ Images
 
 .gh-content blockquote {
     position: relative;
-    font-style: italic;
-}
-
-.gh-content blockquote::before {
-    content: "";
-    position: absolute;
-    left: -1.5em;
-    top: 0;
-    bottom: 0;
-    width: 0.3rem;
-    background: var(--bs-masthead);
-}
-
-@media (max-width: 650px) {
-    .gh-content blockquote::before {
-        left: -4vmin;
-    }
+    background: var(--alternate-background-colour);
+    padding: 1.5rem;
+    border-left: 5px solid var(--accent-color);
+    margin: 0;
+    margin-bottom: 2rem;
+    font-size: 1.1rem;
+    font-style: normal;
 }
 
 
@@ -156,21 +145,23 @@ Images
 .gh-canvas :not(pre) code {
     vertical-align: middle;
     padding: 0.15em 0.4em 0.15em;
-    border: var(--alternate-background-colour)f 1px solid;
+    /* border: var(--alternate-background-colour) 1px solid; */
     font-weight: 400 !important;
     font-size: 0.9em;
     line-height: 1em;
-    background: var(--alternate-background-colour);
     border-radius: 0.25em;
     max-width: 100%;
     margin: 0;
     overflow: auto;
 }
 
+.gh-canvas .kg-code-card code {
+    border: 0;
+}
+
 .gh-canvas>pre {
     overflow: auto;
     padding: 16px 20px;
-    background-color: var(--alternate-background-colour);
     color: var(--text-colour);
     border-radius: 5px;
     width: 100%;
@@ -181,6 +172,9 @@ Images
     .gh-canvas>pre {
         grid-column: wide-start/wide-end;
     }
+    .gh-canvas .kg-code-card {
+        grid-column: wide-start/wide-end;
+    }
 }
 
 .kg-embed-card {

assets/css/theme.scss

@@ -315,9 +315,10 @@ a.card.no-image:hover {
 
 .toc {
     grid-column: 5;
-    top: 80px;
+    top: 7rem;
+    align-self: start;
     height: 0;
-    overflow: visible !important;
+    overflow-y: visible !important;
     .is-active-link {
         color: var(--text-color)!important;
         &::before {

custom-table-of-contents.hbs

@@ -105,6 +105,8 @@
         tocSelector: '.toc',
         contentSelector: '.gh-content',
         hasInnerContainers: true,
-        scrollSmoothDuration: 210
+        scrollSmoothDuration: 210,
+        headingsOffset: 80,
+        scrollSmoothOffset: -80
     });
 </script>

package.json

@@ -2,7 +2,7 @@
     "name": "ghostsolo",
     "description": "A theme for solo ghost blogers",
     "demo": "https://lukelowrey.com",
-    "version": "0.5.0",
+    "version": "0.5.2",
     "engines": {
         "ghost": ">=3.0.0",
         "ghost-api": "v3"

partials/example_toc_markup.hbs

@@ -1 +1,2 @@
-<div class="toc ps-2 sticky-lg-top d-none d-lg-block"><ol class="toc-list "><li class="toc-list-item is-active-li"><a href="#why-use-fluentemail" class="toc-link node-name--H2  is-active-link">Why use FluentEmail?</a></li><li class="toc-list-item"><a href="#basic-usage" class="toc-link node-name--H2 ">Basic Usage</a></li><li class="toc-list-item"><a href="#dependency-injection" class="toc-link node-name--H2 ">Dependency Injection</a></li><li class="toc-list-item"><a href="#template-rendering" class="toc-link node-name--H2 ">Template Rendering</a><ol class="toc-list  is-collapsible is-collapsed"><li class="toc-list-item"><a href="#razor-email-templates" class="toc-link node-name--H3 ">Razor Email Templates</a></li><li class="toc-list-item"><a href="#liquid-templates" class="toc-link node-name--H3 ">Liquid Templates</a></li></ol></li><li class="toc-list-item"><a href="#email-senders" class="toc-link node-name--H2 ">Email Senders</a><ol class="toc-list  is-collapsible is-collapsed"><li class="toc-list-item"><a href="#smtp-sender" class="toc-link node-name--H3 ">SMTP Sender</a></li><li class="toc-list-item"><a href="#mailgun-sender" class="toc-link node-name--H3 ">Mailgun Sender</a></li><li class="toc-list-item"><a href="#sendgrid-sender" class="toc-link node-name--H3 ">SendGrid Sender</a></li><li class="toc-list-item"><a href="#mimekit-sender" class="toc-link node-name--H3 ">MimeKit Sender</a></li><li class="toc-list-item"><a href="#other-senders" class="toc-link node-name--H3 ">Other Senders</a></li></ol></li><li class="toc-list-item"><a href="#extending-fluentemail" class="toc-link node-name--H2 ">Extending FluentEmail</a></li></ol></div>
+<div class="toc ps-2 sticky-lg-top sticky-top d-none d-lg-block"><ol class="toc-list "><li class="toc-list-item is-active-li"><a href="#why-use-fluentemail" class="toc-link node-name--H2  is-active-link">Why use FluentEmail?</a></li><li class="toc-list-item"><a href="#basic-usage" class="toc-link node-name--H2 ">Basic Usage</a></li><li class="toc-list-item"><a href="#dependency-injection" class="toc-link node-name--H2 ">Dependency Injection</a></li><li class="toc-list-item"><a href="#template-rendering" class="toc-link node-name--H2 ">Template Rendering</a><ol class="toc-list  is-collapsible is-collapsed"><li class="toc-list-item"><a href="#razor-email-templates" class="toc-link node-name--H3 ">Razor Email Templates</a></li><li class="toc-list-item"><a href="#liquid-templates" class="toc-link node-name--H3 ">Liquid Templates</a></li></ol></li><li class="toc-list-item"><a href="#email-senders" class="toc-link node-name--H2 ">Email Senders</a><ol class="toc-list  is-collapsible is-collapsed"><li class="toc-list-item"><a href="#smtp-sender" class="toc-link node-name--H3 ">SMTP Sender</a></li><li class="toc-list-item"><a href="#mailgun-sender" class="toc-link node-name--H3 ">Mailgun Sender</a></li><li class="toc-list-item"><a href="#sendgrid-sender" class="toc-link node-name--H3 ">SendGrid Sender</a></li><li class="toc-list-item"><a href="#mimekit-sender" class="toc-link node-name--H3 ">MimeKit Sender</a></li><li class="toc-list-item"><a href="#other-senders" class="toc-link node-name--H3 ">Other Senders</a></li></ol></li><li class="toc-list-item"><a href="#extending-fluentemail" class="toc-link node-name--H2 ">Extending FluentEmail</a></li></ol></div>
+<div class="gh-canvas"><blockquote></blockquote></div>