ietf/static/css/document_html_txt.scss

// Based on https://github.com/martinthomson/rfc-css/blob/ea8e9e34897bf6bdb6b1b7cf336f9aa25f576d76/rfc.css
// (Version hash to make future merging easier.)

:root {
  --line: 1.2em;
  --block: 0 0 0 3ch;
  --paragraph: var(--line) 0 var(--line) 3ch;
}

// WeasyPrint can't handle CSS variables in multi-attribute properties, so work
// around that
// https://github.com/Kozea/WeasyPrint/issues/1219

@mixin margin-paragraph {
  margin-top: var(--line);
  margin-right: 0;
  margin-bottom: var(--line);
  margin-left: 3ch;
}

@mixin margin-line {
  margin-top: var(--line);
  margin-right: 0;
  margin-bottom: var(--line);
  margin-left: 0;
}

@mixin margin-block {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 3ch;
}

.rfchtml {
// body {
//   color: black;
//   font-family: monospace;
//   font-size: 1em;
  line-height: var(--line);
  width: 72ch;
  // margin: var(--line) 3ch;
  margin-top: var(--line);
  margin-right: 3ch;
  margin-bottom: var(--line);
  margin-left: 3ch;

  /* Really long lines can wrap when all else fails.
   * This won't affect <pre> or <table>, or cases where soft-wrapping occurs.
   * Mostly this exists so that long URLs wrap properly in Safari, which
   * doesn't break words at '/' like other browsers. */
  overflow-wrap: break-word;

h1, h2, h3, h4, h5 {
  font-weight: bold;
  font-size: inherit;
  line-height: inherit;
  @include margin-line; // margin: var(--line) 0;
}
.section-number {
  margin-right: 1ch;
}
p {
  margin: 0;
}
section > p, section > div > p {
  @include margin-paragraph; // margin: var(--paragraph);
}
aside {
  @include margin-block; // margin: var(--block);
}
figure {
  margin: 0;
}
blockquote {
  @include margin-paragraph; // margin: var(--paragraph);
  padding-left: calc(2ch - 2px);
  border-left: 2px solid darkgrey;
}

/* Header junk */
#external-metadata {
  display: none !important; /* metadata.min.js is evil because it produces unstyleable goop */
}
#identifiers dt:is(.label-stream, .label-rfc, .label-std, .label-bcp, .label-internet-draft,
                   .label-workgroup, .label-intended-status, .label-obsoletes, .label-updates,
                   .label-published, .label-expires, .label-category, .label-issn,
                   .label-authors), .ears {
  display: none;
}
#identifiers {
  margin: 0;
}
#identifiers dt {
  margin: 0 1ch 0 0;
  float: revert;
  display: inline-block;
}
#identifiers dd {
  margin: 0;
  margin-left: 0 !important; /* grr */
  width: 47ch;
  /* HAXX: this gets around the lack of text-content-trim support */
  display: flex;
  flex-wrap: wrap;
}
#identifiers dd::before {
  margin: 0 1ch 0 0;
}
#identifiers dd.rfc::before {
  content: "Request for Comments:";
}
#identifiers dd.std::before {
  content: "STD:";
}
#identifiers dd.bcp::before {
  content: "BCP:";
}
#identifiers dd.internet-draft::before {
  content: "Internet-Draft:";
}
#identifiers dd.workgroup::before {
  content: "Workgroup:";
}
#identifiers dd.intended-status::before {
  content: "Intended Status:";
}
#identifiers dd.obsoletes::before {
  content: "Obsoletes:";
  margin: 0 0 0 -10ch;
}
#identifiers dd.obsoletes {
  padding-left: 10ch;
  width: 37ch;
}
#identifiers dd.updates::before {
  content: "Updates:";
  margin: 0 0 0 -8ch;
}
#identifiers dd.updates {
  padding-left: 8ch;
  width: 39ch;
}
#identifiers dd:is(.updates, .obsoletes) a {
  margin: 0 0 0 1ch;
}
#identifiers dd:is(.updates, .obsoletes) a:last-of-type {
  margin-right: 1ch;
}
#identifiers dd.published::before {
  content: "Published:";
}
#identifiers dd.expires::before {
  content: "Expires:";
}
#identifiers dd.category::before {
  content: "Category:";
}
#identifiers dd.issn::before {
  content: "ISSN:";
}

/* Thanks WeasyPrint for not supporting @supports */
/* @supports not (display: grid) { */
  #identifiers dd.authors {
    padding-left: 8ch;
    width: 64ch;
  }
  #identifiers dd.authors::before {
    content: "Authors:";
    margin: 0 0 0 -8ch;
  }
  #identifiers dd.authors .author {
    display: inline-block;
    margin: 0 2ch 0 1ch;
  }
  #identifiers dd.authors .author:last-of-type {
    margin-right: 0;
  }
/* } */
/* #identifiers styling for when grid layout is supported, or not */
@supports(display: grid) {
  #identifiers {
    display: grid;
    grid-template-columns: 47ch 24ch;
    grid-auto-rows: auto;
    gap: 0 1ch;
  }
  #identifiers dd {
    grid-column: 1;
  }
  #identifiers dd.authors {
    grid-area: 1 / 2 / 100 / 3;
    width: 24ch;
    text-align: right;
    display: block;
    /* overrides for @supports not block */
    padding-left: 0;
  }
  /* more overrides for @supports not block */
  #identifiers dd.authors::before {
    display: none;
  }
  #identifiers dd.authors .author {
    display: block;
    margin: 0;
  }
}

#title {
  clear: left;
  text-align: center;
  margin-top: calc(2 * var(--line));
}
#rfcnum {
  display: none;
}
:is(#status-of-memo, #copyright) a {
  white-space: nowrap;
}
.toplink {
  display: none;
}
nav.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav.toc ul > li {
  padding-left: 2ch;
}
nav.toc > ul > li {
  padding-left: 3ch;
}
nav.toc ul > li > p {
  margin: 0;
}

/* Lists */
ol, ul {
  padding: 0;
}
ol {
  margin: 0 0 0 6ch; /* todo: deal with lists that have >= 10 items */
}
:is(ol, ul) ol {
  margin: 0 0 0 3ch;
}
ul {
  margin: 0 0 0 4ch;
}
ul.ulEmpty {
  list-style: none;
}
ul:not(.ulEmpty) {
  list-style-type: '*';
}
ul ul:not(.ulEmpty) {
  list-style-type: '-';
}
:is(ul, ol) ul {
  margin-left: 1ch;
}
ul ul ul:not(.ulEmpty) {
  list-style-type: 'o';
}
li {
  @include margin-line; // margin: var(--line) 0;
  padding: 0 0 0 2ch;
}
dl {
  margin: 0;
}
section > dl, section > div > dl {
  @include margin-block; // margin: var(--block);
}
dl, dt {
  clear: left;
}
dt {
  float: left;
  font-weight: bold;
  margin: 0 2ch 0 0;
  break-after: avoid;
}
dd {
  @include margin-paragraph; // margin: var(--paragraph);
  margin-left: 3ch !important; /* override attribute added by xml2rfc */
  padding: 0;
  break-before: avoid;
}
dl.dlNewline > dd {
  clear: left;
}
dl.olPercent > dt {
  min-width: 4ch;
}
dl.olPercent > dd {
  margin-left: 6ch !important; /* as above */
}
dl > dd > dl {
  margin-top: var(--line);
  margin-bottom: 0;
}
dl.references dt {
  margin-right: 1ch;
}
dl.references dd {
  margin-left: 11ch !important; /* grr */
}
:is(dd, span).break {
  display: none;
}
:is(li, dd, blockquote, aside) :is(p, ol, ul:not(.toc), dl):not(:first-child) {
  margin-top: var(--line);
}
:is(li, dd, blockquote, aside) .break:first-child + :is(p, ol, ul, dl) {
  margin-top: 0;
}
:is(ol:is(.compact, .olCompact), ul:is(.compact, .ulCompact)) > li,
:is(dl.compact, .dlCompact) > :is(dt, dd) {
  margin-top: 0;
  margin-bottom: 0;
}

/* Figures, tables */
pre {
  @include margin-line; // margin: var(--line) 0;
}
div:is(.artwork, .sourcecode) {
  margin-top: var(--line);
  margin-bottom: var(--line);
  display: flex;
  flex-wrap: nowrap;
  align-items: end;
}
div:is(.artwork, .sourcecode).alignCenter {
  justify-content: center;
}
div:is(.artwork, .sourcecode).alignRight {
  justify-content: end;
}
div:is(.artwork, .sourcecode)::before {
  flex: 0 1 3ch;
  content: "";
}
div:is(.artwork, .sourcecode).alignRight::before {
  flex-grow: 1;
}
div:is(.artwork, .sourcecode) pre {
  flex: 0 0 content;
  margin: 0;
  max-width: 72ch;
  overflow: auto;
}
div:is(.artwork, .sourcecode) .pilcrow {
  flex: 0 0 1ch;
}
figcaption, table caption {
  text-align: center;
  margin-top: var(--line);
}
table {
  --half-line: calc(var(--line) / 2 - 1px);
  caption-side: bottom;
  // margin: var(--line) 0 var(--half-line) 3ch;
  margin-top: var(--line);
  margin-right: 0;
  margin-bottom: var(--half-line);
  margin-left: 3ch;
  border-collapse: collapse;
}
table.center {
  margin-left: auto; /* todo: add 3ch */
  margin-right: auto;
}
table caption {
  margin-top: calc(var(--half-line) + var(--line));
}
thead, tfoot {
  border-top-style: double;
  border-bottom-style: double;
}
td, th {
  border: 1px solid black;
  // padding: var(--half-line) 1ch;
  padding-top: var(--half-line);
  padding-right: 1ch;
  padding-bottom: var(--half-line);
  padding-left: 1ch;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

/* Links */
a.selfRef, a.pilcrow, .iref + a.internal {
  color: black;
  text-decoration: none;
}
a.relref, a.xref {
  hyphens: none;
}
a:is(.relref, .xref:is(.cite, .auto.internal)) {
  white-space: nowrap;
}
.pilcrow {
  display: inline-block;
  margin-right: -1ch;
  opacity: 0.01;
  text-decoration: none;
  user-select: none;
}
:hover > .pilcrow {
  opacity: 0.2;
}
* > .pilcrow[href]:hover {
  opacity: 0.6;
}

/* sup, sub */
sup, sub {
  line-height: 1.1;
}

/* Authors */
address, address.vcard {
  font-style: normal;
  // margin: 2em 0 var(--line) 3ch;
  margin-top: 2em;
  margin-right: 0;
  margin-bottom: var(--line);
  margin-left: 3ch;
}
address .tel, address .email {
  // margin: var(--line) 0 0;
  margin-top: var(--line);
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}
address .tel + .email {
  margin: 0;
}
}