Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
(137 intermediate revisions by 2 users not shown) | |||
Line 2: | Line 2: | ||
@import url('https://diversions.constantvzw.org/diversions-wiki-fonts/fonts.css'); | @import url('https://diversions.constantvzw.org/diversions-wiki-fonts/fonts.css'); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
body { | body { | ||
Line 52: | Line 19: | ||
} | } | ||
− | h2, h3, h4, h5, h6 { | + | h2, h3, h4, h5, h6 |
+ | .mw-body-content h2, | ||
+ | .mw-body-content h3, | ||
+ | .mw-body-content h4, | ||
+ | .mw-body-content h5, | ||
+ | .mw-body-content h6 { | ||
border-bottom: 0; | border-bottom: 0; | ||
color: var(--main-color); | color: var(--main-color); | ||
Line 61: | Line 33: | ||
} | } | ||
− | h4 { | + | h4, |
+ | .mw-body-content h4 { | ||
font-weight: normal; | font-weight: normal; | ||
font-family: "Poppins"; | font-family: "Poppins"; | ||
Line 123: | Line 96: | ||
} | } | ||
− | p + p { | + | p + p, |
+ | .column-breaker + p, | ||
+ | .elem-float-top + p { | ||
margin: 0em 0 0em 0; | margin: 0em 0 0em 0; | ||
text-indent: 44pt; | text-indent: 44pt; | ||
Line 168: | Line 143: | ||
text-transform: uppercase; | text-transform: uppercase; | ||
content: attr(data-lang); | content: attr(data-lang); | ||
+ | } | ||
+ | |||
+ | .project-container[data-lang]::before { | ||
+ | margin-left: -.75em; | ||
+ | margin-right: .75em; | ||
} | } | ||
Line 213: | Line 193: | ||
#mw-panel .portal .body li { | #mw-panel .portal .body li { | ||
− | font-size: | + | font-size: 9.7pt; |
+ | line-height: 1em; | ||
} | } | ||
Line 235: | Line 216: | ||
.onlyprint { | .onlyprint { | ||
− | display: none; | + | display: none !important; |
} | } | ||
Line 275: | Line 256: | ||
#n-EN, #n-NL, #n-FR { | #n-EN, #n-NL, #n-FR { | ||
− | display: inline ; | + | display: inline; |
position: relative; | position: relative; | ||
− | / | + | /* text-transform: lowercase; */ |
float: right; | float: right; | ||
padding-left: .5em !important; | padding-left: .5em !important; | ||
} | } | ||
− | |||
Line 287: | Line 267: | ||
display: inline; | display: inline; | ||
position: relative; | position: relative; | ||
− | / | + | /* text-transform: lowercase; */ |
float: right; | float: right; | ||
color: #a0892c; | color: #a0892c; | ||
Line 433: | Line 413: | ||
color: white !important; | color: white !important; | ||
} | } | ||
− | + | #mw-panel .portal h3 { | |
+ | font-size: 0.7em; | ||
+ | color: #444444; | ||
+ | font-weight: normal; | ||
+ | margin: 0.5em 0 0 0.66666667em; | ||
+ | padding: 0.25em 0; | ||
+ | cursor: default; | ||
+ | border: 0; | ||
+ | text-transform: uppercase; | ||
+ | line-height: 1.4em; | ||
+ | margin-top: 1.2em; | ||
+ | } | ||
.vectorTabs li.selected a, | .vectorTabs li.selected a, | ||
.vectorTabs li.selected a:visited { | .vectorTabs li.selected a:visited { | ||
Line 580: | Line 571: | ||
line-height: 1.45em; | line-height: 1.45em; | ||
} | } | ||
− | + | .banner-v2 { | |
− | + | background-image: url(https://vvvvvvaria.org/~ccl/reverse/Wave19%20white%20on%20black.gif); | |
− | + | background-size: 78px; | |
− | + | color: white; | |
− | + | background-position: -40px 5px; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | .banner-v2.interviews-v2 { | |
− | + | background-position: -40px -25px; | |
− | |||
} | } | ||
− | + | .banner-v2 .toc { | |
− | . | + | display:none; |
− | + | } | |
+ | .banner-v2 h2, | ||
+ | .banner-v2 h2 a.external, | ||
+ | .banner-v2 h2 a.external:visited { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | line-height: 0.8em; | ||
+ | color: white; | ||
+ | font-family: 'Avara'; | ||
+ | |||
+ | } | ||
+ | .banner-v2 h2 { | ||
+ | font-size: 5.4em; | ||
} | } | ||
+ | .banner-v2 p, | ||
+ | .banner-v2 p a.external, | ||
+ | .banner-v2 p a.external:visited { | ||
+ | color: white; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | display: inline-block; | ||
+ | font-family: 'Spectral',serif; | ||
+ | font-size: var(--font-size); | ||
− | + | } | |
− | + | .banner-v2 dt, | |
− | + | .banner-v2 dd { | |
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | text-shadow: 3px 3px 10px black; | ||
} | } | ||
+ | .banner-v2 dl { | ||
+ | display: inline-block; | ||
+ | vertical-align: top; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | margin-right: 17px; | ||
+ | } | ||
+ | .banner-v2 dl:first-of-type { | ||
+ | margin-bottom: 13px; | ||
− | |||
− | |||
} | } | ||
− | + | .banner-v2 audio { | |
− | + | width: 100%; | |
− | + | background: black; | |
+ | filter: invert(100%); | ||
+ | margin-top: 6px; | ||
} | } | ||
− | + | .banner-header { | |
− | + | float: left; | |
− | + | margin-right: 31px; | |
+ | margin-top: 6px; | ||
+ | margin-bottom: 13px; | ||
} | } | ||
− | + | .banner-v1 { | |
− | + | border-top: 1px solid black; | |
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | .versions { | |
− | + | margin-bottom: 26px; | |
− | + | padding: 20px; | |
− | + | margin-left: -20px; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
+ | .versions p { | ||
+ | font-family: "Poppins"; | ||
+ | font-size: 1.2em; | ||
+ | font-weight: 500 !important; | ||
+ | letter-spacing: 0.04em; | ||
+ | line-height: 1.45em; | ||
+ | display: block; | ||
+ | } | ||
+ | .interviews-v2 p + p { | ||
+ | text-indent:0px; | ||
+ | } | ||
+ | .project-metadata p.version-date { | ||
+ | margin-bottom: 20px; | ||
+ | font-size: 1.3em; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /** PROTOTYPE NEW STYLE PROJECT PAGE*/ | |
− | + | body.ns-100 { | |
− | + | overflow-x: hidden; | |
− | + | } | |
− | + | .ns-100 #content { | |
− | + | max-width: initial; | |
− | + | padding-right: 0; | |
− | + | } | |
− | + | .ns-100 #mw-panel { | |
− | + | background-color: var(--main-color); | |
− | + | width: 22em; | |
− | + | position: fixed; | |
− | . | + | transform: translate(calc(-100% + 42px),0); |
− | + | transition: transform .25s; | |
− | + | } | |
− | + | .ns-100 div#mw-panel::before { | |
− | + | content: "↓ Menu"; | |
− | + | color: white; | |
− | + | visibility: visible; | |
− | + | position: absolute; | |
− | + | right: 0; | |
− | + | transform: rotate(270deg); | |
− | . | + | transform-origin: top; |
− | . | + | top: 47px; |
− | . | + | /* width: 54px; */ |
− | .mw-content- | + | font-size: 0.8em; |
− | + | font-family: "U001"; | |
− | + | right: 0; | |
− | + | } | |
− | + | .ns-100 div#mw-panel:hover::before { | |
− | + | content: "↓ Menu"; | |
− | + | color: white; | |
+ | visibility: hidden; | ||
+ | position: absolute; | ||
+ | right: 0; | ||
+ | transform: rotate(270deg); | ||
+ | transform-origin: top; | ||
+ | top: 47px; | ||
+ | /* width: 54px; */ | ||
+ | font-size: 0.8em; | ||
+ | font-family: "U001"; | ||
+ | right: 0; | ||
+ | } | ||
+ | .ns-100 div#mw-panel:hover > * { | ||
+ | visibility: visible; | ||
+ | } | ||
+ | .ns-100 div#mw-panel > * { | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | .project-container { | ||
+ | display: flex; | ||
+ | } | ||
+ | .project-main { | ||
+ | flex: 2 0; | ||
+ | } | ||
+ | .project-close-reading { | ||
+ | flex: 0.75 0; | ||
+ | position: sticky; | ||
+ | top: 0; | ||
+ | overflow-y: auto; | ||
+ | max-height: calc(100vh - 6em); | ||
+ | padding: 3em; | ||
+ | border-left: 1px solid black; | ||
+ | /*background: var(--secondary-color);*/ | ||
+ | /* color: white;*/ | ||
+ | /* transform: translate(60%, 0);*/ | ||
+ | /* transition: transform .25s;*/ | ||
+ | /*! position: relative; */ | ||
+ | } | ||
+ | .project-close-reading p { | ||
+ | font-family: U001; | ||
+ | font-size: 1.1em; | ||
+ | line-height: 1.3em; | ||
+ | } | ||
+ | .project-main div[data-version] { | ||
+ | display: flex; | ||
+ | align-items: flex-start; | ||
+ | } | ||
+ | .project-main div[data-version] > .project-metadata { | ||
+ | flex: 0.5 0; | ||
+ | position: sticky; | ||
+ | top: 1em; | ||
+ | } | ||
+ | .project-main div[data-version] > .project-description { | ||
+ | flex: 2 0; | ||
+ | } | ||
+ | .project-main div[data-version] + div[data-version] { | ||
+ | margin-top: 3em; | ||
+ | padding-top: 3em; | ||
+ | border-top: 1px solid black; | ||
+ | } | ||
+ | .project-close-reading:hover { | ||
+ | /* transform: translate(0, 0);*/ | ||
+ | /* transition: transform .25s;*/ | ||
+ | } | ||
+ | .close-reading:before { | ||
+ | display: block; | ||
+ | position: sticky; | ||
+ | top: 1em; | ||
+ | content: " "; | ||
+ | text-transform: uppercase; | ||
+ | margin-bottom: 1em; | ||
+ | } | ||
+ | .close-reading { | ||
+ | margin-bottom: 5em; | ||
+ | } | ||
+ | .versioned-title--wrapper + .versioned-title--wrapper { | ||
+ | margin-top: 8em; | ||
+ | } | ||
+ | .page-Projects_Z_Blace .mw-body-content .conversation p small { | ||
+ | font-family: U001; | ||
+ | font-size: 0.6em; | ||
+ | line-height: 0.3em !important; | ||
+ | } | ||
+ | .conversation h5 { | ||
+ | padding-left: 0; | ||
+ | } | ||
+ | .project-description { | ||
+ | padding: 0 2em; | ||
+ | } | ||
+ | .project-description { | ||
+ | font-size: 1.5em; | ||
+ | line-height: 1.3em; | ||
+ | } | ||
+ | .project--title{ | ||
+ | position: sticky; | ||
+ | top: 0.5em; | ||
+ | margin-left: 21.5% | ||
+ | } | ||
+ | .mw-body-content .project-description h2 { | ||
+ | font-size: 2.5em; | ||
+ | } | ||
+ | .project-description p , | ||
+ | .project-description ul, | ||
+ | .project-description ul li { | ||
+ | font-size: inherit; | ||
+ | line-height: inherit; | ||
} | } | ||
− | + | .project-description p .image img, | |
− | + | img[alt="100%"] { | |
− | + | width: 100%; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
height: auto; | height: auto; | ||
− | + | margin-bottom: 2em; | |
+ | } | ||
+ | body.ns-100 { | ||
+ | background-color: white; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | + | .ns-100 .mw-body, | |
− | + | .ns-100 #mw-head-base, | |
− | + | .ns-100 #left-navigation, | |
− | + | .ns-100 #footer { | |
+ | margin-left: 0em; | ||
+ | } | ||
− | + | .ns-100 .mw-headline, | |
− | + | .ns-100 h2 .mw-headline { | |
− | + | font-size: 1.4em; | |
− | + | } | |
− | |||
− | |||
− | |||
− | + | .ns-100 h2, | |
− | + | .ns-100 .mw-body-content h2 { | |
− | + | line-height: 1.6em; | |
− | + | } | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .ns-100 #mw-panel:hover { | |
− | + | transform: translate(0,0); | |
− | + | transition: transform .25s; | |
− | + | } | |
− | |||
− | |||
− | |||
+ | .ns-100 .banner-v1{ | ||
+ | border-top: 0px; | ||
+ | } | ||
− | + | .ns-100 .versions { | |
− | + | padding: 0 0 0 20px; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | padding: 0 | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | . | + | .project-metadata p { |
− | + | line-height: 1.1em; | |
+ | font-size: 1.6em; | ||
} | } | ||
− | . | + | .project-metadata p a, |
− | + | .project-metadata p a.external { | |
− | + | word-wrap: anywhere; | |
} | } | ||
− | + | body.page-Promiscuous_browser { | |
− | . | + | background: white; |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | audio { | |
− | + | max-width: 100%; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | h5, | |
− | + | .mw-body-content h5 { | |
− | + | line-height: 1.3em; | |
+ | margin-bottom: 1em; | ||
+ | padding-left: 3em; | ||
} | } | ||
− | + | h5 .mw-headline, | |
− | + | .mw-body-content h5 .mw-headline { | |
− | + | font-size: 0.9em; | |
+ | line-height: 0.1em; | ||
+ | font-weight: normal; | ||
+ | padding-bottom: 3em; | ||
} | } | ||
− | + | [data-lang]::before { | |
− | position: | + | text-transform: uppercase; |
+ | content: attr(data-lang); | ||
+ | position: sticky; | ||
+ | top: 1em; | ||
display: block; | display: block; | ||
+ | align-self: flex-start; | ||
} | } | ||
− | + | td { | |
− | + | border: 3px solid black; | |
− | + | padding: 9px 7px; | |
+ | } | ||
+ | th { | ||
+ | border: 3px solid black; | ||
+ | text-align: left; | ||
+ | padding: 9px 7px; | ||
} | } | ||
− | + | table { | |
− | + | width: 79%; | |
− | + | margin: 1em 0 !important; | |
− | + | font-size: calc(0.6 * var(--font-size)); | |
+ | line-height: calc(1.1 * var(--line-height)); | ||
} | } | ||
− | |||
− | |||
− | |||
} | } |
Latest revision as of 17:56, 2 December 2020
/** https://pad.constantvzw.org/p/diversions.css */ @import url('https://diversions.constantvzw.org/diversions-wiki-fonts/fonts.css'); body { background-color: var(--background-color); text-rendering: geometricPrecision; } .mw-body { max-width: 70em; padding-left: 4em; padding-right: 4em; } h1 { display:none } h2, h3, h4, h5, h6 .mw-body-content h2, .mw-body-content h3, .mw-body-content h4, .mw-body-content h5, .mw-body-content h6 { border-bottom: 0; color: var(--main-color); } h2 { font-family: 'Avara'; } h4, .mw-body-content h4 { font-weight: normal; font-family: "Poppins"; font-size: 1.6em; font-weight: 500; letter-spacing: 0.03em; margin-bottom: var(--line-height); } p, .mw-body-content p { font-family: 'Spectral',serif; font-size: var(--font-size); max-width: 38em; line-height: var(--line-height); margin: 0 0 0 0; } .mw-parser-output a.external, a { font-family: "Poppins"; font-size: calc(0.45 * var(--font-size)); letter-spacing: 0.025em; font-weight: 500 !important; color: var(--secondary-color); } .mw-parser-output a.external, a:visited, .mw-parser-output a:visited, :visited { color: var(--secondary-color); } a:visited, a.new, #p-personal a.new { color: var(--secondary-color); } ul li { list-style: none; } #index_publication p { text-indent: -15pt; } #index_publication p span { line-height: 0; font-size: 0.5em; font-family: "Poppins"; font-weight: 500; } #index_publication .sections { margin-bottom: var(--line-height); } #mw-panel .portal a { font-size: calc(0.5 * var(--font-size)); } em { font-family: "Poppins"; } p + p, .column-breaker + p, .elem-float-top + p { margin: 0em 0 0em 0; text-indent: 44pt; } .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { list-style-type: none; margin-left: 0; } .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul, .mw-content-ltr ol, .mw-content-rtl .mw-content-ltr ol { padding: 0; font-family: spectral; font-size: var(--font-size); line-height: var(--line-height); } li { margin: 0; padding: 0; } #mw-panel .portal .body { background-image: none; } .vectorTabs, .vectorTabs ul, .vectorTabs ul li, .vectorTabs ul li.selected, .vectorTabs span { background-image: none; } .vectorMenu .menu { background: black; } [data-lang]::before { text-transform: uppercase; content: attr(data-lang); } .project-container[data-lang]::before { margin-left: -.75em; margin-right: .75em; } div.thumbinner, html .thumbimage { border-width: 0px; background-color: transparent; text-align: left; } html .thumbcaption { font-family: "Poppins"; font-weight: 500; letter-spacing: 0.035em; font-size: 1.15em; } pre, .mw-code, code { font-family: "ocr-pbi-canonique", "OCR-PBI", monospace; font-size: 1.1em; color: inherit; background-color: transparent; border: 0px solid; } code { width: 100%; } blockquote { margin: var(--line-height); margin-left: 44pt; } .mw-body-content blockquote p { font-size: 1.2em; font-weight: 400; } .mw-body-content blockquote ul + p { margin-top: var(--line-height); } #mw-panel .portal .body li { font-size: 9.7pt; line-height: 1em; } #mw-panel .portal .body li:before { content: ''; } /** * * Screen styles * */ @media screen { :root { --font-size: 1.75em; --line-height: 1.3em; --main-color: black; --background-color: var(--main-color); --secondary-color: #a0892c; } .onlyprint { display: none !important; } #p-logo { width: 100px; } .metadata { position: sticky; float: left; top: var(--line-height); width:45%; } .page-Collectie_van_onzekerheden [data-lang], .page-Sketchy_recognition [data-lang], .page-Wikified_Colonial_Botany [data-lang], .page-Materiële_reizen_door_Andere_Realiteiten [data-lang], .page-Het_gewicht_van_dingen_Le_poids_des_choses_The_weight_of_things [data-lang], .page-Zoumana_Meïte_Een_nieuwe_vuurceremonie [data-lang], .page-Z_Blace [data-lang], [data-section="projects"] [data-lang] { width: 50%; margin-left: 50%; } #mw-panel li { display: block; } #mw-panel { overflow-y: auto; height: 100vh; } #mw-panel::-webkit-scrollbar { display: none; } #n-EN, #n-NL, #n-FR { display: inline; position: relative; /* text-transform: lowercase; */ float: right; padding-left: .5em !important; } #n-EN a, #n-NL a, #n-FR a { display: inline; position: relative; /* text-transform: lowercase; */ float: right; color: #a0892c; } #p-logo { display: none; } /* body { position: fixed; width: 100vw; overflow: hidden; } */ div.thumb { float: none; margin: var(--line-height) 0; max-width: 80%; } .big-image div.thumb { max-width: 100% } .big-image .thumbimage { max-width: 100%; height:auto; } .big-image .thumbinner { max-width: 100%; } html .thumbimage { max-width: 100%; height: auto; } div.thumbinner{ max-width: 100%; text-align: left; } .mw-references-wrap { max-width: 40em; } #simpleSearch { background-image: none; border: none; border-radius: 0px; } #right-navigation { float: right; margin-top: 2.5em; margin-right: 12.2em; } h2, .mw-body-content h2 { font-family: 'Avara'; font-size: 4.2em; color: var(--main-color); line-height: calc(0.9 * var(--line-height)); margin-top: 0; margin-bottom: 0; max-width: 17em; } h2 + p, .mw-body-content h2 + p, h2 + ul, .mw-body-content h2 + ul, h2 + ol, .mw-body-content h2 + ol { margin-top: calc( var(--line-height) * 0.3); } .mw-body-content [data-section] > h2 { margin: calc(var(--line-height) * 2) 0; font-size: 8em; line-height: calc( var(--line-height) * 0.8); text-transform: initial; } [data-article] h3 + p, .mw-body-content h3 + p { margin-top: calc(var(--line-height) * 3) 0; /** font-family: "poppins"; font-size: 1.8em; font-weight: 600; letter-spacing: 0.03em; margin-bottom: 0; text-transform: uppercase; */ } h4, .mw-body-content h4 { font-family: "Poppins"; font-size: 1.5em; font-weight: 500; letter-spacing: 0.045em; margin-bottom: var(--line-height); line-height: var(--line-height); padding-top: calc( var(--line-height) * 0); } .mw-parser-output a.external, a { font-weight: 500; } .mw-parser-output a.external, .mw-parser-output a.external:visited { color: var(--secondary-color); } .mw-body, .mw-body-content { color: var(--main-color); } #mw-head { background: var(--main-color); color: white !important; } #mw-head a { color: white !important; } #mw-panel { background-color: var(--main-color);; width: 22em; position: fixed; } #mw-panel .portal h3, #mw-panel .portal .body li a { color: white !important; } #mw-panel .portal h3 { font-size: 0.7em; color: #444444; font-weight: normal; margin: 0.5em 0 0 0.66666667em; padding: 0.25em 0; cursor: default; border: 0; text-transform: uppercase; line-height: 1.4em; margin-top: 1.2em; } .vectorTabs li.selected a, .vectorTabs li.selected a:visited { color: white !important; font-weight: bold; } .mw-body, #mw-head-base, #left-navigation, #footer { margin-left: 23em; margin-right: 0em; } /** * Maybe use: [data-arcticle-name="introduction"] [data-lang] or [data-arcticle-name="introduction"] [data-lang="fr"] * * [data-section="appendix"] > div > div */ [data-lang] + [data-lang] , [data-section="projects"] [data-lang] { margin-top: calc(var(--line-height) * 8); } .page-Biographies [data-lang] + [data-lang], [data-article="biographies"] [data-lang]+[data-lang] { margin-top: 0; } .page-Biographies [data-lang] { position: relative; } .page-Biographies [data-lang]:before, [data-article="biographies"] [data-lang]:before { position:absolute; left: -2em; top: .6em; line-height: var(--line-height); } .timeline { position:fixed; bottom:0; left:0; right:0; white-space:nowrap } .timeline--entry[data-loading]::before { content:"Loading"; padding:2em } .timeline--entry::before { content: url("https://gitlab.constantvzw.org/osp/work.diversions/raw/master/sketches_femke/img/arrow.png"); color: white; font-size: 4em; font-family: poppins; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: red; } .timeline--entry { display:inline-block; background:brown; border-radius:1em; height:1.5em; width:5px; margin-right:.5em; cursor:pointer; position:relative } .timeline--entry.active, .timeline--entry:hover { background:green } .timeline--entry .timeline--entry--data { display:none; } .timeline--entry:hover .timeline--entry--data { transform:rotate(-90deg); transform-origin:top left; display:block; position:absolute; left:0; bottom:1em } .timeline--entry--data { white-space:nowrap } .revisions { max-height:80vh; white-space:nowrap; max-width:100%; overflow-x:auto } .revisions--revision { display:inline-block; height:80vh; width:100%; overflow-y:auto; white-space:normal; margin-right:2em } li::before { content: "— "; } .references li { margin-bottom: 0.8em; } .references li::before { content: ""; } .mw-content-ltr ol.references, .mw-content-rtl .mw-content-ltr ol.references, .mw-content-ltr ul.references, .mw-content-rtl .mw-content-ltr ul.references { margin: var(--line-height) 0 0 0; padding: 0; font-family: "Poppins"; font-size: 1.2em; font-weight: 500; letter-spacing: 0.04em; line-height: 1.45em; } .mw-parser-output ol.references a.external, ol.references a { font-size: inherit; } sup.reference { font-size: 0.75em; font-weight: 500; letter-spacing: 0.04em; line-height: 0; } .acknowledgment p { margin: var(--line-height) 0; font-family: "Poppins"; font-size: 1.2em; font-weight: 500 !important; letter-spacing: 0.04em; line-height: 1.45em; } .banner-v2 { background-image: url(https://vvvvvvaria.org/~ccl/reverse/Wave19%20white%20on%20black.gif); background-size: 78px; color: white; background-position: -40px 5px; } .banner-v2.interviews-v2 { background-position: -40px -25px; } .banner-v2 .toc { display:none; } .banner-v2 h2, .banner-v2 h2 a.external, .banner-v2 h2 a.external:visited { margin: 0; padding: 0; line-height: 0.8em; color: white; font-family: 'Avara'; } .banner-v2 h2 { font-size: 5.4em; } .banner-v2 p, .banner-v2 p a.external, .banner-v2 p a.external:visited { color: white; margin: 0; padding: 0; display: inline-block; font-family: 'Spectral',serif; font-size: var(--font-size); } .banner-v2 dt, .banner-v2 dd { margin: 0; padding: 0; text-shadow: 3px 3px 10px black; } .banner-v2 dl { display: inline-block; vertical-align: top; margin: 0; padding: 0; margin-right: 17px; } .banner-v2 dl:first-of-type { margin-bottom: 13px; } .banner-v2 audio { width: 100%; background: black; filter: invert(100%); margin-top: 6px; } .banner-header { float: left; margin-right: 31px; margin-top: 6px; margin-bottom: 13px; } .banner-v1 { border-top: 1px solid black; } .versions { margin-bottom: 26px; padding: 20px; margin-left: -20px; } .versions p { font-family: "Poppins"; font-size: 1.2em; font-weight: 500 !important; letter-spacing: 0.04em; line-height: 1.45em; display: block; } .interviews-v2 p + p { text-indent:0px; } .project-metadata p.version-date { margin-bottom: 20px; font-size: 1.3em; } /** PROTOTYPE NEW STYLE PROJECT PAGE*/ body.ns-100 { overflow-x: hidden; } .ns-100 #content { max-width: initial; padding-right: 0; } .ns-100 #mw-panel { background-color: var(--main-color); width: 22em; position: fixed; transform: translate(calc(-100% + 42px),0); transition: transform .25s; } .ns-100 div#mw-panel::before { content: "↓ Menu"; color: white; visibility: visible; position: absolute; right: 0; transform: rotate(270deg); transform-origin: top; top: 47px; /* width: 54px; */ font-size: 0.8em; font-family: "U001"; right: 0; } .ns-100 div#mw-panel:hover::before { content: "↓ Menu"; color: white; visibility: hidden; position: absolute; right: 0; transform: rotate(270deg); transform-origin: top; top: 47px; /* width: 54px; */ font-size: 0.8em; font-family: "U001"; right: 0; } .ns-100 div#mw-panel:hover > * { visibility: visible; } .ns-100 div#mw-panel > * { visibility: hidden; } .project-container { display: flex; } .project-main { flex: 2 0; } .project-close-reading { flex: 0.75 0; position: sticky; top: 0; overflow-y: auto; max-height: calc(100vh - 6em); padding: 3em; border-left: 1px solid black; /*background: var(--secondary-color);*/ /* color: white;*/ /* transform: translate(60%, 0);*/ /* transition: transform .25s;*/ /*! position: relative; */ } .project-close-reading p { font-family: U001; font-size: 1.1em; line-height: 1.3em; } .project-main div[data-version] { display: flex; align-items: flex-start; } .project-main div[data-version] > .project-metadata { flex: 0.5 0; position: sticky; top: 1em; } .project-main div[data-version] > .project-description { flex: 2 0; } .project-main div[data-version] + div[data-version] { margin-top: 3em; padding-top: 3em; border-top: 1px solid black; } .project-close-reading:hover { /* transform: translate(0, 0);*/ /* transition: transform .25s;*/ } .close-reading:before { display: block; position: sticky; top: 1em; content: " "; text-transform: uppercase; margin-bottom: 1em; } .close-reading { margin-bottom: 5em; } .versioned-title--wrapper + .versioned-title--wrapper { margin-top: 8em; } .page-Projects_Z_Blace .mw-body-content .conversation p small { font-family: U001; font-size: 0.6em; line-height: 0.3em !important; } .conversation h5 { padding-left: 0; } .project-description { padding: 0 2em; } .project-description { font-size: 1.5em; line-height: 1.3em; } .project--title{ position: sticky; top: 0.5em; margin-left: 21.5% } .mw-body-content .project-description h2 { font-size: 2.5em; } .project-description p , .project-description ul, .project-description ul li { font-size: inherit; line-height: inherit; } .project-description p .image img, img[alt="100%"] { width: 100%; height: auto; margin-bottom: 2em; } body.ns-100 { background-color: white; } .ns-100 .mw-body, .ns-100 #mw-head-base, .ns-100 #left-navigation, .ns-100 #footer { margin-left: 0em; } .ns-100 .mw-headline, .ns-100 h2 .mw-headline { font-size: 1.4em; } .ns-100 h2, .ns-100 .mw-body-content h2 { line-height: 1.6em; } .ns-100 #mw-panel:hover { transform: translate(0,0); transition: transform .25s; } .ns-100 .banner-v1{ border-top: 0px; } .ns-100 .versions { padding: 0 0 0 20px; } .project-metadata p { line-height: 1.1em; font-size: 1.6em; } .project-metadata p a, .project-metadata p a.external { word-wrap: anywhere; } body.page-Promiscuous_browser { background: white; } audio { max-width: 100%; } h5, .mw-body-content h5 { line-height: 1.3em; margin-bottom: 1em; padding-left: 3em; } h5 .mw-headline, .mw-body-content h5 .mw-headline { font-size: 0.9em; line-height: 0.1em; font-weight: normal; padding-bottom: 3em; } [data-lang]::before { text-transform: uppercase; content: attr(data-lang); position: sticky; top: 1em; display: block; align-self: flex-start; } td { border: 3px solid black; padding: 9px 7px; } th { border: 3px solid black; text-align: left; padding: 9px 7px; } table { width: 79%; margin: 1em 0 !important; font-size: calc(0.6 * var(--font-size)); line-height: calc(1.1 * var(--line-height)); } }