styles.css

/* base variables */
  
  /* Edit the CSS properties in this file to create a custom
Distill theme. Only edit values in the right column
for each row; values shown are the CSS defaults.
To return any property to the default,
you may set its value to: unset
All rows must end with a semi-colon.                      */
  
  /* Optional: embed custom fonts here with `@import`          */
  /* This must remain at the top of this file.                 */
  
  
  
  html {
    /*-- Main font sizes --*/
      --title-size:      50px;
    --body-size:       1.06rem;
    --code-size:       14px;
    --aside-size:      12px;
    --fig-cap-size:    13px;
    /*-- Main font colors --*/
      --title-color:     white;
    --header-color:    rgba(0, 0, 0, 0.8);
    --body-color:      rgba(0, 0, 0, 0.8);
    --aside-color:     rgba(0, 0, 0, 0.6);
    --fig-cap-color:   rgba(0, 0, 0, 0.6);
    /*-- Specify custom fonts ~~~ must be imported above   --*/
    --heading-font:    sans-serif;
    --mono-font:       monospace;
    --body-font:       sans-serif;
    --navbar-font:     sans-serif;  /* websites + blogs only */
  }

/*-- ARTICLE METADATA --*/
  d-byline {
    --heading-size:    0.6rem;
    --heading-color:   rgba(197, 222, 221,0.5); /*rgba(173, 0, 89, 0.5);*/
    --body-size:       0.8rem;
    --body-color:      rgba(197, 222, 221,0.8); /*rgba(173, 0, 89, 0.8)*/;
  }

/*-- ARTICLE TABLE OF CONTENTS --*/
  .d-contents {
    --heading-size:    18px;
    --contents-size:   13px;
  }

/*-- ARTICLE APPENDIX --*/
  d-appendix {
    --heading-size:    15px;
    --heading-color:   rgba(0, 0, 0, 0.65);
    --text-size:       0.8em;
    --text-color:      rgba(0, 0, 0, 0.5);
  }

/*-- WEBSITE HEADER + FOOTER --*/
  /* These properties only apply to Distill sites and blogs  */
  
  .distill-site-header {
    --title-size:       20px;
    --text-color:       #2a7370;
      --text-size:        15px;
    --hover-color:      black;
    --bkgd-color:       white;
  }

.distill-site-footer {
  --text-color:       rgba(255, 255, 255, 0.8);
  --text-size:        15px;
  --hover-color:      rgba(0, 0, 0, 1);
  --bkgd-color:       #60a6a3;
}

/*-- Additional custom styles --*/
  /* Add any additional CSS rules below                      */
  
  nav {
    border-bottom: 2px solid rgba(222, 222, 222, 0.3);
  }


.distill-site-header .title {
  min-width: 0px;
}

d-title {
  background-color: rgba(96, 166, 163, 1);
  color: white;
}

.posts-list > h1 {
  color: black!important;
}

d-title a {
  color: white;
}

d-byline {
  background-color: #60a6a3;
}

d-appendix {
  background-color: #F8F8F8;
}

d-appendix .citation-appendix {
  color: black;
}

.distill-site-footer {
  margin-top: 0;
}

@media print {
  d-byline {
    --heading-color:   rgba(0, 0, 0, 0.5);
    --body-color:      rgba(0, 0, 0, 0.8);
  }
  d-title {
    --title-color: rgba(0, 0, 0, 1);
    color: rgba(0, 0, 0, 0.8);
  }
}

/*  category tag color  */ 
  .dt-tags .dt-tag {
    color: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.6);
  }

/*  code color highlights and bg */ 
  d-article div.sourceCode pre {
    border-left: 2px solid rgba(197,222,221,1);
    background-color: #c5dedd!important;
      padding-top: 10px;
    padding-bottom: 10px;
    overflow-x: auto!important;
  }

/* scroll bar color */
  
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: rgba(26,112,109,1); 
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

/* end scroll bar color */
  
  d-article pre {
    background-color: #e3e3e3;
      padding: 10px;
  }

code span.fu, code span.kw {
  color: #1a706d;
}

div.sourceCode {
  margin: 0;
}

pre, d-article pre {
  margin: 0;
}