Mercurial > p > roundup > code
comparison doc/_static/style.css @ 7383:0645e3bdd5a3
Document three commented out attempts at full bleed code examples
None of them work. Documenting what has been tried so somebody can
benefit from the work on the next attempt to do it.
| author | John Rouillard <rouilj@ieee.org> |
|---|---|
| date | Mon, 22 May 2023 21:51:14 -0400 |
| parents | 5e9b0ff1c695 |
| children | 639a926cbb1a |
comparison
equal
deleted
inserted
replaced
| 7382:59ae15e0b8dd | 7383:0645e3bdd5a3 |
|---|---|
| 120 | 120 |
| 121 main { | 121 main { |
| 122 line-height: calc(1.5 * 1em); | 122 line-height: calc(1.5 * 1em); |
| 123 max-width: 65ch; | 123 max-width: 65ch; |
| 124 } | 124 } |
| 125 | |
| 126 /* full bleed for highlighted example code. This works for | |
| 127 highlighted code directly in each section. If the example | |
| 128 is inside a list, table etc, the list/table is constrained | |
| 129 to 65ch and we don't get a full bleed example. | |
| 130 | |
| 131 div.section *:not(div[class^=highlight-]):not(div[class^=highlight-] *):not(div.section) { | |
| 132 max-width: 65ch; | |
| 133 } | |
| 134 */ | |
| 135 | |
| 136 /* trying to full bleed highlighted code section using using | |
| 137 grid layout. Doesn't work as each header level inserts a | |
| 138 div.section, so the grid is applied to main > div > div > | |
| 139 div.section and highlighted code isn't in a grid display | |
| 140 environment anymore. Subgrid would fix this but.... | |
| 141 | |
| 142 main > div > div { | |
| 143 display: grid; | |
| 144 grid-template-columns: 65ch 1fr; | |
| 145 } | |
| 146 | |
| 147 main > div > div > * { | |
| 148 grid-column: 1/2; | |
| 149 } | |
| 150 | |
| 151 div[class^=highlight] { | |
| 152 width: 100%; | |
| 153 grid-column: 1 / 3; | |
| 154 } | |
| 155 */ | |
| 156 | |
| 157 /* try full bleed without grid. Make everything except the | |
| 158 highlight container and its children 65ch in width. | |
| 159 However need to explicitly set a width for some reason on | |
| 160 the container and children. 100% or other relative width | |
| 161 doesn't work. Probably again because of div.section being | |
| 162 set to 65ch max width. Can use absolute size values, but | |
| 163 how to calculate them when I don't know where the left | |
| 164 margin is of the highlight div. | |
| 165 | |
| 166 main :not(div[class^=highlight-]):not(div[class^=highlight-] *) { | |
| 167 position: relative; | |
| 168 max-width: 65ch; | |
| 169 } | |
| 170 | |
| 171 div[class^=highlight-], div[class^=highlight-] * { width: | |
| 172 calc(100vw | |
| 173 - 15em); } | |
| 174 */ | |
| 125 | 175 |
| 126 /* style */ | 176 /* style */ |
| 127 | 177 |
| 128 :link { color: rgb(220,0,0); text-decoration: none;} | 178 :link { color: rgb(220,0,0); text-decoration: none;} |
| 129 :link:hover {text-decoration: underline;} | 179 :link:hover {text-decoration: underline;} |