1/** 2 * This contains the content styling 3 * @author Sascha Leib <sascha@leib.be> 4 */ 5 6main p, 7main blockquote, 8main div.table { 9 margin-bottom: 1em; 10} 11 12/* headlines: */ 13main h1, main h2, main h3, main h4, main h5, main h6 { 14 font-family: @ini_alt_fonts; 15 color: @ini_headlines; 16 margin: 1em 0 1em 0; 17 line-height: 1.1em; 18} 19 20main h1 { font-size: 2em; } 21main h2 { font-size: 1.5em; } 22main h3 { font-size: 1.125em; } 23main h4 { font-size: 1em; } 24main h5 { font-size: .875em; } 25main h6 { font-size: .75em; } 26 27main h1 *, main h2 *, main h3 *, main h4 *, main h5 *, main h6 * { 28 font-family: inherit; 29 font-size: inherit; 30 color: inherit; 31 margin: inherit; 32 line-height: inherit; 33} 34 35/* on the homepage only, reduce the H1 top margin: */ 36body.home h1:first-child { margin-top: .5em; } 37 38/* make strike-through and underline more useful! */ 39main u { 40 -webkit-text-decoration-color: #F30; 41 -webkit-text-decoration-line: underline; 42 -webkit-text-decoration-style: wavy; 43 -webkit-text-decoration-thickness: .7pt; 44 text-decoration: underline #F30 wavy .7pt; 45} 46main s, 47main del { 48 -webkit-text-decoration-color: rgba(255,0,0,.5); 49 -webkit-text-decoration-line: line-through; 50 -webkit-text-decoration-style: solid; 51 -webkit-text-decoration-thickness: 1pt; 52 text-decoration: line-through rgba(255,0,0,.45) solid .075em; 53} 54 55/* lists: */ 56main ul, main ol { 57 margin: 0 2em 1em 1em; 58 padding-left: 1.75em; 59} 60main ul { list-style: square outside; } 61main ul ul { list-style-type: disc; } 62main ul ul ul { list-style-type: none; } 63main ul ul ul li {margin-left: 1em; } 64main ul ul ul li:before { display: block; content: '\2043'; text-align:center; float: left; width: 1em; margin-left: -1em; } 65main ul ul ul ul li:before { content: '\FE63' } 66main ul ul ul ul ul li:before { content: '\00B7' } 67 68/* numbered lists vary by nestling: */ 69main ol { list-style: decimal outside; } 70main ol ol { list-style-type: lower-alpha; } 71main ol ol ol { list-style-type: lower-roman; } 72main ol ol ol ol { list-style-type: lower-greek; } 73main ol ol ol ol ol { list-style-type: decimal-leading-zero; } 74main ul ul ul ol li { margin-left: 0; } 75main ul ul ul ol li:before { display: none; content: ''; } 76 77main li::marker { 78 color: #666; 79} 80 81main ul ul, main ul ol, 82main ol ul, main ol ol { 83 margin-bottom: 0; 84 padding-left: .25em; 85} 86 87/* horizontal rules */ 88main hr { 89 border: #666 solid 0; 90 border-top-width: 1pt; 91 height: 0; 92 margin: 3pt 0; 93} 94 95main tt, main blockquote tt, 96main pre, main pre *, 97main code, main blockquote code { 98 font-family: @ini_mono_fonts; 99} 100main code, main blockquote code { 101 border: @ini_border solid 1px; 102 border-radius: 3pt; 103 padding: 0 2pt; 104} 105 106/* quotes: */ 107main blockquote { 108 border-left: @ini_blockquote solid .4em; 109 border-radius: .5em; 110 padding: .25em 0 .25em .75em; 111 margin: 0 2em 1em 1em; 112 font-family: @ini_alt_fonts; 113 font-size: 1.1rem; 114} 115main blockquote * { 116 font-family: @ini_alt_fonts; 117 font-size: 1.1rem; 118} 119 120main svg { 121 display: block; 122 fill-rule: evenodd; 123 clip-rule: evenodd; 124 stroke-linejoin: round; 125 stroke-miterlimit: 1.5; 126} 127main svg.math { 128 margin-left: 15px 129} 130 131/* tables */ 132main div.table { 133 overflow-x: auto; 134} 135 136main table { 137 border-collapse: collapse; 138 empty-cells: show; 139 border-spacing: 0; 140 font-size: smaller; 141 border: 1px solid @ini_border; 142 margin-bottom: 1em; 143} 144 145main table.inline { 146 min-width: 50%; 147} 148 149main table th, 150main table td { 151 padding: .5em .3em; 152 vertical-align: top; 153 border: 1px solid @ini_border; 154 line-height: 1.25em; 155} 156main table th { 157 font-weight: bold; 158 background-color: @ini_background_alt; 159 text-align: left; 160} 161 162main table.inline tr:hover td { 163 background-color: @ini_background_alt; 164} 165 166main table.inline tr:hover th { 167 background-color: @ini_border; 168} 169 170/* asides */ 171main aside { 172 width: 50%; 173 max-width: 220px; 174 min-width: 150px; 175 float: right; 176 text-align: center; 177 font-size: smaller; 178 margin-left: .5em; 179 font-size: small; 180 line-height: 1.5em; 181} 182main aside footer { 183 line-height: 1.1em; 184} 185 186/* images */ 187main img { 188 max-width: 100%; 189 height: auto; 190} 191 192/* tablet break point: */ 193@media (max-width: @ini_tablet_width) { 194 195 /* use hyphenation rules */ 196 main p { 197 hyphens: auto; 198 -webkit-hyphens: auto; 199 -moz-hyphens: auto; 200 -ms-hyphens: auto; 201 hyphenate-limit-chars: 6 2 3; 202 -ms-hyphenate-limit-chars: 6 2 3; 203 -webkit-hyphenate-limit-before: 2; 204 -webkit-hyphenate-limit-after: 3; 205 hyphenate-limit-lines: 3; 206 -ms-hyphenate-limit-lines: 3; 207 } 208} 209 210/* phone break point: */ 211@media (max-width: @ini_phone_width) { 212 213 .nophone { 214 display: none !important; 215 } 216 217 main aside { 218 width: 100%; 219 max-width: initial; 220 float: none; 221 margin-left: 0; 222 } 223} 224 225/* dark mode overrides */ 226@media (prefers-color-scheme: dark) { 227 body.darkmode main h1, body.darkmode main h2, 228 body.darkmode main h3, body.darkmode main h4, 229 body.darkmode main h5, body.darkmode main h6 { color: @ini_headlines_dark; } 230 body.darkmode main table { border-color: @ini_border_dark; } 231 body.darkmode main table th { background-color: rgba(255,255,255,0.05); } 232 body.darkmode main table.inline tr:hover td, 233 body.darkmode #acl_manager table tr:hover { background-color: rgba(255,255,255,0.1); } 234 body.darkmode main code, main blockquote code { border-color: @ini_border_dark; } 235 body.darkmode main table.inline tr:hover th { background-color: @ini_border_dark; } 236 body.darkmode main blockquote { border-left-color: @ini_blockquote_dark } 237 238 body.darkmode div.error { background-color: #4B2F36; color: #FFB3D2; border-color: #743E4C; } 239 body.darkmode div.success { background-color: #28381F; color: #FBE2A1; border-color: #37562E; } 240 body.darkmode div.notify { background-color: #42381F; color: #FCE2A1; border-color: #56562E; } 241} 242 243