.firstHeading { margin: 0; overflow-wrap: break-word; // Break word instead of overflow if title is too long } #siteSub { display: block; margin: 0.4rem 0 1.6rem; } .firstHeading, #siteSub { .content-center; } #siteSub, #contentSub, #contentSub2 { color: var( --color-base--subtle ); } #mw-content-text { /* * Interal link styles * Only apply to internal links in article */ a[ href^='/' ]:not( .image ) { .link-content-text(@color-link--active); &.new { background-image: linear-gradient( to right, @color-link-new--hover 0, @color-link-new--hover 100% ); } } /* * Float styles * Only apply to immediate childs as float classes * are used in other places as well */ > .mw-parser-output { > div.tnone, > div.floatnone, > table.floatnone, > div.tleft, > div.floatleft, > table.floatleft, > div.tright, > div.floatright, > table.floatright { position: relative; z-index: 2; margin: 0.6rem 1.4rem; transition: @transition-margin; } > div.tnone, > div.floatnone { display: flex; justify-content: center; > * { width: 100% !important; height: auto; } .thumbinner { display: flex; flex-direction: column; align-items: center; } } > div.tnone, > div.floatnone, > table.floatnone, > div.tleft, > div.floatleft, > table.floatleft { margin-left: @negative-margin / 2; } > div.tnone, > div.floatnone, > table.floatnone, > div.tright, > div.floatright, > table.floatright { margin-right: @negative-margin / 2; } } .mw-parser-output { .mw-headline { order: -1; // Make sure that header is the first } & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 { display: flex; align-items: center; justify-content: space-between; } .mw-editsection { position: absolute; left: 0; display: flex; margin: 0; transform: ~'translateX(calc(-100% - @{margin-side}))'; a { .resource-loader-icon-link-small; padding: @margin-side / 4; background: 0 !important; // Cancel above styles opacity: @opacity-icon; text-indent: -9999px; // Hide text transition: @transition-opacity; &:before { .resource-loader-icon; display: block; background-size: contain; } &:hover, &:active, &:focus { opacity: @opacity-icon-active; } } > span { display: none; } } } } .mw-body-content { position: relative; .content-center; z-index: 0; .mixin-clearfix(); p { overflow-wrap: break-word; } table { margin: 0; } h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; } h1, h2 { margin-top: @content-margin-top * 3; } h3, h4, h5, h6, p + p { margin-top: @content-margin-top * 2; } h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6, p, table { margin-top: @content-margin-top; } ul { margin: @content-margin-top 0 0 @content-margin-top * 2; ul { margin: 0 0 0 @content-margin-top * 2; } } ol { margin: @content-margin-top 0 0 @content-margin-top * 3; ol { margin: 0 0 0 @content-margin-top * 3; } } img { vertical-align: middle; } a.image { display: block; overflow: hidden; } } @media ( max-width: @screen0 ) { #mw-content-text { > .mw-parser-output { > div.tnone, > div.floatnone, > table.floatnone, > div.tleft, > div.floatleft, > table.floatleft, > div.tright, > div.floatright, > table.floatright { width: 100vw; margin: 0.6rem -@margin-side !important; clear: none; float: unset; } > div.tnone, > div.floatnone, > div.tleft, > div.floatleft, > div.tright, > div.floatright { display: flex; justify-content: center; } > table.floatleft, > table.floatright { padding: 0 @margin-side; } } } } @media ( max-width: @screen2 ) { #mw-content-text { > .mw-parser-output { > div.tnone, > div.floatnone, > table.floatnone { margin: 0.6rem ~'calc((100vw - @{page-width}) / -2)'; a.image, a.image > img { width: 100% !important; height: auto !important; } } > table.floatnone { padding: 0 @margin-side; } } } } @media ( max-width: @screen3 ) { #mw-content-text { > .mw-parser-output { > div.tleft, > div.floatleft, > table.floatleft { margin-left: 0; } > div.tright, > div.floatright, > table.floatright { margin-right: 0; } > div.tleft, > div.floatleft, > table.floatleft, > div.tright, > div.floatright, > table.floatright { position: relative; z-index: 0; // Reset so it doesn't cover ToC } } } } @media ( min-width: @screen4 ) { #mw-content-text { > .mw-parser-output { > div.tnone, > div.floatnone, > table.floatnone, > div.tleft, > div.floatleft, > table.floatleft { margin-left: @negative-margin !important; } > div.tnone, > div.floatnone, > table.floatnone, > div.tright, > div.floatright, > table.floatright { margin-right: @negative-margin !important; } } } }