|
|
| Line 1: |
Line 1: |
| − | @import url('https://fonts.googleapis.com/css?family=Spectral:300,300i,400,400i,500,500i,600,600i&display=swap');
| + | /** https://pad.constantvzw.org/p/diversions.css */ |
| − | @import url('https://fonts.googleapis.com/css?family=Poppins:400,400i,600,600i&display=swap&subset=latin-ext');
| |
| − | | |
| − | @page {
| |
| − | size: 210mm 297mm;
| |
| − | margin: 15mm 17.5mm 17.5mm 17.5mm;
| |
| − | }
| |
| − | | |
| − | @page:left {
| |
| − | margin-right: 20mm;
| |
| − | @bottom-left {
| |
| − | text-align: left;
| |
| − | content: counter(page);
| |
| − | font-family: "Poppins";
| |
| − | font-size: calc(var(--font-size) * 0.8);
| |
| − | letter-spacing: 0.025em
| |
| − | }
| |
| − | }
| |
| − | | |
| − | @page:right {
| |
| − | margin-left: 20mm;
| |
| − | @bottom-right {
| |
| − | text-align: right;
| |
| − | content: counter(page);
| |
| − | font-family: "Poppins";
| |
| − | font-size: calc(var(--font-size) * 0.8);
| |
| − | letter-spacing: 0.025em
| |
| − | }
| |
| − | }
| |
| − | | |
| − | body {
| |
| − | background-color: var(--background-color);
| |
| − | }
| |
| − | | |
| − | .mw-body {
| |
| − | max-width: 75em;
| |
| − | padding-left: 4em;
| |
| − | padding-right: 4em;
| |
| − | }
| |
| − | | |
| − | h1 {
| |
| − | display:none
| |
| − | }
| |
| − | | |
| − | | |
| − | | |
| − | h2, h3, h4, h5, h6 {
| |
| − | border-bottom: 0;
| |
| − | color: var(--main-color);
| |
| − | }
| |
| − | | |
| − | h4 {
| |
| − | font-weight: normal;
| |
| − | font-family: "Poppins";
| |
| − | font-size: 1.6em;
| |
| − | font-weight: 600;
| |
| − | 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: 40em;
| |
| − | line-height: var(--line-height);
| |
| − | margin: 0 0 0 0;
| |
| − | text-rendering: optimizelegibility;
| |
| − | }
| |
| − | .mw-parser-output a.external,
| |
| − | a {
| |
| − | font-family: "Poppins";
| |
| − | font-size: 0.8em;
| |
| − | letter-spacing: 0.025em;
| |
| − | font-weight: 500;
| |
| − | color: darkgoldenrod;
| |
| − | }
| |
| − | em {
| |
| − | font-family: "Poppins";
| |
| − | }
| |
| − | p + p {
| |
| − | margin: 0em 0 0em 0;
| |
| − | text-indent: 44pt;
| |
| − | }
| |
| − | .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);
| |
| − | margin: 0;
| |
| − | 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;
| |
| − | }
| |
| − | [data-lang="fr"]::before {
| |
| − | content: "FR";
| |
| − | }
| |
| − | [data-lang="en"]::before {
| |
| − | content: "EN";
| |
| − | }
| |
| − | [data-lang="nl"]::before {
| |
| − | content: "NL";
| |
| − | }
| |
| − | div.thumbinner,
| |
| − | html .thumbimage {
| |
| − | border-width: 0px;
| |
| − | background-color: none;
| |
| − | }
| |
| − | html .thumbcaption {
| |
| − | font-family: "Poppins";
| |
| − | font-weight: 600;
| |
| − | letter-spacing: 0.035em;
| |
| − | }
| |
| − | pre, .mw-code {
| |
| − | font-family: "ocr-pbi";
| |
| − | font-size: 1.1em;
| |
| − | color: inherit;
| |
| − | background-color: transparent;
| |
| − | border: 0px solid;
| |
| − | }
| |
| − | 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);
| |
| − | }
| |
| − | | |
| − | @media screen {
| |
| − | :root {
| |
| − | --font-size: 1.75em;
| |
| − | --line-height: 1.3em;
| |
| − | --main-color: black;
| |
| − | --background-color: var(--main-color);
| |
| − | --secondary-color: #a0892c;
| |
| − | }
| |
| − | | |
| − | #p-logo {
| |
| − | width: 100px;
| |
| − | }
| |
| − | | |
| − | | |
| − | /*
| |
| − | body {
| |
| − | position: fixed;
| |
| − | width: 100vw;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | */
| |
| − | | |
| − | div.thumb{
| |
| − | width: 20vw;
| |
| − | float: none;
| |
| − | }
| |
| − | | |
| − | html .thumbimage {
| |
| − | max-width: 100%;
| |
| − | height: auto;
| |
| − | }
| |
| − |
| |
| − | div.thumbinner{
| |
| − | max-width: 100%;
| |
| − | }
| |
| − | | |
| − | .mw-references-wrap {
| |
| − | max-width: 15em;
| |
| − | margin-left: auto
| |
| − | }
| |
| − | | |
| − | h2, .mw-body-content h2 {
| |
| − | font-family: 'ribes black';
| |
| − | font-size: 4.2em;
| |
| − | color: var(--main-color);
| |
| − | line-height: calc(0.75 * var(--line-height));
| |
| − | margin-top: 0;
| |
| − | margin-bottom: 0;
| |
| − | text-transform: uppercase;
| |
| − | 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);
| |
| − | }
| |
| − | | |
| − | h2, .mw-body-content h2 {
| |
| − | font-family: 'ribes black';
| |
| − | font-size: 4.2em;
| |
| − | color: var(--main-color);
| |
| − | line-height: calc(0.75 * var(--line-height));
| |
| − | margin-top: 0;
| |
| − | margin-bottom: 0;
| |
| − | text-transform: uppercase;
| |
| − | }
| |
| − | | |
| − | .mw-body-content [data-section="introduction"] > h2,
| |
| − | .mw-body-content [data-section="essays"] > h2,
| |
| − | .mw-body-content [data-section="projects"] > h2,
| |
| − | .mw-body-content [data-section="appendix"] > 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: 600;
| |
| − | 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: 600;
| |
| − | }
| |
| − | | |
| − | .mw-parser-output a.external {
| |
| − | 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: 15em;
| |
| − | }
| |
| − | | |
| − | #mw-panel .portal h3,
| |
| − | #mw-panel .portal .body li a {
| |
| − | color: white !important;
| |
| − | }
| |
| − | | |
| − | .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: 18em;
| |
| − | margin-right: 12em;
| |
| − | }
| |
| − | | |
| − | /**
| |
| − | * Maybe use: [data-arcticle-name="introduction"] [data-lang] or [data-arcticle-name="introduction"] [data-lang="fr"]
| |
| − | */
| |
| − | [data-lang] + [data-lang] ,
| |
| − | [data-section="projects"] [data-lang],
| |
| − | [data-section="appendix"] > div > div {
| |
| − | margin-top: calc(var(--line-height) * 3);
| |
| − | }
| |
| − | | |
| − | .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 {
| |
| − | padding: 0;
| |
| − | font-family: "Poppins";
| |
| − | font-size: 0.95em;
| |
| − | font-weight: 600;
| |
| − | 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: 600;
| |
| − | letter-spacing: 0.04em;
| |
| − | line-height: 0;
| |
| − | }
| |
| − | }
| |
| − | @media print {
| |
| − | :root {
| |
| − | --line-height: 12pt;
| |
| − | --font-size: 9pt;
| |
| − | --main-color: black;
| |
| − | --secondary-color: black;
| |
| − | --background-color: white;
| |
| − | }
| |
| − |
| |
| − | body, html {
| |
| − | padding: 0;
| |
| − | margin: 0;
| |
| − | }
| |
| − | | |
| − | .timeline {
| |
| − | display:none
| |
| − | }
| |
| − | .revision:nth-of-type(n+2) {
| |
| − | display:none
| |
| − | }
| |
| − |
| |
| − | h2 {
| |
| − | border-bottom: none;
| |
| − | }
| |
| − |
| |
| − | p {
| |
| − | text-align: left;
| |
| − | margin-top: 0;
| |
| − | }
| |
| − | | |
| − | p + p {
| |
| − | text-indent: calc(2 * var(--line-height));
| |
| − | }
| |
| − |
| |
| − | h3, .mw-body-content h3 {
| |
| − | font-size: calc(var(--font-size) * .94);
| |
| − | line-height: var(--line-height);
| |
| − | margin: var(--line-height) 0 0 0;
| |
| − | break-after: avoid;
| |
| − | }
| |
| − |
| |
| − | h2, .mw-body-content h2 {
| |
| − | line-height: calc(2 * var(--line-height));
| |
| − | font-size: calc(2.75 * var(--font-size));
| |
| − | }
| |
| − | | |
| − | h2 + h3,
| |
| − | .mw-body-content h2 + h3 {
| |
| − | margin: 0 0 var(--line-height) 0;
| |
| − | }
| |
| − | | |
| − | .mw-content-ltr ol,
| |
| − | .mw-content-rtl .mw-content-ltr ol,
| |
| − | .mw-content-ltr ul,
| |
| − | .mw-content-rtl .mw-content-ltr ul {
| |
| − | margin: var(--line-height) 0 0 var(--line-height);
| |
| − | font-size: calc(var(--font-size) * .8);
| |
| − | line-height: var(--line-height);
| |
| − | font-weight: 400;
| |
| − | }
| |
| − | | |
| − | ol li, ul li {
| |
| − | font-size: calc(var(--font-size) * .8);
| |
| − | padding: 0;
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | img {
| |
| − | max-width: 100%;
| |
| − | height: auto;
| |
| − | max-height: 100mm;
| |
| − | }
| |
| − | | |
| − | [data-article="introduction"] [data-lang] {
| |
| − | break-before: column;
| |
| − | }
| |
| − | | |
| − | [data-section="appendix"] [data-article] {
| |
| − | break-before: column;
| |
| − | -webkit-column-break-before: always;
| |
| − | }
| |
| − | | |
| − | [data-section], [data-section="essays"] [data-article] {
| |
| − | page-break-before: right;
| |
| − | }
| |
| − | | |
| − | [data-section] {
| |
| − | columns: 2;
| |
| − | column-gap: 7mm;
| |
| − | column-fill: auto;
| |
| − | }
| |
| − | | |
| − | [data-section="appendix"] {
| |
| − | columns: 3;
| |
| − | }
| |
| − | | |
| − | [data-section="toc"] {
| |
| − | columns: 1;
| |
| − | }
| |
| − | | |
| − | sup.reference {
| |
| − | line-height: 0.5;
| |
| − | }
| |
| − | | |
| − | a {
| |
| − | text-decoration: none;
| |
| − | border-bottom: none;
| |
| − | }
| |
| − | | |
| − | #footer {
| |
| − | display: none;
| |
| − | }
| |
| − | | |
| − | div.thumbinner {
| |
| − | width: 100% !important;
| |
| − | max-width: 100% !important;
| |
| − | padding: 0;
| |
| − | }
| |
| − | | |
| − | .mw-content-ltr .thumbcaption, html .thumbcaption {
| |
| − | font-family: "Poppins";
| |
| − | font-size: calc(var(--font-size) * .8);
| |
| − | line-height: var(--line-height);
| |
| − | font-weight: 400;
| |
| − | padding: 0;
| |
| − | color: var(--main-color)
| |
| − | }
| |
| − | | |
| − | div.thumb {
| |
| − | margin: var(--line-height) 0
| |
| − | }
| |
| − | | |
| − | pre {
| |
| − | border: 0;
| |
| − | padding: 0;
| |
| − | margin: calc(var(--line-height) * .5) 0;
| |
| − | line-height: var(--line-height)
| |
| − | }
| |
| − | | |
| − | blockquote {
| |
| − | padding: 0;
| |
| − | border: none;
| |
| − | margin: calc(var(--line-height) * .5) 0;
| |
| − | font-style: italic;
| |
| − | line-height: var(--line-height)
| |
| − | }
| |
| − | | |
| − | .toc {
| |
| − | display: none
| |
| − | }
| |
| − | | |
| − | .mw-references-columns, .mw-references-wrap {
| |
| − | width: 100%;
| |
| − | column-width: auto
| |
| − | }
| |
| − | | |
| − | nav a[href]::after {
| |
| − | content: target-counter(attr(href), page);
| |
| − | float: right;
| |
| − | }
| |
| − | }
| |
