style.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.                 */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

html {
  /*-- Main font sizes --*/
  --title-size:      50px;
  --body-size:       1.2rem;
  --code-size:       1.2rem;  /* code chunk font size */
  --aside-size:      12px;  /* font size for text outisde the margin, ie in the sides of the document */
  --fig-cap-size:    13px;  /* figure caption font size */
  /*-- Main font colors --*/
  --title-color:     #150927; /*-- Dark blue --*/
  --header-color:    #150927; /*-- Dark blue --*/
  --body-color:      #000000; /*-- Black --*/
  --aside-color:     #000000; /*-- Dark blue --*/
  --fig-cap-color:   #000000; /*-- Dark blue --*/
  /*-- Specify custom fonts ~~~ must be imported above   --*/
  --heading-font:    "Lato", serif;
  --mono-font:       "Source Code Pro", monospace;
  --body-font:       "Lato", sans-serif;
  --navbar-font:     "Lato", sans-serif;
  scroll-behavior: auto;
}

/*-- ARTICLE METADATA --*/
d-byline {
  --heading-size:    0.6rem;
  --heading-color:   #150927; /*-- Dark blue --*/
  --body-size:       0.8rem;
  --body-color:      #000000; /*-- Black --*/
}

/* Postcard main text */
div#content p {
color: #000000; /*-- Black --*/
text-align: justify;
font-size: 19.2px;
}

/* Postcard list items */
.list-inline-item {
color: #150927; /*-- Dark blue --*/
}

/* Postcard headers */
h1, h2 {
  color: #150927; /*-- Dark blue --*/
}

/* Postcard links */
#content a {
  color: #EA660C; /*-- orange --*/
}

/* mouse over link */
#content a:hover {
  color: #DC6513; /*-- light orange --*/
}

/* selected link */
#content a:active {
  color: #DC6513; /*-- light orange --*/
}

/* visited link */
#content a:visited {
  color: #DC6513; /*-- light orange --*/
}

/*-- ARTICLE TABLE OF CONTENTS --*/
.d-contents {
  --heading-color:   #000000; /*-- Black --*/
  --heading-size: 0.9rem;
  --contents-size: 0.9em;
  border-bottom: none;
}

/* toc list colour and size */

.d-contents nav a {
    color: black;
}

/* text in the toc will zoom on hover */

.d-contents nav a:hover {
    color: black;
    transform: scale(1.7); /* change scale to control hover zoom */
    padding-left:20%; /* change percentage to control left gap from the margin */
    background-color: white; /* background colour on hover, kept as white as to prevent overlapping of other texts */
    display: block; /* keep it as block to station the text on hover */
}

.d-contents nav a:active {
    color: black;
}

.d-contents nav a:visited {
    color: black;
}


/*-- ARTICLE APPENDIX --*/
d-appendix {
  --heading-size:    15px;
  --heading-color:   #150927; /*-- Dark blue --*/
  --text-size:       0.8em;
  --text-color:      #000000; /*-- black --*/
}

/*-- WEBSITE HEADER + FOOTER --*/
/* These properties only apply to Distill sites and blogs  */

.distill-site-header {
  --title-size:       18px;
  --text-color:       #FFFFFF; /* White, same color as background */
  --text-size:        15px;
  --hover-color:      #DC1D4F; /* Light magenta */
  --bkgd-color:       #301e64; /* purple */
}

.distill-site-footer {
  --text-color:       #FFFFFF; /* White, same color as background */
  --text-size:        15px;
  --hover-color:      #DC1D4F; /* Light magenta */
  --bkgd-color:       #301e64; /* purple */
}

/* to jsutfy body text in the distill aticle */
d-article p {
  text-align: justify;
}

/*-- Additional custom styles --*/
/* Add any additional CSS rules below  */
/* Change bullets */

ul > li::marker {
  font-size: 1.125em;
  color: #64142c; /*-- Dark magenta --*/
}

/* Change link appearance */
d-article a {
  color: #EA660C; /*-- orange --*/
}

/* Non-postcard links */
d-article a {
  border-bottom: 0px;
  color: #EA660C; /*-- orange --*/
}

/* mouse over link */
d-article a:hover {
  color: #DC6513; /*-- light orange --*/
  border-bottom: none; /*-- removes the black line which appers while hovering over hyperlink --*/
  cursor: pointer;
  color: #DC6513;
}

/* selected link */
d-article a:active {
  color: #DC6513; /*-- light orange --*/
}

/* visited link */
d-article a:visited {
  color: #DC6513; /*-- light orange --*/
}

/* Post descriptions */
d-article p {
  color: #2b2212; /*-- Dark brown --*/
}

/* post list date font size */
.posts-list .metadata {
    font-size: 16px;
    line-height: 1.4em;
    font-weight: bold;
}

/* post list subtitle text size */
.posts-list .post-preview p {
    margin: 0 0 12px 0;
    line-height: 1.5em;
    font-size: 20px;
}

/* to have link lines apperaing below the hyperlinks */
html a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    color: #EA660C;
    transition: background-size .3s;
}

html a:hover, html a:focus {
  background-size: 100% 2px;
}

a:hover {
    text-decoration: none;
}

/* to add background colour and change text colour of codes in text and not in chunks */
p code, li code {
    color: #000000; /* text colour of the in text code */
    background: #e0e0eb; /* background colour of the in text code */
    border-radius: 3px;
    padding: 0 3px;
    margin: 0 4px;
    word-wrap: break-word;
    letter-spacing: normal;
}

/* sticky table of content tab */
/* not pretty but this is only way to do it */
/* keep scrolling behvaiour in html to auto for lag free transition while using toc */
/* source: https://stackoverflow.com/questions/67323162/floating-toc-in-distill-for-r */ 

d-article {
    contain: none;
}

#TOC {
  position: fixed;
  z-index: 50;
  background: none;     
  left: 1.5em;
  top: 6em;
}


/* Hide the toc when resized to mobile or tablet:  480px, 768px, 900px */
@media screen and (max-width: 900px) {
#TOC {
    position: relative;
  }
}

/* next and previous buttons at the end of the article */

.btn {
  border: none;
  background-color: #000000;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
}

.button_round {border-radius: 12px;}

/* toc colour and size of header and list */
.d-toc {
 color: #000000;
 font-size: 0.8em;
 line-height: 1em;
}

/* output folding configurations */

/* Insert the following code in the code chunk to use it

<div class="fold o">
```{r}
  ...
```
</div> 

*/


.showopt {
  background-color: #301e64;
  color: #FFFFFF; 
  width: 100px;
  height: 20px;
  text-align: center;
  vertical-align: middle !important;
  float: right;
  font-family: sans-serif;
  border-radius: 8px;
}

.showopt:hover {
    background-color: #dfe4f2;
    color: #301e64;
}

pre.plot {
  background-color: white !important;
}

/* tweaking preview image in blog posts section*/

.thumbnail {
    padding: 0px!important;
    margin: 0px!important;
    max-width: 18%!important;
    height: auto!important;
    vertical-align: text-top!important;
    border-style: solid;
    border-color: black;
    border-width: 5px;
}

/* making code chunks with scroll bar */

/* the code below will change output chunk properties */
d-article pre { 
  border-radius: 5px; /* rounded chunk */
  font-size: 12px; /*output text size */
  color: black; /* output text colour */
  background-color: #F5F5F5; /* output chunk background colour */
  padding: 5px 5px 5px 18px; /* top,right,bottom,left padding values */
  overflow: auto !important; /* enable scroll bar */ 
}

/* the code below will change source code chunk properties */

d-article div.sourceCode pre { 
  border-radius: 5px;
  background-color: #F8F8FF;
  color: black;
  padding: 5px 5px 5px 18px;
  overflow: auto !important;
}