style.css

/*--------------- Fonts ----------------------*/

@import url('https://fonts.googleapis.com/css2?family=Fredoka&family=Nunito:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

/*-------------------------------------------*/
/*--------------- ... -----------------------*/

p.caption, .figcaption {
  font-family: 'Fredoka', sans-serif;
  color: #333333;
  margin-bottom: 2rem;
  font-style: italic;
}

p code {
  white-space: inherit;
}

pre {
  word-break: normal;
  word-wrap: normal;
}

pre code {
  white-space: inherit;
}

/*---------------------------------------------*/
/*--------------- Hero Image ------------------*/

/* next 3 rules are for setting large image at top of each page and pushing down the book content to appear beneath the image */

.hero-image-container {
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  width: 100%;
  height: 125px;
}

.hero-image {
  width: 100%;
  max-height: 125px;
  height: auto;
  object-fit: cover;
}

.page-inner {
  padding-top: 50px !important;
}

/*--------------------------------------------*/
/*---------------- Text ----------------------*/

h1 {
  font-family: 'Fredoka', sans-serif;
  color: #7E1CC4;
  font-weight: 700;
  size: 48px;
}

h2 {
  font-family: 'Fredoka', sans-serif;
  color: #1E1E1E;
  font-weight: 400;
  size: 36px;
  border-left: solid 4px;
  border-color: #FF9C77;
  padding-left: 11px !important;
}

h3 {
  font-family: 'Fredoka', sans-serif;
  color: #1E1E1E;
  font-weight: 400;
  size: 24px;
}

h4 {
  font-family: 'Fredoka', sans-serif;
  color: #1E1E1E;
  font-weight: 400;
  size: 18px;
}

p {
  font-family: 'Nunito', sans-serif;
  color: #1E1E1E;
  font-weight: 400;
  size: 18px;
}

.color-theme-2 * {
  color: #fffffa;
}

details, details summary {
  font-family: 'Nunito', sans-serif;
  color: #1E1E1E;
  font-weight: 400;
  size: 18px;
}

details summary {
  margin-bottom: 1rem;
}

summary::marker {
  color: #FF9C77;
}

summary strong {
  font-weight: 400 !important;
}

ul {
  font-family: 'Nunito', sans-serif;
  color: #1E1E1E;
  font-weight: 400;
  size: 18px;
}

ul li::marker {
  color: #FF9C77;
}

ol {
  font-family: 'Nunito', sans-serif;
  color: #1E1E1E;
  font-weight: 400;
  size: 18px;
}

.book .book-body .page-wrapper .page-inner section.normal blockquote {
  margin: 0 0 0.85em;
  padding: 0 15px;
  opacity: 0.75;
  border-left: 2px solid #FF9C77;
  color: #333333;
  font-family: 'Nunito', sans-serif;
}

.page-inner a {
  font-family: 'Nunito', sans-serif;
  color: #7E1CC4 !important;
  font-weight: 400;
  size: 18px;
}

::selection {
  background: #FFE5C4;
}

/*---------------------------------------------*/
/*--------------- Flip Pages ------------------*/

.fa-angle-left, .fa-angle-right {
  color: #FF9C77;
}

/*---------------------------------------------*/
/*--------------- Footer Line -----------------*/

.footer-line
{
  background: #FFE5C4 !important;
  height: 2px !important;
  margin-bottom: 2rem !important;
}

/*---------------------------------------------*/
/*-------------- Pander Table ----------------*/

.book .book-body .page-wrapper .page-inner section.normal table tr {
  font-family: 'Nunito', sans-serif;
  border-top: 2px solid #FFE5C4;
}

table caption {
  font-family: 'Nunito', sans-serif;
}

table tbody {
  border-bottom: 3px solid #FFE5C4;
}

.book .book-body .page-wrapper .page-inner section.normal table tr:nth-child(2n) {
  background-color: #FFFAF3;
}

td:first-child {
  min-width: 200px !important;
}

td {
  text-align: left;
}

/*---------------------------------------------*/
/*------------ Table of Contents --------------*/

/* all TOC list items, basically */
.book .book-summary ul.summary li a,
.book .book-summary ul.summary li span {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
  color: #1E1E1E;
}

.summary a:hover {
  color: #7E1CC4 !important;
}

.book .book-summary ul.summary li.active>a { /*active TOC links*/
  color: #7E1CC4 !important;
  font-weight: 700;
  border-left: solid 4px;
  border-color: #FF9C77;
  padding-left: 11px !important;
}

li.appendix span, li.part span { /* for TOC part names */
  margin-top: 1em;
  color: #1E1E1E;
  opacity: .9 !important;
  text-transform: uppercase;
}

.part + li[data-level=""] { /* grabs first .chapter immediately after .part...but only those ch without numbers */
 text-transform: uppercase;
}

/* The next two rules make the horizontal line go straight across in top navbar */

.summary > li:first-child {
	height: 50px;
	padding-top: 10px;
}

.book .book-summary ul.summary li.divider {
	height: 0px;
}

/*--------------------------------------------*/
/*--------------- Logo -----------------------*/

.toc-logo {
  object-fit: contain;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.toc-logo img {
  max-width: 100%;
  margin-bottom: 10px;
}

.summary > li:first-child {
  height: auto !important;
  padding-top: 40px;
}

/*
.toc-logo + .divider {
  border-top: 1px solid red;
}
*/

/*-------------------------------------------*/
/*--------------- Boxes ---------------------*/

div.tip, div.pitfall, div.objective, div.activity, div.tools {
  border: 4px #FF9C77;
  border-style: dashed solid;
  padding: 3rem 1rem 2rem;
  margin: 1em 0;
  padding-left: 100px;
  background-size: 70px;
  background-repeat: no-repeat;
  background-position: 15px 15px;
  min-height: 120px;
  background-color: #FFE5C4;
}

.color-theme-2 div.tip *, .color-theme-2 div.pitfall *, .color-theme-2 div.objective *, .color-theme-2 div.activity *, .color-theme-2 div.tools * {
  color: #1E1E1E;
}

div.tip {
  background-image: url("./images/tip.png");
}

div.pitfall {
  background-image: url("./images/pitfall.png");
}

div.objective {
  background-image: url("./images/objective.png");
}

div.activity {
  background-image: url("./images/activity.png");
}

div.tools {
  background-image: url("./images/tools.png");
}

div.intro, div.planning, div.hcd, div.wrangling, div.research, div.dev, div.share {
  border: 0px;
  border-style: dashed solid;
  padding: 0rem;
  margin: 4rem 0;
  padding-left: 27rem;
  background-size: 240px;
  background-repeat: no-repeat;
  background-position: 0rem;
  color: #7E1CC4;
}

div.intro {
  background-image: url("./images/homepage-illustration.png");
}

div.planning {
  background-image: url("./images/banner-planning-opt.png");
}

div.hcd {
  background-image: url("./images/banner-hcd-opt.png");
}

div.wrangling {
  background-image: url("./images/banner-wrangling-opt.png");
}

div.research {
  background-image: url("./images/banner-research-opt.png");
}

div.dev {
  background-image: url("./images/banner-dev-opt.png");
}

div.share {
  background-image: url("./images/banner-share-opt.png");
}

/*-------------------------------------------*/
/*-------------------------------------------*/

/* .book .book-body .page-wrapper .page-inner section.normal is needed
   to override the styles produced by gitbook, which are ridiculously
   overspecified. Goal of the selectors is to ensure internal "margins"
   controlled only by padding of container

.book .book-body .page-wrapper .page-inner section.normal div.rstudio-tip > :first-child,
.book .book-body .page-wrapper .page-inner section.normal div.tip > :first-child {
  margin-top: 0;
}

.book .book-body .page-wrapper .page-inner section.normal div.rstudio-tip > :last-child,
.book .book-body .page-wrapper .page-inner section.normal div.tip > :last-child {
  margin-bottom: 0;
}

iframe {
   -moz-transform-origin: top left;
   -webkit-transform-origin: top left;
   -o-transform-origin: top left;
   -ms-transform-origin: top left;
   transform-origin: top left;
}

.iframe-container {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: #ddd 2px solid;
  box-shadow: #888 0px 5px 8px;
  margin-bottom: 1em;
}

.iframe-container > iframe {
  border: none;
}

*/