clean.scss

/*-- scss:defaults --*/

// Custom colours and variables

$jet: #131516;
$accent: #107895;
$accent2: #9a2515;
// $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&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Fira+Mono:wght@400;500;700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* $font-family-sans-serif: "Roboto", sans-serif !default; */
/* $presentation-heading-font: "Roboto", sans-serif !default; */

$font-family-sans-serif: "Nunito", sans-serif !default;
$presentation-heading-font: "Nunito", sans-serif !default;

$presentation-heading-color: $jet !default;
$presentation-heading-font-weight: lighter;
//$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 --*/

.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;
  }

  .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: 0em;
      padding-right: 0em;
      width: 100%;
    }
  }

}


.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;

  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;

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

// Move "hamburger" menu button to top right

.reveal .slide-menu-button {
  position: fixed;
  top: 6px;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  pointer-events: none;
}

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

// 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;
}

// Logo to the bottom-left
.slide-logo {
  display: block !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 10px !important;
  max-width: 150px; // Adjust if necessary
  max-height: 50px;
  width: auto !important;
  color: $body-color !important;
}

// Also need to enforce slide numbers at bottom-right (if logo is present)
.slide-number, .reveal.has-logo .slide-number {
  bottom: 6px !important;
  right: 10px !important;
  top: unset !important;
  color: #777777 !important;
}

// 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;
}

// tables

.reveal table {
  // height: auto; /* Adjust table width to fit content up to the available slide space */
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.8em;
}

.reveal table th,
.reveal table td {
  border: none; /* Remove internal row lines */
  padding: .23em; /* Adjust padding as needed */
  text-align: left; /* Adjust text alignment as needed */
  font-weight: lighter; /* Lighter font weight for main table text */
}

/* Adds a bottom border to the table header row for distinction */
.reveal table thead th,
.reveal .slides table tr:last-child td,
.reveal .slides table {
  border-bottom: 2px solid #D3D3D3; /* Dark grey color for the bottom border */
}

/* Make column headers bold */
.reveal table thead th {
  font-weight: bold;
}

/* Styling table captions */
.reveal table caption {
  color: #666666; /* Dark grey color for the caption */
  font-variant: small-caps; /* Use small caps for the caption text */
}

// 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;
}

// Change the relative widths of `output-location: column`. 
// See: https://github.com/grantmcdermott/quarto-revealjs-clean/pull/16
// Example usage:
// ```{python}
// #| echo: true
// #| output-location: column
// #| classes: columns3070
// <code>
// ```
.reveal .columns3070 > div.column:first-child {
  width: 30%;
}
.reveal .columns3070 div.column:not(:first-child) {
  width: 70%;
}
.reveal .columns7030 > div.column:first-child {
  width: 70%;
}
.reveal .columns7030 div.column:not(:first-child) {
  width: 30%;
}
.reveal .columns4060 > div.column:first-child {
  width: 40%;
}
.reveal .columns4060 div.column:not(:first-child) {
  width: 60%;
}      
.reveal .columns6040 > div.column:first-child {
  width: 60%;
}
.reveal .columns6040 div.column:not(:first-child) {
  width: 40%;
}