/* 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: 10px; | |
} | |
div.post pre { | |
margin-top: 15px; | |
margin-bottom: 15px; | |
} | |
pre { | |
background-color: var(--main-navbar-color); | |
color: var(--main-text-color); | |
} | |
.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; | |
} |