switch to new theme due to old theme not liking newer versions. New theme seems kick-arse, however
This commit is contained in:
Don Harper
parent
1909ea34ea
commit
e3ac8b96f5
531 changed files with 147790 additions and 66 deletions
378
themes/story/static/css/apron.less
Normal file
378
themes/story/static/css/apron.less
Normal file
|
|
@ -0,0 +1,378 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue