Last active
June 9, 2023 05:32
-
-
Save sbibauw/ec7aa37b2c606dbb3951152df2da6be1 to your computer and use it in GitHub Desktop.
Theme for Marp, adapted from Gaia
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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; | |
| color: #455a64; | |
| background-color: #fff; | |
| } | |
| section > *:first-child, | |
| section > header:first-child + * { | |
| margin-top: 0; | |
| } | |
| section a, | |
| section mark { | |
| color: #0288d1; | |
| } | |
| section code { | |
| background: #6a7b83; | |
| 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: #6a7b83; | |
| } | |
| 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: #dadee0; | |
| 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: #dadee0; | |
| } | |
| 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: #cce7f6; | |
| 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: #cce7f6; | |
| } | |
| 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 { | |
| 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'>&</text></svg>"); | |
| } | |
| section.refs h1 { | |
| font-size: 1.2em; | |
| } | |
| section.refs ul { | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| section.refs li { | |
| margin: 0.5em 0 0 2em; | |
| text-indent: -2em; | |
| line-height: 1em; | |
| font-size: 0.95em; | |
| } | |
| section .slido { | |
| padding: 0px; | |
| } | |
| 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; | |
| } | |
| .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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! | |
| * Marp / Marpit Terra theme, adapted from Gaia. | |
| * | |
| * @theme terra | |
| * @author Yuki Hattori + Serge Bibauw | |
| * | |
| * @auto-scaling true | |
| * @size 16:9 1280px 720px | |
| */ | |
| $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: 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: 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: -.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'>&</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; | |
| } | |
| } | |
| 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; | |
| } | |
| .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