Nerdy Notes

Utterances Commenting Engine Using Github Issues

<script src="https://utteranc.es/client.js"
        repo="bershatsky/bershatsky-net-comments-utterances"
        issue-term="url"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

Ghost / Casper Theme Customizations

Header code injection for hiding certain objects, enabling social icons in menu bar, adjusting text/emoji size to match social icons, increasing the size of the hamburger menu, and search icon.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/brands.min.css" integrity="sha512-+oRH6u1nDGSm3hH8poU85YFIVTdSnS2f+texdPGrURaJh8hzmhMiZrQth6l56P4ZQmxeZzd2DqVEMqQoJ8J89A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
    .article-byline-content .author-list, .article-byline-meta .author-name {
        display:none
    }

    .gh-head-menu .nav-flickr a,
    .gh-head-menu .nav-instagram a,
    .gh-head-menu .nav-youtube a,
    .gh-head-menu .nav-messenger a,
    .gh-head-menu .nav-facebook a,
    .gh-head-menu .nav-wordpress a {
        font-size: 0 !important;
    }

    .gh-head-menu .nav-flickr a::before,
    .gh-head-menu .nav-instagram a::before,
    .gh-head-menu .nav-youtube a::before,
    .gh-head-menu .nav-messenger a::before,
    .gh-head-menu .nav-facebook a::before,
    .gh-head-menu .nav-wordpress a::before {
        font-family: "Font Awesome 6 Brands";
        display: inline-block;
        font-size: 40px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    .gh-head-menu .nav-flickr a::before {content: "\f16e"}
    .gh-head-menu .nav-instagram a::before {content: "\f16d"}
    .gh-head-menu .nav-youtube a::before {content: "\f167"}
    .gh-head-menu .nav-messenger a::before {content: "\f39f"}
    .gh-head-menu .nav-facebook a::before {content: "\f09a"}
    .gh-head-menu .nav-wordpress a::before {content: "\f19a"}
    
    #gh-head > div > div.gh-head-actions > button > svg {
        width: 40px;
        height: 40px;
    }

    .gh-head-actions .gh-search {
        width: 40px
    }

    #gh-head > div > div.gh-head-brand > button.gh-search.gh-icon-btn > svg {
        width: 40px;
        height: 40px;
        stroke-width: 1.5px;
    }
    
    .gh-search {
        width: 40px;
        height: 40px;
    }
    
    #gh-head > div > div.gh-head-brand > button.gh-burger {
        zoom: 150%
    }
    
    .gh-head-menu {
    font-size: 40px;
    }
    
    #gh-head .nav a {
    font-size: 40px;
    }
</style>
Nav header links must be labeled exactly as they are written in the top part of the code.
<style>
body > div.viewport > footer > div > div > a {
          color: transparent;
          pointer-events: none;
          cursor: default;
          text-decoration: none;
    }
</style>
-