clean.scss

/*-- scss:defaults --*/

// Custom colours and variables

$jet: #131516;
$accent: #42709b;;
$accent2: #9a2515;
$highlight-colour: #75AADB;
// $accent2: #e64173;
$right-arrow: "\2192"; // Unicode character for right arrow

// fonts

/*
Note: This theme uses the Roboto font family, which it imports from Google
  Fonts to ensure consistent weighting in addition to availability. While
  you can use a local installation of Roboto, this is generally not 
  recommended since the weighting will likely be wrong (probably too
  light). OTOH, importing from Google Fonts can cause some issues in
  certain secure environments due the external CDN (see:
  https://github.com/grantmcdermott/quarto-revealjs-clean/issues/7). If
  that's the case for you, simply comment out the `@import url(...)` line
  below and it will default for the default Sans Serif font on your system
  (e.g., Helvetica on a Mac). Circling back to the earlier point about
  preserving consistent font weights, you may also wish to remove "Roboto"
  from the choice set if the family is installed locally.
*/
@import url(https://fonts.googleapis.com/css?family=Roboto:200,200i,300,300i,350,350i,400,400i);
$font-family-sans-serif: "Roboto", sans-serif !default;
$presentation-heading-font: "Roboto", sans-serif !default;
$presentation-heading-color: $jet !default;
$presentation-heading-font-weight: lighter;
$headings-font-family:        "Roboto", sans-serif !default;
$headings-font-weight:        lighter;
$headings-line-height:        1.2 !default;
$headings-color:              $jet !default;
//$presentation-heading-line-height: 2;
//$presentation-block-margin: 28px;
$presentation-font-size-root: 32px;

// colors
//$body-bg: #f0f1eb !default;
$body-color: $jet !default;
$link-color: $accent !default;
$selection-bg: #26351c !default;


/*-- scss:rules --*/

/*add padding around iconify social icons*/
.iconify-icon {
  padding-top: 30px;
  padding-left: 7px;
  padding-right: 7px;
  color: $accent;
}

.picture {
  border-radius: 50%;
  padding: 5pt;
  height: 50%;
  width: auto;
}

.reveal .v-center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70%;
  text-align: center;
}

.reveal .title img { 
  background:none;
  border:none;
  box-shadow:none;
  }

.reveal .slide div.aside {
  position: absolute; 
  bottom: 0px;
  left: 50px;
}

.reveal.center .slide div.aside {
  position: absolute; 
  bottom: 0px;
  left: 50px;
}

.reveal .caption {
  margin: auto;
  text-align: center;
}

.reveal a {
  line-height: 1.5em;
}

.reveal p {
  // font-weight: 300;
  font-weight: lighter;
  margin-top: 1.25em;
}

// title and headings

#title-slide {
  text-align: left;

  .title {
    color: $body-color;
    font-size: 1.4em;
    // font-weight: 350;
    font-weight: lighter;
  }
  
  .reveal .title-image {
    display: block !important;
    position: fixed !important;
    right: 10px !important;
    max-height: 15% !important;
    height: 100% !important;
    width: auto !important;
    color: $body-color !important;
  }

  .subtitle {
    color: $accent;
    font-style: italic;
    margin-top: 0em;
    font-weight: lighter;
  }

  .institute,
  .quarto-title-affiliation,
  .quarto-title-author-email {
    font-style: italic;
    // font-size: 80%;
    // color: #7F7F7F;
  }

  .author,
  .quarto-title-author-name {
    color: $body-color;
  }

  .quarto-title-authors {
    display: flex;
    justify-content: left;

    .quarto-title-author {
      padding-left: 1em;
      padding-right: 1em;
      width: 80%;
    }
  }

}


.reveal h2 {
  // font-weight: 350;
  font-weight: lighter;
  font-size: 1.4em;
}

.reveal h3 {
  color: $accent;
  font-style: italic;
  // font-weight: 350;
  font-weight: lighter;
  font-size: 0.95em;
}

.reveal h4 {
  color: $accent2;
  // font-weight: 350;
  font-weight: normal;
  margin-top: 1.25em;
}

// alerts etc.

.alert {
  color: $accent2;
}

.fg {
  color: var(--col, $jet);
}

.bg {
  background-color: var(--col, #fff);
  padding: 0.1em;
  border-radius: 5px;
  display: inline-block;
}

// lists

// Unordered lists

.reveal ul {
  // font-weight: 300;
  font-weight: lighter;
  padding-left: 16px;
  line-height: 1.5;

  li::marker {
    color: mix($accent, white, 70%);
  }
}

.reveal ul ul {
  list-style: none;

  li:before {
    content: $right-arrow;
    color: mix($accent, white, 60%);
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    margin-right: 0.5em;
  }
}

// Ordered lists

.reveal ol {
  // font-weight: 300;
  font-weight: lighter;
  padding-left: 16px;
  line-height: 1.5;

  li::marker {
    color: $accent;
  }
}

// Move "hamburger" menu button to top right

.reveal .slide-menu-button {
  position: fixed;
  left: 10px !important;
  bottom: 10px !important;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  pointer-events: none;
}

.reveal .slide-menu-button > * {
  pointer-events: auto;
}

// Logo
.reveal .slide-logo {
  display: block !important;
  position: fixed !important;
  top: 10px !important;
  right: 20px !important;
  max-height: 10% !important;
  height: 100% !important;
  width: auto !important;
  color: $body-color !important;
}

.reveal .slide-logo-title {
    visibility: hidden;
  }
  
.reveal .slide-logo > a[href*='title-slide'] {
  visibility: hidden;
}

.reveal .slide-logo > a[href*='closing'] {
  visibility: hidden;
}


// Slide number
.reveal .slide-number,
.reveal.has-logo .slide-number {
  bottom: 10px !important;
  right: 10px !important;
  top: unset !important;
  color: $body-color !important;
}

.reveal .slide-number > a[href*='title-slide'] {
  display: none;
}

// Same for chalkboard buttons (with an offset)

.reveal .slide-chalkboard-buttons {
  position: fixed;
  top: 12px;
  right: 24px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  pointer-events: none;
}

.reveal .slide-chalkboard-buttons > * {
  pointer-events: auto;
}

// Beamer-style button link environment

.button {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-color: $accent;
  border: 1px solid $accent;
  color: #fff !important;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}

.button:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

.button::before {
  content: "▶";
  margin-right: 5px;
}

// Special catch for etable environment to ensure these table images
// don't overflow the slide.
// See: https://lrberge.github.io/fixest/articles/etable_new_features.html

.etable {
  width: 100%;
  height: calc(100% - 3em); /* Adjust 3em based on the height of your header, if necessary */
  display: flex;
  align-items: center;
  justify-content: center;
}

.etable img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

code.sourceCode {
  font-size: 1.3em;
  /* or try font-size: xx-large; */
}