tre
/
fic-archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add CSS for contents navigator

Browse Source
master
trémeur 5 months ago
parent 9fa87b5955
commit f92d6fab53
1 changed files with 292 additions and 245 deletions
Show Stats Download Patch File Download Diff File

537
build/tufte.css
Unescape Escape View File

@ -39,442 +39,489 @@ html {
} }
body { body {
width: 87.5%; width: 87.5%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: 12.5%; padding-left: 12.5%;
font-family: "EB Garamond", serif; font-family: "EB Garamond", serif;
background-color: #fffff8; background-color: #fffff8;
color: #111; color: #111;
max-width: 1400px; max-width: 1400px;
counter-reset: sidenote-counter; counter-reset: sidenote-counter;
} }
/* Adds dark mode */ /* Adds dark mode */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { body {
background-color: #151515; background-color: #151515;
color: #ddd; color: #ddd;
} }
} }
h1 { h1 {
font-weight: 400; font-weight: 400;
margin-top: 4rem; margin-top: 4rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
font-size: 3.2rem; font-size: 3.2rem;
line-height: 1; line-height: 1;
} }
h2 { h2 {
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
margin-top: 2.1rem; margin-top: 2.1rem;
margin-bottom: 1.4rem; margin-bottom: 1.4rem;
font-size: 2.2rem; font-size: 2.2rem;
line-height: 1; line-height: 1;
} }
h3 { h3 {
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
font-size: 1.7rem; font-size: 1.7rem;
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 1.4rem; margin-bottom: 1.4rem;
line-height: 1; line-height: 1;
} }
hr { hr {
display: block; display: block;
height: 1px; height: 1px;
width: 55%; width: 55%;
border: 0; border: 0;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
margin: 1em 0; margin: 1em 0;
padding: 0; padding: 0;
} }
p.subtitle { p.subtitle {
font-style: italic; font-style: italic;
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 1.8rem; font-size: 1.8rem;
display: block; display: block;
line-height: 1; line-height: 1;
} }
.numeral { .numeral {
font-family: "EB Garamond", serif; font-family: "EB Garamond", serif;
} }
.danger { .danger {
color: red; color: red;
} }
article { article {
padding: 5rem 0rem; padding: 5rem 0rem;
} }
section { section {
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
} }
p, p,
dl, dl,
ol, ol,
ul { ul {
font-size: 1.4rem; font-size: 1.4rem;
line-height: 2rem; line-height: 2rem;
} }
p { p {
margin-top: 1.4rem; margin-top: 1.4rem;
margin-bottom: 1.4rem; margin-bottom: 1.4rem;
padding-right: 0; padding-right: 0;
vertical-align: baseline; vertical-align: baseline;
} }
/* Chapter Epigraphs */ /* Chapter Epigraphs */
div.epigraph { div.epigraph {
margin: 5em 0; margin: 5em 0;
} }
div.epigraph > blockquote { div.epigraph > blockquote {
margin-top: 3em; margin-top: 3em;
margin-bottom: 3em; margin-bottom: 3em;
} }
div.epigraph > blockquote, div.epigraph > blockquote,
div.epigraph > blockquote > p { div.epigraph > blockquote > p {
font-style: italic; font-style: italic;
} }
div.epigraph > blockquote > footer { div.epigraph > blockquote > footer {
font-style: normal; font-style: normal;
} }
div.epigraph > blockquote > footer > cite { div.epigraph > blockquote > footer > cite {
font-style: italic; font-style: italic;
} }
/* end chapter epigraphs styles */ /* end chapter epigraphs styles */
blockquote { blockquote {
font-size: 1.4rem; font-size: 1.4rem;
} }
blockquote p { blockquote p {
width: 55%; width: 55%;
margin-right: 40px; margin-right: 40px;
} }
blockquote footer { blockquote footer {
width: 55%; width: 55%;
font-size: 1.1rem; font-size: 1.1rem;
text-align: right; text-align: right;
} }
section > p, section > p,
section > footer, section > footer,
section > table { section > table {
width: 55%; width: 55%;
} }
/* 50 + 5 == 55, to be the same width as paragraph */ /* 50 + 5 == 55, to be the same width as paragraph */
section > dl, section > dl,
section > ol, section > ol,
section > ul { section > ul {
width: 50%; width: 50%;
-webkit-padding-start: 5%; -webkit-padding-start: 5%;
} }
dt:not(:first-child), dt:not(:first-child),
li:not(:first-child) { li:not(:first-child) {
margin-top: 0.25rem; margin-top: 0.25rem;
} }
figure { figure {
padding: 0; padding: 0;
border: 0; border: 0;
font-size: 100%; font-size: 100%;
font: inherit; font: inherit;
vertical-align: baseline; vertical-align: baseline;
max-width: 55%; max-width: 55%;
-webkit-margin-start: 0; -webkit-margin-start: 0;
-webkit-margin-end: 0; -webkit-margin-end: 0;
margin: 0 0 3em 0; margin: 0 0 3em 0;
} }
figcaption { figcaption {
float: right; float: right;
clear: right; clear: right;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1.6; line-height: 1.6;
vertical-align: baseline; vertical-align: baseline;
position: relative; position: relative;
max-width: 40%; max-width: 40%;
} }
figure.fullwidth figcaption { figure.fullwidth figcaption {
margin-right: 24%; margin-right: 24%;
} }
/* Links: replicate underline that clears descenders */ /* Links: replicate underline that clears descenders */
a:link, a:link,
a:visited { a:visited {
color: inherit; color: inherit;
} }
.no-tufte-underline:link { .no-tufte-underline:link {
background: unset; background: unset;
text-shadow: unset; text-shadow: unset;
} }
a:link, .tufte-underline, .hover-tufte-underline:hover { a:link, .tufte-underline, .hover-tufte-underline:hover {
text-decoration: none; text-decoration: none;
background: -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(currentColor, currentColor); background: -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(currentColor, currentColor);
background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(currentColor, currentColor); background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(currentColor, currentColor);
-webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
-moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
background-size: 0.05em 1px, 0.05em 1px, 1px 1px; background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
background-repeat: no-repeat, no-repeat, repeat-x; background-repeat: no-repeat, no-repeat, repeat-x;
text-shadow: 0.03em 0 #fffff8, -0.03em 0 #fffff8, 0 0.03em #fffff8, 0 -0.03em #fffff8, 0.06em 0 #fffff8, -0.06em 0 #fffff8, 0.09em 0 #fffff8, -0.09em 0 #fffff8, 0.12em 0 #fffff8, -0.12em 0 #fffff8, 0.15em 0 #fffff8, -0.15em 0 #fffff8; text-shadow: 0.03em 0 #fffff8, -0.03em 0 #fffff8, 0 0.03em #fffff8, 0 -0.03em #fffff8, 0.06em 0 #fffff8, -0.06em 0 #fffff8, 0.09em 0 #fffff8, -0.09em 0 #fffff8, 0.12em 0 #fffff8, -0.12em 0 #fffff8, 0.15em 0 #fffff8, -0.15em 0 #fffff8;
background-position: 0% 93%, 100% 93%, 0% 93%; background-position: 0% 93%, 100% 93%, 0% 93%;
} }
@media screen and (-webkit-min-device-pixel-ratio: 0) { @media screen and (-webkit-min-device-pixel-ratio: 0) {
a:link, .tufte-underline, .hover-tufte-underline:hover { a:link, .tufte-underline, .hover-tufte-underline:hover {
background-position-y: 87%, 87%, 87%; background-position-y: 87%, 87%, 87%;
} }
} }
/* Adds dark mode */ /* Adds dark mode */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
a:link, .tufte-underline, .hover-tufte-underline:hover { a:link, .tufte-underline, .hover-tufte-underline:hover {
text-shadow: 0.03em 0 #151515, -0.03em 0 #151515, 0 0.03em #151515, 0 -0.03em #151515, 0.06em 0 #151515, -0.06em 0 #151515, 0.09em 0 #151515, -0.09em 0 #151515, 0.12em 0 #151515, -0.12em 0 #151515, 0.15em 0 #151515, -0.15em 0 #151515; text-shadow: 0.03em 0 #151515, -0.03em 0 #151515, 0 0.03em #151515, 0 -0.03em #151515, 0.06em 0 #151515, -0.06em 0 #151515, 0.09em 0 #151515, -0.09em 0 #151515, 0.12em 0 #151515, -0.12em 0 #151515, 0.15em 0 #151515, -0.15em 0 #151515;
} }
} }
a:link::selection, a:link::selection,
a:link::-moz-selection { a:link::-moz-selection {
text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe; text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
background: #b4d5fe; background: #b4d5fe;
} }
/* Sidenotes, margin notes, figures, captions */ /* Sidenotes, margin notes, figures, captions */
img { img {
max-width: 100%; max-width: 100%;
} }
.sidenote, .sidenote,
.marginnote { .marginnote {
float: right; float: right;
clear: right; clear: right;
margin-right: -60%; margin-right: -60%;
width: 50%; width: 50%;
margin-top: 0.3rem; margin-top: 0.3rem;
margin-bottom: 0; margin-bottom: 0;
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1.3; line-height: 1.3;
vertical-align: baseline; vertical-align: baseline;
position: relative; position: relative;
} }
.sidenote-number { .sidenote-number {
counter-increment: sidenote-counter; counter-increment: sidenote-counter;
} }
.sidenote-number:after, .sidenote-number:after,
.sidenote:before { .sidenote:before {
font-family: "EB Garamond", serif; font-family: "EB Garamond", serif;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
.sidenote-number:after { .sidenote-number:after {
content: counter(sidenote-counter); content: counter(sidenote-counter);
font-size: 1rem; font-size: 1rem;
top: -0.5rem; top: -0.5rem;
left: 0.1rem; left: 0.1rem;
} }
.sidenote:before { .sidenote:before {
content: counter(sidenote-counter) " "; content: counter(sidenote-counter) " ";
font-size: 1rem; font-size: 1rem;
top: -0.5rem; top: -0.5rem;
} }
blockquote .sidenote, blockquote .sidenote,
blockquote .marginnote { blockquote .marginnote {
margin-right: -82%; margin-right: -82%;
min-width: 59%; min-width: 59%;
text-align: left; text-align: left;
} }
div.fullwidth, div.fullwidth,
table.fullwidth { table.fullwidth {
width: 100%; width: 100%;
} }
div.table-wrapper { div.table-wrapper {
overflow-x: auto; overflow-x: auto;
font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif; font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif;
} }
.sans { .sans {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
letter-spacing: .03em; letter-spacing: .03em;
} }
code, pre > code { code, pre > code {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 1.0rem; font-size: 1.0rem;
line-height: 1.42; line-height: 1.42;
-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. See https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */ -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. See https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */
} }
.sans > code { .sans > code {
font-size: 1.2rem; font-size: 1.2rem;
} }
h1 > code, h1 > code,
h2 > code, h2 > code,
h3 > code { h3 > code {
font-size: 0.80em; font-size: 0.80em;
} }
.marginnote > code, .marginnote > code,
.sidenote > code { .sidenote > code {
font-size: 1rem; font-size: 1rem;
} }
pre > code { pre > code {
font-size: 0.9rem; font-size: 0.9rem;
width: 52.5%; width: 52.5%;
margin-left: 2.5%; margin-left: 2.5%;
overflow-x: auto; overflow-x: auto;
display: block; display: block;
} }
pre.fullwidth > code { pre.fullwidth > code {
width: 90%; width: 90%;
} }
.fullwidth { .fullwidth {
max-width: 90%; max-width: 90%;
clear:both; clear:both;
} }
span.newthought, p.newthought::first-line { span.newthought, p.newthought::first-line {
font-variant: small-caps; font-variant: small-caps;
font-size: 1.2em; font-size: 1.2em;
} }
input.margin-toggle { input.margin-toggle {
display: none; display: none;
} }
label.sidenote-number { label.sidenote-number {
display: inline-block; display: inline-block;
max-height: 2rem; /* should be less than or equal to paragraph line-height */ max-height: 2rem; /* should be less than or equal to paragraph line-height */
} }
label.margin-toggle:not(.sidenote-number) { label.margin-toggle:not(.sidenote-number) {
display: none; display: none;
} }
.iframe-wrapper { .iframe-wrapper {
position: relative; position: relative;
padding-bottom: 56.25%; /* 16:9 */ padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px; padding-top: 25px;
height: 0; height: 0;
} }
.iframe-wrapper iframe { .iframe-wrapper iframe {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@media (max-width: 760px) { @media (max-width: 760px) {
body { body {
width: 84%; width: 84%;
padding-left: 8%; padding-left: 8%;
padding-right: 8%; padding-right: 8%;
} }
hr, hr,
section > p, section > p,
section > footer, section > footer,
section > table { section > table {
width: 100%; width: 100%;
} }
pre > code { pre > code {
width: 97%; width: 97%;
} }
section > dl, section > dl,
section > ol, section > ol,
section > ul { section > ul {
width: 90%; width: 90%;
} }
figure { figure {
max-width: 90%; max-width: 90%;
} }
figcaption, figcaption,
figure.fullwidth figcaption { figure.fullwidth figcaption {
margin-right: 0%; margin-right: 0%;
max-width: none; max-width: none;
} }
blockquote { blockquote {
margin-left: 1.5em; margin-left: 1.5em;
margin-right: 0em; margin-right: 0em;
} }
blockquote p, blockquote p,
blockquote footer { blockquote footer {
width: 100%; width: 100%;
} }
label.margin-toggle:not(.sidenote-number) { label.margin-toggle:not(.sidenote-number) {
display: inline; display: inline;
} }
.sidenote, .sidenote,
.marginnote { .marginnote {
display: none; display: none;
} }
.margin-toggle:checked + .sidenote, .margin-toggle:checked + .sidenote,
.margin-toggle:checked + .marginnote { .margin-toggle:checked + .marginnote {
display: block; display: block;
float: left; float: left;
left: 1rem; left: 1rem;
clear: both; clear: both;
width: 95%; width: 95%;
margin: 1rem 2.5%; margin: 1rem 2.5%;
vertical-align: baseline; vertical-align: baseline;
position: relative; position: relative;
} }
label { label {
cursor: pointer; cursor: pointer;
} }
div.table-wrapper, div.table-wrapper,
table { table {
width: 85%; width: 85%;
} }
img { img {
width: 100%; width: 100%;
} }
}
/* contents navigator */
details#chapters {
position: fixed;
right: 2px;
top: 2px;
z-index: 300;
max-height: 80%;
overflow: auto;
background-color: #151515;
color: #fffff8;
text-align: center;
border: 3px solid #fffff8;
border-radius: 2px;
}
details#chapters summary {
cursor: pointer;
display: block;
padding: 2px 5px 5px;
}
details#chapters summary::marker {
list-style: none;
}
details#chapters summary::after {
content: "❮❮";
}
details#chapters[open] summary::after {
content: "❯❯";
}
details#chapters ul {
padding: 3px;
}
details#chapters li {
list-style: none;
margin: 5px 10px;
}
details#chapters a {
text-shadow: none;
} }

Write Preview
Loading…
Cancel
Save