<![CDATA[{{ Ghost-O-Matic }}]]>https://ghost-o-matic.com/https://ghost-o-matic.com/favicon.png{{ Ghost-O-Matic }}https://ghost-o-matic.com/Ghost 5.80Thu, 16 Apr 2026 16:38:22 GMT60<![CDATA[Littlefoot Footnotes]]>https://ghost-o-matic.com/littlefoot-footnotes/65eb378455e87ebe7b833a18Mon, 19 Jun 2023 02:54:46 GMT
littlefoot.js
Footnotes without the footprint.
littlefoot

First Footnote 1

Second Footnote 2

  1. This is what is in the first inline footnote bubble...

  2. This is what is in the second inline footnote bubble...

Below you can see the contents of the HTML Card used in the Post Editor... (you can copy and save this for re-use in the editor as a Code Snippet)

First Footnote <a href="#fn:1" id="fnref:1">1</a>

Second Footnote <a href="#fn:2" id="fnref:2">2</a>

<div class="footnotes"><hr><ol>
    
<li class="footnote" id="fn:1"><p>
              
This is what is in the first inline footnote bubble...
              
</p></li>
    
<li class="footnote" id="fn:2"><p>
    
This is what is in the second inline footnote bubble...
    
</p></li></ol></div>

To make this work, put this in your Site Header Code Injection...

<link
  rel="stylesheet"
  href="https://unpkg.com/littlefoot/dist/littlefoot.css"
/>

...and put this in your Site Footer Code Injection...

<script
  src="https://unpkg.com/littlefoot/dist/littlefoot.js"
  type="application/javascript"
></script>
<script type="application/javascript">
  littlefoot.littlefoot() // Pass any littlefoot settings here.
</script>

And for reference, here below is a screenshot of the Site Header and Footer Code injections in your admin settings to enable Littlefoot Footnotes in your posts and pages...

There is also this...

Footnotes with ease
Ghost doesn’t have native footnotes. There are some options for using Markdown or HTML cards, but none of them meet my standards. Here’s my solution, which uses Littlefoot. How to use in the editor: 1. To mark the footnote notation, type something like [[X]] pretty much anywhere in the post.
Cathy SariskyCathy Sarisky
]]><![CDATA[HTML Dialog Popups]]>https://ghost-o-matic.com/html-dialog-popups/65eb378455e87ebe7b833a17Sun, 11 Jun 2023 23:25:24 GMTFrom

Modals Will Never Be The Same - HTML dialog Element
The new HTML dialog element makes working with accessible modals so much easier. In this article I explain everything you need to know about the new dialog element to use it in your next project.
HTML dialog Element
]]><![CDATA[Hundreds of Free CSS Copy-Paste Clips]]>https://ghost-o-matic.com/93-free-css-box-shadows/65eb378455e87ebe7b833a16Tue, 04 Apr 2023 21:53:52 GMT
Beautiful CSS box-shadow examples - CSS Scan
🎨 Curated collection of 93 free beautiful CSS box-shadow, ready-to-use for your next projects. Click to copy.
CSS Scan
Beautiful CSS buttons examples - CSS Scan
🎨 Curated collection of 92 free beautiful CSS buttons, ready-to-use for your next projects. Click to copy.
CSS Scan
Beautiful CSS checkboxes examples - CSS Scan
🎨 Curated collection of 65 free beautiful CSS checkboxes, ready-to-use for your next projects. Click to copy.
CSS Scan
]]><![CDATA[CSS position:sticky Not Working?]]>https://ghost-o-matic.com/css-position-sticky-not-working/65eb378455e87ebe7b833a15Tue, 04 Apr 2023 03:04:33 GMT
CSS position:sticky Not Working? Try This Fix
FRONT END ENGINEER | PROBLEM SOLVER
Michael Movsesov
audio-thumbnail
Hallelujah
0:00
/0:09
]]><![CDATA[Prefetch Internal Link on Hover]]>https://ghost-o-matic.com/prefetch-internal-link-on-hover/65eb378455e87ebe7b833a13Tue, 28 Mar 2023 00:30:29 GMT]]><![CDATA[Responsive Fonts]]>https://ghost-o-matic.com/responsive-fonts/65eb378455e87ebe7b833a12Tue, 28 Mar 2023 00:25:18 GMT
Responsive fonts - auto-scaling the root font-size
Using pure CSS the root font size scales up and down proportionately, between defined values, dependent upon the viewport width.
auto-scaling the root font-sizeMike Foskett
]]><![CDATA[Sortable Tables in Details/Summary]]>https://ghost-o-matic.com/sortable-tables-in-details-summary/65eb378455e87ebe7b833a0eWed, 15 Mar 2023 17:40:16 GMT

From https://codepen.io/2kool2/pen/NWLGYbv

]]><![CDATA[Accordions - One Open at a Time]]>https://ghost-o-matic.com/accordions-one-open-at-a-time/65eb378455e87ebe7b833a0dWed, 15 Mar 2023 10:50:46 GMT
One
👍
Two
👍👍
Three
👍👍👍
Uno
👌
Dos
👌👌
Tres
👌👌👌
Un
🤘
Deux
🤘🤘
Trois
🤘🤘🤘

The CSS...

<style>
.flex {
  display: flex;
  gap: 1rem;
}
.flex > div {
  margin: 0;
  width: 33%;
  border: 1px solid #333;
  background-color: rgb(0,0,0,.0625);
  padding: 0.25rem .5rem;
}
</style>

The HTML...

  <div class=flex>
  
    <div class=accordion>

      <details>
        <summary>One</summary>
        <div aria-label=Yes>👍</div>
      </details>

      <details>
        <summary>Two</summary>
        <div aria-label="Yes, yes">👍👍</div>
      </details>

      <details>
        <summary>Three</summary>
        <div aria-label="Yes, yes, yes">👍👍👍</div>
      </details>

    </div>

    <div class=accordion lang=es>

      <details>
        <summary>Uno</summary>
        <div aria-label=Bueno>👌</div>
      </details>

      <details>
        <summary>Dos</summary>
        <div aria-label="Bueno, bueno">👌👌</div>
      </details>

      <details>
        <summary>Tres</summary>
        <div aria-label="Bueno, bueno, bueno">👌👌👌</div>
      </details>

    </div>

    <div class=accordion lang=fr>

      <details>
        <summary>Un</summary>
        <div aria-label="Tu gères">🤘</div>
      </details>

      <details>
        <summary>Deux</summary>
        <div aria-label="Tu gères, tu gères">🤘🤘</div>
      </details>

      <details>
        <summary>Trois</summary>
        <div aria-label="Tu gères, tu gères, tu gères">🤘🤘🤘</div>
      </details>

    </div>
    
  </div>

The Javascript...

<script>
    // JS is required, falls back to default details behaviour
const accordions = (_ => {

  // Class used but could be data attribute or custom element
  const accordionQuery = '.accordion';

  const accordionClicked = event => {
    const summary = event.target;
    if (summary.tagName.toLowerCase() !== 'summary') return;

    const currentDetails = summary.parentElement;
    const accordion = currentDetails.closest(accordionQuery);

    const allOpenDetails = accordion.querySelectorAll('details[open]');
    for (const details of allOpenDetails) {
      
      // But not the clicked summary
      if (details === currentDetails) continue;
      
      details.removeAttribute('open');
    }
  };

  // Consider each group of details (individual accordian)
  const accordions = document.querySelectorAll(accordionQuery);
  for (const accordion of accordions) {
    accordion.addEventListener('click', accordionClicked);
  }

})();
</script>

From https://codepen.io/2kool2/pen/poOgxKb

]]><![CDATA[Hamburger Menu Using Details-Summary]]>https://ghost-o-matic.com/hamburger-menu-using-details-summary/65eb378455e87ebe7b833a0cWed, 15 Mar 2023 09:04:30 GMT
Menu

The CSS...

<style>
    
*, *:after, *:before {
  box-sizing: border-box;
  margin: 0;
}
* + * {
  margin-top: 1rem;
}

/* The mobile nav styles */

/* Enforce list semantics */
nav [role="list"] {
  list-style: none;
  padding-left: 1rem;
  margin: 0;
}

summary {
  border: 1px solid #ccc;
  border-radius: 4px;
  display: inline-block;
  height: 3rem !important;
  line-height: 1;
  list-style: none;
  padding: .5rem !important;
  position: relative;
  text-align: center;
  transition: .4s border-radius ease-out;
  width: 3rem;
  will-change: border-radius;
}
summary span {
  position: relative;
  top: .75rem;
  transition-delay: 0.2s;
  transition-duration: 0s;
}
summary span:before,
summary span:after {
  position: absolute;
  content: '';
}
summary span,
summary span:before,
summary span:after {
  background-color: #000;
  display: block;
  height: .375rem;
  width: 100%;
  will-change: background-color, margin, transform;
}
summary span:before {
  /* margin-top: -.75rem; */
  transform: translateY(-.75rem) rotate(0); 
}
summary span:after {
  /* margin-top: .75rem; */
  transform: translateY(.75rem) rotate(0);
}
summary x {
  bottom: -2.125rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 2em;
  width: 4rem;
  left: 50%;
  letter-spacing: .05em;
  position: absolute;
  text-transform: uppercase;
  transform: translate3d(-50%,0%,0);
}

details[open] > summary {
  border-radius: 100%;
}
details[open] > summary > span {
  background-color: transparent;
  transition-delay: 0.2s;
}
summary span:before {
  transition-delay: 0.2s, 0s;
  transition-duration: 0.2s;
  transition-property: margin, transform;
/*   transition-property: transform; */
}
details[open] > summary span:before {
  margin-top: 0;
  transform: rotate(45deg);
/*   transform: translateY(0) rotate(45deg); */
  transition-delay: 0s, 0.2s;
}
summary span:after {
  transition-delay: 0.2s, 0s;
  transition-duration: 0.2s;
  transition-property: margin, transform;
/*   transition-property: transform; */
}
details[open] > summary span:after {
  margin-top: 0;
  transform: rotate(-45deg);
/*   transform: translateY(0) rotate(-45deg); */
  transition-delay: 0s, 0.2s;
}

nav details {
  display: inline-block;
}
    
nav summary {
    width: auto !important;
    border: none;
    height: auto !important;
    }
    
nav summary:after {
    position: absolute;
    content: '▶';
    padding-left: 5px;
}
    
nav details[open] > summary:after {
    position: absolute;
    content: '▼';
    padding-left: 5px;
}
    
details[open] > summary x {
display: none;
}
        

@media (min-width: 40em) { /* 640px */

  /* Note: dropdowns may use position absolute,
      but was considered beyond scope in this simple demo. */

  nav > details > [role="list"] {
    /* display: flex; */
    gap: 1rem;
    margin-top: 0 !important;
    padding: 0;
  }
  nav > details > ul > li {
    margin-top: 0 !important;
  }
}
</style>

The HTML...

<details>
  <summary>
    <span></span>
    <x>Menu</x>
  </summary>
  <nav>
      <ul role=list>
        <li><a href="#">About us</a></li>
        <li>
          <details>
            <summary>Products</summary>
            <ul role=list>
              <li><a href="#">Product 1</a></li>
              <li><a href="#">Product 2</a></li>
              <li>
                <details>
                  <summary>Sub</summary>
                  <ul role=list>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                  </ul>
                </details>
              </li>
            </ul>
          </details>
        </li>
        <li><a href="#">Insights</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
  </nav>
</details>


<script>
    console.clear();

// The mobile disclosure button only:
// Progressive enhancement, works without JS too.

const responsiveMenuButton = (document => {
  'use strict';

  const minViewportWidth = '40em'; // @ 640px

  const details = document.querySelector('nav > details');
  if (!details) return;

  const summary = details.querySelector('summary');
  if (!summary) return;

  const mediaQuery = window.matchMedia(`(min-width: ${minViewportWidth})`);
  let isSmallScreen = !mediaQuery.matches;

  const showMenu = _ => {

    // Edge case: Orientation may change viewport width without moving focus
    const isSummaryFocused = !!details.querySelector('summary:is(:focus)');

    details.open = true;
    summary.hidden = true;

    if (isSummaryFocused) {
      const firstLink = details.querySelector('a[href]');
      firstLink && firstLink.focus();
    }
  };

  const hideMenu = _ => {

    // Edge case: Orientation may change viewport width without moving focus
    const isMenuLinkFocused = !!details.querySelector('ul:is(:focus-within)');

    details.removeAttribute('open');
    summary.removeAttribute('hidden');

    isMenuLinkFocused && summary.focus();
  };

  const controlResponsiveMenu = event => {
    if (isSmallScreen && event.matches) {
      showMenu();
      isSmallScreen = true;
    }

    isSmallScreen && !event.matches && hideMenu();

    !isSmallScreen && event.matches && showMenu();

    if (!isSmallScreen && !event.matches) {
      hideMenu();
      isSmallScreen = false;
    }
  };

  mediaQuery.addListener(controlResponsiveMenu);
  controlResponsiveMenu(mediaQuery);
})(document);
</script>

The Javascript...

<script>
    console.clear();

// The mobile disclosure button only:
// Progressive enhancement, works without JS too.

const responsiveMenuButton = (document => {
  'use strict';

  const minViewportWidth = '40em'; // @ 640px

  const details = document.querySelector('nav > details');
  if (!details) return;

  const summary = details.querySelector('summary');
  if (!summary) return;

  const mediaQuery = window.matchMedia(`(min-width: ${minViewportWidth})`);
  let isSmallScreen = !mediaQuery.matches;

  const showMenu = _ => {

    // Edge case: Orientation may change viewport width without moving focus
    const isSummaryFocused = !!details.querySelector('summary:is(:focus)');

    details.open = true;
    summary.hidden = true;

    if (isSummaryFocused) {
      const firstLink = details.querySelector('a[href]');
      firstLink && firstLink.focus();
    }
  };

  const hideMenu = _ => {

    // Edge case: Orientation may change viewport width without moving focus
    const isMenuLinkFocused = !!details.querySelector('ul:is(:focus-within)');

    details.removeAttribute('open');
    summary.removeAttribute('hidden');

    isMenuLinkFocused && summary.focus();
  };

  const controlResponsiveMenu = event => {
    if (isSmallScreen && event.matches) {
      showMenu();
      isSmallScreen = true;
    }

    isSmallScreen && !event.matches && hideMenu();

    !isSmallScreen && event.matches && showMenu();

    if (!isSmallScreen && !event.matches) {
      hideMenu();
      isSmallScreen = false;
    }
  };

  mediaQuery.addListener(controlResponsiveMenu);
  controlResponsiveMenu(mediaQuery);
})(document);
</script>

From https://codepen.io/2kool2/pen/bGxvQaO

]]><![CDATA[Responsive Details-Summary Menu]]>https://ghost-o-matic.com/responsive-details-summary-menu/65eb378455e87ebe7b833a0bWed, 15 Mar 2023 03:35:14 GMTExpand and contract this window around the 640px width mark...

The CSS...

<style>

/* The mobile nav styles */

/* Enforce list semantics */
nav [role="list"] {
  list-style: none;
  padding-left: 1rem;
}

nav details {
  display: inline-block;
}

@media (min-width: 40em) { /* 640px */

  /* Note: dropdowns may use position absolute,
      but was considered beyond scope in this simple demo. */

  nav > details > [role="list"] {
    display: flex;
    gap: 1rem;
    margin-top: 0 !important;
    padding: 0;
  }
  nav > details > ul > li {
    margin-top: 0 !important;
  }
}
</style>

The HTML...

<nav>
    <details>
      <summary>Mobile menu</summary>
      <ul role=list>
        <li><a href="#">About us</a></li>
        <li>
          <details>
            <summary>Products</summary>
            <ul role=list>
              <li><a href="#">Product 1</a></li>
              <li><a href="#">Product 2</a></li>
              <li>
                <details>
                  <summary>Sub</summary>
                  <ul role=list>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                  </ul>
                </details>
              </li>
            </ul>
          </details>
        </li>
        <li><a href="#">Insights</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </details>
  </nav>

The Javascript...

<script>
    console.clear();

// The mobile disclosure button only:
// Progressive enhancement, works without JS too.

const responsiveMenuButton = (document => {
  'use strict';

  const minViewportWidth = '40em'; // @ 640px

  const details = document.querySelector('nav > details');
  if (!details) return;

  const summary = details.querySelector('summary');
  if (!summary) return;

  const mediaQuery = window.matchMedia(`(min-width: ${minViewportWidth})`);
  let isSmallScreen = !mediaQuery.matches;

  const showMenu = _ => {

    // Edge case: Orientation may change viewport width without moving focus
    const isSummaryFocused = !!details.querySelector('summary:is(:focus)');

    details.open = true;
    summary.hidden = true;

    if (isSummaryFocused) {
      const firstLink = details.querySelector('a[href]');
      firstLink && firstLink.focus();
    }
  };

  const hideMenu = _ => {

    // Edge case: Orientation may change viewport width without moving focus
    const isMenuLinkFocused = !!details.querySelector('ul:is(:focus-within)');

    details.removeAttribute('open');
    summary.removeAttribute('hidden');

    isMenuLinkFocused && summary.focus();
  };

  const controlResponsiveMenu = event => {
    if (isSmallScreen && event.matches) {
      showMenu();
      isSmallScreen = true;
    }

    isSmallScreen && !event.matches && hideMenu();

    !isSmallScreen && event.matches && showMenu();

    if (!isSmallScreen && !event.matches) {
      hideMenu();
      isSmallScreen = false;
    }
  };

  mediaQuery.addListener(controlResponsiveMenu);
  controlResponsiveMenu(mediaQuery);
})(document);
</script>

From https://codepen.io/2kool2/pen/JjaLLWb

]]><![CDATA[Pretty Simple Accordions]]>https://ghost-o-matic.com/pretty-simple-accordions/65eb378455e87ebe7b833a0aWed, 15 Mar 2023 02:34:42 GMT
When will payments begin?

When we receive your agreement, we send you a letter or email confirming the original terms of your agreement. This includes your payment amount, balance due, and date your authorized payments begin. Payments will continue until the total balance is paid in full.

I forgot my username/password. How do I login?

To retrieve your username or password, visit this link. If you've forgotten your username, it will be sent to the email address associated with your account. If you’ve forgotten your password, a link will be emailed to the email address associated with your account that allows you to reset your password.

How do I upgrade, downgrade, or cancel a subscription?

We offer yearly and monthly plans, which you can read more about on our Pricing page. All our plans are recurring, and if you want to unsubscribe you should cancel your plan before your prepaid period ends (term end). You can cancel your subscription under the Account section on the Plan & billing page.

The CSS...

<style>
  details.accordion {
    --color-accent: #222;
    margin-bottom: 1em;
    border-radius: 5px;
    padding: 1.5em;
    position: relative;
    padding-left: 3.5em;
    border-left: 5px solid var(--color-accent);
    overflow: hidden;
    width: auto;
  }

  details.accordion::before {
    background-color: var(--color-accent);
    opacity: 0.1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  details.accordion summary {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  details.accordion summary::marker {
    display: none;
  }

  details.accordion summary::before {
    position: absolute;
    content: '+';
    left: 1.5rem;
    color: #000;
    font-weight: bold;
    cursor: pointer;
  }

  details.accordion[open] summary::before {
    transform: rotate(45deg);
  }

  details.accordion[open] summary {
    font-weight: 700;
  }
</style>

The HTML...

<details class="accordion">
  <summary>When will payments begin?</summary>
  <p>When we receive your agreement, we send you a letter or email confirming the original terms of your agreement. This includes your payment amount, balance due, and date your authorized payments begin. Payments will continue until the total balance is paid in full.</p>
</details>

<details class="accordion" style="--color-accent: royalblue;">
  <summary>I forgot my username/password. How do I login?</summary>
  <p>To retrieve your username or password, visit this link. If you've forgotten your username, it will be sent to the email address associated with your account. If you’ve forgotten your password, a link will be emailed to the email address associated with your account that allows you to reset your password.</p>
</details>

<details class="accordion" style="--color-accent: aquamarine;">
  <summary>How do I upgrade, downgrade, or cancel a subscription?</summary>
  <p>We offer yearly and monthly plans, which you can read more about on our Pricing page. All our plans are recurring, and if you want to unsubscribe you should cancel your plan before your prepaid period ends (term end). You can cancel your subscription under the Account section on the Plan & billing page.</p>
</details>
]]><![CDATA[Expandable Ticker]]>https://ghost-o-matic.com/expandable-ticker/65eb378455e87ebe7b833a09Thu, 05 Jan 2023 21:17:19 GMT
This is ticker content 1
This is ticker content 2

Header Code Injection...

<style>
.expandticker{
border:1px solid black;
padding:7px;
background:lightyellow;
width: 200px;
height:130px;
overflow-y:auto; /*set DIV to scroll if content exceeds ticker height*/
position: relative;
}

.expandcontent{
display:none;
}

ul.dropdownlist{
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
z-index: 100;
list-style-type: none;
background: white;
border: 1px solid #ca431a;
padding: 3px;
}

ul.dropdownlist li a{
display: block;
background: #ffdb8d;
color: black;
text-decoration: none;
padding: 3px 5px 3px 3px;
}

ul.dropdownlist li a:hover{
background: #ffbf6d;
color: black;
}

ul.dropdownlist li.selected a{
background: #ca431a;
color: white;
}
</style>
<script>

/* Expandable Drop Down Ticker
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
* Last Edited: Jan 25th, 2010
*/

var expandticker={
	buttonhtml: '<img src="https://ghost-o-matic.com/content/images/2023/01/show-all.webp" style="width:70px; height:27px; cursor:pointer" />', //HTML of "expand" button
	buttonoffset: [5, -10], //offset of button from lower left edge of ticker
	//No need to edit beyond here

	dsetting: {snippetlength:30, manual:false, timers: {rotatepause:3000, fxduration:300}},
	effectfuncts: ['fadeIn', 'slideDown'],

fetchajaxcontent:function($, s){
window.status+='x'
	clearTimeout(s.playtimer) //clear timers and remove $button, $menu if fetchajaxcontent() is being called more than once
	clearTimeout(s.pausetimer)
	clearTimeout(s.refreshtimer)
	if (s.$button){
		s.$button.remove()
		s.$menu.remove()
	}
	s.$ticker.html("(Re)Fetching Ticker Contents...")
	$.ajax({
		url: s.remotecontent[0],
		dataType: 'html',
		error:function(ajaxrequest){
			s.$ticker.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
		},
		success:function(content){
			s.$ticker.html(content)
			expandticker.setup($, s)
			if (s.remotecontent[1]>5000) //5 secs minimum time allowed between updates
				s.refreshtimer=setTimeout(function(){expandticker.fetchajaxcontent($, s)}, s.remotecontent[1])
			else if (s.remotecontent[1]>0) //if value is NOT 0 (0=never refetch)
				alert("Please Enter a value larger than 5 (sec) for the time between Ajax updates")
		}
	})
},

getmsgtitles:function(s){
	var titlearray=[]
	for (var i=0; i<s.msglength; i++){
		var title=s.$contents.eq(i).attr('title') || s.$contents.eq(i).text().substring(0, s.snippetlength)+' ...' //extract snippet of message
		titlearray.push(title)
	}
	return titlearray
},

adddropmenu:function($, s){
	var titles=this.getmsgtitles(s)
	var $lis=$([])
	var $menu=$('<ul class="dropdownlist"></ul>')
	for (var i=0; i<s.msglength; i++){ //construct a new LI element for each ticker message title
		$lis=$lis.add($('<li/>').html((i+1)+". "+titles[i]).wrapInner('<a href="#message'+(i+1)+'" data-pos="'+i+'"></a>'))
	}
	$menu.append($lis).hide().unbind('click').click(function(e){ //go to particular message when menu title is clicked on
		if (e.target.tagName=="A"){
			clearTimeout(s.playtimer)
			s.curmsg=parseInt(e.target.getAttribute('data-pos'))
			expandticker.selectmsg($, s, s.curmsg)
			if (!s.manual)
				s.playtimer=setTimeout(function(){expandticker.rotatemsg($, s)}, s.timers.rotatepause)
			e.preventDefault()
		}
	})
	$menu.appendTo(document.body)
	$menu.data('state', 'closed') //indicate menu is currently closed
	s.$menu=$menu //remember $menu
	s.$menulis=$lis //remember $menu LIs
},

positionbutton:function($, s){
	var toffset=s.$ticker.offset()
	var buttonpos=[toffset.left+this.buttonoffset[0], toffset.top+s.$ticker.outerHeight()+this.buttonoffset[1]]
	s.$button.css({left:buttonpos[0], top:buttonpos[1]})	
},

addexpandbutton:function($, s){
	s.$button=$(this.buttonhtml).css({position:'absolute', zIndex:1000}).appendTo(document.body) //create expand button, add it to page, and remember it
	this.positionbutton($, s)
	this.adddropmenu($, s)
	s.$button.unbind('click').bind('click', function(e){ //show menu when expand button is clicked
		s.$menu.css({left:s.$button.css('left'), top:parseInt(s.$button.css('top'))-expandticker.buttonoffset[1]}).show()
		s.$menulis.removeClass('selected').eq(s.curmsg).addClass('selected') //highlight current message within menu
		s.$menu.data('state', 'open') //indicate menu is open
		e.stopPropagation()
	})
},


selectmsg:function($, s, selected){
	s.$contents.stop(true,true).hide().eq(selected)[s.effectfunct](s.timers.fxduration, function(){  //animate message into view
		if (this.style && this.style.removeAttribute)
			this.style.removeAttribute('filter') //fix IE clearType problem when animation is fade-in
	})
	s.curmsg=selected
	if (s.$menu.data('state')=="open")
		s.$menulis.removeClass('selected').eq(selected).addClass('selected') //highlight current message within menu
},

rotatemsg:function($, s){
	if (s.$ticker.data('state')=="over"){ //pause ticker onMouseover
		clearTimeout(s.pausetimer)
		s.pausetimer=setTimeout(function(){expandticker.rotatemsg($, s)}, 100)
		return
	}
	s.nextmsg=(s.curmsg<s.msglength-1)? s.curmsg+1 : 0 //go to next message
	this.selectmsg($, s, s.nextmsg)
	s.playtimer=setTimeout(function(){expandticker.rotatemsg($, s)}, s.timers.rotatepause)
},

setup:function($, s){
		s.$contents=s.$ticker.find('.expandcontent').hide()
		s.msglength=s.$contents.length
		s.curmsg=0
		expandticker.addexpandbutton($, s)
		expandticker.selectmsg($, s, s.curmsg)
		if (!s.manual){
			s.$ticker.unbind('mouseenter').bind('mouseenter', function(){$(this).data('state', 'over')})
			s.$ticker.unbind('mouseleave').bind('mouseleave', function(){$(this).data('state', 'out')})
			s.playtimer=setTimeout(function(){expandticker.rotatemsg($, s)}, s.timers.rotatepause)
		}	
},
	

init:function(setting){
	jQuery(document).ready(function($){ //fire on DOM ready
		var s=setting
		s=jQuery.extend({}, expandticker.dsetting, s)
		s.timers.rotatepause+=s.timers.fxduration //add slide duration to rotate timer
		s.$ticker=$('#'+s.id)
		if (s.$ticker.length==0)
			return
		s.effectfunct=s.fx=="fade"? expandticker.effectfuncts[0] : expandticker.effectfuncts[1]
		if (s.remotecontent && s.remotecontent[0].length>0){
			s.remotecontent[1]=s.remotecontent[1]*1000 //convert units into seconds
			expandticker.fetchajaxcontent($, s)
		}
		else
			expandticker.setup($, s)
		$(window).bind('load resize', function(e){ //reposition enlarge images when window has loaded or is resized
			if (s.$button)
				setTimeout(function(){expandticker.positionbutton($, s)}, (e.type=="load")? 200 : 0)
		})
		$(document).click(function(){
			if (s.$menu){ //hide menu when user clicks anywhere on page
				s.$menu.hide()
				s.$menu.data('state', 'closed')
			}
		})
		
	})
}
}
</script>

<script>

expandticker.init({
	id: 'expandticker1',
	snippetlength: 25,
	fx: 'slide',
	timers: {rotatepause:3000, fxduration:500} //--No comma following last option!
})

</script>
]]><![CDATA[Colors and Gradients]]>Some useful tools for choosing colors and gradients:

]]>https://ghost-o-matic.com/colors-and-gradients/65eb378455e87ebe7b833a08Fri, 16 Dec 2022 14:33:13 GMTSome useful tools for choosing colors and gradients:

]]><![CDATA[Ghost Site Injection-Only Drop Down Menu]]>https://ghost-o-matic.com/ghost-site-injection-only-drop-down-menu/65eb378455e87ebe7b833a07Wed, 09 Nov 2022 14:36:52 GMTThis simple little drop-down menu is ready to drop into the Site Code Injections in the Admin area of the Casper Theme...  I posted this in the Ghost Forums too so you can get help over there if you need it >>

^^ Above is the Desktop view – The mobile phone view is over there on the right side -->>>

Here goes the HOW-TO...

Paste this into your Site Header Code Injection...

<style>

li[class*="nav-"][class*="--hasHoverDown"] {
	position: relative;
}
li[class*="nav-"][class*="--hasHoverDown"] a:after {
	content: "▼";
	padding-left: 5px;
	font-size: 12px;
	color: inherit;
}
li[class*="nav-"][class*="--hasHoverDown"] .isHoverDown a:after {
	display:none;
}
li[class*="nav-"][class*="--hasHoverDown"]:focus-within > li[class*="nav-"]:after,
li[class*="nav-"][class*="--hasHoverDown"]:hover > li[class*="nav-"]:after {
	background-color: transparent;
}
li[class*="nav-"][class*="--hasHoverDown"]:focus-within .isHoverDown,
li[class*="nav-"][class*="--hasHoverDown"]:hover .isHoverDown {
	opacity: 1;
	visibility: visible;
}
.isHoverDown {
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	margin: 0;
	max-width: unset;
	list-style: none;
	/* The padding inside the Hover down (the space surrounding the links) */
	padding: 10px;
	/* The rounded corners of the Hover down */
	border-radius: 6px;
	/* The background color of the Hover down */
	background: #000;
    /* The color of the text in the Hover down */
    color: #fff;
}
.isHoverDown a {
    /* The color of the link text in the Hover down */
    color: #fff;
}
.isHoverDown li[class*="nav-"] {
	margin-right: 0 !important;
}
.isHoverDown li[class*="nav-"]:not(:last-child) {
	margin-bottom: 0;
    /* Dividers between the Hover down items */
    border-bottom: 1px solid #ddd;
}

/* OPTIONAL: in mobile, left align all menu items and indent submenu items */
    /*
@media (max-width: 991px) {
    #gh-head .gh-head-inner {
        grid-template-columns: 1fr;
    	height: auto;
	}
	.gh-head-open #gh-head .gh-head-menu,
    #gh-head .gh-head-menu .nav {
    	align-items: flex-start;
    	display: flex;
    	flex-direction: column;
        margin: 0 auto;
	}
    .gh-head-menu .nav li {
        text-align: left;
	}
    .gh-head-menu .nav li.hasHoverDown {
        margin: 0;
    	padding: 0;
    	display: flex;
    	flex-direction: column;
    	align-items: flex-start;
	}
    .gh-head-menu ul.isHoverDown {
    	list-style: none;
    	text-align: left;
    	margin: 0;
    	padding: 0 0 0 10px;
	}
    .gh-head-menu ul.isHoverDown li {
    	margin: 0;
    	padding: 0;
    	text-align: left;
	}
    .gh-head-menu ul.isHoverDown li a {
    	font-size: 2rem;
    	line-height: 1.5;
	}
}
    */

</style>


<script>
    
(function () {
    const mediaQuery = window.matchMedia('(max-width: 767px)');
    
    // IMPORTANT: For themes other than Casper, change the selector just below to select your theme's header menu selector
    const menu = document.querySelector('.gh-head-menu');
    const nav = menu.querySelector('.nav');
    if (!nav) return;

    // IMPORTANT: For themes other than Casper, change the selector just below to select your theme's header logo selector
    const logo = document.querySelector('.gh-head-logo');
    const navHTML = nav.innerHTML;

    if (mediaQuery.matches) {
        const items = nav.querySelectorAll('li');
        items.forEach(function (item, index) {
            item.style.transitionDelay = 0.03 * (index + 1) + 's';
        });
    }
    
    const makeHoverdown = function () {
        if (mediaQuery.matches) return;

        var hoverDown_list = [],
        latest_navigation_item,
        // IMPORTANT: For themes other than Casper, change the selector just below to select your theme's header menu item selector 
        nav_list = document.querySelectorAll('.gh-head-menu li');
        var newMenuList = [];
        var menuTree = {};

        nav_list.forEach( (item, index) => {
            if(item.childNodes[0].innerText.startsWith('-')) {
                if(menuTree[newMenuList.length - 1]) {
            menuTree[newMenuList.length - 1].push(item);
                } else {
            menuTree[newMenuList.length - 1] = [item];
            }
        } else {
        newMenuList.push(item);
        }
        });
        
        nav_list = newMenuList.map((item, index) => {
        if(menuTree[index]) {
            let hoverdown = document.createElement('ul');
            hoverdown.className = 'isHoverDown';
            menuTree[index].forEach(child => {
                hoverDown_item_text = child.childNodes[0].innerText;
                child.childNodes[0].innerText = hoverDown_item_text.replace('- ', '');
                hoverdown.appendChild(child);
            });
        item.className += '--hasHoverDown';
        item.appendChild(hoverdown);
        }
        return item;
        });
    }

    imagesLoaded(logo, function () {
        makeHoverdown();
    });

    window.addEventListener('resize', function () {
        setTimeout(function () {
            nav.innerHTML = navHTML;
            makeHoverdown();
        }, 1);
    });

})();
</script>

Inspired by the work of ...

Premium Ghost Themes
Ghost themes that save time and money are simple and easily customizable. Choose a theme for your blog, newsletter, portfolio, or news website.
Aspire ThemesLeslie Camacho
]]><![CDATA[Tag Post Archive Template]]>https://ghost-o-matic.com/tag-post-archive-template/65eb378455e87ebe7b833a05Tue, 04 Oct 2022 13:17:05 GMT

tag.hbs

{{!< default}}

<div class="gh-page">
    <div class="gh-container">

        {{#tag}}
        <header class="gh-page-head">

            <h1>{{name}}</h1>

            <p>
                {{#if description}}
                    {{description}}
                {{else}}
                    A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
                {{/if}}
            </p>

        </header>
        {{/tag}}

        <div class="gh-content">
        {{#foreach posts}}

            {{> "card"}} {{!-- partials/postlist-item.hbs --}}

        {{/foreach}}
        </div>

    </div>
</div>

partials/postlist-item.hbs

<a href="{{url}}" class="gh-postlist-item">
    <article>
        <h2 class="gh-postlist-item-title">{{title}}</h2>
        <time class="gh-postlist-item-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time>
        <span class="gh-postlist-item-duration">{{reading_time}}</span>
        <div class="right-arrow"><i class="fa fa-arrow-right"></i></div>
    </article>
</a>
]]>