413 lines
9.1 KiB
Text
413 lines
9.1 KiB
Text
@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}
|