source/_assets/css/main.css

/* Style overrides for light and dark mode / theme */
html, html[data-theme="light"] {
    --main-navbar-color: #eee;
    --main-navbar-li-active-text-color: rgb(152, 144, 130);
    --main-navbar-li-active-text-color: #818181;
    --main-navbar-li-active-background-color: #dfdfdf;
    --main-background-color: #fff;
    --main-text-color: #000;
    --main-border-color: #ccc;
    --main-code-text-color: #c7254e;
    --main-code-background-color: #f9f2f4;;
    --main-syntax-highlight-background-color: #fff0f0;
    --main-syntax-highlight-o-text-color: #333;
    --main-syntax-highlight-ow-text-color: #000;
    --main-carousel-color: #333;
    --main-post-date-author: rgba(77,77,77,0.75);
    --main-navbar-text-color: #000;
    --main-a-text-color: #428bca;
    --main-a-hover-focus-color: #2a6496;
    --main-sidebar-nav-a-active: #000;
    --main-hr-border-color: #eee;
}

html[data-theme="dark"] {
    --main-navbar-color: rgb(34, 36, 38);
    --main-navbar-li-active-text-color: rgb(152, 144, 130);
    --main-navbar-li-active-background-color: rgb(42, 46, 47);
    --main-background-color: rgb(24, 26, 27);
    --main-text-color: rgb(200, 195, 188);
    --main-border-color: rgb(62, 68, 70);
    --main-code-text-color: rgb(221, 73, 110);
    --main-code-background-color: rgb(43, 20, 26);
    --main-syntax-highlight-background-color: rgb(60, 0, 0);
    --main-syntax-highlight-o-text-color: rgb(200, 195, 188);
    --main-syntax-highlight-ow-text-color: rgb(232, 230, 227);
    --main-carousel-color: #fff;
    --main-post-date-author: rgba(183, 177, 168, 0.75);
    --main-navbar-text-color: #fff;
    --main-a-text-color: rgb(125, 178, 219);
    --main-a-hover-focus-color: rgb(125, 178, 219);
    --main-sidebar-nav-a-active: rgb(232, 230, 227);
    --main-hr-border-color: rgb(53, 57, 59);
}

@media (prefers-color-scheme: dark) {
    html, html[data-theme="dark"] {
        --main-navbar-color: rgb(34, 36, 38);
        --main-navbar-li-active-text-color: rgb(152, 144, 130);
        --main-navbar-li-active-background-color: rgb(42, 46, 47);
        --main-background-color: rgb(24, 26, 27);
        --main-text-color: rgb(200, 195, 188);
        --main-border-color: rgb(62, 68, 70);
        --main-code-text-color: rgb(221, 73, 110);
        --main-code-background-color: rgb(43, 20, 26);
        --main-syntax-highlight-background-color: rgb(60, 0, 0);
        --main-syntax-highlight-o-text-color: rgb(200, 195, 188);
        --main-syntax-highlight-ow-text-color: rgb(232, 230, 227);
        --main-carousel-color: #fff;
        --main-post-date-author: rgba(183, 177, 168, 0.75);
        --main-navbar-text-color: #fff;
        --main-a-text-color: rgb(125, 178, 219);
        --main-a-hover-focus-color: rgb(125, 178, 219);
        --main-sidebar-nav-a-active: rgb(232, 230, 227);
        --main-hr-border-color: rgb(53, 57, 59);
    }
    html[data-theme="light"] {
        --main-navbar-color: #eee;
        --main-navbar-li-active-text-color: rgb(152, 144, 130);
        --main-navbar-li-active-text-color: #818181;
        --main-navbar-li-active-background-color: #dfdfdf;
        --main-text-color: #000;
        --main-background-color: #fff;
        --main-border-color: #ccc;
        --main-code-text-color: #c7254e;
        --main-code-background-color: #f9f2f4;;
        --main-syntax-highlight-background-color: #fff0f0;
        --main-syntax-highlight-o-text-color: #333;
        --main-syntax-highlight-ow-text-color: #000;
        --main-carousel-color: #333;
        --main-post-date-author: rgba(77,77,77,0.75);
        --main-navbar-text-color: #000;
        --main-a-text-color: #428bca;
        --main-a-hover-focus-color: #2a6496;
        --main-sidebar-nav-a-active: #000;
        --main-hr-border-color: #eee;
    }
}

html, body {
    height: 100%;
    background-color: var(--main-background-color);
    color: var(--main-text-color);
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.6em;
    padding-top: 80px;
}

h2 {
    margin-top: 30px;
}

/* Needed so when user click on a link which points to the anchor we end up slightly
 * above the anchor and not below it. */
h2:before { 
  display: block;
  content: " ";
  margin-top: -90px;
  height: 90px;
  visibility: hidden;
}

.anchor {
    padding-top: 80px;
    margin-top: -70px;
}

a[name] {
    color: #000000;
    text-decoration: none;
}

/* Navigation bar styles */
.navbar-brand {
    font-weight: 600;
    padding-top: 18px !important;
    padding-bottom: 0 !important;
}

.navbar-logo {
    padding-top: 1px !important;
    margin-top: -8px;
    margin-right: 10px;
}

/* Add top border, remove bottom one */
nav.navbar {
    border-top: #0c60ff 10px solid;
    border-bottom: none;
}

/* Increase default navbar height */
.navbar-fixed-top {
    height: 73px;
}

.navbar-nav > li > a {
    padding-top: 21px !important;
    padding-bottom: 21px !important;
    font-size: 1.1em;
}

/* Custom background color for the navbar */
.navbar-inverse {
    background-color: var(--main-navbar-color);
}

/* Custom hover background */
ul.nav.navbar-nav li a {
    color: #818181;
}

.navbar-inverse .navbar-nav > li > a:hover {
    background-color: #3ca8ff;
}

.navbar-brand {
    color: var(--main-navbar-text-color) !important;
}

.navbar-nav > li.active > a {
    color: var(--main-navbar-li-active-text-color) !important;
    background-color: var(--main-navbar-li-active-background-color) !important;
}

/* Custom color for responsive button thingy */
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle {
    background-color: #818181;
    border: none;
}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
    background-color: #3ca8ff;
    border: none;
}

/* Custom style for responsive menu bar */
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    background-color: var(--main-navbar-color);
    /*border-top: #0c60ff solid;*/
}

/* Homepage */
img.provider-logo {
    margin-left: 10px;
    margin-right: 10px;
}

h2.tagline {
    font-size: 1.5em;
    margin-bottom: 20px;
}

div.row-2 {
    margin-top: 20px;
}

div.row-3, div.row-4 {
    margin-top: 20px;
}

div.whos-using {
    margin-bottom: 15px;
}

img.logo {
    margin-left: 5px;
    margin-right: 5px;
}


/* Carousel */

/* Only specify height for larger resolutions */
@media (min-width: 992px) {
    #carousel-provider-logos {
        height: 85px;
    }
}

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: inline;
}

.carousel-control.left, .carousel-control.right {
    background: none !important;
}

.carousel-control {
    color: var(--main-carousel-color) !important;
}

/* Content pages */
div.sidebar-nav {
    position: fixed;
    margin-top: 20px;
}

@media (max-width: 1200px) {
    div.sidebar-nav {
        position: relative;
    }
}

.sidebar-nav > ul > li > a {
    padding: 5px 10px;
}

.sidebar-nav > ul > li.active > a {
    color: var(--main-sidebar-nav-a-active);
    text-decoration: none;
    cursor: default;
}

.sidebar-nav > ul > li.active > a:hover {
    color: var(--main-sidebar-nav-a-active);
    background-color: var(--main-navbar-color);
    text-decoration: none;
    cursor: default;
}

.sidebar-nav > ul > li > a:hover {
    background-color: var(--main-navbar-color);
}

/* Credits page */

div.member {
    margin-bottom: 20px;
}

img.gravatar {
    float: left;
    display: block;
    margin-right: 10px;
}

/* Other */

div.page-content {
    font-size: 12pt;
}

img.inline {
    padding-top: 10px;
    padding-bottom: 10px;
}

img.center {
    margin: 0 auto;
}

/* Blog styles */
div.post h2 {
    margin-bottom: 20px;
}

div.post h2.post-title {
    margin-bottom: 10px;
}

div.post pre {
    margin-top: 15px;
    margin-bottom: 15px;
}

pre {
    background-color: var(--main-navbar-color);
    color: var(--main-text-color);
}

div.post ul {
    margin-top: 15px;
    margin-bottom: 15px;
}

.popover {
    background-color: var(--main-background-color);
    border: 1px solid var(--main-border-color);
}

pre {
    border: 1px solid var(--main-border-color);
}

span.post-date-author {
    font-style: italic;
    color: var(--main-post-date-author);
}

div.post-content {
    margin-top: 20px;
}

div.post-meta {
    margin-top: 30px;
}

div.imginline {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

img.inline {
  border: none !important;
  margin: 0 auto 8px;
}

p.img-caption {
  margin-top: 10px;
}

/* Misc */
code {
    font-family: 'Inconsolata', monospace;
    font-size: 11pt !important;
}

code span[id] {
    cursor: pointer;
}

code span[id]:hover {
  background-color: white;
}

/* Footer */
footer {
    margin: 20px 0;
    font-size: 0.9em;
}

div.footer-text {
    margin-top: 10px;
}

/* Overrides for purposes of dark and light theme. */
hr {
    border-color: var(--main-hr-border-color);
}

a {
  color: var(--main-a-text-color);
}

a:hover,
a:focus {
  color: var(--main-a-hover-focus-color);
}

/* Syntax highlighter classes */
.s {
  background-color: var(--main-syntax-highlight-background-color);
}

.o {
    color: var(--main-syntax-highlight-o-text-color);
}

.ow {
    color: var(--main-syntax-highlight-ow-text-color) !important;
}

code {
    color: var(--main-code-text-color);
    background-color: var(--main-code-background-color);
}

span.theme-switch {
    color: var(--main-navbar-li-active-text-color);
    margin-left: 7px;
    font-size: 0.85em;
}