mirror of
https://github.com/standardebooks/web.git
synced 2025-07-07 07:10:29 -04:00
b1b2dc4e14
The main reason to do this is to fix https://github.com/standardebooks/manual/issues/9, but the font is also about 20% smaller which is a nice benefit. Fira Mono is also licensed under OFL so no change there. I have no stylistic preference either way, but they’re broadly similar in look. Fira Mono has no italic faces, but we have no italic display of source code so no loss there.
592 lines
8.9 KiB
CSS
592 lines
8.9 KiB
CSS
@import url("monokai.css");
|
|
|
|
main code:first-child{
|
|
margin-top: 0;
|
|
}
|
|
|
|
code{
|
|
hyphens: none;
|
|
font-variant-numeric: normal;
|
|
}
|
|
|
|
blockquote,
|
|
figure.text{
|
|
background: rgba(255,255,255,.25);
|
|
border: 1px solid rgba(255,255,255,.25);
|
|
padding: 1rem;
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
blockquote{
|
|
font-style: italic;
|
|
}
|
|
|
|
blockquote mark.error{
|
|
background: #CF4647;
|
|
padding: .2rem;
|
|
}
|
|
|
|
table{
|
|
width: 100%;
|
|
text-align: left;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
table code.full{
|
|
display: block;
|
|
white-space: normal !important;
|
|
}
|
|
|
|
table code.full{
|
|
white-space: pre-wrap !important;
|
|
}
|
|
|
|
table td{
|
|
vertical-align: top;
|
|
padding: 1rem;
|
|
}
|
|
|
|
table td:first-child{
|
|
width: 25%;
|
|
}
|
|
|
|
table td + td{
|
|
padding-left: 10px;
|
|
}
|
|
|
|
table p{
|
|
margin: 0;
|
|
}
|
|
|
|
table thead{
|
|
border-bottom: 3px double var(--sub-text);
|
|
font-weight: bold;
|
|
}
|
|
|
|
abbr{
|
|
white-space: nowrap;
|
|
}
|
|
|
|
abbr.acronym{
|
|
font-variant: all-small-caps;
|
|
}
|
|
|
|
abbr.temperature,
|
|
abbr.era{
|
|
font-variant: all-small-caps;
|
|
}
|
|
|
|
h3 abbr.initialism{
|
|
font-variant: normal;
|
|
}
|
|
|
|
code.string,
|
|
code.tag,
|
|
code.path,
|
|
code.program,
|
|
code.bash,
|
|
code.regex,
|
|
code.html,
|
|
code.xml,
|
|
code.ietf,
|
|
code.css,
|
|
code.marc{
|
|
border: 1px solid rgba(255,255,255,.25);
|
|
background: #333;
|
|
border-radius: .25rem;
|
|
white-space: nowrap;
|
|
padding: 0 .25rem;
|
|
color: #fff;
|
|
margin: 0 .2rem;
|
|
}
|
|
|
|
figure code.xml,
|
|
figure code.html,
|
|
figure code.css{
|
|
padding: 1rem;
|
|
background: #333;
|
|
border: none;
|
|
text-align: left;
|
|
color: #fff !important; /* in case code highlighting fails */
|
|
}
|
|
|
|
code.xml.full,
|
|
code.html.full,
|
|
code.css.full{
|
|
border: none;
|
|
display: block;
|
|
padding: 1rem;
|
|
background: #333;
|
|
text-align: left;
|
|
color: #fff !important; /* in case code highlighting fails */
|
|
}
|
|
|
|
code.full{
|
|
margin-top: 1rem;
|
|
color: #fff !important; /* in case code highlighting fails */
|
|
}
|
|
|
|
code.full::before{
|
|
display: block;
|
|
border-bottom: 1px dashed var(--sub-text);
|
|
padding-bottom: .5rem;
|
|
margin-bottom: .5rem;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
}
|
|
|
|
code.xml.full::before{
|
|
content: 'XML';
|
|
}
|
|
|
|
code.html.full::before{
|
|
content: 'HTML';
|
|
}
|
|
|
|
code.css.full::before{
|
|
content: 'CSS';
|
|
}
|
|
|
|
code{
|
|
font-family: 'Fira Mono', monospace;
|
|
font-size: .8rem;
|
|
}
|
|
|
|
code.terminal{
|
|
color: #fff;
|
|
background-color: #444;
|
|
text-align: left;
|
|
padding: 1rem 1rem 1rem 3rem;
|
|
border-radius: .25rem;
|
|
position: relative;
|
|
display: block;
|
|
margin-top: 1rem;
|
|
overflow: auto;
|
|
}
|
|
|
|
code.terminal::before{
|
|
content: url('/images/terminal.svg');
|
|
height: 1rem;
|
|
width: 1rem;
|
|
top: 1.15rem;
|
|
left: 1rem;
|
|
position: absolute;
|
|
}
|
|
|
|
code.raw{
|
|
white-space: pre;
|
|
}
|
|
|
|
code.terminal span{
|
|
display: block;
|
|
}
|
|
|
|
code.terminal span::before{
|
|
margin-right: .5rem;
|
|
color: #56DA55;
|
|
font-weight: bold;
|
|
display: inline;
|
|
}
|
|
|
|
code.terminal > span::before{
|
|
content:'user@localhost>';
|
|
}
|
|
|
|
.utf{
|
|
border: 1px solid var(--body-text);
|
|
padding: .1rem;
|
|
line-height: 1;
|
|
margin: 0 .2rem;
|
|
display: inline-block;
|
|
font-family: monospace;
|
|
vertical-align: middle;
|
|
margin-top: -3px; /* to match poor crimson alignment */
|
|
}
|
|
|
|
figure code.html .utf,
|
|
code.full .utf{
|
|
border-color: #fff;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.step-by-step-guide ol li h2{
|
|
margin-top: 4rem;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.step-by-step-guide ol li h3{
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.step-by-step-guide > ol li::marker{
|
|
font-weight: bold;
|
|
font-family: 'League Spartan', sans-serif;
|
|
}
|
|
|
|
.step-by-step-guide > ol {
|
|
counter-reset: item;
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
margin-top: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.step-by-step-guide > ol > li::before {
|
|
float: left;
|
|
content: counter(item) ".";
|
|
counter-increment: item;
|
|
width: 4rem;
|
|
text-align: right;
|
|
margin-left: -4.5rem;
|
|
|
|
font-size: 1.2rem;
|
|
font-family: 'League Spartan', sans-serif;
|
|
line-height: 1.2;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.alert p.warning{
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
text-align: center;
|
|
}
|
|
|
|
figure p.wrong{
|
|
text-decoration-line: underline;
|
|
text-decoration-style: wavy;
|
|
text-decoration-color: #CF4647;
|
|
}
|
|
|
|
figure p.wrong::before,
|
|
figure.wrong::before{
|
|
font-family: "FontAwesome";
|
|
content: "\f00d";
|
|
font-size: 1.5rem;
|
|
width: 1.5rem;
|
|
line-height: 1;
|
|
margin-right: .5rem;
|
|
color: #CF4647;
|
|
text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
figure p.corrected::before,
|
|
figure.corrected::before{
|
|
font-family: "FontAwesome";
|
|
content: "\f00c";
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
margin-right: .5rem;
|
|
width: 1.5rem;
|
|
color: #79BD9A;
|
|
text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
figure.wrong::before,
|
|
figure.corrected::before{
|
|
display: flex;
|
|
margin-right: 0;
|
|
align-self: stretch;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 .5rem;
|
|
border-top-left-radius: .25rem;
|
|
border-bottom-left-radius: .25rem;
|
|
}
|
|
|
|
figure.wrong::before{
|
|
background: #762729;
|
|
}
|
|
|
|
figure.corrected::before{
|
|
background: #406451;
|
|
}
|
|
|
|
figure.wrong code{
|
|
background: #550000 url('/images/stripes-dark.svg');
|
|
}
|
|
|
|
figure.wrong,
|
|
figure.corrected{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
figure.wrong code,
|
|
figure.corrected code{
|
|
flex-grow: 1;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.manual p{
|
|
text-align: left;
|
|
}
|
|
|
|
.manual section{
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.manual section section{
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
.manual section ol{
|
|
margin-top: 1rem;
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
.manual section + section,
|
|
.manual ol + section{
|
|
counter-reset: none;
|
|
}
|
|
|
|
.manual section[id] ol > li{
|
|
list-style: none;
|
|
}
|
|
|
|
.manual > article > section[id] > aside.number{
|
|
position: absolute;
|
|
width: 10rem;
|
|
text-align: right;
|
|
margin-left: -11rem;
|
|
margin-top: 2rem;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.manual section[id] > aside.number a,
|
|
.manual section[id] ol > li > aside.number a{
|
|
text-decoration: none;
|
|
}
|
|
|
|
.manual h1 + section > h2:first-child{
|
|
margin-top: 0;
|
|
}
|
|
|
|
.manual section[id] > aside.number,
|
|
.manual section[id] ol > li > aside.number{
|
|
position: absolute;
|
|
width: 10rem;
|
|
margin-left: -10.5rem;
|
|
text-align: right;
|
|
font-family: "League Spartan", sans-serif;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.manual section[id] ol > li > aside.number{
|
|
font-size: .75rem;
|
|
margin-top: .2rem;
|
|
}
|
|
|
|
.manual > article > section[id] > section > aside.number{
|
|
font-style: normal;
|
|
margin-left: -11.5rem;
|
|
margin-top: .15rem;
|
|
}
|
|
|
|
.manual section > aside.number{
|
|
font-family: "League Spartan", sans-serif;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.manual > article > section > aside.number{
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.manual h2,
|
|
.manual h3,
|
|
.manual h4,
|
|
.manual h5,
|
|
.manual h6{
|
|
margin-top: 0;
|
|
}
|
|
|
|
.manual figure p{
|
|
hyphens: none;
|
|
}
|
|
|
|
.manual table td:first-child{
|
|
width: auto;
|
|
}
|
|
|
|
.manual table td code.path{
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.manual aside.tip{
|
|
font-style: italic;
|
|
margin: 1rem 0;
|
|
position: relative;
|
|
padding: 1rem;
|
|
padding-left: 2rem;
|
|
padding-top: 2rem;
|
|
background: rgba(0, 0, 0, .2);
|
|
}
|
|
|
|
.manual aside.tip::before{
|
|
font-family: "FontAwesome";
|
|
content: "\f0eb";
|
|
font-size: 1rem;
|
|
position: absolute;
|
|
font-style: normal;
|
|
left: .75rem;
|
|
top: .25rem;
|
|
}
|
|
|
|
.manual aside.tip::after{
|
|
content: "Tip";
|
|
font-family: "League Spartan";
|
|
text-transform: uppercase;
|
|
font-size: .75rem;
|
|
position: absolute;
|
|
font-style: normal;
|
|
left: 2rem;
|
|
top: .5rem;
|
|
}
|
|
|
|
.ws{
|
|
border: 1px solid #222;
|
|
padding: .1rem;
|
|
line-height: 1;
|
|
margin: 0 .1rem;
|
|
font-size: .5rem;
|
|
display: inline-block;
|
|
font-family: monospace;
|
|
vertical-align: middle;
|
|
margin-top: -3px; /* to match poor crimson alignment */
|
|
}
|
|
|
|
code.terminal b,
|
|
code.bash b{
|
|
font-weight: normal;
|
|
color: #4a9906;
|
|
}
|
|
|
|
code.terminal i,
|
|
code.bash i{
|
|
font-style: normal;
|
|
color: #c4a000;
|
|
}
|
|
|
|
code.terminal i.glob,
|
|
code.bash i.glob{
|
|
font-style: normal;
|
|
color: #719ece;
|
|
}
|
|
|
|
figure code.html .ws,
|
|
code.full .ws{
|
|
border-color: #fff;
|
|
margin-top: 0;
|
|
}
|
|
|
|
main.manual h1{
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
main.manual h1 + p{
|
|
margin-top: 0;
|
|
}
|
|
|
|
main.manual h2 code{
|
|
font-size: 1.25rem;
|
|
top: -.1rem;
|
|
position: relative;
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
main.manual > nav{
|
|
position: absolute;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, .15);
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--border);
|
|
border-right: 1px solid var(--border);
|
|
max-width: 18%;
|
|
}
|
|
|
|
main.manual > nav ol,
|
|
main.manual > nav li{
|
|
margin-top: .5rem;
|
|
}
|
|
|
|
main.manual > nav > p,
|
|
main.manual > nav > ol > li > p > a{
|
|
font-family: "League Spartan";
|
|
}
|
|
|
|
main.manual > nav > ol > li > p > a{
|
|
font-size: .75rem;
|
|
}
|
|
|
|
main.manual > nav a{
|
|
text-decoration: none;
|
|
}
|
|
|
|
main.manual > nav ol{
|
|
list-style: none;
|
|
}
|
|
|
|
figure code.xml,
|
|
figure code.html,
|
|
figure code.css{
|
|
white-space: pre;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
@media(max-width: 1700px){
|
|
main.manual > article{
|
|
margin-left: 10rem;
|
|
}
|
|
}
|
|
|
|
@media(max-width: 1350px){
|
|
main.manual > article{
|
|
margin-left: 0;
|
|
}
|
|
|
|
main.manual > nav{
|
|
position: relative;
|
|
max-width: none;
|
|
border: none;
|
|
background: none;
|
|
padding-left: 2rem;
|
|
padding-top: 2rem;
|
|
font-family: "League Spartan";
|
|
}
|
|
|
|
main.manual > nav ol{
|
|
display: none;
|
|
}
|
|
|
|
main.manual > article > section,
|
|
main.manual nav + article h1{
|
|
margin-top: 0;
|
|
}
|
|
|
|
.manual > article > section[id] > aside.number{
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
@media(max-width: 1000px){
|
|
main.manual > article{
|
|
margin-left: 2rem;
|
|
}
|
|
}
|
|
|
|
@media(prefers-color-scheme: dark){
|
|
blockquote,
|
|
figure.text{
|
|
background: rgba(0,0,0,.25);
|
|
}
|
|
|
|
code.terminal{
|
|
background-color: var(--light-body-text);
|
|
}
|
|
}
|