Update manual for improved readability

This commit is contained in:
Alex Cabal 2020-09-13 16:38:20 -05:00
parent 4bf8825f48
commit d5ff62d9a8
22 changed files with 160 additions and 67 deletions

View file

@ -1,62 +1,62 @@
@import url("reset.css");
@font-face{
font-family: 'FontAwesome';
src: local('FontAwesome'), url('/fonts/font-awesome.woff2') format('woff2'), url('/fonts/font-awesome.woff') format('woff');
font-family: "FontAwesome";
src: local("FontAwesome"), url("/fonts/font-awesome.woff2") format("woff2"), url("/fonts/font-awesome.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face{
/* Note: Don't use local() as a source, because our version fixes the font's strange default line-height */
font-family: 'League Spartan';
src: url('/fonts/league-spartan-bold.woff2') format('woff2'), url('/fonts/league-spartan-bold.woff') format('woff');
/* Note: Don"t use local() as a source, because our version fixes the font"s strange default line-height */
font-family: "League Spartan";
src: url("/fonts/league-spartan-bold.woff2") format("woff2"), url("/fonts/league-spartan-bold.woff") format("woff");
font-weight: bold;
font-style: normal;
}
@font-face{
/* Note: Don't use local() as a source, because our version fixes the font's strange default line-height */
/* Note: Don"t use local() as a source, because our version fixes the font"s strange default line-height */
font-family: "Crimson Pro";
src: url('/fonts/crimson-pro.woff2') format('woff2'), url('/fonts/crimson-pro.woff') format('woff');
src: url("/fonts/crimson-pro.woff2") format("woff2"), url("/fonts/crimson-pro.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face{
/* Note: Don't use local() as a source, because our version fixes the font's strange default line-height */
/* Note: Don"t use local() as a source, because our version fixes the font"s strange default line-height */
font-family: "Crimson Pro";
src: url('/fonts/crimson-pro-bold.woff2') format('woff2'), url('/fonts/crimson-pro-bold.woff') format('woff');
src: url("/fonts/crimson-pro-bold.woff2") format("woff2"), url("/fonts/crimson-pro-bold.woff") format("woff");
font-weight: bold;
font-style: normal;
}
@font-face{
/* Note: Don't use local() as a source, because our version fixes the font's strange default line-height */
/* Note: Don"t use local() as a source, because our version fixes the font"s strange default line-height */
font-family: "Crimson Pro";
src: url('/fonts/crimson-pro-italic.woff2') format('woff2'), url('/fonts/crimson-pro-italic.woff') format('woff');
src: url("/fonts/crimson-pro-italic.woff2") format("woff2"), url("/fonts/crimson-pro-italic.woff") format("woff");
font-weight: normal;
font-style: italic;
}
@font-face{
/* Note: Don't use local() as a source, because our version fixes the font's strange default line-height */
/* Note: Don"t use local() as a source, because our version fixes the font"s strange default line-height */
font-family: "Crimson Pro";
src: url('/fonts/crimson-pro-bold-italic.woff2') format('woff2'), url('/fonts/crimson-pro-bold-italic.woff') format('woff');
src: url("/fonts/crimson-pro-bold-italic.woff2") format("woff2"), url("/fonts/crimson-pro-bold-italic.woff") format("woff");
font-weight: bold;
font-style: italic;
}
@font-face{
font-family: "Fira Mono";
src: local('Fira Mono'), url('/fonts/firamono-regular.woff2') format('woff2'), url('/fonts/firamono-regular.woff') format('woff');
src: local("Fira Mono"), url("/fonts/fira-mono-regular.woff2") format("woff2"), url("/fonts/fira-mono-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: "Fira Mono";
src: local('Fira Mono'), url('/fonts/firamono-bold.woff2') format('woff2'), url('/fonts/firamono-bold.woff') format('woff');
src: local("Fira Mono"), url("/fonts/fira-mono-bold.woff2") format("woff2"), url("/fonts/fira-mono-bold.woff") format("woff");
font-weight: bold;
font-style: normal;
}
@ -216,7 +216,7 @@ body > header{
}
body > header > a{
background: url('/images/logo-white-full.svg');
background: url("/images/logo-white-full.svg");
-webkit-filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .75));
filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .75));
height: 70px;
@ -241,7 +241,7 @@ body > header > a:hover{
}
header nav{
font-family: 'League Spartan';
font-family: "League Spartan";
text-transform: lowercase;
align-self: center;
text-align: right;
@ -255,7 +255,7 @@ header nav li{
}
header nav li + li:before{
content: '•';
content: "•";
font-size: 16px;
margin-left: 10px;
margin-right: 10px;
@ -293,7 +293,7 @@ article > h1{
main.front-page h1{
text-align: center;
background: #29292b url('/images/book.jpg') center / cover;
background: #29292b url("/images/book.jpg") center / cover;
border-bottom: 1px solid var(--border);
box-shadow: 0 0 10px rgba(0, 0, 0, .75);
width: calc(100% + 4rem);
@ -306,7 +306,7 @@ main.front-page h1{
letter-spacing: 1px;
color: #fff;
font-size: 2.8rem;
font-family: 'League Spartan';
font-family: "League Spartan";
text-shadow: 2px 2px 0 rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, 1);
}
@ -478,7 +478,7 @@ aside.sort button{
padding: 1rem 2rem;
color: #fff;
text-decoration: none;
font-family: 'League spartan', sans-serif;
font-family: "League spartan", sans-serif;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
box-shadow: 2px 2px 0 #194149;
position: relative;
@ -549,7 +549,7 @@ aside.sort select{
color: var(--body-text);
font-size: 1rem;
text-transform: lowercase;
font-family: 'Crimson Pro', serif;
font-family: "Crimson Pro", serif;
box-shadow: 1px 1px 0 rgba(255, 255, 255, .5) inset;
cursor: pointer;
}
@ -575,7 +575,7 @@ aside.sort button:hover{
cursor: default;
color: #efefef;
box-shadow: none;
background: #bbb url('/images/stripes-dark.svg');
background: #bbb url("/images/stripes-dark.svg");
}
code{
@ -622,10 +622,10 @@ article.ebook #history li time{
}
article.ebook section aside p::before{
content: '(';
content: "(";
}
article.ebook section aside p::after{
content: ')';
content: ")";
}
article.ebook section aside{
@ -675,7 +675,7 @@ article.ebook > header > hgroup{
article.ebook > header > hgroup > h2{
font-size: 1.4rem;
font-family: 'League Spartan', sans-serif;
font-family: "League Spartan", sans-serif;
line-height: 1;
margin-top: 1rem;
margin-left: 0;
@ -752,7 +752,7 @@ article.ebook section#details ul li a[class]::before{
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
content: '';
content: "";
margin-right: .5rem;
height: 1.25rem;
width: 1.25rem;
@ -834,51 +834,51 @@ time{
}
.globe::before{
background-image: url('/images/globe.svg');
background-image: url("/images/globe.svg");
}
.project-gutenberg::before{
background-image: url('/images/project-gutenberg.svg');
background-image: url("/images/project-gutenberg.svg");
}
.wikisource::before{
background-image: url('/images/wikisource.svg');
background-image: url("/images/wikisource.svg");
}
.hathitrust::before{
background-image: url('/images/hathitrust.svg');
background-image: url("/images/hathitrust.svg");
}
.wikipedia::before{
background-image: url('/images/wikipedia.svg');
background-image: url("/images/wikipedia.svg");
}
.internet-archive::before{
background-image: url('/images/internet-archive.svg');
background-image: url("/images/internet-archive.svg");
}
.github::before{
background-image: url('/images/github.svg');
background-image: url("/images/github.svg");
}
.epub::before{
background-image: url('/images/epub.svg');
background-image: url("/images/epub.svg");
}
.amazon::before{
background-image: url('/images/amazon.svg');
background-image: url("/images/amazon.svg");
}
.kobo::before{
background-image: url('/images/kobo.svg');
background-image: url("/images/kobo.svg");
}
.google::before{
background-image: url('/images/google.svg');
background-image: url("/images/google.svg");
}
.distributed-proofreaders::before{
background-image: url('/images/distributed-proofreaders.svg');
background-image: url("/images/distributed-proofreaders.svg");
}
article.ebook h1{
@ -933,7 +933,7 @@ form[action="/ebooks"]{
h2{
font-size: 1.2rem;
font-family: 'League Spartan', sans-serif;
font-family: "League Spartan", sans-serif;
margin-top: 4rem;
line-height: 1.2;
letter-spacing: 1px;
@ -946,7 +946,7 @@ h4,
h5,
h6{
font-size: 1rem;
font-family: 'League Spartan', sans-serif;
font-family: "League Spartan", sans-serif;
margin-top: 3rem;
line-height: 1.2;
}
@ -968,8 +968,8 @@ footer p:last-child a{
}
footer p:last-child a::before{
content: '';
background: url('/images/logo-small.svg');
content: "";
background: url("/images/logo-small.svg");
background-size: contain;
background-repeat: no-repeat;
display: block;
@ -996,12 +996,12 @@ footer ul li::after{
}
footer ul li::after{
content: '\b7';
content: "\b7";
margin: 0 10px;
}
footer ul li:last-child::after{
content: '';
content: "";
display: none;
}
@ -1018,7 +1018,7 @@ footer > a{
/* ebook list */
h1{
font-size: 2rem;
font-family: 'League Spartan', sans-serif;
font-family: "League Spartan", sans-serif;
line-height: 1.2;
border-bottom: 3px double var(--sub-text);
margin-top: 2rem;
@ -1101,7 +1101,7 @@ aside.warning,
aside.alert{
font-style: italic;
margin-top: 2rem;
background: url('/images/stripes.svg') #FFFF99;
background: url("/images/stripes.svg") #FFFF99;
color: var(--light-body-text);
border-radius: .25rem;
padding: 2rem;
@ -1255,7 +1255,7 @@ input[type="search"]{
width: 100%;
background: none;
border: none;
font-family: 'Crimson Pro';
font-family: "Crimson Pro";
color: var(--body-text);
}
@ -1295,8 +1295,8 @@ input[type="search"]:focus{
label.search::before{
display: block;
content: '\f002';
font-family: 'FontAwesome';
content: "\f002";
font-family: "FontAwesome";
font-size: 1rem;
line-height: 1;
margin-right: 1rem;
@ -1312,13 +1312,13 @@ main.ebooks nav ol li:not(:first-child):not(:last-child):not(.highlighted){
article nav ol li.highlighted::before,
main.ebooks nav ol li.highlighted::before{
content: '⋯';
content: "⋯";
padding-right: 1rem;
}
article nav ol li.highlighted::after,
main.ebooks nav ol li.highlighted::after{
content: '⋯';
content: "⋯";
padding-left: 1rem;
}

View file

@ -1,5 +1,46 @@
@import url("monokai.css");
@font-face{
font-family: "Fira Sans";
src: local("Fira Sans"), url("/fonts/fira-sans.woff2") format("woff2"), url("/fonts/fira-sans.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: "Fira Sans";
src: local("Fira Sans"), url("/fonts/fira-sans-bold.woff2") format("woff2"), url("/fonts/fira-sans-bold.woff") format("woff");
font-weight: bold;
font-style: normal;
}
@font-face{
font-family: "Fira Sans";
src: local("Fira Sans"), url("/fonts/fira-sans-italic.woff2") format("woff2"), url("/fonts/fira-sans-italic.woff") format("woff");
font-weight: normal;
font-style: italic;
}
@font-face{
font-family: "Fira Sans";
src: local("Fira Sans"), url("/fonts/fira-sans-bold-italic.woff2") format("woff2"), url("/fonts/fira-sans-bold-italic.woff") format("woff");
font-weight: bold;
font-style: italic;
}
@font-face{
font-family: "Fira Sans";
src: local("Fira Sans"), url("/fonts/fira-sans-bold.woff2") format("woff2"), url("/fonts/fira-sans-bold.woff") format("woff");
font-weight: bold;
font-style: normal;
}
main.manual{
font-family: "Fira Sans", sans-serif;
font-size: .8rem;
font-variant-numeric: initial;
}
main code:first-child{
margin-top: 0;
}
@ -136,19 +177,19 @@ code.full::before{
}
code.xml.full::before{
content: 'XML';
content: "XML";
}
code.html.full::before{
content: 'HTML';
content: "HTML";
}
code.css.full::before{
content: 'CSS';
content: "CSS";
}
code{
font-family: 'Fira Mono', monospace;
font-family: "Fira Mono", monospace;
font-size: .8rem;
}
@ -165,7 +206,7 @@ code.terminal{
}
code.terminal::before{
content: url('/images/terminal.svg');
content: url("/images/terminal.svg");
height: 1rem;
width: 1rem;
top: 1.15rem;
@ -189,7 +230,7 @@ code.terminal span::before{
}
code.terminal > span::before{
content:'user@localhost>';
content:"user@localhost>";
}
.utf{
@ -220,7 +261,7 @@ code.full .utf{
.step-by-step-guide > ol li::marker{
font-weight: bold;
font-family: 'League Spartan', sans-serif;
font-family: "League Spartan", sans-serif;
}
.step-by-step-guide > ol {
@ -240,7 +281,7 @@ code.full .utf{
margin-left: -4.5rem;
font-size: 1.2rem;
font-family: 'League Spartan', sans-serif;
font-family: "League Spartan", sans-serif;
line-height: 1.2;
letter-spacing: 1px;
text-transform: uppercase;
@ -308,7 +349,7 @@ figure.corrected::before{
}
figure.wrong code{
background: #550000 url('/images/stripes-dark.svg');
background: #550000 url("/images/stripes-dark.svg");
}
figure.wrong,
@ -332,13 +373,63 @@ figure.corrected code{
margin-top: 2rem;
}
.manual section section{
.manual ol ol{
margin-left: 0;
}
.manual figure code{
margin: 0;
}
.manual h2,
.manual h3,
.manual h4,
.manual h5,
.manual h6{
margin-left: 0;
}
.manual > article > section > section[id] > section > ol > li aside.number,
.manual > article > section > section[id] > section > aside.number{
margin-left: -12.5rem
}
.manual > article > section > section[id] > section > section > ol > li aside.number,
.manual > article > section > section[id] > section > section > aside.number{
margin-left: -14.5rem
}
.manual > article > section > section[id] > ol ol > li aside.number::after,
.manual > article > section > section[id] section > ol > li aside.number::after,
.manual > article > section > section[id] section > aside.number::after{
content: " ";
width: 2rem;
border-bottom: 1px dashed rgba(255, 255, 255, .5);
display: block;
margin-left: 10.25rem;
margin-top: -.5rem;
}
.manual > article > section > section[id] > section > ol ol > li aside.number::after,
.manual > article > section > section[id] > section > section > ol > li aside.number::after,
.manual > article > section > section[id] > section > section > aside.number::after{
width: 4rem;
}
.manual > article > section > section[id] section > ol > li aside.number,
.manual > article > section > section[id] section > aside.number{
margin-left: -12.5rem
}
.manual ol ol ul,
.manual ol ol p,
.manual ol ol figure,
.manual > article > section > section section{
margin-left: 2rem;
}
.manual section ol{
margin-top: 1rem;
margin-left: 2rem;
.manual ul > li > p{
margin-left: 0;
}
.manual section + section,
@ -359,6 +450,10 @@ figure.corrected code{
font-size: 2rem;
}
.manual section[id] > aside{
font-size: 1rem;
}
.manual section[id] > aside.number a,
.manual section[id] ol > li > aside.number a{
text-decoration: none;
@ -380,12 +475,10 @@ figure.corrected code{
.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;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
www/fonts/fira-sans.woff Normal file

Binary file not shown.

BIN
www/fonts/fira-sans.woff2 Normal file

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.