custom.scss

/*-- scss:defaults --*/


/*-- scss:rules --*/
#hero-banner .h1, #hero-banner .h2 {
  color: white !important;
}

// style background image on posts
.featured-image {
    background-size: cover;
    background-position: center;
    color: white;
    box-shadow: inset 0 0 0 1000px rgba(0,38,66,0.75);
}

/* ---------------
DETAILS
----------------*/

details[open] > * {
	margin-left: .5rem !important; 
	padding-left: .5rem;
  border-left: 1px solid rgba(0,0,0,.8);
}

.dark details[open] > * {
	border-left: 1px solid rgba(255, 255, 255, 0.8);
}

/* Size of space between badges */
/*
.badges {
    margin: 0 ;
    line-height: 0;
  }

  
a + br {
  display: block;
  margin: -15px 0;
}
*/

div.highlight,
pre {
  position: relative; 
  margin: 10px 0px;
}

/* ---- button -----*/

.btn {
  margin-right: 10px;
  border-radius: 15px 15px !important;
}

.btn.btn-primary.btn-lg.active {
  background-color: #ee6b78 !important;
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 .2rem #dc3545 !important;
}

.btn-primary {
  background-color: #6b94ee !important;
/*  border-color: #507ee0 !important;
  box-shadow: 0 0 0 .1rem #436eca  !important;
*/
}

/* ------------------------------
DATAFRAME RENDERING
---------------------------------*/

.dataframe {
  border: none
}

.dataframe table {
  margin-left: auto;
  margin-right: auto;
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  color: black ;
  font-size: 12px;
  table-layout: fixed;
}

.dataframe thead {
  border-bottom: 1px solid black ;
  vertical-align: bottom;
}

.dataframe tr, .dataframe th, .dataframe td {
  text-align: right;
  vertical-align: middle;
  padding: 0.5em 0.5em;
  line-height: normal;
  white-space: normal;
  max-width: none;
  border: none;
}

.dataframe th {
  font-weight: bold;
}
.dataframe tbody tr:nth-child(odd) {
  background: #f5f5f5;
}
.dataframe tbody tr:hover {
  background: rgba(66, 165, 245, 0.2);
}
/* 
borrowed from
https://github.com/jupyter/notebook/blob/9de5042e1058dc8aef7632f313e3e86c33390d31/notebook/static/notebook/less/renderedhtml.less#L77-L109
*/




/*-------------------
    CUSTOM BOXES
--------------------*/


.alert.alert-info,
.alert.alert-success,
.alert.alert-danger,
.alert.alert-warning {
	/* padding: 1px 0px; */
	background-color: white;
}
.dark .alert.alert-info,
.dark .alert.alert-success,
.dark .alert.alert-danger,
.dark .alert.alert-warning {
	/* padding: 1px 0px; */
	background-color: #23252f;
	color: white;
}

.dark .alert > :not(pre) > code {
  color: #e83e8c !important;
}

/* Box heading color */
.alert-info > .alert-heading {
	background-color: #e7f2fa;
}
.alert-success > .alert-heading {
	background-color: #ecf8e8;
}
.alert-warning > .alert-heading {
	background-color: #fff6dd;
}
.alert-danger > .alert-heading {
	background-color: #dc3545;
}

/* Dark mode heading*/
.dark .alert-info > .alert-heading {
	background-color: #032b47;
}
.dark .alert-success > .alert-heading {
	background-color: #2db400;
}
.dark .alert-warning > .alert-heading {
	background-color: #a09500;
}
.dark .alert-danger > .alert-heading {
	background-color: #c4071a;
}


/* Text color */
.alert-success,
.alert-danger,
.alert-warning,
.alert-info {
	color: rgba(0,0,0,.8);
}

/* Space after header */
.alert-success > .alert-heading,
.alert-danger > .alert-heading,
.alert-info > .alert-heading,
.alert-warning > .alert-heading {
	margin-bottom: 15px !important;
}

.alert-success,
.alert-warning,
.alert-danger,
.alert-info,
.box-exercise,
.box-warning,
.box-caution,
.box-danger,
.box-error,
.box-hint,
.box-tip,
.box-important,
.box-note,
.box-attention{
  margin-top: 1em;
  margin-bottom: 1em;  
  margin:1.5625emauto;
  padding:0 .6rem .8rem!important;overflow:hidden;
  page-break-inside:avoid;
  /*border-left:.2rem solid #dc3545;*/
  border-radius:.25rem;
  box-shadow:0 .2rem .5rem rgba(0,0,0,.05),0 0 .05rem rgba(0,0,0,.1);
  transition:color .25s,background-color .25s,border-color .25s ;
  border-right: 1px solid #dee2e6 ;
  border-top: 1px solid #dee2e6 ;
  border-bottom: 1px solid #dee2e6 ;
}

/* LEFT BORDERS */
.box-warning {
  border-left: .2rem solid #ff0039;
}
.alert-danger {
  border-left: .2rem solid #ff0039;
}
.dark .alert-danger {
  border-left: .2rem solid #5c0014;
}
.box-caution {
  border-left:.2rem solid #fd7e1480;
}
.box-danger {
  border-left:.2rem solid #dc354580;
}
.box-error {
  border-left:.2rem solid #dc354580;
}
.box-hint {
  border-left:.2rem solid #ffc10780;
}
.box-tip {
  border-left:.2rem solid #ffc10780;
}
.alert-warning {
  border-left:.2rem solid #ffc10780;
}
.dark .alert-warning {
  border-left:.2rem solid #d4ab38;
}
.box-important {
  border-left:.2rem solid #007bff80;
}
.alert-info {
  border-left:.2rem solid #007bff80;
}
.dark .alert-info {
  border-left:.2rem solid #02316356;
}
.box-attention {
  border-left:.2rem solid #fd7e1480;
}
.box-exercise {
  border-left:.2rem solid #3fb618;
}
.alert-success {
  border-left:.2rem solid #3fb618;
}
.dark .alert-success {
  border-left:.2rem solid #1a6600;
}

.box-header-exercise,
.box-header-warning,
.box-header-caution,
.box-header-danger,
.box-header-error,
.box-header-hint,
.box-header-tip,
.box-header-important,
.alert-heading,
.box-header-note,
.box-header-attention{
  /*background-color:#fdf3f2;*/
  position:relative;
  margin:0 -.6rem!important;
  padding: 0rem 0rem 0em 1rem;
  font-weight:600;
  font-size: .9rem;
}


.box-body-exercise,
.box-body-warning,
.box-body-caution,
.box-body-danger,
.box-body-error,
.box-body-hint,
.box-body-tip,
.box-body-important,
.box-body-note,
.box-body-attention{
  padding: 1px 0px;
}

.box-header-exercise{
  background-color:#ecf8e8
}
.box-header-warning{
  background-color:#ffe6eb
}
.box-header-caution{
  background-color:#fd7e14
}
.box-header-error{
  background-color:#dc3545
}
.box-header-hint{
  background-color:#fff6dd
}
.box-header-tip{
  background-color:#fff6dd
}
.box-header-important{
  background-color:#e7f2fa
}
.box-header-note{
  background-color:#e7f2fa
}
.box-header-attention{
  background-color:#ffedcc
}
.box-header-danger{
  background-color:#fdf3f2
}

.box h3,
.alert h3{
  margin-top: 0rem;
  font-weight:600;
  font-size: 1.1rem;
  padding-top: .2em;
  padding-bottom: .2em;
}

a img{
  display: inline;
}

code.has-jax {
  -webkit-font-smoothing: antialiased;
  background: inherit !important;
  border: none !important;
  font-size: 100%;
}



/* copy button */

.copy-code-button {
    color: #272822;
    background-color: #FFF;
    border-color: #272822;
    border: 2px solid;
    border-radius: 3px 3px 0px 0px;

    /* right-align */
    display: block;
    margin-left: auto;
    margin-right: 0;

    margin-bottom: -2px;
    padding: 3px 8px;
    font-size: 0.8em;
}

.copy-code-button:hover {
    cursor: pointer;
    background-color: #F2F2F2;
}

.copy-code-button:focus {
    /* Avoid an ugly focus outline on click in Chrome,
       but darken the button for accessibility.
       See https://stackoverflow.com/a/25298082/1481479 */
    background-color: #E6E6E6;
    outline: 0;
}

.copy-code-button:active {
    background-color: #D9D9D9;
}

.highlight pre {
    /* Avoid pushing up the copy buttons. */
    margin: 0;
}