Skip to content

Instantly share code, notes, and snippets.

@sbibauw

sbibauw/terra.css

Last active October 8, 2025 01:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sbibauw/ec7aa37b2c606dbb3951152df2da6be1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sbibauw/ec7aa37b2c606dbb3951152df2da6be1 to your computer and use it in GitHub Desktop.
Download ZIP
Theme for Marp, adapted from Gaia
Raw
terra.css
@charset "UTF-8";
/*!
* Marp / Marpit Terra theme, adapted from Gaia.
*
* @theme terra
* @author Yuki Hattori + Serge Bibauw
*
* @auto-scaling true
* @size 16:9 1280px 720px
*/
@import url("https://fonts.googleapis.com/css?family=Lato:400,700|Roboto+Mono:400,700&display=swap");
@import url("https://raw.githubusercontent.com/highlightjs/highlight.js/master/src/styles/sunburst.css");
svg[data-marp-fitting=svg] {
max-height: 580px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 1em 0 0 0;
}
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
font-weight: inherit;
}
h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em {
font-weight: normal;
font-style: normal;
}
h1 cite,
h2 cite,
h3 cite,
h4 cite,
h5 cite,
h6 cite {
font-weight: normal;
}
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.3em;
}
h4 {
font-size: 1.1em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 0.9em;
}
p,
blockquote {
margin: 1em 0 0 0;
}
ul > li,
ol > li {
margin: 0.5em 0 0 0;
}
ul > li > p,
ol > li > p {
margin: 0.9em 0 0 0;
}
code {
display: inline-block;
font-family: "Roboto Mono", monospace;
font-size: 0.8em;
letter-spacing: 0;
margin: -0.1em 0.15em;
padding: 0.1em 0.2em;
vertical-align: baseline;
}
pre {
display: block;
margin: 1em 0 0 0;
min-height: 1em;
overflow: visible;
}
pre code {
box-sizing: border-box;
margin: 0;
min-width: 100%;
padding: 0.5em;
font-size: 0.7em;
}
pre code svg[data-marp-fitting=svg] {
max-height: calc(580px - 1em);
}
blockquote {
margin: 1em 0 0 0;
padding: 0 1em;
position: relative;
}
blockquote::after, blockquote::before {
content: "“";
display: block;
font-family: "Times New Roman", serif;
font-weight: bold;
position: absolute;
}
blockquote::before {
top: 0;
left: 0;
}
blockquote::after {
right: 0;
bottom: 0;
transform: rotate(180deg);
}
blockquote > *:first-child {
margin-top: 0;
}
mark {
background: transparent;
}
table {
border-spacing: 0;
border-collapse: collapse;
margin: 1em 0 0 0;
}
table th,
table td {
padding: 0.2em 0.4em;
border-width: 1px;
border-style: solid;
}
section {
font-size: 30px;
font-family: "Roboto Condensed", "Roboto", "Lato", "Avenir Next", "Avenir", sans-serif;
height: 720px;
padding: 70px;
width: 1280px;
word-wrap: break-word;
}
section > *:first-child,
section > header:first-child + * {
margin-top: 0;
}
section {
color: #455a64;
background-color: #fff;
}
section a,
section mark {
color: #0288d1;
}
section code {
background: rgb(106.2, 123, 131);
color: #fff;
}
section h1 strong,
section h2 strong,
section h3 strong,
section h4 strong,
section h5 strong,
section h6 strong {
color: #0288d1;
}
section pre > code {
background: #455a64;
}
section header,
section footer,
section section::after,
section blockquote::before,
section blockquote::after {
color: rgb(106.2, 123, 131);
}
section table {
min-width: 65%;
margin-left: auto;
margin-right: auto;
}
section table th,
section table td {
border-color: #455a64;
}
section table thead th {
font-size: 1.1em;
text-align: left;
}
section table td,
section table th {
border-left: 0;
border-right: 0;
line-height: 1.5em;
vertical-align: top;
}
section.invert {
color: #fff;
background-color: #455a64;
}
section.invert a,
section.invert mark {
color: #81d4fa;
}
section.invert code {
background: rgb(217.8, 222, 224);
color: #455a64;
}
section.invert h1 strong,
section.invert h2 strong,
section.invert h3 strong,
section.invert h4 strong,
section.invert h5 strong,
section.invert h6 strong {
color: #81d4fa;
}
section.invert pre > code {
background: #fff;
}
section.invert header,
section.invert footer,
section.invert section::after,
section.invert blockquote::before,
section.invert blockquote::after {
color: rgb(217.8, 222, 224);
}
section.invert table {
min-width: 65%;
margin-left: auto;
margin-right: auto;
}
section.invert table th,
section.invert table td {
border-color: #fff;
}
section.invert table thead th {
font-size: 1.1em;
text-align: left;
}
section.invert table td,
section.invert table th {
border-left: 0;
border-right: 0;
line-height: 1.5em;
vertical-align: top;
}
section.gaia {
color: #fff;
background-color: #0288d1;
}
section.gaia a,
section.gaia mark {
color: #81d4fa;
}
section.gaia code {
background: rgb(204.4, 231.2, 245.8);
color: #0288d1;
}
section.gaia h1 strong,
section.gaia h2 strong,
section.gaia h3 strong,
section.gaia h4 strong,
section.gaia h5 strong,
section.gaia h6 strong {
color: #81d4fa;
}
section.gaia pre > code {
background: #fff;
}
section.gaia header,
section.gaia footer,
section.gaia section::after,
section.gaia blockquote::before,
section.gaia blockquote::after {
color: rgb(204.4, 231.2, 245.8);
}
section.gaia table {
min-width: 65%;
margin-left: auto;
margin-right: auto;
}
section.gaia table th,
section.gaia table td {
border-color: #fff;
}
section.gaia table thead th {
font-size: 1.1em;
text-align: left;
}
section.gaia table td,
section.gaia table th {
border-left: 0;
border-right: 0;
line-height: 1.5em;
vertical-align: top;
}
section.lead {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
}
section.lead h1,
section.lead h2,
section.lead h3,
section.lead h4,
section.lead h5,
section.lead h6 {
text-align: center;
}
section.lead h1 svg[data-marp-fitting=svg],
section.lead h2 svg[data-marp-fitting=svg],
section.lead h3 svg[data-marp-fitting=svg],
section.lead h4 svg[data-marp-fitting=svg],
section.lead h5 svg[data-marp-fitting=svg],
section.lead h6 svg[data-marp-fitting=svg] {
--preserve-aspect-ratio: xMidYMid meet;
}
section.lead p {
text-align: center;
}
section.lead blockquote > h1,
section.lead blockquote > h2,
section.lead blockquote > h3,
section.lead blockquote > h4,
section.lead blockquote > h5,
section.lead blockquote > h6,
section.lead blockquote > p {
text-align: left;
}
section.lead blockquote svg[data-marp-fitting=svg]:not([data-marp-fitting-math]) {
--preserve-aspect-ratio: xMinYMin meet;
}
section.lead ul > li > p,
section.lead ol > li > p {
text-align: left;
}
section.lead table {
margin-left: auto;
margin-right: auto;
}
section.nobullets ul {
list-style-type: none;
}
section.toc {
font-size: 38px;
padding-right: -40px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='1300px' height='900px'><text x='600' y='700' fill='lightgrey' fill-opacity='0.2' font-size='1100px'>꩜</text></svg>");
}
section.toc h1 {
font-size: 1.2em;
margin-left: auto;
margin-right: auto;
}
section.toc ul {
list-style-type: none;
margin-left: -0.7em;
}
section.toc strong {
color: #0288d1;
border-top: solid 2px;
border-bottom: solid 2px;
}
section.refs, section.refsXS, section.refs-xs, section.refsS, section.refs-sm {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='1300px' height='900px'><text x='600' y='800' fill='$color-tertiary' fill-opacity='0.2' font-size='1300px'>&amp;</text></svg>");
}
section.refs h1, section.refsXS h1, section.refs-xs h1, section.refsS h1, section.refs-sm h1 {
font-size: 1.2em;
}
section.refs ul, section.refsXS ul, section.refs-xs ul, section.refsS ul, section.refs-sm ul {
list-style-type: none;
padding: 0;
}
section.refs li, section.refsXS li, section.refs-xs li, section.refsS li, section.refs-sm li {
margin: 0.5em 0 0 2em;
text-indent: -2em;
line-height: 1em;
font-size: 0.95em;
}
section .slido {
padding: 0px;
}
section.refsS, section.refs-sm {
font-size: 20pt;
padding: 1.5em;
}
section.refsXS, section.refs-xs {
font-size: 16pt;
padding: 1.2em;
}
section.div {
font-size: 2.5em;
font-weight: bold;
color: #fff;
text-shadow: 0 0 50px #000;
}
section.sum {
background: linear-gradient(110deg, #fff, #aaa);
}
section.sm, section.reduced {
font-size: 28px;
padding-top: 1.5em;
}
section.xs {
font-size: 25px;
padding-top: 1em;
}
section samp {
font-style: italic;
color: #d1b302;
}
section abbr {
font-size: 0.9em;
border-bottom: 1px dotted;
}
section .vote {
background-color: rgba(1, 1, 1, 0.02);
border-left: solid 1px gray;
}
section ul.vote {
list-style-type: none;
}
section.hands ol li {
border: solid #ddd 1px;
border-radius: 0.4em;
padding: 0 0.4em 0.1em 0.4em;
}
section.hands ol li:nth-child(1) {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g transform="scale(1) translate(5, 10)" transform-origin="bottom"><path d="M75.64844,57.48425l.07782-.0249a1.48394,1.48394,0,0,1-.07782-.455,5.58031,5.58031,0,0,0-5.57422-5.57373H41.77832a5.574,5.574,0,1,0,0,11.14795h13.249a1.5,1.5,0,1,1,0,3h-13.249a8.53432,8.53432,0,0,1-5.8653-2.337,8.55193,8.55193,0,0,1-13.85687,4.3233v.58893a26.79615,26.79615,0,0,0,53.59229,0Z"/><path d="M70.07422,48.43066A8.53021,8.53021,0,0,1,75.64844,50.503V10.47656a5.574,5.574,0,1,0-11.14795,0v37.9541Z"/><path d="M22.05615,59.1792v1.88428a5.574,5.574,0,0,0,11.14795,0V41.96631a5.574,5.574,0,0,0-11.14795,0Z"/><path d="M36.2041,50.503a8.53019,8.53019,0,0,1,5.57422-2.07233h5.57422V41.96631a5.57422,5.57422,0,0,0-11.14844,0Z"/><path d="M50.35254,48.43066h11.148V41.96631a5.574,5.574,0,0,0-11.148,0Z"/></g></svg>');
}
section.hands ol li:nth-child(2) {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g transform="scale(1) translate(0, 5)" transform-origin="bottom"><path d="M79.05762,58.03876l.07776-.02491a1.48444,1.48444,0,0,1-.07776-.45477,5.454,5.454,0,0,0-5.44824-5.44775h-27.792a5.448,5.448,0,1,0,0,10.896H58.83057a1.5,1.5,0,0,1,0,3H45.81738a8.40769,8.40769,0,0,1-5.74609-2.27288,8.42852,8.42852,0,0,1-13.59815,4.25708v.51825a26.29224,26.29224,0,0,0,52.58448,0Z"/><path d="M68.38507,49.11133h5.22431a8.4048,8.4048,0,0,1,5.64239,2.1784l1.17987-38.10028a5.44652,5.44652,0,0,0-5.27685-5.61328A5.46564,5.46564,0,0,0,69.541,12.85254Z"/><path d="M52.32227,10.53613l1.72021,30.35346a8.41863,8.41863,0,0,1,.22314,1.899v2.03827l.2428,4.28449h10.353l-1.6485-38.93457a5.44828,5.44828,0,1,0-10.89062.35937Z"/><path d="M26.47314,42.78857V61.54541a5.448,5.448,0,1,0,10.896,0V42.78857a5.448,5.448,0,0,0-10.896,0Z"/><path d="M40.36914,51.11328a8.40639,8.40639,0,0,1,5.44824-2.002h5.44824V42.78857a5.44824,5.44824,0,0,0-10.89648,0Z"/></g></svg>');
}
section.hands ol li:nth-child(3) {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g transform="scale(1) translate(0, 5)" transform-origin="bottom"><path d="M77.39453,10.64209a5.45754,5.45754,0,0,0-5.9248,4.94727l-3.31787,33.75h5.355A8.41491,8.41491,0,0,1,78.98157,51.362l3.3612-34.80389A5.46223,5.46223,0,0,0,77.39453,10.64209Z"/><path d="M78.96484,68.76416V58.27747l.078-.025a1.48337,1.48337,0,0,1-.078-.45514,5.46391,5.46391,0,0,0-5.458-5.458h-27.833a5.45825,5.45825,0,0,0,0,10.9165H58.70605a1.5,1.5,0,0,1,0,3H45.67383a8.41678,8.41678,0,0,1-5.75531-2.27777,8.43934,8.43934,0,0,1-13.61969,4.263v.52307a26.333,26.333,0,1,0,52.666,0Z"/><path d="M47.64355,11.42822A5.45892,5.45892,0,0,0,38.626,15.94678l2.402,34.79046a8.40441,8.40441,0,0,1,4.64581-1.39788h5.41272L49.5127,15.12451A5.407,5.407,0,0,0,47.64355,11.42822Z"/><path d="M65.0293,10.51025a5.4585,5.4585,0,1,0-10.917-.00146l.03815,38.83057H65.06689Z"/><path d="M26.29883,59.93652V61.79a5.4585,5.4585,0,1,0,10.917,0V43.00537a5.4585,5.4585,0,0,0-10.917,0Z"/></g></svg>');
}
section.hands ol li:nth-child(4) {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g transform="scale(1) translate(0, 5)" transform-origin="bottom"><path d="M77.68066,10.6333a5.44735,5.44735,0,0,0-5.91308,4.937L68.45471,49.26416H73.7998a8.40426,8.40426,0,0,1,5.46387,2.01648l3.35547-34.74353A5.451,5.451,0,0,0,77.68066,10.6333Z"/><path d="M37.97754,14.72852l2.28332,34.3706.40693,2.076a8.40651,8.40651,0,0,1,5.343-1.91095h5.37439L48.84375,13.94678a5.44715,5.44715,0,1,0-10.86621.78174Z"/><path d="M65.332,10.499a5.44727,5.44727,0,1,0-10.89453-.00146l.03906,38.7666H65.37061Z"/><path d="M21.78809,27.08887,26.64551,54.127a1.48578,1.48578,0,0,1-.00122.50263l.02466.004v14.027a26.28906,26.28906,0,1,0,52.57812,0V58.19086l.07776-.02491a1.48351,1.48351,0,0,1-.07776-.45452,5.4534,5.4534,0,0,0-5.44727-5.44727H46.01074a5.44727,5.44727,0,0,0,0,10.89453H59.02148a1.5,1.5,0,0,1,0,3H46.01074A8.44385,8.44385,0,0,1,38.2428,54.39661L32.48828,25.03809a5.44747,5.44747,0,1,0-10.70019,2.05078Z"/></g></svg>');
}
section.hands ol li:nth-child(5) {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g transform="scale(1) translate(0, 5)" transform-origin="left"><path d="M10.81836,26.97852l4.86426,27.08154a1.50823,1.50823,0,0,1,.02343.26514v14.291A26.33481,26.33481,0,0,0,68.1748,71.86133a1.50728,1.50728,0,0,1,.40821-.85742L89.125,49.65186a5.45847,5.45847,0,1,0-7.83887-7.59815L70.93945,52.51465a1.49986,1.49986,0,0,1-2.55957-1.19873L71.751,16.41016a5.45853,5.45853,0,0,0-10.874-.96827L57.46484,47.84717a1.50023,1.50023,0,0,1-2.99218-.15576L54.43652,10.3623a5.458,5.458,0,1,0-10.916-.00146l.03906,37.48486a1.49956,1.49956,0,0,1-1.5,1.50147,1.5174,1.5174,0,0,1-1.51465-1.38526L37.92285,13.82275a5.45865,5.45865,0,1,0-10.88965.77637l2.5293,35.76465a1.49972,1.49972,0,0,1-2.96777.394L21.541,24.92334a5.45892,5.45892,0,1,0-10.72266,2.05518Z"/></g></svg>');
}
section.hands ol li:nth-child(n+6) {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="darkred"><g transform="scale(.75) translate(10, 15)" transform-origin="left"><path d="M88.4541,41.10406l.07794-.0249a1.484,1.484,0,0,1-.07794-.45514,8.49763,8.49763,0,0,0-8.48828-8.48828H40.01123a8.48877,8.48877,0,0,0,0,16.97754h18.708a1.5,1.5,0,0,1,0,3h-18.708A11.454,11.454,0,0,1,31.366,48.16589,11.45921,11.45921,0,0,1,11.5459,54.06964v2.29755a38.4541,38.4541,0,0,0,76.9082,0Z"/><path d="M79.96582,9.46875A8.49888,8.49888,0,0,0,71.47705,17.958V29.13574h8.48877a11.44831,11.44831,0,0,1,8.48828,3.77411V17.958A8.49846,8.49846,0,0,0,79.96582,9.46875Z"/><path d="M11.5459,43.69531v2.66016a8.48853,8.48853,0,0,0,16.97705,0V23.8877a8.48853,8.48853,0,0,0-16.97705,0Z"/><path d="M40.01123,29.13574H48.5V17.7373a8.48853,8.48853,0,0,0-16.977,0V32.90985A11.44833,11.44833,0,0,1,40.01123,29.13574Z"/><path d="M68.47705,29.13574V13.53906a8.48853,8.48853,0,0,0-16.97705,0V29.13574Z"/></g></svg>');
}
section.hands ol li::marker {
font-size: 2.5em;
line-height: 0.1;
}
header,
footer,
section::after {
box-sizing: border-box;
font-size: 66%;
height: 70px;
line-height: 50px;
overflow: hidden;
padding: 10px 25px;
position: absolute;
}
header {
left: 0;
right: 0;
top: -20px;
height: 50px;
background-color: #bbb;
color: #fff;
font-variant: small-caps;
vertical-align: middle;
}
footer {
left: 0;
right: 0;
height: 110px;
text-align: right;
line-height: 1.25em;
bottom: 15px;
}
footer img {
vertical-align: middle;
}
section::after {
right: 0;
bottom: 0;
font-size: 80%;
}
cite {
font-style: normal;
font-size: 0.7em;
color: #999;
vertical-align: super;
}
cite::before {
content: "(";
}
cite::after {
content: ")";
}
.formula {
font-family: "Iosevka", monospace;
font-size: 0.83em;
color: #d1b302;
}
.cols2 {
column-count: 2;
}
.columns {
display: flex;
gap: 1rem;
}
.columns > div {
flex: 1 1 100%;
min-width: 0;
}
.gray {
color: #666;
}
.black {
color: #000;
}
.float {
float: right;
color: #666;
font-size: 0.9em;
}
.tab {
display: inline-block;
width: 400px;
}
video::-webkit-media-controls {
will-change: transform;
}
Raw
terra.scss
/*!
* Marp / Marpit Terra theme, adapted from Gaia.
*
* @theme terra
* @author Yuki Hattori + Serge Bibauw
*
* @auto-scaling true
* @size 16:9 1280px 720px
*/
@use 'sass:color';
$color-light: #fff;
$color-dark: #455a64;
$color-gray: #666;
$color-grey: #999;
$color-black: #000;
$color-primary: #0288d1;
$color-secondary: #81d4fa;
$color-tertiary: #d1b302;
$color-emphasis: #d10221;
@import url("https://fonts.googleapis.com/css?family=Lato:400,700|Roboto+Mono:400,700&display=swap");
@import url("https://raw.githubusercontent.com/highlightjs/highlight.js/master/src/styles/sunburst.css");
$bg: #fff !default;
$bg-header: #bbb;
@mixin color-scheme($bg, $text, $highlight) {
color: $text;
background-color: $bg;
a,
mark {
color: $highlight;
}
code {
background: color.mix($text, $bg, 80%);
color: $bg;
}
h1,
h2,
h3,
h4,
h5,
h6 {
strong {
color: $highlight;
}
}
pre > code {
background: $text;
}
header,
footer,
section::after,
blockquote::before,
blockquote::after {
color: color.mix($text, $bg, 80%);
}
table {
min-width: 65%;
margin-left: auto;
margin-right: auto;
th,
td {
border-color: $text;
}
thead th {
// color: $bg;
font-size: 1.1em;
text-align: left;
}
td,
th {
border-left: 0;
border-right: 0;
line-height: 1.5em;
vertical-align: top;
}
}
}
svg[data-marp-fitting="svg"] {
max-height: 580px; // Slide height - padding * 2
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 1em 0 0 0;
strong {
font-weight: inherit;
}
em {
font-weight: normal;
font-style: normal;
}
cite {
font-weight: normal;
}
}
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.3em;
}
h4 {
font-size: 1.1em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 0.9em;
}
p,
blockquote {
margin: 1em 0 0 0;
}
ul,
ol {
> li {
margin: 0.5em 0 0 0;
> p {
margin: 0.9em 0 0 0;
}
}
}
code {
display: inline-block;
font-family: "Roboto Mono", monospace;
font-size: 0.8em;
letter-spacing: 0;
margin: -0.1em 0.15em;
padding: 0.1em 0.2em;
vertical-align: baseline;
}
pre {
display: block;
margin: 1em 0 0 0;
min-height: 1em;
overflow: visible;
code {
box-sizing: border-box;
margin: 0;
min-width: 100%;
padding: 0.5em;
font-size: 0.7em;
svg[data-marp-fitting="svg"] {
max-height: calc(580px - 1em);
}
}
}
blockquote {
margin: 1em 0 0 0;
padding: 0 1em;
position: relative;
&::after,
&::before {
content: "“";
display: block;
font-family: "Times New Roman", serif;
font-weight: bold;
position: absolute;
}
&::before {
top: 0;
left: 0;
}
&::after {
right: 0;
bottom: 0;
transform: rotate(180deg);
}
> *:first-child {
margin-top: 0;
}
}
mark {
background: transparent;
}
table {
border-spacing: 0;
border-collapse: collapse;
margin: 1em 0 0 0;
th,
td {
padding: 0.2em 0.4em;
border-width: 1px;
border-style: solid;
}
}
section {
// background-image: linear-gradient( 135deg, rgba(#888, 0), rgba(#888, 0.02) 50%, rgba(#fff, 0) 50%, rgba(#fff, 0.05));
font-size: 30px;
font-family:
"Roboto Condensed", "Roboto", "Lato", "Avenir Next", "Avenir", sans-serif;
height: 720px;
// line-height: 1.35;
// letter-spacing: 1.25px;
padding: 70px;
width: 1280px;
word-wrap: break-word;
> *:first-child,
> header:first-child + * {
margin-top: 0;
}
@include color-scheme($color-light, $color-dark, $color-primary);
&.invert {
@include color-scheme($color-dark, $color-light, $color-secondary);
}
&.gaia {
@include color-scheme($color-primary, $color-light, $color-secondary);
}
&.lead {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
h1,
h2,
h3,
h4,
h5,
h6 {
text-align: center;
svg[data-marp-fitting="svg"] {
--preserve-aspect-ratio: xMidYMid meet;
}
}
p {
text-align: center;
}
blockquote {
> h1,
> h2,
> h3,
> h4,
> h5,
> h6,
> p {
text-align: left;
}
svg[data-marp-fitting="svg"]:not([data-marp-fitting-math]) {
--preserve-aspect-ratio: xMinYMin meet;
}
}
ul,
ol {
> li > p {
text-align: left;
}
}
table {
margin-left: auto;
margin-right: auto;
}
}
&.nobullets {
ul {
list-style-type: none;
}
}
// Style for repeated, internal "Table of contents/Structure" slide
&.toc {
font-size: 38px;
padding-right: -40px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='1300px' height='900px'><text x='600' y='700' fill='lightgrey' fill-opacity='0.2' font-size='1100px'>꩜</text></svg>");
h1 {
font-size: 1.2em;
margin-left: auto;
margin-right: auto;
}
ul {
list-style-type: none;
margin-left: -0.7em;
}
// ::before {
// content: "";
// position: absolute;
// top: 0px;
// right: 0px;
// bottom: 0px;
// left: 0px;
// opacity: 0.1;
// // background-image: url(../img/bg/drapes.jpg);
// opacity: 0.25;
// background-size: cover;
// }
strong {
color: $color-primary;
border-top: solid 2px;
border-bottom: solid 2px;
}
}
// Style for final "References" slide
&.refs {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='1300px' height='900px'><text x='600' y='800' fill='$color-tertiary' fill-opacity='0.2' font-size='1300px'>&amp;</text></svg>");
h1 {
font-size: 1.2em;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 0.5em 0 0 2em;
text-indent: -2em;
line-height: 1em;
font-size: 0.95em;
}
}
.slido {
padding: 0px;
}
&.refsS,
&.refs-sm {
@extend .refs;
font-size: 20pt;
padding: 1.5em;
}
&.refsXS,
&.refs-xs {
@extend .refs;
font-size: 16pt;
padding: 1.2em;
}
&.div {
font-size: 2.5em;
font-weight: bold;
color: #fff;
text-shadow: 0 0 50px #000;
}
&.sum {
background: linear-gradient(110deg, #fff, #aaa);
}
&.sm,
&.reduced {
font-size: 28px;
padding-top: 1.5em;
}
&.xs {
font-size: 25px;
padding-top: 1em;
}
samp {
font-style: italic;
color: #d1b302;
}
abbr {
font-size: 0.9em;
border-bottom: 1px dotted;
}
.vote {
background-color: rgb(1, 1, 1, 0.02);
border-left: solid 1px gray;
}
ul.vote {
list-style-type: none;
}
&.hands ol {
li {
border: solid #ddd 1px;
border-radius: 0.4em;
padding: 0 0.4em 0.1em 0.4em;
}
li:nth-child(1) {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g transform="scale(1) translate(5, 10)" transform-origin="bottom"><path d="M75.64844,57.48425l.07782-.0249a1.48394,1.48394,0,0,1-.07782-.455,5.58031,5.58031,0,0,0-5.57422-5.57373H41.77832a5.574,5.574,0,1,0,0,11.14795h13.249a1.5,1.5,0,1,1,0,3h-13.249a8.53432,8.53432,0,0,1-5.8653-2.337,8.55193,8.55193,0,0,1-13.85687,4.3233v.58893a26.79615,26.79615,0,0,0,53.59229,0Z"/><path d="M70.07422,48.43066A8.53021,8.53021,0,0,1,75.64844,50.503V10.47656a5.574,5.574,0,1,0-11.14795,0v37.9541Z"/><path d="M22.05615,59.1792v1.88428a5.574,5.574,0,0,0,11.14795,0V41.96631a5.574,5.574,0,0,0-11.14795,0Z"/><path d="M36.2041,50.503a8.53019,8.53019,0,0,1,5.57422-2.07233h5.57422V41.96631a5.57422,5.57422,0,0,0-11.14844,0Z"/><path d="M50.35254,48.43066h11.148V41.96631a5.574,5.574,0,0,0-11.148,0Z"/></g></svg>');
}
li:nth-child(2) {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g transform="scale(1) translate(0, 5)" transform-origin="bottom"><path d="M79.05762,58.03876l.07776-.02491a1.48444,1.48444,0,0,1-.07776-.45477,5.454,5.454,0,0,0-5.44824-5.44775h-27.792a5.448,5.448,0,1,0,0,10.896H58.83057a1.5,1.5,0,0,1,0,3H45.81738a8.40769,8.40769,0,0,1-5.74609-2.27288,8.42852,8.42852,0,0,1-13.59815,4.25708v.51825a26.29224,26.29224,0,0,0,52.58448,0Z"/><path d="M68.38507,49.11133h5.22431a8.4048,8.4048,0,0,1,5.64239,2.1784l1.17987-38.10028a5.44652,5.44652,0,0,0-5.27685-5.61328A5.46564,5.46564,0,0,0,69.541,12.85254Z"/><path d="M52.32227,10.53613l1.72021,30.35346a8.41863,8.41863,0,0,1,.22314,1.899v2.03827l.2428,4.28449h10.353l-1.6485-38.93457a5.44828,5.44828,0,1,0-10.89062.35937Z"/><path d="M26.47314,42.78857V61.54541a5.448,5.448,0,1,0,10.896,0V42.78857a5.448,5.448,0,0,0-10.896,0Z"/><path d="M40.36914,51.11328a8.40639,8.40639,0,0,1,5.44824-2.002h5.44824V42.78857a5.44824,5.44824,0,0,0-10.89648,0Z"/></g></svg>');
}
li:nth-child(3) {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g transform="scale(1) translate(0, 5)" transform-origin="bottom"><path d="M77.39453,10.64209a5.45754,5.45754,0,0,0-5.9248,4.94727l-3.31787,33.75h5.355A8.41491,8.41491,0,0,1,78.98157,51.362l3.3612-34.80389A5.46223,5.46223,0,0,0,77.39453,10.64209Z"/><path d="M78.96484,68.76416V58.27747l.078-.025a1.48337,1.48337,0,0,1-.078-.45514,5.46391,5.46391,0,0,0-5.458-5.458h-27.833a5.45825,5.45825,0,0,0,0,10.9165H58.70605a1.5,1.5,0,0,1,0,3H45.67383a8.41678,8.41678,0,0,1-5.75531-2.27777,8.43934,8.43934,0,0,1-13.61969,4.263v.52307a26.333,26.333,0,1,0,52.666,0Z"/><path d="M47.64355,11.42822A5.45892,5.45892,0,0,0,38.626,15.94678l2.402,34.79046a8.40441,8.40441,0,0,1,4.64581-1.39788h5.41272L49.5127,15.12451A5.407,5.407,0,0,0,47.64355,11.42822Z"/><path d="M65.0293,10.51025a5.4585,5.4585,0,1,0-10.917-.00146l.03815,38.83057H65.06689Z"/><path d="M26.29883,59.93652V61.79a5.4585,5.4585,0,1,0,10.917,0V43.00537a5.4585,5.4585,0,0,0-10.917,0Z"/></g></svg>');
}
li:nth-child(4) {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g transform="scale(1) translate(0, 5)" transform-origin="bottom"><path d="M77.68066,10.6333a5.44735,5.44735,0,0,0-5.91308,4.937L68.45471,49.26416H73.7998a8.40426,8.40426,0,0,1,5.46387,2.01648l3.35547-34.74353A5.451,5.451,0,0,0,77.68066,10.6333Z"/><path d="M37.97754,14.72852l2.28332,34.3706.40693,2.076a8.40651,8.40651,0,0,1,5.343-1.91095h5.37439L48.84375,13.94678a5.44715,5.44715,0,1,0-10.86621.78174Z"/><path d="M65.332,10.499a5.44727,5.44727,0,1,0-10.89453-.00146l.03906,38.7666H65.37061Z"/><path d="M21.78809,27.08887,26.64551,54.127a1.48578,1.48578,0,0,1-.00122.50263l.02466.004v14.027a26.28906,26.28906,0,1,0,52.57812,0V58.19086l.07776-.02491a1.48351,1.48351,0,0,1-.07776-.45452,5.4534,5.4534,0,0,0-5.44727-5.44727H46.01074a5.44727,5.44727,0,0,0,0,10.89453H59.02148a1.5,1.5,0,0,1,0,3H46.01074A8.44385,8.44385,0,0,1,38.2428,54.39661L32.48828,25.03809a5.44747,5.44747,0,1,0-10.70019,2.05078Z"/></g></svg>');
}
li:nth-child(5) {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g transform="scale(1) translate(0, 5)" transform-origin="left"><path d="M10.81836,26.97852l4.86426,27.08154a1.50823,1.50823,0,0,1,.02343.26514v14.291A26.33481,26.33481,0,0,0,68.1748,71.86133a1.50728,1.50728,0,0,1,.40821-.85742L89.125,49.65186a5.45847,5.45847,0,1,0-7.83887-7.59815L70.93945,52.51465a1.49986,1.49986,0,0,1-2.55957-1.19873L71.751,16.41016a5.45853,5.45853,0,0,0-10.874-.96827L57.46484,47.84717a1.50023,1.50023,0,0,1-2.99218-.15576L54.43652,10.3623a5.458,5.458,0,1,0-10.916-.00146l.03906,37.48486a1.49956,1.49956,0,0,1-1.5,1.50147,1.5174,1.5174,0,0,1-1.51465-1.38526L37.92285,13.82275a5.45865,5.45865,0,1,0-10.88965.77637l2.5293,35.76465a1.49972,1.49972,0,0,1-2.96777.394L21.541,24.92334a5.45892,5.45892,0,1,0-10.72266,2.05518Z"/></g></svg>');
}
li:nth-child(n + 6) {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="darkred"><g transform="scale(.75) translate(10, 15)" transform-origin="left"><path d="M88.4541,41.10406l.07794-.0249a1.484,1.484,0,0,1-.07794-.45514,8.49763,8.49763,0,0,0-8.48828-8.48828H40.01123a8.48877,8.48877,0,0,0,0,16.97754h18.708a1.5,1.5,0,0,1,0,3h-18.708A11.454,11.454,0,0,1,31.366,48.16589,11.45921,11.45921,0,0,1,11.5459,54.06964v2.29755a38.4541,38.4541,0,0,0,76.9082,0Z"/><path d="M79.96582,9.46875A8.49888,8.49888,0,0,0,71.47705,17.958V29.13574h8.48877a11.44831,11.44831,0,0,1,8.48828,3.77411V17.958A8.49846,8.49846,0,0,0,79.96582,9.46875Z"/><path d="M11.5459,43.69531v2.66016a8.48853,8.48853,0,0,0,16.97705,0V23.8877a8.48853,8.48853,0,0,0-16.97705,0Z"/><path d="M40.01123,29.13574H48.5V17.7373a8.48853,8.48853,0,0,0-16.977,0V32.90985A11.44833,11.44833,0,0,1,40.01123,29.13574Z"/><path d="M68.47705,29.13574V13.53906a8.48853,8.48853,0,0,0-16.97705,0V29.13574Z"/></g></svg>');
}
li::marker {
font-size: 2.5em;
line-height: 0.1;
}
}
}
header,
footer,
section::after {
box-sizing: border-box;
font-size: 66%;
height: 70px;
line-height: 50px;
overflow: hidden;
padding: 10px 25px;
position: absolute;
}
header {
left: 0;
right: 0;
// top: 0;
top: -20px;
height: 50px;
background-color: $bg-header;
color: $color-light;
font-variant: small-caps;
vertical-align: middle;
}
footer {
left: 0;
right: 0;
height: 110px;
text-align: right;
line-height: 1.25em;
bottom: 15px;
}
footer img {
vertical-align: middle;
}
section::after {
right: 0;
bottom: 0;
font-size: 80%;
}
cite {
font-style: normal;
font-size: 0.7em;
color: $color-grey;
vertical-align: super;
}
cite::before {
content: "(";
}
cite::after {
content: ")";
}
.formula {
font-family: "Iosevka", monospace;
font-size: 0.83em;
color: $color-tertiary;
}
.cols2 {
column-count: 2;
}
.columns {
display: flex;
gap: 1rem;
}
.columns > div {
flex: 1 1 100%;
min-width: 0;
}
.gray {
color: $color-gray;
}
.black {
color: $color-black;
}
.float {
float: right;
color: $color-gray;
font-size: 0.9em;
}
.tab {
display: inline-block;
width: 400px;
}
video::-webkit-media-controls {
will-change: transform;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment