intial commit (forked from private repo)
This commit is contained in:
13
slides/_extensions/grantmcdermott/clean/_extension.yml
Normal file
13
slides/_extensions/grantmcdermott/clean/_extension.yml
Normal file
@ -0,0 +1,13 @@
|
||||
title: clean
|
||||
author: Grant McDermott
|
||||
version: 1.3.0
|
||||
quarto-required: ">=1.3.0"
|
||||
contributes:
|
||||
formats:
|
||||
revealjs:
|
||||
theme: [default, clean.scss]
|
||||
menu:
|
||||
side: left
|
||||
slide-number: true
|
||||
date-format: long
|
||||
|
||||
351
slides/_extensions/grantmcdermott/clean/clean.scss
Normal file
351
slides/_extensions/grantmcdermott/clean/clean.scss
Normal file
@ -0,0 +1,351 @@
|
||||
/*-- 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');
|
||||
|
||||
$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;
|
||||
//$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%;
|
||||
}
|
||||
Reference in New Issue
Block a user