Ghost Rebuild v2

Modifying the base template the ships with Ghost, Casper. Here I'll document my process learning Ghost templating structure. Vamo puesh ~ si o no?

Ghost Rebuild  v2

The original theme is called Casper: https://casper.ghost.io

Though there seem to be a few changes from what is on the demo site 🧐 ... that I'll need to investigate.

Either way, I'm kinda of realizing that this is a part of my art ... I start with simple structures, and then I streamline them further.

I did the same thing with the Twenty theme in Wordpress, as well as a few base themes with GeneratePress.

Because often they are robust themes!

(I really like the menu button for mobile!)

Still a beginner

I just started looking at the theme files for Ghost themes; and it's looking very accessible. Though like most things, will take a bit more time to do the really cool stuff.

Though I've changed the header font colors, which is most easily seen on mobile.

I also limited the frontpage articles to only articles that are featured ... not the latest articles ~ which I think will be useful.

As well, I added the Soundcloud embed at the bottom.

The next trick will be to add a list of articles after the Soundcloud link, I think. As well, I would like to add icons for social links.

Here's the CSS that's used via Code Injection:

<style>
    .site-header-content p {
    line-height: 1em;
    opacity: 1;
    font-size: 1.5em;
    font-family: serif;
    text-shadow: 3px 3px 2px black;
    }
  
    #gh-head {
    background-color: transparent;
    color: #fff;
    opacity: 1;
    font-size: 1.1em;
    }

    .gh-head-brand .gh-search svg {
      stroke-width: 4;
    }
    .has-cover .gh-burger:before {
      background-color: #fff;
      height: 4px;
    }
    .has-cover .gh-burger:after {
      background-color: #000;
      height: 4px;
    }
    .gh-head-open.has-cover #gh-head, .gh-head-open.has-cover #gh-head .gh-head-actions  {
        opacity: .95;
    }
</style>

Adding the list below required the following code:

(Need to copy in the code 😇.)