378 lines
8.9 KiB
Text
378 lines
8.9 KiB
Text
// Global variables.
|
|
@slide-height: 681px;
|
|
@abs-offsets: {
|
|
@default: {
|
|
left: 80px;
|
|
top: 20px;
|
|
header-top: 44px;
|
|
content-top: 136px;
|
|
}
|
|
@compact: {
|
|
left: 40px;
|
|
top: 20px;
|
|
header-top: 42px;
|
|
content-top: 136px;
|
|
}
|
|
@roomy: {
|
|
left: 80px;
|
|
top: 20px;
|
|
header-top: 52px;
|
|
content-top: 168px;
|
|
}
|
|
}
|
|
@type-scale: {
|
|
@default: {
|
|
h1: 3rem;
|
|
h2: 2.75rem;
|
|
h3: 2.5rem;
|
|
default: 2rem;
|
|
code: 1.5rem;
|
|
}
|
|
@compact: {
|
|
h1: 2.75rem;
|
|
h2: 2.5rem;
|
|
h3: 2.25rem;
|
|
default: 1.75rem;
|
|
code: 1.25rem;
|
|
}
|
|
@roomy: {
|
|
h1: 4rem;
|
|
h2: 3rem;
|
|
h3: 2.75rem;
|
|
default: 2.25rem;
|
|
code: 1.75rem;
|
|
}
|
|
@title: {
|
|
h1: 4rem;
|
|
h2: 3rem;
|
|
h3: 2.25rem;
|
|
}
|
|
}
|
|
|
|
// Counters the user's possible changes to default font sizes.
|
|
html {
|
|
font-size: 16px;
|
|
}
|
|
|
|
// Globals, resets, and fixes. Remark sets display:table and display:table-cell,
|
|
// apparently to make things like vertical-align:middle work. But those
|
|
// mess with a bunch of other things, and make them hard/impossible. An example
|
|
// is using column-count, which won't work except inside a display:block
|
|
// element. So I reset these things to undo what I consider Remark's hacks.
|
|
.remark-slide {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
// This fixes a RemarkJS print-to-pdf bug
|
|
@media print {
|
|
.remark-slide-scaler {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
transform: scale(1) !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
}
|
|
}
|
|
|
|
.remark-slide-content {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// Debug and debug grid, for help figuring out layouts and bugs.
|
|
&.debug * {
|
|
outline: 1px solid gold;
|
|
}
|
|
&.debug-white * {
|
|
outline: 1px solid white;
|
|
}
|
|
&.debug-black * {
|
|
outline: 1px solid black;
|
|
}
|
|
&.debug-grid {
|
|
background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII= ) repeat top left;
|
|
}
|
|
&.debug-grid-16 {
|
|
background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII= ) repeat top left;
|
|
}
|
|
&.debug-grid-8-solid {
|
|
background: white url( data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw== ) repeat top left;
|
|
}
|
|
&.debug-grid-16-solid {
|
|
background: white url( data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7 ) repeat top left;
|
|
}
|
|
|
|
// Type scale (font-size, line-height, etc) and slide sizing.
|
|
line-height: 1.25;
|
|
padding: @abs-offsets[@default][top] @abs-offsets[@default][left] 0 @abs-offsets[@default][left];
|
|
font-size: @type-scale[@default][default];
|
|
h1 { font-size: @type-scale[@default][h1]; }
|
|
h2 { font-size: @type-scale[@default][h2]; }
|
|
h3 { font-size: @type-scale[@default][h3]; }
|
|
pre, code, kbd, tt, samp {
|
|
font-size: @type-scale[@default][code];
|
|
line-height: 1.5;
|
|
}
|
|
|
|
&.compact {
|
|
padding: @abs-offsets[@compact][top] @abs-offsets[@compact][left] 0 @abs-offsets[@compact][left];
|
|
font-size: @type-scale[@compact][default];
|
|
h1 { font-size: @type-scale[@compact][h1]; }
|
|
h2 { font-size: @type-scale[@compact][h2]; }
|
|
h3 { font-size: @type-scale[@compact][h3]; }
|
|
pre, code, kbd, tt, samp {
|
|
font-size: @type-scale[@compact][code];
|
|
}
|
|
}
|
|
|
|
&.roomy {
|
|
padding: @abs-offsets[@roomy][top] @abs-offsets[@roomy][left] 0 @abs-offsets[@roomy][left];
|
|
font-size: @type-scale[@roomy][default];
|
|
h1 { font-size: @type-scale[@roomy][h1]; }
|
|
h2 { font-size: @type-scale[@roomy][h2]; }
|
|
h3 { font-size: @type-scale[@roomy][h3]; }
|
|
pre, code, kbd, tt, samp {
|
|
font-size: @type-scale[@roomy][code];
|
|
}
|
|
}
|
|
|
|
&.title {
|
|
h1 { font-size: @type-scale[@title][h1]; }
|
|
h2 { font-size: @type-scale[@title][h2]; }
|
|
h3 { font-size: @type-scale[@title][h3]; }
|
|
}
|
|
|
|
// Element styling
|
|
img {
|
|
max-width: 100%; // Images should never be bigger than their container.
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
table, .katex {
|
|
font-size: 85%;
|
|
}
|
|
|
|
// Layout Classes
|
|
|
|
// Layout: fullbleed. Simply removes Remark's built-in padding and margins.
|
|
&.fullbleed, &.fullbleed>p {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
// Layout: title, plus top/bottom variations, and shelf sizing.
|
|
// Designed for H1, plus optional H2 or H3 (but not both).
|
|
&.title {
|
|
text-align: center;
|
|
background-size: cover;
|
|
h1, h2, h3 {
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
margin: 0;
|
|
padding: 1em 0;
|
|
font-weight: normal;
|
|
}
|
|
h1 { top: calc(50% - 2.5em); }
|
|
h2 { top: calc(50% - 1.0em); }
|
|
h3 { top: calc(50% - 0.5em); }
|
|
&.top {
|
|
h1 { top: calc(@slide-height * 0.3 - 2.5em); }
|
|
h2 { top: calc(@slide-height * 0.3 - 1.0em); }
|
|
h3 { top: calc(@slide-height * 0.3 - 0.5em); }
|
|
}
|
|
&.bottom {
|
|
h1 { top: calc(@slide-height * 3/4 - 2.5em); }
|
|
h2 { top: calc(@slide-height * 3/4 - 1.0em); }
|
|
h3 { top: calc(@slide-height * 3/4 - 0.5em); }
|
|
}
|
|
&.shelf>h1 {
|
|
// The "shelf" class makes the H1 extend down far enough to form the background for
|
|
// the H2 or H3, with a negative bottom margin to extend beneath the H2/H3. This is
|
|
// better than giving each element a background color and placing them next to each
|
|
// other; that will let a thin slice of the slide background show through.
|
|
padding-bottom: 2.25em;
|
|
margin-bottom: -1.75em;
|
|
}
|
|
}
|
|
|
|
// Layout: img-caption. Content must begin with an image.
|
|
&.img-caption {
|
|
text-align: center;
|
|
padding-top: @slide-height * 0.8;
|
|
&>p:first-of-type {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
&>img {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 80%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Layout: img-right. The first image begins "columns."
|
|
&.img-right>p:first-of-type {
|
|
height: 100%;
|
|
float: right;
|
|
width: calc(50% - 1rem);
|
|
margin-left: 2rem;
|
|
margin-top: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
// Layout: img-left. The first image begins "columns."
|
|
&.img-left {
|
|
&>p:first-of-type {
|
|
height: 100%;
|
|
float: left;
|
|
width: calc(50% - 1rem);
|
|
margin-right: 2rem;
|
|
margin-top: 0px;
|
|
padding: 0px;
|
|
}
|
|
&>ul, &>ol, &>blockquote {
|
|
// Ensures bullets are indented.
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
// Layout: img-right-full. The first p>img fills the side of the slide.
|
|
// If you have "layout" content, ensure it has no <p> elements.
|
|
&.img-right-full {
|
|
padding-right: calc(40% + 2rem);
|
|
&>p:first-of-type {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
&>img {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
height: 100%;
|
|
width: 40%;
|
|
object-fit: cover;
|
|
object-position: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Layout: img-left-full. The first p>img fills the side of the slide.
|
|
// If you have "layout" content, ensure it has no <p> elements.
|
|
&.img-left-full {
|
|
padding-left: calc(40% + 2rem);
|
|
&>p:first-of-type {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
&>img {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
height: 100%;
|
|
width: 40%;
|
|
object-fit: cover;
|
|
object-position: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Layout: col-2 and col-3. Designed for use with an H1 heading.
|
|
.col() {
|
|
// If Firefox supported column-span: all I'd use that for the heading H1.
|
|
// I use a workaround instead: push the content down and put the H1 above it.
|
|
padding-top: @abs-offsets[@default][content-top];
|
|
&>h1:first-of-type {
|
|
position: absolute;
|
|
margin-top: 0px;
|
|
top: @abs-offsets[@default][header-top];
|
|
left: @abs-offsets[@default][left];
|
|
}
|
|
&.compact {
|
|
padding-top: @abs-offsets[@compact][content-top];
|
|
}
|
|
&.compact>h1:first-of-type {
|
|
top: @abs-offsets[@compact][header-top];
|
|
left: @abs-offsets[@compact][left];
|
|
}
|
|
&.roomy {
|
|
padding-top: @abs-offsets[@roomy][content-top];
|
|
}
|
|
&.roomy>h1:first-of-type {
|
|
top: @abs-offsets[@roomy][header-top];
|
|
left: @abs-offsets[@roomy][left];
|
|
}
|
|
// If the first columnized content has margin-top, vertical alignment is messy.
|
|
*:nth-child(2) {
|
|
margin-top: 0px;
|
|
}
|
|
&>ul, &>ol {
|
|
break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
column-gap: 1.5em; // Deliberately a relative measure
|
|
}
|
|
&.col-2 {
|
|
columns: 2;
|
|
.col();
|
|
}
|
|
&.col-3 {
|
|
columns: 3;
|
|
.col();
|
|
}
|
|
|
|
// Footer layout and positioning. TODO make the UL full width so it can have border.
|
|
// TODO make the UL possible to place at the top of the slide.
|
|
.remark-slide-number, .footer li {
|
|
font-size: 1.25rem;
|
|
display: block;
|
|
list-style: none;
|
|
position: absolute;
|
|
bottom: 12px;
|
|
height: 30px;
|
|
margin: 0px;
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
border: 1px solid rgba(0, 0, 0, 0);
|
|
}
|
|
.footer {
|
|
&, & ul {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
left: 0px;
|
|
height: 50px;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
li:nth-child(1) {
|
|
left: 20px;
|
|
}
|
|
li:nth-child(2) {
|
|
left: 50%;
|
|
margin-left: -50px; // assume the logo/content is about 100px
|
|
}
|
|
li img {
|
|
display: block;
|
|
max-height: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
&.no-footer {
|
|
.remark-slide-number, .footer {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|