1/* 2.parenthetical class used to keep e.g. "less-than symbol (<)" from wrapping 3the end parenthesis onto its own line. Use in a span between the last word and 4the parenthetical. So for this example, you'd use 5```less-than <span class="parenthetical">symbol (`<`)</span>``` 6*/ 7.parenthetical { 8 white-space: nowrap; 9} 10 11/* 12Warnings and notes: 13 14Write the <div>s on their own line. E.g. 15 16<div class="warning"> 17 18Warning: This is bad! 19 20</div> 21*/ 22main .warning p { 23 padding: 10px 20px; 24 margin: 20px 0; 25} 26 27main .warning p::before { 28 content: "⚠️ "; 29} 30 31.light main .warning p, 32.rust main .warning p { 33 border: 2px solid red; 34 background: #ffcece; 35} 36 37.rust main .warning p { 38 /* overrides previous declaration */ 39 border-color: #961717; 40} 41 42.coal main .warning p, 43.navy main .warning p, 44.ayu main .warning p { 45 background: #542626 46} 47 48/* Make the links higher contrast on dark themes */ 49.coal main .warning p a, 50.navy main .warning p a, 51.ayu main .warning p a { 52 color: #80d0d0 53} 54