Skip to content

Instantly share code, notes, and snippets.

@deepcharles

deepcharles/clean.scss

Created August 8, 2025 08:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save deepcharles/34659aa7365121a97e1ccf15992cc111 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save deepcharles/34659aa7365121a97e1ccf15992cc111 to your computer and use it in GitHub Desktop.
Download ZIP
(Slightly) Modified CSS file for `grantmcdermott/quarto-revealjs-clean` theme
Raw
clean.scss
/*-- scss:defaults --*/
// Custom colours and variables
$jet: #131516;
$accent: #107895;
$accent2: #9a2515;
// $accent2: #e64173;
$right-arrow: "\2192"; // Unicode character for right arrow
$lightblue: #3c74ce;
$darkblue: #1b3d74;
$orange: #f7932f;
// 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');
$font-family-sans-serif: "Roboto", sans-serif !default;
$presentation-heading-font: "Roboto", sans-serif !default;
$presentation-heading-color: $lightblue !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: $darkblue !default;
$link-color: $lightblue !default;
$selection-bg: $lightblue !default;
$code-color: $lightblue !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: $lightblue;
font-size: 1.4em;
// font-weight: 350;
font-weight: lighter;
}
.subtitle {
color: $lightblue;
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: $lightblue;
font-style: italic;
// font-weight: 350;
font-weight: lighter;
font-size: 0.95em;
}
.reveal h4 {
color: $orange;
// font-weight: 350;
font-weight: normal;
margin-top: 1.25em;
}
// alerts etc.
.alert {
color: $orange;
}
.fg {
color: var(--col, $darkblue);
}
.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($lightblue, white, 70%);
}
}
.reveal ul ul {
list-style: none;
li:before {
content: $right-arrow;
color: mix($lightblue, 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: $lightblue;
}
}
// 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: $lightblue;
border: 1px solid $lightblue;
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%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment