Some colorful code.
<style>
/* Styling for CodePen Embeds */
.cp_embed_wrapper {
width: 100%;
}
.cp_embed_wrapper iframe {
margin: 0 auto!important;
height: 400px;
}
/* Styling for HTML Audio Element */
audio {
vertical-align: baseline;
border: 5px solid lightgray;
border-radius: 25px;
}
audio:focus {
outline: none;
}
/* FOR POST DEMO at https://ghost-o-matic.com/replicate-casper-top-navbar-at-top-of-site-header-image/ */
/* Replicate the navbar to appear */
.site-home-header .site-nav-logo {
display: block;
padding: 0;
}
/* Adjust the position of the site logo in the navbar to align vertically center */
a.site-nav-logo {
padding: 0;
}
/* Adjust the size of the site logo */
.site-nav-logo img {
height: 32px;
margin-top: 4px;
}
/* Prevent the site logo/title from appearing in the center of the header image */
.site-home-header .site-title {
display: none;
}
/* Make bookmark embeds white to stand out from page background */
.kg-bookmark-content {
background-color: #FFF;
}
/* FOR POST DEMO at https://ghost-o-matic.com/a-reading-progress-bar/ */
#progress-bar {
width: 0%;
position: fixed;
top: 64px;
left: 0;
height: 6px;
background: linear-gradient(to right, #ecd2fe, #feaaaa);
}
/* FOR POST DEMO at https://ghost-o-matic.com/make-anything-collapsible/ */
details {
width: 100%;
background-color: #eee;
padding:15px;
border-radius: 5px;
}
details p {
width: auto;
padding: 1em 0 0;
}
summary {
background-color: rgb(59,89,152, 0.5);
color:#fff;
padding: 0 0 0 15px;
margin:-5px;
cursor:pointer;
border-radius: 5px;
}
summary:hover, summary:focus {
background-color: rgb(0,172,237, 0.5);
}
summary > h3 {
display: inline;
}
/* Serve a light reading theme on mobile devices which currenty default to darkmode */
body,
#site-main,
h1.post-full-title,
section.post-full-content,
.post-feed,
.page-template .site-main,
.post-template .site-main {
color:#000;
background-color: #F5F2EF !important;
}
h2.post-card-title,
h4.author-name a,
.post-card-content a {
color:#000;
}
.post-full-content a {
color: #26a8ed;
}
.post-full-content em, .post-full-content strong {
color:#000;
}
/* Contain inserted images to page content width */
.post-full-content img, .post-full-content video {max-width: 100%}
/* Miscellaneous Undocumented */
.post-full-header {
padding-bottom: 20px;
}
.post-full-byline {
margin: 0;
}
.post-full-content a {
box-shadow: none;
}
.post-card-excerpt {
color: #3e4b50;
}
.static-avatar, a.author-avatar {
margin-left: -4px; /* Fix 2px Avatar glitch */
border: 2px solid #fff;
}
.post-full-content figcaption {
text-align: left;
}
.ddajaxsidepanel {
background: #0000007d !important;
border-left: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* For Casper: Nudge the top nav menu items and sote logo altogether to vertically center */
/*
.site-nav-left {
padding-top: 12px;
}
*/
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/themes/prism.min.css" />
<style>
.post-full-content pre {
padding: 20px !important;
border: none;
}
code[class*=language-], pre[class*=language-] {
color: #000;
background: #fff;
text-shadow: 0 1px #fff;
font-size: .7em;
text-align: left;
white-space: pre-line;
word-spacing: normal;
word-wrap: break-word;
}
/*
.js-toc, .published-with {
display:none !important;
}
.sidebar.responsive-sidebar-img::after {
content: '';
background: transparent;
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
*/
</style>