CSS Tricks

CSS codes present here are the ones that I use(d) on my blogs/websites, frequently adapted from many different sources.

Ghost Code Injection

Ghost users can inject some codes into the header and the footer.

File: header.html

<!-- additional style -->
<style>
body {
  font-size: 1.6rem;
}

.post-content a {
  text-decoration: none;
  position: relative;
  border-bottom: #000 solid 1px;
  padding-bottom: 2px;
}
</style>

File: footer.html

<!-- highlight.js -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/github.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script> 

<!-- bigfootjs -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bigfoot/2.1.4/bigfoot-default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bigfoot/2.1.4/bigfoot.js"></script>
<script type="text/javascript">
    $.bigfoot();
</script>

These two modifications can be done through Ghost's own code injection module. The codes above enable me to prettify the hyperlinked words, to use syntax highlighter, and to use prettier footnote.

Image Bleed

File: style.css

/* bleed .img inside #post-body, by @aixnr based on TryGhost/Casper */
#post-body img {
    display: block;
    max-width: 150%;
    height: auto;
    padding: 0.6em 0;
    position: relative;
        left: 50%;
    -webkit-transform: translateX(-50%); /* for Safari and iOS */
    -ms-transform: translateX(-50%); /* for IE9 */
    transform: translateX(-50%);
}

/* for media below @500px, by @aixnr based on TryGhost/Casper */
@media only screen and (max-width: 500px) {
    #post-body img{
        padding: 0;
        width: calc(100% + 32px);
         min-width: 0;
         max-width: 112%;
    }
}

Adapted from TryGhost/Casper (Ghost's default theme).