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
98
themes/story/static/css/adirondack.css
Normal file
98
themes/story/static/css/adirondack.css
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
.remark-slide-content {
|
||||
font-family: 'Quattrocento Sans', -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, arial, sans-serif;
|
||||
}
|
||||
.remark-slide-content pre,
|
||||
.remark-slide-content code,
|
||||
.remark-slide-content kbd,
|
||||
.remark-slide-content tt,
|
||||
.remark-slide-content samp {
|
||||
font-family: Monaco, "Lucida Sans Typewriter", "Lucida Console", "Andale Mono", "Consolas", monospace;
|
||||
}
|
||||
.remark-slide-content h1,
|
||||
.remark-slide-content h2,
|
||||
.remark-slide-content h3 {
|
||||
font-family: Quattrocento, "Goudy Old Style", "Big Caslon", Palatino, serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
.remark-slide-content table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.remark-slide-content table tr:nth-child(2n) {
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
.remark-slide-content table th,
|
||||
.remark-slide-content table td {
|
||||
display: table-cell;
|
||||
vertical-align: inherit;
|
||||
padding: 0.15em 0.3em;
|
||||
border: 1px solid #dfe2e5;
|
||||
}
|
||||
.remark-slide-content table th {
|
||||
font-weight: bold;
|
||||
}
|
||||
.remark-slide-content pre {
|
||||
overflow: auto;
|
||||
}
|
||||
.remark-slide-content pre > code {
|
||||
border-radius: 0.4em;
|
||||
padding: 0.5em;
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
.remark-slide-content p > code,
|
||||
.remark-slide-content li > code,
|
||||
.remark-slide-content a > code {
|
||||
background-color: #f6f8fa;
|
||||
margin: 0;
|
||||
border-radius: 0.2em;
|
||||
padding: 0.15em 0.25em;
|
||||
}
|
||||
.remark-slide-content blockquote {
|
||||
margin: 0;
|
||||
padding: 0 0.5em;
|
||||
color: #6a737d;
|
||||
border-left: 0.125em solid #dfe2e5;
|
||||
}
|
||||
.remark-slide-content .remark-slide-number,
|
||||
.remark-slide-content .footer li {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.remark-slide-content.smokescreen > h1,
|
||||
.remark-slide-content img[src~=smokescreen] {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.remark-slide-content.smokescreen > h1,
|
||||
.remark-slide-content.smokescreen > h2,
|
||||
.remark-slide-content.smokescreen > h3 {
|
||||
color: white;
|
||||
text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8), 8px 8px 20px rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
@media print {
|
||||
.remark-slide-content.smokescreen {
|
||||
-webkit-print-color-adjust: exact;
|
||||
-webkit-filter: opacity(1);
|
||||
}
|
||||
}
|
||||
.remark-slide-content.fogscreen > h1 {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.remark-slide-content.fogscreen > h1,
|
||||
.remark-slide-content.fogscreen > h2,
|
||||
.remark-slide-content.fogscreen > h3 {
|
||||
color: black;
|
||||
text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5), 8px 8px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
@media print {
|
||||
.remark-slide-content.fogscreen {
|
||||
-webkit-print-color-adjust: exact;
|
||||
-webkit-filter: opacity(1);
|
||||
}
|
||||
}
|
||||
.remark-slide-content.fit-h1 h1 {
|
||||
height: 1.25em;
|
||||
overflow: hidden;
|
||||
}
|
||||
98
themes/story/static/css/adirondack.less
Normal file
98
themes/story/static/css/adirondack.less
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
@adirondack-colors: {
|
||||
muted-text: #6a737d;
|
||||
shaded-bg: #f6f8fa;
|
||||
border: #dfe2e5;
|
||||
}
|
||||
|
||||
.remark-slide-content {
|
||||
font-family: 'Quattrocento Sans',-apple-system, BlinkMacSystemFont,
|
||||
'avenir next', avenir, 'helvetica neue', helvetica,
|
||||
arial, sans-serif;
|
||||
pre, code, kbd, tt, samp {
|
||||
font-family: Monaco, "Lucida Sans Typewriter", "Lucida Console",
|
||||
"Andale Mono", "Consolas", monospace;
|
||||
}
|
||||
h1, h2, h3 {
|
||||
font-family: Quattrocento, "Goudy Old Style", "Big Caslon", Palatino, serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
table tr:nth-child(2n) {
|
||||
background-color: @adirondack-colors[shaded-bg];
|
||||
}
|
||||
table th, table td {
|
||||
display: table-cell;
|
||||
vertical-align: inherit;
|
||||
padding: 0.15em 0.30em;
|
||||
border: 1px solid @adirondack-colors[border];
|
||||
}
|
||||
table th {
|
||||
font-weight: bold;
|
||||
}
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
pre > code {
|
||||
border-radius: 0.4em;
|
||||
padding: 0.5em;
|
||||
background-color: @adirondack-colors[shaded-bg];
|
||||
}
|
||||
p>code, li>code, a>code {
|
||||
background-color: @adirondack-colors[shaded-bg];
|
||||
margin: 0;
|
||||
border-radius: 0.2em;
|
||||
padding: 0.15em 0.25em;
|
||||
}
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding: 0 0.5em;
|
||||
color: @adirondack-colors[muted-text];
|
||||
border-left: 0.125em solid @adirondack-colors[border];
|
||||
}
|
||||
|
||||
.remark-slide-number, .footer li {
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
// Smokescreen and fogscreen for the title layout
|
||||
&.smokescreen>h1, img[src~=smokescreen] {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
&.smokescreen {
|
||||
>h1, >h2, >h3 {
|
||||
color: white;
|
||||
text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8),
|
||||
8px 8px 20px rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
@media print {
|
||||
-webkit-print-color-adjust: exact;
|
||||
-webkit-filter: opacity(1);
|
||||
}
|
||||
}
|
||||
&.fogscreen {
|
||||
>h1 {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
>h1, >h2, >h3 {
|
||||
color: black;
|
||||
text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5),
|
||||
8px 8px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
@media print {
|
||||
-webkit-print-color-adjust: exact;
|
||||
-webkit-filter: opacity(1);
|
||||
}
|
||||
}
|
||||
&.fit-h1 h1 {
|
||||
height: 1.25em;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
354
themes/story/static/css/apron.css
Normal file
354
themes/story/static/css/apron.css
Normal file
|
|
@ -0,0 +1,354 @@
|
|||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
.remark-slide {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
@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%;
|
||||
line-height: 1.25;
|
||||
padding: 20px 80px 0 80px;
|
||||
font-size: 2rem;
|
||||
}
|
||||
.remark-slide-content * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.remark-slide-content.debug * {
|
||||
outline: 1px solid gold;
|
||||
}
|
||||
.remark-slide-content.debug-white * {
|
||||
outline: 1px solid white;
|
||||
}
|
||||
.remark-slide-content.debug-black * {
|
||||
outline: 1px solid black;
|
||||
}
|
||||
.remark-slide-content.debug-grid {
|
||||
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII= ) repeat top left;
|
||||
}
|
||||
.remark-slide-content.debug-grid-16 {
|
||||
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII= ) repeat top left;
|
||||
}
|
||||
.remark-slide-content.debug-grid-8-solid {
|
||||
background: white url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw== ) repeat top left;
|
||||
}
|
||||
.remark-slide-content.debug-grid-16-solid {
|
||||
background: white url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7 ) repeat top left;
|
||||
}
|
||||
.remark-slide-content h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.remark-slide-content h2 {
|
||||
font-size: 2.75rem;
|
||||
}
|
||||
.remark-slide-content h3 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.remark-slide-content pre,
|
||||
.remark-slide-content code,
|
||||
.remark-slide-content kbd,
|
||||
.remark-slide-content tt,
|
||||
.remark-slide-content samp {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.remark-slide-content.compact {
|
||||
padding: 20px 40px 0 40px;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
.remark-slide-content.compact h1 {
|
||||
font-size: 2.75rem;
|
||||
}
|
||||
.remark-slide-content.compact h2 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.remark-slide-content.compact h3 {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
.remark-slide-content.compact pre,
|
||||
.remark-slide-content.compact code,
|
||||
.remark-slide-content.compact kbd,
|
||||
.remark-slide-content.compact tt,
|
||||
.remark-slide-content.compact samp {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.remark-slide-content.roomy {
|
||||
padding: 20px 80px 0 80px;
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
.remark-slide-content.roomy h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
.remark-slide-content.roomy h2 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.remark-slide-content.roomy h3 {
|
||||
font-size: 2.75rem;
|
||||
}
|
||||
.remark-slide-content.roomy pre,
|
||||
.remark-slide-content.roomy code,
|
||||
.remark-slide-content.roomy kbd,
|
||||
.remark-slide-content.roomy tt,
|
||||
.remark-slide-content.roomy samp {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
.remark-slide-content.title h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
.remark-slide-content.title h2 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.remark-slide-content.title h3 {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
.remark-slide-content img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.remark-slide-content h1,
|
||||
.remark-slide-content h2,
|
||||
.remark-slide-content h3 {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.remark-slide-content table,
|
||||
.remark-slide-content .katex {
|
||||
font-size: 85%;
|
||||
}
|
||||
.remark-slide-content.fullbleed,
|
||||
.remark-slide-content.fullbleed > p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.remark-slide-content.title {
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.remark-slide-content.title h1,
|
||||
.remark-slide-content.title h2,
|
||||
.remark-slide-content.title h3 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 1em 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
.remark-slide-content.title h1 {
|
||||
top: calc(50% - 2.5em);
|
||||
}
|
||||
.remark-slide-content.title h2 {
|
||||
top: calc(50% - 1em);
|
||||
}
|
||||
.remark-slide-content.title h3 {
|
||||
top: calc(50% - 0.5em);
|
||||
}
|
||||
.remark-slide-content.title.top h1 {
|
||||
top: calc(681px * 0.3 - 2.5em);
|
||||
}
|
||||
.remark-slide-content.title.top h2 {
|
||||
top: calc(681px * 0.3 - 1em);
|
||||
}
|
||||
.remark-slide-content.title.top h3 {
|
||||
top: calc(681px * 0.3 - 0.5em);
|
||||
}
|
||||
.remark-slide-content.title.bottom h1 {
|
||||
top: calc(681px * 3/4 - 2.5em);
|
||||
}
|
||||
.remark-slide-content.title.bottom h2 {
|
||||
top: calc(681px * 3/4 - 1em);
|
||||
}
|
||||
.remark-slide-content.title.bottom h3 {
|
||||
top: calc(681px * 3/4 - 0.5em);
|
||||
}
|
||||
.remark-slide-content.title.shelf > h1 {
|
||||
padding-bottom: 2.25em;
|
||||
margin-bottom: -1.75em;
|
||||
}
|
||||
.remark-slide-content.img-caption {
|
||||
text-align: center;
|
||||
padding-top: 544.8px;
|
||||
}
|
||||
.remark-slide-content.img-caption > p:first-of-type {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.remark-slide-content.img-caption > p:first-of-type > img {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.remark-slide-content.img-right > p:first-of-type {
|
||||
height: 100%;
|
||||
float: right;
|
||||
width: calc(50% - 1rem);
|
||||
margin-left: 2rem;
|
||||
margin-top: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.remark-slide-content.img-left > p:first-of-type {
|
||||
height: 100%;
|
||||
float: left;
|
||||
width: calc(50% - 1rem);
|
||||
margin-right: 2rem;
|
||||
margin-top: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.remark-slide-content.img-left > ul,
|
||||
.remark-slide-content.img-left > ol,
|
||||
.remark-slide-content.img-left > blockquote {
|
||||
overflow: auto;
|
||||
}
|
||||
.remark-slide-content.img-right-full {
|
||||
padding-right: calc(40% + 2rem);
|
||||
}
|
||||
.remark-slide-content.img-right-full > p:first-of-type {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.remark-slide-content.img-right-full > p:first-of-type > img {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
height: 100%;
|
||||
width: 40%;
|
||||
object-fit: cover;
|
||||
object-position: left;
|
||||
}
|
||||
.remark-slide-content.img-left-full {
|
||||
padding-left: calc(40% + 2rem);
|
||||
}
|
||||
.remark-slide-content.img-left-full > p:first-of-type {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.remark-slide-content.img-left-full > p:first-of-type > img {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
width: 40%;
|
||||
object-fit: cover;
|
||||
object-position: right;
|
||||
}
|
||||
.remark-slide-content.col-2 {
|
||||
columns: 2;
|
||||
padding-top: 136px;
|
||||
column-gap: 1.5em;
|
||||
}
|
||||
.remark-slide-content.col-2 > h1:first-of-type {
|
||||
position: absolute;
|
||||
margin-top: 0px;
|
||||
top: 44px;
|
||||
left: 80px;
|
||||
}
|
||||
.remark-slide-content.col-2.compact {
|
||||
padding-top: 136px;
|
||||
}
|
||||
.remark-slide-content.col-2.compact > h1:first-of-type {
|
||||
top: 42px;
|
||||
left: 40px;
|
||||
}
|
||||
.remark-slide-content.col-2.roomy {
|
||||
padding-top: 168px;
|
||||
}
|
||||
.remark-slide-content.col-2.roomy > h1:first-of-type {
|
||||
top: 52px;
|
||||
left: 80px;
|
||||
}
|
||||
.remark-slide-content.col-2 *:nth-child(2) {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.remark-slide-content.col-2 > ul,
|
||||
.remark-slide-content.col-2 > ol {
|
||||
break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
.remark-slide-content.col-3 {
|
||||
columns: 3;
|
||||
padding-top: 136px;
|
||||
column-gap: 1.5em;
|
||||
}
|
||||
.remark-slide-content.col-3 > h1:first-of-type {
|
||||
position: absolute;
|
||||
margin-top: 0px;
|
||||
top: 44px;
|
||||
left: 80px;
|
||||
}
|
||||
.remark-slide-content.col-3.compact {
|
||||
padding-top: 136px;
|
||||
}
|
||||
.remark-slide-content.col-3.compact > h1:first-of-type {
|
||||
top: 42px;
|
||||
left: 40px;
|
||||
}
|
||||
.remark-slide-content.col-3.roomy {
|
||||
padding-top: 168px;
|
||||
}
|
||||
.remark-slide-content.col-3.roomy > h1:first-of-type {
|
||||
top: 52px;
|
||||
left: 80px;
|
||||
}
|
||||
.remark-slide-content.col-3 *:nth-child(2) {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.remark-slide-content.col-3 > ul,
|
||||
.remark-slide-content.col-3 > ol {
|
||||
break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
.remark-slide-content .remark-slide-number,
|
||||
.remark-slide-content .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);
|
||||
}
|
||||
.remark-slide-content .footer,
|
||||
.remark-slide-content .footer ul {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
height: 50px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.remark-slide-content .footer li:nth-child(1) {
|
||||
left: 20px;
|
||||
}
|
||||
.remark-slide-content .footer li:nth-child(2) {
|
||||
left: 50%;
|
||||
margin-left: -50px;
|
||||
}
|
||||
.remark-slide-content .footer li img {
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.remark-slide-content.no-footer .remark-slide-number,
|
||||
.remark-slide-content.no-footer .footer {
|
||||
display: none;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
11354
themes/story/static/css/descartes.css
Normal file
11354
themes/story/static/css/descartes.css
Normal file
File diff suppressed because it is too large
Load diff
355
themes/story/static/css/descartes.less
Normal file
355
themes/story/static/css/descartes.less
Normal file
|
|
@ -0,0 +1,355 @@
|
|||
@sides: {
|
||||
t: -top;
|
||||
r: -right;
|
||||
b: -bottom;
|
||||
l: -left;
|
||||
}
|
||||
|
||||
@border-lengths: {
|
||||
-0: 0;
|
||||
-1: .125rem;
|
||||
-2: .25rem;
|
||||
-3: .5rem;
|
||||
-4: 1rem;
|
||||
-5: 2rem;
|
||||
-100pct: 100%;
|
||||
}
|
||||
|
||||
@box-lengths: {
|
||||
-0: 0;
|
||||
-1: 1rem;
|
||||
-2: 2rem;
|
||||
-3: 4rem;
|
||||
-4: 8rem;
|
||||
-5: 16rem;
|
||||
-6: 32rem;
|
||||
-7: 48rem;
|
||||
-8: 64rem;
|
||||
-9: 96rem;
|
||||
-10pct: 10%;
|
||||
-20pct: 20%;
|
||||
-30pct: 30%;
|
||||
-33pct: 33%;
|
||||
-34pct: 34%;
|
||||
-40pct: 40%;
|
||||
-50pct: 50%;
|
||||
-60pct: 60%;
|
||||
-70pct: 70%;
|
||||
-75pct: 75%;
|
||||
-80pct: 80%;
|
||||
-90pct: 90%;
|
||||
-100pct: 100%;
|
||||
-1-12th: 100%/12;
|
||||
-2-12th: 200%/12;
|
||||
-3-12th: 300%/12;
|
||||
-4-12th: 400%/12;
|
||||
-5-12th: 500%/12;
|
||||
-6-12th: 600%/12;
|
||||
-7-12th: 700%/12;
|
||||
-8-12th: 800%/12;
|
||||
-9-12th: 900%/12;
|
||||
-10-12th: 1000%/12;
|
||||
-11-12th: 1100%/12;
|
||||
-third: 100%/3;
|
||||
-two-thirds: 200%/3;
|
||||
}
|
||||
|
||||
@spacing-lengths: {
|
||||
-0: 0;
|
||||
-1: .25rem;
|
||||
-2: .5rem;
|
||||
-3: 1rem;
|
||||
-4: 2rem;
|
||||
-5: 4rem;
|
||||
-6: 8rem;
|
||||
-7: 16rem;
|
||||
-8: 32rem;
|
||||
-9: 64rem;
|
||||
}
|
||||
|
||||
// https://drafts.csswg.org/css-color/#named-colors
|
||||
@named-colors: {
|
||||
aliceblue: #F0F8FF;
|
||||
antiquewhite: #FAEBD7;
|
||||
aqua: #00FFFF;
|
||||
aquamarine: #7FFFD4;
|
||||
azure: #F0FFFF;
|
||||
beige: #F5F5DC;
|
||||
bisque: #FFE4C4;
|
||||
black: #000000;
|
||||
blanchedalmond: #FFEBCD;
|
||||
blue: #0000FF;
|
||||
blueviolet: #8A2BE2;
|
||||
brown: #A52A2A;
|
||||
burlywood: #DEB887;
|
||||
cadetblue: #5F9EA0;
|
||||
chartreuse: #7FFF00;
|
||||
chocolate: #D2691E;
|
||||
coral: #FF7F50;
|
||||
cornflowerblue: #6495ED;
|
||||
cornsilk: #FFF8DC;
|
||||
crimson: #DC143C;
|
||||
cyan: #00FFFF;
|
||||
darkblue: #00008B;
|
||||
darkcyan: #008B8B;
|
||||
darkgoldenrod: #B8860B;
|
||||
darkgray: #A9A9A9;
|
||||
darkgreen: #006400;
|
||||
darkgrey: #A9A9A9;
|
||||
darkkhaki: #BDB76B;
|
||||
darkmagenta: #8B008B;
|
||||
darkolivegreen: #556B2F;
|
||||
darkorange: #FF8C00;
|
||||
darkorchid: #9932CC;
|
||||
darkred: #8B0000;
|
||||
darksalmon: #E9967A;
|
||||
darkseagreen: #8FBC8F;
|
||||
darkslateblue: #483D8B;
|
||||
darkslategray: #2F4F4F;
|
||||
darkslategrey: #2F4F4F;
|
||||
darkturquoise: #00CED1;
|
||||
darkviolet: #9400D3;
|
||||
deeppink: #FF1493;
|
||||
deepskyblue: #00BFFF;
|
||||
dimgray: #696969;
|
||||
dimgrey: #696969;
|
||||
dodgerblue: #1E90FF;
|
||||
firebrick: #B22222;
|
||||
floralwhite: #FFFAF0;
|
||||
forestgreen: #228B22;
|
||||
fuchsia: #FF00FF;
|
||||
gainsboro: #DCDCDC;
|
||||
ghostwhite: #F8F8FF;
|
||||
gold: #FFD700;
|
||||
goldenrod: #DAA520;
|
||||
gray: #808080;
|
||||
green: #008000;
|
||||
greenyellow: #ADFF2F;
|
||||
grey: #808080;
|
||||
honeydew: #F0FFF0;
|
||||
hotpink: #FF69B4;
|
||||
indianred: #CD5C5C;
|
||||
indigo: #4B0082;
|
||||
ivory: #FFFFF0;
|
||||
khaki: #F0E68C;
|
||||
lavender: #E6E6FA;
|
||||
lavenderblush: #FFF0F5;
|
||||
lawngreen: #7CFC00;
|
||||
lemonchiffon: #FFFACD;
|
||||
lightblue: #ADD8E6;
|
||||
lightcoral: #F08080;
|
||||
lightcyan: #E0FFFF;
|
||||
lightgoldenrodyellow: #FAFAD2;
|
||||
lightgray: #D3D3D3;
|
||||
lightgreen: #90EE90;
|
||||
lightgrey: #D3D3D3;
|
||||
lightpink: #FFB6C1;
|
||||
lightsalmon: #FFA07A;
|
||||
lightseagreen: #20B2AA;
|
||||
lightskyblue: #87CEFA;
|
||||
lightslategray: #778899;
|
||||
lightslategrey: #778899;
|
||||
lightsteelblue: #B0C4DE;
|
||||
lightyellow: #FFFFE0;
|
||||
lime: #00FF00;
|
||||
limegreen: #32CD32;
|
||||
linen: #FAF0E6;
|
||||
magenta: #FF00FF;
|
||||
maroon: #800000;
|
||||
mediumaquamarine: #66CDAA;
|
||||
mediumblue: #0000CD;
|
||||
mediumorchid: #BA55D3;
|
||||
mediumpurple: #9370DB;
|
||||
mediumseagreen: #3CB371;
|
||||
mediumslateblue: #7B68EE;
|
||||
mediumspringgreen: #00FA9A;
|
||||
mediumturquoise: #48D1CC;
|
||||
mediumvioletred: #C71585;
|
||||
midnightblue: #191970;
|
||||
mintcream: #F5FFFA;
|
||||
mistyrose: #FFE4E1;
|
||||
moccasin: #FFE4B5;
|
||||
navajowhite: #FFDEAD;
|
||||
navy: #000080;
|
||||
oldlace: #FDF5E6;
|
||||
olive: #808000;
|
||||
olivedrab: #6B8E23;
|
||||
orange: #FFA500;
|
||||
orangered: #FF4500;
|
||||
orchid: #DA70D6;
|
||||
palegoldenrod: #EEE8AA;
|
||||
palegreen: #98FB98;
|
||||
paleturquoise: #AFEEEE;
|
||||
palevioletred: #DB7093;
|
||||
papayawhip: #FFEFD5;
|
||||
peachpuff: #FFDAB9;
|
||||
peru: #CD853F;
|
||||
pink: #FFC0CB;
|
||||
plum: #DDA0DD;
|
||||
powderblue: #B0E0E6;
|
||||
purple: #800080;
|
||||
rebeccapurple: #663399;
|
||||
red: #FF0000;
|
||||
rosybrown: #BC8F8F;
|
||||
royalblue: #4169E1;
|
||||
saddlebrown: #8B4513;
|
||||
salmon: #FA8072;
|
||||
sandybrown: #F4A460;
|
||||
seagreen: #2E8B57;
|
||||
seashell: #FFF5EE;
|
||||
sienna: #A0522D;
|
||||
silver: #C0C0C0;
|
||||
skyblue: #87CEEB;
|
||||
slateblue: #6A5ACD;
|
||||
slategray: #708090;
|
||||
slategrey: #708090;
|
||||
snow: #FFFAFA;
|
||||
springgreen: #00FF7F;
|
||||
steelblue: #4682B4;
|
||||
tan: #D2B48C;
|
||||
teal: #008080;
|
||||
thistle: #D8BFD8;
|
||||
tomato: #FF6347;
|
||||
turquoise: #40E0D0;
|
||||
violet: #EE82EE;
|
||||
wheat: #F5DEB3;
|
||||
white: #FFFFFF;
|
||||
whitesmoke: #F5F5F5;
|
||||
yellow: #FFFF00;
|
||||
yellowgreen: #9ACD32;
|
||||
}
|
||||
|
||||
@fifths: {
|
||||
-20pct: 80%;
|
||||
-40pct: 60%;
|
||||
-60pct: 40%;
|
||||
-80pct: 20%;
|
||||
}
|
||||
|
||||
// Text color, border color, background color, opacity
|
||||
.color-transparent, img[src~=color-transparent] { color: transparent; }
|
||||
.bg-transparent, img[src~=bg-transparent] { background-color: transparent; }
|
||||
.bc-transparent, img[src~=bc-transparent] { border-color: transparent; }
|
||||
.color(@name, @color) {
|
||||
.color-@{name}, img[src~="color-@{name}"] { color: @value; }
|
||||
each(@fifths, {
|
||||
.color-@{name}@{key}, img[src~="color-@{name}"] { color: fadeout(@color, @value); }
|
||||
});
|
||||
}
|
||||
.background-color(@name, @color) {
|
||||
.bg-@{name}, img[src~="bg-@{name}"] { background-color: @value; }
|
||||
each(@fifths, {
|
||||
.bg-@{name}@{key}, img[src~="bg-@{name}"] { background-color: fadeout(@color, @value); }
|
||||
});
|
||||
}
|
||||
.border-color(@name, @color) {
|
||||
.bc-@{name}, img[src~="bc-@{name}"] { border-color: @value; }
|
||||
each(@fifths, {
|
||||
.bc-@{name}@{key}, img[src~="bc-@{name}"] { border-color: fadeout(@color, @value); }
|
||||
});
|
||||
}
|
||||
each(@named-colors, {
|
||||
.color(@key, @value);
|
||||
.background-color(@key, @value);
|
||||
.border-color(@key, @value);
|
||||
});
|
||||
each(@fifths, {
|
||||
.opacity@{key}, img[src~="opacity-@{key}"] { opacity: 100%-@value; }
|
||||
});
|
||||
|
||||
// Border styles, widths, and radiuses
|
||||
.ba, img[src~=ba] { border: 1px solid; }
|
||||
.bn, img[src~=bn] { border: 0px none; }
|
||||
each(@sides, {
|
||||
.b@{key}, img[src~="b@{key}"] { border@{value}: 1px solid; }
|
||||
});
|
||||
each(@border-lengths, {
|
||||
.br@{key}, img[src~="br@{key}"] { border-radius: @value; }
|
||||
.bw@{key}, img[src~="bw@{key}"] { border-width: @value; }
|
||||
});
|
||||
|
||||
// Padding and margins
|
||||
each(@spacing-lengths, {
|
||||
.pa@{key}, img[src~="pa@{key}"] { padding: @value; }
|
||||
.pv@{key}, img[src~="pv@{key}"] { padding-top: @value; padding-bottom: @value; }
|
||||
.ph@{key}, img[src~="ph@{key}"] { padding-left: @value; padding-right: @value; }
|
||||
.ma@{key}, img[src~="ma@{key}"] { margin: @value; }
|
||||
.mv@{key}, img[src~="mv@{key}"] { margin-top: @value; margin-bottom: @value; }
|
||||
.mh@{key}, img[src~="mh@{key}"] { margin-left: @value; margin-right: @value; }
|
||||
});
|
||||
.spacing(@name, @side) {
|
||||
each(@spacing-lengths, {
|
||||
.p@{name}@{key}, img[src~="p@{name}@{key}"] { padding@{side}: @value; }
|
||||
.m@{name}@{key}, img[src~="m@{name}@{key}"] { margin@{side}: @value; }
|
||||
});
|
||||
}
|
||||
each(@sides, {
|
||||
.spacing(@key, @value);
|
||||
});
|
||||
|
||||
// Element widths, heights, and coordinates
|
||||
// Idle thought: combine with the inverse golden ratio, 2/(1+sqrt(5))
|
||||
each(@box-lengths, {
|
||||
.w@{key}, img[src~="w@{key}"] { width: @value; }
|
||||
.maxw@{key}, img[src~="maxw@{key}"] { max-width: @value; }
|
||||
.minw@{key}, img[src~="minw@{key}"] { min-width: @value; }
|
||||
.h@{key}, img[src~="h@{key}"] { height: @value; }
|
||||
.maxh@{key}, img[src~="maxh@{key}"] { max-height: @value; }
|
||||
.minh@{key}, img[src~="minh@{key}"] { min-height: @value; }
|
||||
.t@{key}, img[src~="t@{key}"] { top: @value; }
|
||||
.r@{key}, img[src~="r@{key}"] { right: @value; }
|
||||
.b@{key}, img[src~="b@{key}"] { bottom: @value; }
|
||||
.l@{key}, img[src~="l@{key}"] { left: @value; }
|
||||
// https://www.sitepoint.com/css-center-position-absolute-div/
|
||||
.w@{key}.center, img[src~="w@{key}"][src~=center] {
|
||||
left: 50%;
|
||||
margin-left: @value/-2;
|
||||
}
|
||||
});
|
||||
|
||||
// Element display styles, positioning, floating, etc
|
||||
.dn, img[src~=dn] { display: none; }
|
||||
.di, img[src~=di] { display: inline; }
|
||||
.db, img[src~=db] { display: block; }
|
||||
.dib, img[src~=dib] { display: inline-block; }
|
||||
|
||||
.fl, img[src~=fl] { float: left; }
|
||||
.fr, img[src~=fr] { float: right; }
|
||||
.fn, img[src~=fn] { float: none; }
|
||||
|
||||
img[src~=cf]:before,
|
||||
img[src~=cf]:after { content: " "; display: table; }
|
||||
img[src~=cf]:after { clear: both; }
|
||||
.cf, img[src~=cf] { *zoom: 1; }
|
||||
|
||||
.static, img[src~=static] { position: static; }
|
||||
.relative, img[src~=relative] { position: relative; }
|
||||
.absolute, img[src~=absolute] { position: absolute; }
|
||||
.fixed, img[src~=fixed] { position: fixed; }
|
||||
|
||||
.center, img[src~=center] { display: block; margin-left: auto; margin-right: auto; }
|
||||
|
||||
// Object-fitting and covering
|
||||
.ofc, img[src~=ofc] { object-fit: contain; }
|
||||
.ofv, img[src~=ofv] { object-fit: cover; }
|
||||
.opl, img[src~=opl] { object-position: left !important; }
|
||||
.opc, img[src~=opc] { object-position: center !important; }
|
||||
.opr, img[src~=opr] { object-position: right !important; }
|
||||
.opt, img[src~=opt] { object-position: top !important; }
|
||||
.opb, img[src~=opb] { object-position: bottom !important; }
|
||||
.oplt, img[src~=oplt] { object-position: left top !important; }
|
||||
.oplc, img[src~=oplc] { object-position: left center !important; }
|
||||
.oplb, img[src~=oplb] { object-position: left bottom !important; }
|
||||
.opct, img[src~=opct] { object-position: center top !important; }
|
||||
.opcc, img[src~=opcc] { object-position: center center !important; }
|
||||
.opcb, img[src~=opcb] { object-position: center bottom !important; }
|
||||
.oprt, img[src~=oprt] { object-position: right top !important; }
|
||||
.oprc, img[src~=oprc] { object-position: right center !important; }
|
||||
.oprb, img[src~=oprb] { object-position: right bottom !important; }
|
||||
|
||||
// Box shadows
|
||||
.shadow-1, img[src~=shadow-1] { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); }
|
||||
.shadow-2, img[src~=shadow-2] { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); }
|
||||
.shadow-3, img[src~=shadow-3] { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); }
|
||||
.shadow-4, img[src~=shadow-4] { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); }
|
||||
.shadow-5, img[src~=shadow-5] { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); }
|
||||
149
themes/story/static/css/monobloc.css
Normal file
149
themes/story/static/css/monobloc.css
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Heebo:300,400,500,700|Inconsolata');
|
||||
|
||||
|
||||
/* Global Styles */
|
||||
body {
|
||||
font-family: Heebo, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
.remark-slide-content h1, .remark-slide-content h2 {
|
||||
font-weight: 500;
|
||||
}
|
||||
.remark-slide-content p, .remark-slide-content li, .remark-slide-content td, .remark-slide-content th {
|
||||
font-size: 24pt;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.remark-code, .remark-inline-code {
|
||||
font-family: Inconsolata, monospace;
|
||||
}
|
||||
th {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
td, th {
|
||||
padding: 8px;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
max-width:100%;
|
||||
max-height:100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.center img {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
.smaller p, .smaller div, .smaller li, .smaller th, .smaller td {
|
||||
font-size: 18pt;
|
||||
}
|
||||
.footnote p {
|
||||
position: absolute;
|
||||
bottom: 3em;
|
||||
font-size: 8pt !important;
|
||||
}
|
||||
.remark-slide-number {
|
||||
background-color: white;
|
||||
padding: 0 5px;
|
||||
border-radius: 5px;
|
||||
font-size: 20px !important;
|
||||
}
|
||||
.no-number .remark-slide-number {
|
||||
display: none;
|
||||
}
|
||||
#qrcode {
|
||||
width: 384px;
|
||||
height: 384px;
|
||||
}
|
||||
|
||||
/* Title Slide Layout. Use .smokescreen[...] to contain the h1/h2. */
|
||||
.remark-slide-content.title h1, .remark-slide-content.title h2, .remark-slide-content.title h3 {
|
||||
color: white;
|
||||
font-size: 50pt;
|
||||
margin: 30pt;
|
||||
font-weight: 300;
|
||||
}
|
||||
.remark-slide-content.title h2 {
|
||||
font-size: 30pt;
|
||||
}
|
||||
.remark-slide-content.title h3 {
|
||||
font-size: 22pt;
|
||||
}
|
||||
.smokescreen {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 33%;
|
||||
background-color: rgba(0,0,0,.7);
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Columnar Layouts. Two- and three-column layouts use .col classnames and float
|
||||
* next to each other. The img-right uses .col and .rc (for right-column) and
|
||||
* they're not equal-width or height. For convenience, two-column layouts also
|
||||
* allow you to name the right column with .rc classname, so you can switch
|
||||
* between layouts without changing the markup, just the slide's class.
|
||||
*/
|
||||
|
||||
/* Two-Column Layout */
|
||||
.two-column .rc, .two-column .col {
|
||||
width: 48%;
|
||||
float: left;
|
||||
margin-right: 1%;
|
||||
}
|
||||
.two-column .rc img, .two-column .col img, .three-column .col img, .three-column .rc img {
|
||||
display: block;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Two-Column Layout, Text Left, Image Right */
|
||||
.img-right .col {
|
||||
width: 62.5%;
|
||||
padding-right: 1em;
|
||||
}
|
||||
.img-right .rc {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 62.5%;
|
||||
width: 37.5%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.img-right .rc p { /* Remove empty line above image wrapped in <p> */
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Three-Column Layout */
|
||||
.three-column .col, .three-column .rc {
|
||||
width: 32%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Shrink Images To Fit In A Vertical Space */
|
||||
.img-450h img {
|
||||
display: block;
|
||||
max-height: 450px !important;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.img-300h img {
|
||||
display: block;
|
||||
max-height: 300px !important;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.center img, .img-center img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
419
themes/story/static/css/story.css
Normal file
419
themes/story/static/css/story.css
Normal file
|
|
@ -0,0 +1,419 @@
|
|||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
.sans-serif {
|
||||
font-family: 'Quattrocento Sans', -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
|
||||
}
|
||||
body article {
|
||||
font-family: 'Spectral', Georgia, Times, serif;
|
||||
}
|
||||
@media only screen and (max-width: 30em) {
|
||||
body article p,
|
||||
body article li {
|
||||
font-family: 'Quattrocento Sans', -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 50em) {
|
||||
body.is-page-true.feature-depth:not(.feature-nodepth):not(.feature-nohdr) article {
|
||||
margin-top: -2em;
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0.5em 0.125em;
|
||||
}
|
||||
}
|
||||
@media screen only {
|
||||
header h1,
|
||||
header h2 {
|
||||
text-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding: 0 1rem;
|
||||
color: #6a737d;
|
||||
border-left: 0.25rem solid #dfe2e5;
|
||||
}
|
||||
pre {
|
||||
border: 1px solid #dfe2e5;
|
||||
border-radius: 3px;
|
||||
font-size: 75%;
|
||||
line-height: 1.4;
|
||||
padding: 1em;
|
||||
background: #f6f8fa;
|
||||
overflow: auto;
|
||||
}
|
||||
p > code,
|
||||
li > code,
|
||||
a > code,
|
||||
td > code {
|
||||
font-size: 80%;
|
||||
background: #f6f8fa;
|
||||
margin: 0;
|
||||
border-radius: 3px;
|
||||
padding: 0.15em 0.25em;
|
||||
}
|
||||
article img {
|
||||
max-width: 100%;
|
||||
}
|
||||
hr {
|
||||
height: 0px;
|
||||
border-style: none none solid none;
|
||||
border-bottom-color: #dfe2e5;
|
||||
}
|
||||
table caption {
|
||||
text-align: left;
|
||||
font-family: 'Spectral', Georgia, Times, serif;
|
||||
font-style: italic;
|
||||
padding: 0px 0.5rem;
|
||||
}
|
||||
body.feature-hyphenate:not(.feature-nohyphenate) article p,
|
||||
body.feature-hyphenate:not(.feature-nohyphenate) article li,
|
||||
body.feature-hyphenate:not(.feature-nohyphenate) article td,
|
||||
body.feature-hyphenate:not(.feature-nohyphenate) article caption,
|
||||
body.feature-hyphenate:not(.feature-nohyphenate) article figcaption,
|
||||
body.feature-hyphenate:not(.feature-nohyphenate) article th {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
body.feature-hyphenate:not(.feature-nohyphenate) article pre,
|
||||
body.feature-hyphenate:not(.feature-nohyphenate) article code {
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
body.feature-justify:not(.feature-nojustify) article p,
|
||||
body.feature-justify:not(.feature-nojustify) article li {
|
||||
text-align: justify;
|
||||
}
|
||||
body.feature-hrfleuron:not(.feature-nohrfleuron) article > hr {
|
||||
border-style: none;
|
||||
width: 0px;
|
||||
text-align: center;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
body.feature-hrfleuron:not(.feature-nohrfleuron) article > hr:before {
|
||||
content: "\002766";
|
||||
}
|
||||
body.feature-hrdinkus:not(.feature-nohrdinkus) article > hr {
|
||||
border-style: none;
|
||||
width: 0px;
|
||||
text-align: center;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
body.feature-hrdinkus:not(.feature-nohrdinkus) article > hr:before {
|
||||
content: "*\000A0\000A0*\000A0\000A0*";
|
||||
}
|
||||
figure {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
figure img {
|
||||
display: block;
|
||||
}
|
||||
@media screen {
|
||||
body.feature-figcaption-hidden:not(.feature-figcaption-visible) figure {
|
||||
position: relative;
|
||||
}
|
||||
body.feature-figcaption-hidden:not(.feature-figcaption-visible) figcaption {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
padding: 1rem;
|
||||
visibility: hidden;
|
||||
}
|
||||
body.feature-figcaption-hidden figure:hover figcaption {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
body:not(.feature-tablefig) table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
font-family: 'Quattrocento Sans', -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
|
||||
}
|
||||
body:not(.feature-tablefig) table tr:nth-child(2n) {
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
body:not(.feature-tablefig) table th,
|
||||
body:not(.feature-tablefig) table td {
|
||||
display: table-cell;
|
||||
vertical-align: inherit;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: 1px solid #dfe2e5;
|
||||
}
|
||||
body:not(.feature-tablefig) table th {
|
||||
font-weight: 600;
|
||||
}
|
||||
body.feature-tablefw:not(.feature-tablefig) td {
|
||||
font-family: arial;
|
||||
}
|
||||
body.feature-tablefig:not(.feature-notablefig) table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
font-family: inherit;
|
||||
border-top: 2px solid black;
|
||||
}
|
||||
body.feature-tablefig:not(.feature-notablefig) table thead,
|
||||
body.feature-tablefig:not(.feature-notablefig) table tbody {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
body.feature-tablefig:not(.feature-notablefig) table th,
|
||||
body.feature-tablefig:not(.feature-notablefig) table td {
|
||||
display: table-cell;
|
||||
vertical-align: bottom;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
body.feature-tablefig:not(.feature-notablefig) table th {
|
||||
font-weight: 600;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
body {
|
||||
counter-reset: figure-counter table-counter;
|
||||
}
|
||||
body.feature-fignum figure figcaption::before {
|
||||
counter-increment: figure-counter;
|
||||
content: "Figure " counter(figure-counter) ". ";
|
||||
}
|
||||
body.feature-fignum table caption::before {
|
||||
counter-increment: table-counter;
|
||||
content: "Table " counter(table-counter) ". ";
|
||||
}
|
||||
.feature-h3-cl h3 {
|
||||
clear: left;
|
||||
}
|
||||
.feature-h3-cr h3 {
|
||||
clear: right;
|
||||
}
|
||||
.feature-h3-cb h3 {
|
||||
clear: both;
|
||||
}
|
||||
.feature-nosubtitle h2 {
|
||||
display: none;
|
||||
}
|
||||
.footnotes {
|
||||
font-size: 80%;
|
||||
}
|
||||
.math {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.about-the-author img {
|
||||
float: left;
|
||||
max-width: 100px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 100%;
|
||||
margin: 0 1rem 1rem 0;
|
||||
}
|
||||
blockquote.tweet {
|
||||
border: 1px solid #dfe2e5;
|
||||
border-radius: 5px;
|
||||
padding: 4px 20px;
|
||||
color: black;
|
||||
}
|
||||
.pagination li {
|
||||
display: inline-block;
|
||||
}
|
||||
.pagination li a {
|
||||
padding: 0.5rem 0.625rem;
|
||||
background-color: white;
|
||||
color: #333;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.pagination li.disabled {
|
||||
display: none;
|
||||
}
|
||||
.pagination li.active a:link,
|
||||
.pagination li.active a:active,
|
||||
.pagination li.active a:visited {
|
||||
background-color: #ddd;
|
||||
}
|
||||
img[src~="3dbook"] {
|
||||
max-width: 120px;
|
||||
}
|
||||
@media screen {
|
||||
.book {
|
||||
display: inline-block;
|
||||
box-shadow: 5px 5px 20px #333;
|
||||
margin: 1rem;
|
||||
}
|
||||
.book img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.books {
|
||||
-moz-perspective: 100px;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin: 0px 0px 1rem 1rem;
|
||||
}
|
||||
.book {
|
||||
position: relative;
|
||||
-moz-perspective: 100px;
|
||||
-moz-transform: rotateY(-3deg);
|
||||
-webkit-transform: perspective(100) rotateY(-3deg);
|
||||
outline: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
}
|
||||
.book img {
|
||||
position: relative !important;
|
||||
}
|
||||
.book:before,
|
||||
.book:after {
|
||||
position: absolute;
|
||||
top: 2%;
|
||||
height: 96%;
|
||||
content: ' ';
|
||||
z-index: -1;
|
||||
}
|
||||
.book:before {
|
||||
width: 100%;
|
||||
left: 6.5%;
|
||||
background-color: #484848;
|
||||
box-shadow: 0px 3px 20px 2px #333;
|
||||
}
|
||||
.book:after {
|
||||
width: 5%;
|
||||
left: 100%;
|
||||
background-color: #EFEFEF;
|
||||
box-shadow: inset 0px 0px 5px #aaa;
|
||||
-moz-transform: rotateY(20deg);
|
||||
-webkit-transform: perspective(100) rotateY(20deg);
|
||||
}
|
||||
}
|
||||
.display-print {
|
||||
display: none;
|
||||
}
|
||||
@media print {
|
||||
* {
|
||||
color: black !important;
|
||||
}
|
||||
pre,
|
||||
code {
|
||||
font-size: 0.85rem;
|
||||
background: white !important;
|
||||
padding: 3px !important;
|
||||
}
|
||||
img[src~="3dbook"] {
|
||||
border: 1px solid black;
|
||||
float: right;
|
||||
margin: 0px 0px 1rem 1rem;
|
||||
}
|
||||
.footnote-return {
|
||||
display: none;
|
||||
}
|
||||
a,
|
||||
a:link,
|
||||
a:visited,
|
||||
a:hover {
|
||||
text-decoration: underline black;
|
||||
}
|
||||
.footnote-ref a,
|
||||
.category a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
#hdr {
|
||||
padding-top: 0px !important;
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 1rem !important;
|
||||
margin-bottom: 1rem !important;
|
||||
font-style: italic;
|
||||
}
|
||||
h3 a:link,
|
||||
h3 a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
.hide-print {
|
||||
display: none !important;
|
||||
}
|
||||
.display-print {
|
||||
display: inline !important;
|
||||
}
|
||||
.f4 {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
.measure-wide {
|
||||
max-width: 45em !important;
|
||||
}
|
||||
main {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.math {
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
article {
|
||||
border-bottom-style: none !important;
|
||||
}
|
||||
}
|
||||
.hljs {
|
||||
display: block;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.hljs-comment,
|
||||
.hljs-meta {
|
||||
color: #969896;
|
||||
}
|
||||
.hljs-string,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis,
|
||||
.hljs-quote {
|
||||
color: #df5000;
|
||||
}
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-type {
|
||||
color: #a71d5d;
|
||||
}
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-attribute {
|
||||
color: #0086b3;
|
||||
}
|
||||
.hljs-section,
|
||||
.hljs-name {
|
||||
color: #63a35c;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: #333333;
|
||||
}
|
||||
.hljs-title,
|
||||
.hljs-attr,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #795da3;
|
||||
}
|
||||
.hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
.hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
413
themes/story/static/css/story.less
Normal file
413
themes/story/static/css/story.less
Normal file
|
|
@ -0,0 +1,413 @@
|
|||
@font-sans: 'Quattrocento Sans',-apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
|
||||
@font-serif: 'Spectral', Georgia, Times, serif;
|
||||
@shaded-bg: #f6f8fa;
|
||||
@border: #dfe2e5;
|
||||
@muted-text: #6a737d;
|
||||
|
||||
// Typography designed for clarity and elegance on a large, modern (hi-res)
|
||||
// display. But when reading on an cellphone, a sans-serif font family is much
|
||||
// nicer, so apply serif fonts to the article only at larger sizes or in print.
|
||||
h1, h2, h3, h4, .sans-serif {
|
||||
font-family: @font-sans;
|
||||
}
|
||||
|
||||
body {
|
||||
article {
|
||||
font-family: @font-serif;
|
||||
@media only screen and (max-width: 30em) {
|
||||
p, li {
|
||||
font-family: @font-sans;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 50em) {
|
||||
&.is-page-true.feature-depth:not(.feature-nodepth):not(.feature-nohdr) article {
|
||||
margin-top: -2em;
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0.5em 0.125em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
h1, h2 {
|
||||
@media screen only {
|
||||
text-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// General element styling
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding: 0 1rem;
|
||||
color: @muted-text;
|
||||
border-left: 0.25rem solid @border;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 1px solid @border;
|
||||
border-radius: 3px;
|
||||
font-size: 75%;
|
||||
line-height: 1.4;
|
||||
padding: 1em;
|
||||
background: @shaded-bg;
|
||||
overflow: auto;
|
||||
}
|
||||
p>code, li>code, a>code, td>code {
|
||||
font-size: 80%;
|
||||
background: @shaded-bg;
|
||||
margin: 0;
|
||||
border-radius: 3px;
|
||||
padding: 0.15em 0.25em;
|
||||
}
|
||||
|
||||
article img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 0px;
|
||||
border-style: none none solid none;
|
||||
border-bottom-color: @border;
|
||||
}
|
||||
|
||||
table caption {
|
||||
text-align: left;
|
||||
font-family: @font-serif;
|
||||
font-style: italic;
|
||||
padding: 0px 0.5rem;
|
||||
}
|
||||
|
||||
// Story uses feature-X and feature-noX classes to enable/disable a lot of
|
||||
// typography and other features.
|
||||
body.feature-hyphenate:not(.feature-nohyphenate) article {
|
||||
p, li, td, caption, figcaption, th {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
pre, code {
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
}
|
||||
|
||||
body.feature-justify:not(.feature-nojustify) article {
|
||||
p, li {
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
body.feature-hrfleuron:not(.feature-nohrfleuron) article > hr {
|
||||
border-style: none;
|
||||
width: 0px;
|
||||
text-align: center;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 3rem;
|
||||
&:before {
|
||||
content: "\002766";
|
||||
}
|
||||
}
|
||||
|
||||
body.feature-hrdinkus:not(.feature-nohrdinkus) article > hr {
|
||||
border-style: none;
|
||||
width: 0px;
|
||||
text-align: center;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 3rem;
|
||||
&:before {
|
||||
content: "*\000A0\000A0*\000A0\000A0*";
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen {
|
||||
// Image captions should only be "hidden" overlays on the images in screen
|
||||
// mode. Even if feature-figcaption-hidden is defined, if
|
||||
// feature-figcaption-visible is set, this all should be disabled.
|
||||
body.feature-figcaption-hidden:not(.feature-figcaption-visible) figure {
|
||||
position: relative;
|
||||
}
|
||||
body.feature-figcaption-hidden:not(.feature-figcaption-visible) figcaption {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
padding: 1rem;
|
||||
visibility: hidden;
|
||||
}
|
||||
body.feature-figcaption-hidden figure:hover figcaption {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
// Default table styling is GitHub-inspired. It's overridden by
|
||||
// .feature-tablefig below, so it applies only if that class isn't active.
|
||||
body:not(.feature-tablefig) table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
font-family: @font-sans;
|
||||
tr:nth-child(2n) {
|
||||
background-color: @shaded-bg;
|
||||
}
|
||||
th, td {
|
||||
display: table-cell;
|
||||
vertical-align: inherit;
|
||||
padding: .25rem .5rem;
|
||||
border: 1px solid @border;
|
||||
}
|
||||
th {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
// A typeface with fixed-width numerals is nice if there are many cells filled
|
||||
// with numbers.
|
||||
body.feature-tablefw:not(.feature-tablefig) td {
|
||||
font-family: arial;
|
||||
}
|
||||
|
||||
// This table style is more of an academic paper look.
|
||||
body.feature-tablefig:not(.feature-notablefig) table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
font-family: inherit;
|
||||
border-top: 2px solid black;
|
||||
thead, tbody {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
th, td {
|
||||
display: table-cell;
|
||||
vertical-align: bottom;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
th {
|
||||
font-weight: 600;
|
||||
padding-top: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Add labels and counters to table and figure captions.
|
||||
body {
|
||||
counter-reset: figure-counter table-counter;
|
||||
&.feature-fignum {
|
||||
figure figcaption::before {
|
||||
counter-increment: figure-counter;
|
||||
content: "Figure " counter(figure-counter) ". ";
|
||||
}
|
||||
table caption::before {
|
||||
counter-increment: table-counter;
|
||||
content: "Table " counter(table-counter) ". ";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Use front matter in the blog post to add CSS class names to the <body> tag.
|
||||
.feature-h3-cl h3 { clear: left; }
|
||||
.feature-h3-cr h3 { clear: right; }
|
||||
.feature-h3-cb h3 { clear: both; }
|
||||
.feature-nosubtitle h2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Hugo creates a div.footnotes around an <ol> for footnotes
|
||||
.footnotes {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
// For KaTeX's rendered elements, the font-size tends to be mismatched. Reset.
|
||||
.math {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.about-the-author img {
|
||||
float: left;
|
||||
max-width: 100px;
|
||||
border: 1px solid rgba(0,0,0,.3);
|
||||
border-radius: 100%;
|
||||
margin: 0 1rem 1rem 0;
|
||||
}
|
||||
|
||||
blockquote.tweet {
|
||||
border: 1px solid @border;
|
||||
border-radius: 5px;
|
||||
padding: 4px 20px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.pagination li {
|
||||
display: inline-block;
|
||||
a {
|
||||
padding: .5rem .625rem;
|
||||
background-color: white;
|
||||
color: #333;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
text-decoration: none;
|
||||
}
|
||||
&.disabled {
|
||||
display: none;
|
||||
}
|
||||
&.active {
|
||||
a:link, a:active, a:visited {
|
||||
background-color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img[src~="3dbook"] {
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
@media screen {
|
||||
// Pseudo-3d book covers via http://srobbin.com/blog/3d-css-book-covers/
|
||||
// The images should be 400x525px but displayed at smaller size.
|
||||
// Give the book images a 3dbook pseudo-class in the URL fragment.
|
||||
// [](http://example.com/)
|
||||
// There's some JS that runs from story.js that will find the img,
|
||||
// and give its wrapper <a> the right classes, and the containing <p> still
|
||||
// more classes:
|
||||
// <p class="books"><a class="book"><img></a></p>
|
||||
|
||||
// Fallback book cover styles
|
||||
.book {
|
||||
display: inline-block;
|
||||
box-shadow: 5px 5px 20px #333;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.book img { vertical-align: middle; }
|
||||
|
||||
.books {
|
||||
-moz-perspective: 100px;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin: 0px 0px 1rem 1rem;
|
||||
}
|
||||
|
||||
.book {
|
||||
position: relative;
|
||||
-moz-perspective: 100px;
|
||||
-moz-transform: rotateY(-3deg);
|
||||
-webkit-transform: perspective(100) rotateY(-3deg);
|
||||
outline: 1px solid transparent; // Helps smooth jagged edges in Firefox
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.book img {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.book:before,
|
||||
.book:after {
|
||||
position: absolute;
|
||||
top: 2%;
|
||||
height: 96%;
|
||||
content: ' ';
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.book:before {
|
||||
width: 100%;
|
||||
left: 6.5%;
|
||||
background-color: #484848;
|
||||
box-shadow: 0px 3px 20px 2px #333;
|
||||
}
|
||||
|
||||
.book:after {
|
||||
width: 5%;
|
||||
left: 100%;
|
||||
background-color: #EFEFEF;
|
||||
box-shadow: inset 0px 0px 5px #aaa;
|
||||
-moz-transform: rotateY(20deg);
|
||||
-webkit-transform: perspective(100) rotateY(20deg);
|
||||
}
|
||||
}
|
||||
|
||||
// These will be hidden in screen media, but visible in print
|
||||
.display-print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
* {
|
||||
color: black !important;
|
||||
}
|
||||
pre, code {
|
||||
font-size: .85rem;
|
||||
background: white !important;
|
||||
padding: 3px !important;
|
||||
}
|
||||
img[src~="3dbook"] {
|
||||
border: 1px solid black;
|
||||
float: right;
|
||||
margin: 0px 0px 1rem 1rem;
|
||||
}
|
||||
.footnote-return {
|
||||
display: none;
|
||||
}
|
||||
a, a:link, a:visited, a:hover {
|
||||
text-decoration: underline black;
|
||||
}
|
||||
.footnote-ref a, .category a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
#hdr {
|
||||
padding-top: 0px !important;
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 1rem !important;
|
||||
margin-bottom: 1rem !important;
|
||||
font-style: italic;
|
||||
}
|
||||
h3 a:link, h3 a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
.hide-print {
|
||||
display: none !important;
|
||||
}
|
||||
.display-print {
|
||||
display: inline !important;
|
||||
}
|
||||
.f4 {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
.measure-wide { // increase line width to compensate for the decrease in font size
|
||||
max-width: 45em !important;
|
||||
}
|
||||
main { // don't waste paper on extra blank pages
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.math {
|
||||
font-size: .85rem !important;
|
||||
}
|
||||
article {
|
||||
border-bottom-style: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hljs{display:block;color:#333333;overflow-x:auto}.hljs-comment,.hljs-meta{color:#969896}.hljs-string,.hljs-variable,.hljs-template-variable,.hljs-strong,.hljs-emphasis,.hljs-quote{color:#df5000}.hljs-keyword,.hljs-selector-tag,.hljs-type{color:#a71d5d}.hljs-literal,.hljs-symbol,.hljs-bullet,.hljs-attribute{color:#0086b3}.hljs-section,.hljs-name{color:#63a35c}.hljs-tag{color:#333333}.hljs-title,.hljs-attr,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:#795da3}.hljs-addition{color:#55a532;background-color:#eaffea}.hljs-deletion{color:#bd2c00;background-color:#ffecec}.hljs-link{text-decoration:underline}
|
||||
3
themes/story/static/css/tachyons.min.css
vendored
Normal file
3
themes/story/static/css/tachyons.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue