diff --git a/ietf/static/css/document_html_txt.scss b/ietf/static/css/document_html_txt.scss index 84e677908c..9c7750e31b 100644 --- a/ietf/static/css/document_html_txt.scss +++ b/ietf/static/css/document_html_txt.scss @@ -1,3 +1,6 @@ +// 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; @@ -36,45 +39,42 @@ // 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; - section > p, section > dl.references > dd { /* Really long lines can wrap when all else fails. * This won't affect
 or , 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;
-  // margin: var(--line) 0;
-  @include margin-line;
+  @include margin-line; // margin: var(--line) 0;
 }
 .section-number {
   margin-right: 1ch;
 }
 p {
-  // margin: var(--paragraph);
-  @include margin-paragraph;
+  margin: 0;
 }
-aside, ol, dl {
-  // margin: var(--block);
-  @include margin-block;
+section > p, section > div > p {
+  @include margin-paragraph; // margin: var(--paragraph);
+}
+aside {
+  @include margin-block; // margin: var(--block);
 }
 figure {
   margin: 0;
 }
 blockquote {
-  // margin: var(--paragraph);
-  @include margin-paragraph;
+  @include margin-paragraph; // margin: var(--paragraph);
+  padding-left: calc(2ch - 2px);
   border-left: 2px solid darkgrey;
 }
 
@@ -98,6 +98,7 @@ blockquote {
 }
 #identifiers dd {
   margin: 0;
+  margin-left: 0 !important; /* grr */
   width: 47ch;
   /* HAXX: this gets around the lack of text-content-trim support */
   display: flex;
@@ -209,7 +210,7 @@ blockquote {
 #title {
   clear: left;
   text-align: center;
-  margin-top: 2em;
+  margin-top: calc(2 * var(--line));
 }
 #rfcnum {
   display: none;
@@ -247,59 +248,88 @@ ol {
 }
 ul {
   margin: 0 0 0 4ch;
+}
+ul.ulEmpty {
+  list-style: none;
+}
+ul:not(.ulEmpty) {
   list-style-type: '*';
 }
-ul ul {
+ul ul:not(.ulEmpty) {
   list-style-type: '-';
 }
 :is(ul, ol) ul {
   margin-left: 1ch;
 }
-ul ul ul {
+ul ul ul:not(.ulEmpty) {
   list-style-type: 'o';
 }
 li {
-  // margin: var(--line) 0;
-  @include margin-line;
+  @include margin-line; // margin: var(--line) 0;
   padding: 0 0 0 2ch;
 }
-.compact li {
+dl {
   margin: 0;
 }
-:is(li, dd) p:first-child {
-  margin: 0;
+section > dl, section > div > dl {
+  @include margin-block; // margin: var(--block);
+}
+dl, dt {
+  clear: left;
 }
 dt {
   float: left;
-  clear: left;
+  font-weight: bold;
   margin: 0 2ch 0 0;
   break-after: avoid;
 }
 dd {
-  // margin: var(--paragraph);
-  @include margin-paragraph;
+  @include margin-paragraph; // margin: var(--paragraph);
+  margin-left: 3ch !important; /* override attribute added by xml2rfc */
+  padding: 0;
   break-before: avoid;
 }
-dl.compact :is(dt, dd) {
-  margin-top: 0;
+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;
+  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 {
-  // margin: var(--line) 0;
-  @include margin-line;
+  @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;
@@ -400,7 +430,7 @@ sup, sub {
 }
 
 /* Authors */
-address {
+address, address.vcard {
   font-style: normal;
   // margin: 2em 0 var(--line) 3ch;
   margin-top: 2em;
@@ -408,9 +438,6 @@ address {
   margin-bottom: var(--line);
   margin-left: 3ch;
 }
-h2 + address {
-  margin-top: 1em;
-}
 address .tel, address .email {
   // margin: var(--line) 0 0;
   margin-top: var(--line);