Skip to content

Instantly share code, notes, and snippets.

@davidbgk

davidbgk/README.md

Forked from baldurbjarnason/README.md
Created February 13, 2023 13:45
Show Gist options
  • Save davidbgk/cfb7e84b7177c6c2e96d1a79ad4caade to your computer and use it in GitHub Desktop.
Save davidbgk/cfb7e84b7177c6c2e96d1a79ad4caade to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @baldurbjarnason baldurbjarnason revised this gist Feb 13, 2023. No changes.
  2. @baldurbjarnason baldurbjarnason revised this gist Feb 10, 2023. 1 changed file with 19 additions and 3 deletions.
    22 changes: 19 additions & 3 deletions special.html
    View file
    Original file line number Diff line number Diff line change
    @@ -33,12 +33,21 @@
    <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
    <![endif]-->
    <!-- <script src="node_modules/pagedjs/dist/paged.polyfill.js"></script> -->
    $for(header-includes)$ $header-includes$ $endfor$
    </head>
    <body>
    $for(include-before)$ $include-before$ $endfor$ $if(title)$
    <body class="hyphenate">
    $for(include-before)$ $include-before$ $endfor$ $if(cover-image)$
    <div id="cover">
    <img src="$cover-image$" alt="Cover for $title$" />
    </div>
    $endif$ $if(title)$
    <div id="title-block-header2">
    <div class="title" id="faketitle">$title$</div>
    </div>
    <hr class="page-break" />
    <header id="title-block-header">
    <h1 class="title">$title$</h1>
    <h1 class="title" id="$idprefix$main-title">$title$</h1>
    $if(subtitle)$
    <p class="subtitle">$subtitle$</p>
    $endif$ $for(author)$
    @@ -49,6 +58,13 @@ <h1 class="title">$title$</h1>
    <p class="abstract">$abstract$</p>
    $endif$
    </header>
    $endif$ $if(copyright)$
    <div id="copyright">
    <p>$copyright$</p>
    <p>All rights reserved</p>
    <p>Published in Hveragerði, Iceland</p>
    <p>$copyright-additional$</p>
    </div>
    $endif$ $if(toc)$
    <nav id="$idprefix$TOC" role="doc-toc">
    $if(toc-title)$
  3. @baldurbjarnason baldurbjarnason revised this gist Feb 10, 2023. 2 changed files with 63 additions and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    ## Book production files

    For [Out of the Software Crisis](https://softwarecrisis.baldurbjarnason.com/)
    For [Out of the Software Crisis](https://softwarecrisis.baldurbjarnason.com/).

    These are under the MIT License. Do what you want, essentially. Probably doesn't work out of the box. Uses [Pandoc](https://pandoc.org/), [zx](https://www.npmjs.com/package/zx), [weasyprint](https://weasyprint.org/), and [Literata](https://fonts.google.com/specimen/Literata).

    62 changes: 62 additions & 0 deletions special.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,62 @@
    <!DOCTYPE html>
    <html
    xmlns="http://www.w3.org/1999/xhtml"
    lang="$lang$"
    xml:lang="$lang$"
    $if(dir)$
    dir="$dir$"
    $endif$
    >
    <head>
    <meta charset="utf-8" />
    <meta name="generator" content="pandoc" />
    <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=yes"
    />
    $for(author-meta)$
    <meta name="author" content="$author-meta$" />
    $endfor$ $if(date-meta)$
    <meta name="dcterms.date" content="$date-meta$" />
    $endif$ $if(keywords)$
    <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
    $endif$ $if(description-meta)$
    <meta name="description" content="$description-meta$" />
    $endif$
    <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
    <style>
    $styles.html()$
    </style>
    $for(css)$
    <link rel="stylesheet" href="$css$" />
    $endfor$ $if(math)$ $math$ $endif$
    <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
    <![endif]-->
    $for(header-includes)$ $header-includes$ $endfor$
    </head>
    <body>
    $for(include-before)$ $include-before$ $endfor$ $if(title)$
    <header id="title-block-header">
    <h1 class="title">$title$</h1>
    $if(subtitle)$
    <p class="subtitle">$subtitle$</p>
    $endif$ $for(author)$
    <p class="author">$author$</p>
    $endfor$ $if(date)$
    <p class="date">$date$</p>
    $endif$ $if(abstract)$
    <p class="abstract">$abstract$</p>
    $endif$
    </header>
    $endif$ $if(toc)$
    <nav id="$idprefix$TOC" role="doc-toc">
    $if(toc-title)$
    <h2 id="$idprefix$toc-title">$toc-title$</h2>
    $endif$ $table-of-contents$
    </nav>
    $endif$
    <main>$body$</main>
    $for(include-after)$ $include-after$ $endfor$
    </body>
    </html>
  4. @baldurbjarnason baldurbjarnason created this gist Feb 10, 2023.
    7 changes: 7 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    ## Book production files

    For [Out of the Software Crisis](https://softwarecrisis.baldurbjarnason.com/)

    These are under the MIT License. Do what you want, essentially. Probably doesn't work out of the box. Uses [Pandoc](https://pandoc.org/), [zx](https://www.npmjs.com/package/zx), [weasyprint](https://weasyprint.org/), and [Literata](https://fonts.google.com/specimen/Literata).

    You'll need to download them for this to work. And you'll need to edit the build script to point at the correct CSS files. And you'l need to edit the CSS to point at the correct font files.
    36 changes: 36 additions & 0 deletions build.mjs
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    import { $, chalk, echo, glob, path, fs } from "zx";

    $.verbose = false;

    const bookDir = "publications";
    const metadata = await glob([`${bookDir}/**/*.yaml`]);
    const books = metadata.map((name) => path.basename(name, ".yaml"));
    let bookData = [];

    for (const meta of metadata) {
    const book = path.basename(meta, ".yaml");
    const dir = path.dirname(meta);
    bookData = bookData.concat({
    slug: book,
    metadata: meta,
    chapters: await glob([`${dir}/*.md`]),
    });
    }

    for (const book of bookData) {
    const chapters = book.chapters.join(" ");
    const wc = $`wc -w ${book.chapters}`;

    console.log(chalk.bold.blue(book.slug));
    echo`\nWord count for ${book.slug}: \n${await wc}\n`;
    console.log("Building", chalk.bold(`dist/${book.slug}.pdf`));
    const cssPath = (await fs.pathExists(
    `${bookDir}/${book.slug}/${book.slug}.css`
    ))
    ? `--css=${bookDir}/${book.slug}/${book.slug}.css`
    : "";
    await $`pandoc ${book.chapters} -o dist/${book.slug}.pdf --css=src/pdf/style.css --resource-path=.:static:src:src/img --pdf-engine=weasyprint --toc --template=special ${cssPath}`;
    console.log("Building", chalk.bold(`dist/${book.slug}.epub`));
    await $`pandoc ${book.chapters} ${book.metadata} -o dist/${book.slug}.epub --css=src/pdf/epub.css --resource-path=.:static:src:src/img --toc --shift-heading-level-by=-1`;
    console.log(book.slug, ": done\n\n");
    }
    293 changes: 293 additions & 0 deletions epub.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,293 @@
    .Photo {
    height: 100%;
    /* page-break-after: always; */
    }

    .Notice {
    display: none;
    }

    h1 {
    margin: 0;
    padding: 0;
    font-family: Literata36, "Iowan Old Style", "Sitka Text", Palatino,
    "Book Antiqua", serif;
    font-weight: 300;
    line-height: 1;
    font-size: 2em;
    text-align: center;
    }

    .author {
    font-size: 2.5em;
    text-align: center;
    margin: 0;
    padding: 2em 0;
    }
    .date {
    font-size: 3em;
    text-align: center;
    font-style: italic;
    margin: 0;
    padding: 0;
    display: none;
    }

    .Preamble {
    font-style: italic;
    text-align: center;
    width: 75%;
    margin: 0 auto;
    color: white;
    }

    h2 {
    /* page-break-after: always; */
    }

    html {
    hyphens: auto;
    }
    html {
    font-family: Literata, "Iowan Old Style", "Sitka Text", Palatino,
    "Book Antiqua", serif;
    }

    /* Base */
    * {
    box-sizing: border-box;
    }

    img {
    max-width: 100%;
    height: auto;
    }

    body {
    font-family: Literata, "Iowan Old Style", "Sitka Text", Palatino,
    "Book Antiqua", serif;
    margin: 0;
    line-height: 1.25;
    hyphens: auto;
    }
    hr {
    border: none;
    border-bottom: 1px solid #333;
    width: 50%;
    margin: 0 auto;
    padding-top: 2.5em;
    margin-bottom: 2.5em;
    }

    blockquote {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    padding: 0;
    margin-left: 1.25em;
    }
    blockquote,
    blockquote p {
    font-size: 0.95em;
    line-height: 1.2;
    }

    a:link {
    color: #003366;
    position: relative;
    }
    a:visited {
    color: #620;
    }
    a:hover {
    color: #620;
    }

    [aria-hidden="true"] {
    display: none;
    }

    .contact-list {
    padding: 0;
    list-style: none;
    margin: 0 0 2em;
    }
    p {
    margin: 0;
    }

    p,
    ol,
    ul,
    dl,
    blockquote,
    figure,
    table,
    hr,
    section,
    article,
    details,
    figcaption {
    margin-top: 1.25em;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    text-align: left;
    }

    figcaption {
    font-style: italic;
    }

    abbr {
    font-variant: none;
    text-transform: uppercase;
    font-variant-caps: all-small-caps;
    }

    pre code {
    page-break-inside: avoid;
    white-space: pre-wrap;
    }

    body > header {
    margin: 1em;
    }

    main header {
    margin: 0 0 3em 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    }

    h1,
    h2,
    h3,
    hr {
    font-family: Literata36, "Iowan Old Style", "Sitka Text", Palatino,
    "Book Antiqua", serif;
    /* break-before: always;
    page-break-before: always; */
    padding-top: 5em;
    hyphens: manual;
    }

    h1 {
    padding: 1rem 0;
    margin: 3rem 0 3rem;
    line-height: 1.25;
    border-bottom: 1px solid black;
    }

    h1.main {
    border: none;
    margin-top: 3em;
    }

    .subtitle {
    font-size: 1.5rem;
    text-align: center;
    }
    .author {
    font-size: 2rem;
    text-align: center;
    font-style: italic;
    }
    .rights {
    text-align: center;
    }

    h1.main::before {
    border: none;
    content: "";
    }

    h1::before {
    content: attr(data-number);
    display: block;
    padding: 1rem 0;
    margin: 1rem 0;
    border-bottom: 1px solid black;
    }

    /* section div.PartPage {
    -webkit-page-break-after: always;
    -webkit-page-break-before: always;
    page-break-after: always;
    page-break-before: always;
    -webkit-column-break-after: always;
    -webkit-column-break-before: always;
    column-break-after: always;
    column-break-before: always;
    page-break-after: page;
    page-break-before: page;
    break-after: always;
    break-before: always;
    } */
    .part-title {
    text-align: center;
    font-size: 250%;
    line-height: 1;
    display: block;
    background-color: page;
    }
    .part {
    display: block;
    font-size: 125%;
    text-align: center;
    margin: 0;
    padding-top: 10rem;
    }
    .part-title + .part {
    padding-top: 1rem;
    }

    hr.epub-break {
    border: none;
    /* page-break-after: always;
    -webkit-page-break-after: always; */
    /* page-break-after: always;
    -webkit-column-break-after: always;
    column-break-after: always; */
    /* page-break-after: page;
    break-after: always; */
    }

    h2 {
    font-size: 1.5em;
    font-weight: 600;
    margin: 0;
    padding: 1rem 0 0;
    line-height: 1.2;
    text-transform: uppercase;
    }

    h3 {
    font-size: 1.1em;
    line-height: 1.2;
    font-weight: 600;
    margin: 0;
    padding: 0.5rem 0 0;
    font-style: italic;
    }

    code {
    font-family: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono,
    Monaco, Lucida Console, monospace;
    }

    #toc ol ol {
    display: none;
    }

    .Aside {
    background-color: #f0f0f0;
    padding: 0.25rem 2.2rem 1.1rem;
    margin: 1.1rem -2.2rem;
    position: relative;
    }
    .references li p {
    hyphens: manual;
    text-align: left;
    }
    704 changes: 704 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,704 @@
    @font-face {
    font-family: "Literata Regular";
    src: url("Literata/Literata-Italic.ttf");
    font-style: italic;
    }
    @font-face {
    font-family: "Literata Regular";
    src: url("Literata/Literata-Regular.ttf");
    font-weight: 400;
    font-style: normal;
    }
    @font-face {
    font-family: "Literata Regular";
    src: url("Literata/Literata-BoldItalic.ttf");
    font-weight: 600;
    font-style: italic;
    }
    @font-face {
    font-family: "Literata Regular";
    src: url("Literata/Literata-Bold.ttf");
    font-weight: 600;
    }
    @font-face {
    font-family: "Literata36";
    src: url("Literata_36pt/Literata_36pt-Italic.ttf");
    font-style: italic;
    }
    @font-face {
    font-family: "Literata36";
    src: url("Literata_36pt/Literata_36pt-Bold.ttf");
    font-weight: 600;
    }
    @font-face {
    font-family: "Literata36";
    src: url("Literata_36pt/Literata_36pt-BoldItalic.ttf");
    font-weight: 600;
    font-style: italic;
    }
    @font-face {
    font-family: "Literata36";
    src: url("Literata_36pt/Literata_36pt-Light.ttf");
    font-weight: 300;
    }
    @font-face {
    font-family: "Literata36";
    src: url("Literata_36pt/Literata_36pt-LightItalic.ttf");
    font-weight: 300;
    font-style: italic;
    }
    @font-face {
    font-family: "Literata36";
    src: url("Literata_36pt/Literata_36pt-Regular.ttf");
    font-weight: 400;
    }

    html {
    font-variant-ligatures: common-ligatures;
    font-family: "Literata Regular", "Iowan Old Style", "Sitka Text", Palatino,
    "Book Antiqua", serif;
    font-weight: normal;
    font-style: normal;
    }

    p,
    span {
    font-weight: normal;
    font-style: normal;
    }

    #TOC {
    page: empty;
    line-height: 1.4;
    }

    #TOC > ul {
    counter-reset: tocCounter;
    counter-reset: subTocCounter;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1rem;
    }
    #TOC > ul ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 1.25em;
    font-size: 1rem;
    }
    #TOC > ul > li {
    counter-increment: tocCounter;
    margin: 0.5rem 0;
    font-weight: normal;
    }

    #TOC li {
    padding: 0;
    }

    #TOC > ul > li li {
    counter-increment: subTocCounter;
    margin: 0.5rem 0;
    }

    #TOC > ul > li > a {
    text-transform: uppercase;
    }

    #TOC li a {
    text-decoration: none;
    color: black;
    }
    #TOC li a::after {
    content: leader(".") target-counter(attr(href), page);
    }
    #TOC li a::before {
    margin-right: 1rem;
    }
    #TOC li li a::before {
    content: counter(subTocCounter) ".";
    margin-right: 1rem;
    display: inline-block;
    width: 1.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    }
    #TOC li a#toc-do-you-feel-lost-in-a-wilderness-of-web-dev-frameworks {
    display: none;
    }

    #TOC ul ul ul {
    display: none;
    }

    @page {
    size: A4;
    margin: 2.5cm 2.75cm;
    @top-center {
    content: string(chapter);
    font-style: italic;
    font-size: 1rem;
    }
    @bottom-center {
    font-style: italic;
    content: counter(page);
    }
    @footnote {
    border-top: 1px solid black;
    }
    }

    @page :left {
    @top-center {
    content: string(chapter);
    font-style: italic;
    font-size: 1rem;
    }
    }

    @page :right {
    @top-center {
    content: string(title);
    font-style: italic;
    font-size: 1rem;
    }
    }
    @page headingpage {
    margin: 2cm 2.75cm;
    @top-center {
    content: "";
    }
    @bottom-center {
    content: "";
    }
    }
    @page partpage {
    background-color: #f5f5f5;
    margin: 2cm;
    @top-center {
    content: "";
    }
    @bottom-center {
    content: "";
    }
    }
    @page subheadingpage {
    margin: 2cm;
    @top-center {
    content: "";
    }
    }
    @page empty {
    margin: 2.5cm 3cm;
    @top-center {
    content: "";
    }
    @bottom-center {
    content: "";
    }
    }
    @page :blank {
    margin: 2.5cm 3cm;
    @top-center {
    content: "";
    }
    @bottom-center {
    content: "";
    }
    }

    @page titlepage {
    /* color: white;
    background-color: #d4015e; */
    margin: 1cm 3cm;
    font-weight: normal;
    @top-center {
    content: "";
    }
    @bottom-center {
    content: "";
    }
    }
    @page photopage {
    background-color: #333;
    margin: 2cm;
    @top-center {
    height: 0;
    content: "";
    }
    @bottom-center {
    height: 0;
    content: "";
    }
    }
    @page cover {
    background-color: transparent;
    margin: 0;
    @top-center {
    height: 0;
    content: "";
    }
    @bottom-center {
    height: 0;
    content: "";
    }
    }

    #cover {
    page: cover;
    width: 100%;
    height: 100%;
    }
    #cover img {
    object-fit: cover;
    display: block;
    height: 100%;
    width: 100%;
    }

    .Photo {
    page: photopage;
    height: 100%;
    page-break-after: always;
    }

    .Notice {
    display: none;
    }

    #title-block-header,
    #title-block-header2,
    #copyright {
    page: titlepage;
    padding: 0;
    margin: 0;
    margin-top: 12rem;
    page-break-before: right;
    }
    #copyright {
    page-break-before: left;
    }

    #title-block-header h1,
    #title-block-header2 h1,
    #faketitle {
    margin: 0;
    margin-bottom: 2rem;
    padding: 0 1rem;
    font-family: Literata36, "Iowan Old Style", "Sitka Text", Palatino,
    "Book Antiqua", serif;
    font-weight: 600;
    line-height: 1;
    font-size: 4.5rem;
    text-align: center;
    string-set: title content();
    counter-reset: chapterCounter;
    }
    #title-block-header2 h1 {
    bookmark-level: none;
    }
    #copyright p {
    font-style: italic;
    text-align: center;
    text-indent: 0;
    margin: 0.5rem 0;
    }

    .author {
    font-size: 2.5rem;
    text-align: center;
    margin: 2rem 0;
    padding: 0;
    }

    .subtitle {
    font-size: 1.5rem;
    text-align: center;
    font-style: italic;
    padding: 1rem 0;
    }

    .date {
    font-size: 3rem;
    text-align: center;
    font-style: italic;
    margin: 0;
    padding: 0;
    display: none;
    }

    .abstract {
    font-style: italic;
    text-align: center;
    width: 75%;
    margin: 0 auto;
    color: white;
    page-break-after: always;
    text-indent: 0;
    }

    /* Base */
    * {
    box-sizing: border-box;
    }

    img {
    max-width: 100%;
    height: auto;
    }

    body {
    margin: 0;
    line-height: 1.475;
    font-size: 1.1rem;
    hyphens: auto;
    }

    hr {
    border: none;
    border-bottom: 1px solid #333;
    width: 50%;
    margin: 0 auto;
    padding-top: 2.2rem;
    padding-bottom: 2.2rem;
    height: 1px;
    }

    hr.page-break {
    border: none;
    margin: 0;
    page-break-before: always;
    page-break-after: always;
    page: empty;
    }

    hr.page-break-after {
    border: none;
    margin: 0;
    page-break-after: always;
    }
    hr.space {
    border-color: transparent;
    }

    blockquote {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    margin-left: 2.5em;
    }
    blockquote,
    blockquote p {
    font-size: 1rem;
    line-height: 1.2;
    }

    a:link {
    color: #003366;
    position: relative;
    }
    a:visited {
    color: #620;
    }
    a:hover {
    color: #620;
    }

    [aria-hidden="true"] {
    display: none;
    }

    .contact-list {
    padding: 0;
    list-style: none;
    margin: 0 0 2em;
    }
    p {
    margin: 0;
    }

    p + p {
    text-indent: 1.5rem;
    }

    ol,
    blockquote,
    ul,
    dl,
    section,
    article,
    details,
    figcaption {
    padding: 1.1em 0;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    text-indent: 0;
    margin: 0;
    }

    li {
    text-align: left;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    text-indent: 0;
    margin: 0;
    padding-left: 1.5rem;
    padding-right: 0.7rem;
    }

    li + li {
    padding-top: 1.1rem;
    }

    figure {
    padding: 2.2rem 2.2rem 1.1rem;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    text-indent: 0;
    margin: 0;
    page-break-inside: avoid;
    }

    figure.image {
    padding: 1.1rem 0;
    }
    figure.image > figcaption {
    padding: 0.55rem 2.2rem;
    }

    figure blockquote,
    figure blockquote > p:first-child {
    padding: 0;
    }
    figure figcaption {
    padding-top: 0.55rem;
    font-size: 0.9rem;
    padding-bottom: 0.55rem;
    font-style: italic;
    text-align: right;
    }
    figure blockquote {
    font-size: 0.85rem;
    }

    figure + figure {
    padding-top: 0;
    }

    h3 + figure {
    padding-top: 1.1rem;
    margin-top: 0;
    }

    table {
    width: 100%;
    page-break-inside: avoid;
    margin: 1.1em 0;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
    text-indent: 0;
    /* table-layout: fixed; */
    width: 100%;
    border-collapse: collapse;
    }
    th {
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
    }

    main * {
    text-align: justify;
    }
    .sourceCode * {
    text-align: left;
    hyphens: none;
    white-space: pre-wrap;
    }

    abbr {
    font-variant: none;
    text-transform: uppercase;
    font-variant-caps: all-small-caps;
    }

    pre {
    max-width: 100%;
    background-color: white;
    }

    h2 {
    font-family: Literata36, "Iowan Old Style", "Sitka Text", Palatino,
    "Book Antiqua", serif;
    padding-top: 0em;
    margin-top: -5rem;
    }

    main h3 {
    font-family: Literata36, "Iowan Old Style", "Sitka Text", Palatino,
    "Book Antiqua", serif;
    counter-increment: subChapterCounter;
    }
    h3 {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 400;
    text-align: left;
    margin-bottom: 0.55rem;
    }

    h2::before {
    content: counter(chapterCounter);
    border-bottom: 1px solid;
    font-size: 2.5rem;
    width: 18rem;
    font-weight: normal;
    margin: 1.75rem auto 1.5rem;
    display: block;
    padding: 1.75rem 0 1.5rem;
    }
    h2#introduction::before {
    content: "";
    }

    h2::after {
    content: " ";
    border-top: 1px solid;
    width: 18rem;
    height: 1px;
    margin: 1.75rem auto;
    display: block;
    }
    h2 {
    font-size: 2.5rem;
    font-weight: 600;
    padding: 0.5em 0;
    margin: 2em 0 0;
    line-height: 1.2;
    text-align: center;
    }
    #toc-title {
    page-break-after: avoid;
    page-break-before: avoid;
    text-align: left;
    padding: 0;
    margin: 3rem 0 2rem;
    font-size: 2rem;
    string-set: chapter "";
    bookmark-level: 1;
    }

    main h2 {
    string-set: chapter content();
    page-break-before: right;
    break-before: right;
    page: headingpage;
    bookmark-level: 1;
    }

    main h1 {
    page-break-before: left;
    break-before: left;
    page: partpage;
    font-size: 6rem;
    text-align: center;
    font-weight: 400;
    line-height: 1;
    bookmark-level: 1;
    }

    main h1::before {
    content: "";
    display: block;
    break-after: always;
    }

    h1 .part {
    display: block;
    font-size: 50%;
    text-align: center;
    margin: 0;
    padding-top: 10rem;
    }
    main .part-title + .part {
    display: block;
    font-size: 50%;
    text-align: center;
    margin: 0;
    padding-top: 1rem;
    }

    #what-next .part-title {
    padding-top: 10rem;
    display: block;
    text-align: center;
    }

    main h2:not(#introduction):not(#toc-title) {
    counter-increment: chapterCounter;
    bookmark-level: 2;
    }

    #toc-title::before,
    #toc-title::after {
    display: none;
    }

    code {
    font-size: 75%;
    line-height: 1;

    font-family: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono,
    Monaco, Lucida Console, monospace;
    }
    * {
    text-rendering: geometricprecision !important;
    }

    .Aside,
    .Releases {
    background-color: #f0f0f0;
    padding: 0.25rem 2.2rem 1.95rem;
    margin: 1.1rem -2.2rem;
    position: relative;
    }

    .Aside p:first-child {
    padding-top: 1.35rem;
    }

    h4 {
    margin-bottom: 0;
    }

    .Aside h4 {
    margin: 0;
    padding: 0;
    }
    .Releases h4 {
    margin: 0;
    padding: 0;
    padding-top: 1.35rem;
    font-size: 1.35rem;
    }
    .Releases li {
    padding-left: 1.1rem;
    }

    .references li p {
    hyphens: manual;
    text-align: left;
    }

    #toc-appendix-a-choosing-a-web-framework ul {
    display: none;
    }

    hr.epub-break {
    display: none;
    }