Skip to content

Commit

Permalink
Update styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@martinthomson
martinthomson committed Nov 19, 2024
1 parent 3aff2cb commit df76f89
Showing 1 changed file with 84 additions and 114 deletions.
198 changes: 84 additions & 114 deletions v3.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,9 @@ body {
section {
clear: both;
}
.section-number {
padding-right: 0.5em;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-title);
font-weight: 680;
Expand Down Expand Up @@ -281,6 +284,7 @@ h4, h5, h6 {
/* general structure */
.author {
padding-bottom: 0.3em;
vertical-align: top;
}
#abstract+p {
font-size: 18px;
Expand Down Expand Up @@ -481,6 +485,7 @@ figcaption, caption {
font-style: italic;
margin: 0.5em 1.5em;
text-align: left;
caption-side: bottom;
}
@media screen {
/* Auto-collapse boilerplate. */
Expand Down Expand Up @@ -535,6 +540,7 @@ cite {

/* tables */
table {
width: auto;
max-width: 100%;
margin: 0 0 1em;
border-collapse: collapse;
Expand All @@ -549,6 +555,16 @@ table.center {
table.left {
margin-right: auto;
}
table .text-left {
text-align: left;
}
table .text-center {
text-align: center;
}
table .text-right {
text-align: right;
}

thead, tbody {
border: 1px solid var(--line-color);
}
Expand Down Expand Up @@ -623,26 +639,28 @@ sub, sup {
font-size: var(--small-font-size);
line-height: 18px;
--identifier-width: 15ch;
}
#identifiers dt {
width: var(--identifier-width);
min-width: var(--identifier-width);
clear: left;
float: left;
text-align: right;
margin-right: 1ch;
}
#identifiers dd {
margin: 0;
margin-left: calc(1em + var(--identifier-width)) !important;
min-width: 5em;
}
#identifiers .authors .author {
display: inline-block;
margin-right: 1.5em;
}
#identifiers .authors .org {
font-style: italic;
& dt {
width: var(--identifier-width);
min-width: var(--identifier-width);
clear: left;
float: left;
text-align: right;
margin-right: 1ch;
}
& dd {
margin: 0;
margin-left: calc(1em + var(--identifier-width)) !important;
min-width: 5em;
}
& .authors {
& .author {
display: inline-block;
margin-right: 1.5em;
}
& .org {
font-style: italic;
}
}
}

/* The prepared/rendered info at the very bottom of the page */
Expand All @@ -652,9 +670,6 @@ sub, sup {
font-style: italic;
margin-top: 2em;
}
.docInfo .prepared {
float: left;
}
.docInfo .prepared {
float: right;
}
Expand All @@ -681,12 +696,6 @@ sub, sup {
white-space: normal;
}
}
@media screen {
#toc nav {
font-family: var(--font-title);
font-weight: 360;
}
}

.references {
& > dt {
Expand All @@ -711,7 +720,6 @@ sub, sup {
}
}

/* index */
#rfc\.index\.index + ul {
margin-left: 0;
}
Expand Down Expand Up @@ -767,6 +775,7 @@ hr.addr {
}
}

/* Comments */
.rfcEditorRemove p:first-of-type {
font-style: italic;
}
Expand All @@ -777,7 +786,31 @@ hr.addr {
.crefSource {
font-style: italic;
}
/* alternative layout for smaller screens */

@media screen {
#toc nav {
font-family: var(--font-title);
font-weight: 360;
& > ul { margin-bottom: 2em; }
& ul {
margin: 0 0 0 4px;
& :is(p, li) {
margin: 2px 0;
}
}
}
#toc a.toplink {
float: right;
}
}
@media not screen {
#toc a.toplink {
display: none;
}
}


/* TOC layout for smaller screens */
@media screen and (max-width: 929px) {
#toc {
position: fixed;
Expand All @@ -789,9 +822,6 @@ hr.addr {
border-bottom: 1px solid #ccc;
opacity: 0.6;
}
#toc.active {
opacity: 1;
}
#toc h2 {
margin: 0;
padding: 2px 0 2px 6px;
Expand All @@ -803,17 +833,17 @@ hr.addr {
background-color: #444;
color: white;
cursor: pointer;
}
#toc h2::before { /* css hamburger */
float: right;
position: relative;
width: 1em;
height: 1px;
left: -164px;
margin: 8px 0 0 0;
background: white none repeat scroll 0 0;
box-shadow: 0 4px 0 0 white, 0 8px 0 0 white;
content: "";
&::before { /* css hamburger */
float: right;
position: relative;
width: 1em;
height: 1px;
left: -164px;
margin: 8px 0 0 0;
background: white none repeat scroll 0 0;
box-shadow: 0 4px 0 0 white, 0 8px 0 0 white;
content: "";
}
}
#toc nav {
display: none;
Expand All @@ -824,26 +854,25 @@ hr.addr {
height: calc(100vh - 48px);
border-left: 1px solid #ddd;
}
#toc.active nav {
display: block;
#toc.active {
opacity: 1;
& nav { display: block; }
}
/* Make the collapsed ToC header render white on gray also when it's a link */
#toc h2 a,
#toc h2 a:link,
#toc h2 a:focus,
#toc h2 a:hover,
#toc h2 a:is(:link, :focus, :hover),
#toc a.toplink,
#toc a.toplink:hover {
color: white;
background-color: #444;
text-decoration: none;
}
#toc a.toplink {
margin-top: 2px;
margin: 2px 0.5em 0;
}
}

/* alternative layout for wide screens */
/* TOC layout for wide screens */
@media screen and (min-width: 930px) {
body {
padding-right: 360px;
Expand Down Expand Up @@ -872,21 +901,13 @@ hr.addr {
overscroll-behavior: contain;
scrollbar-width: thin;
}
#toc nav > ul {
margin-bottom: 2em;
}
#toc ul {
margin: 0 0 0 4px;
font-size: var(--small-font-size);
}
#toc ul :is(p, li) {
margin: 2px 0;
line-height: 22px;
}
img { /* future proofing */
max-width: 100%;
height: auto;
}
#toc a.toplink {
margin: 8px 0.5em 0;
}
}

/* pagination */
Expand Down Expand Up @@ -928,9 +949,6 @@ hr.addr {
td {
border-top: 1px solid #ddd;
}
.toplink {
display: none;
}
}

@page :first {
Expand All @@ -955,54 +973,6 @@ hr.addr {
padding-top: 20px;
}


/* Top align author divs, to avoid names without organization dropping level with org names */
.author {
vertical-align: top;
}

/* Style section numbers with more space between number and title */
.section-number {
padding-right: 0.5em;
}

/* Add styling for a link in the ToC that points to the top of the document */
a.toplink {
float: right;
margin: 8px 0.5em 0;
}

/* Provide styling for table cell text alignment */
table .text-left {
text-align: left;
}
table .text-center {
text-align: center;
}
table .text-right {
text-align: right;
}

/* Make the alternative author contact information look less like just another
author, and group it closer with the primary author contact information */

/* With it being possible to set tables with alignment
left, center, and right, { width: 100%; } does not make sense */
table {
width: auto;
}

/* Control caption placement */
caption {
caption-side: bottom;
}

/* Limit the width of the author address vcard, so names in right-to-left
script don't end up on the other side of the page. */


/* For address alignment dependent on LTR or RTL scripts */

/* Dark mode. */
@media (prefers-color-scheme: dark) {
:root {
Expand Down

0 comments on commit df76f89

Please sign in to comment.