Download raw (19.9 KB)
/* I moved the google fonts to our server. Good luck with the printing! */ @font-face { font-family: "Young Serif"; src: url(https://github.com/latsami/YoungSerif/raw/master/YoungSerif-Regular.otf); } @font-face { font-family: "Prop Courier Sans"; src: url(https://gitorious.org/libregraphicsmag/propcouriersans/raw/5bfd90cdbfd5ae1487110d43c4ff208cc7f17d67:PropCourierSans-Regular.ttf); font-weight: normal; font-style: normal; } @font-face { font-family: "Prop Courier Sans"; src: url(https://gitorious.org/libregraphicsmag/propcouriersans/raw/5bfd90cdbfd5ae1487110d43c4ff208cc7f17d67:PropCourierSans-Medium.ttf); /*src: url(https://gitorious.org/libregraphicsmag/propcouriersans/raw/5bfd90cdbfd5ae1487110d43c4ff208cc7f17d67:PropCourierSans-Bold.ttf);*/ font-weight: bold; font-style: normal; } @color: black; @serif: Domine; @sans: Quattrocento Sans; @mono: Prop Courier Sans; @font-lettrine: Young Serif; @font-size: 11px; @line-height: 15px; @font-size-small: 9px; @line-height-small: 11px; /* BLOCKS ------------------------------------- */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; font-feature-settings: "liga", "dlig", "clig", "kern"; -webkit-font-feature-settings: "liga", "dlig", "clig", "kern"; -moz-font-feature-settings: "liga", "dlig", "clig", "kern"; -o-font-feature-settings: "liga", "dlig", "clig", "kern"; text-indent: 0; } body { background-size: 100%; background-attachment: fixed; background-repeat: no-repeat; color: black; font-family: @serif; font-size: @font-size; line-height: @line-height; padding: @line-height / 2; } /* Insertion du pad dans la page */ iframe { outline: 1px solid #333; } iframe#ether { height: 700px !important; max-width: 50em; margin: auto; } /* Style des niveaux de titre */ h1, h2, h3, h4, h5, h6 { font-size: @font-size; font-weight: bold; font-family: @serif; margin: 0; text-align: center; margin-top: 2 * @line-height; margin-bottom: @line-height; clear: both; } h1 { font-size: @font-size; line-height: @line-height; margin: @line-height 0; text-align: center; font-family: @font-lettrine; font-weight: normal; } #content h1 { font-size: @font-size * 3.5; line-height: 1em; position: relative; top: -8px; -webkit-region-break-before: always; } h2 { font-size: @font-size * 1.5; line-height: 1.3em; text-transform: uppercase; text-align: center; font-family: @font-lettrine; font-weight: normal; } h3 { text-transform: uppercase; margin: @line-height 0; font-family: @font-lettrine; font-weight: normal; } h4 { text-decoration: underline; } a { font-family: @sans; } a.include { font-family: @serif; } img { max-width: 50%; float: left; padding-left: @line-height / 2; padding-right: @line-height / 2; padding-bottom: @line-height / 2; display: block; &:first-child { padding-left: 0; } &:last-child { padding-right: 0; } } img.inline { display: inline; vertical-align: top; padding: 0; height: 1em; } img.large { width: 100% !important; max-width: none !important; margin: auto !important; } .thumbnail { max-width: 30%; } .gallery { margin-left: -4cm; } .gallery.even { margin-left: 0; } .gallery { max-width: none !important; width: 537px; display: flex; flex-flow: wrap; justify-content: space-between; align-items: baseline; margin-bottom: @line-height; img { //width: 33% !important; height: 3.75cm; margin: 0; padding: 0; padding-bottom: @line-height; } figure { //width: 33.33% !important; //float: left; height: 3.35cm; margin-bottom: @line-height *2; img { height: 100% !important; max-width: none !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } } } blockquote { font-family: @serif; font-size: @font-size; margin: @line-height 0; font-style: italic; } .notes > blockquote:first-child { margin: 0 !important; font-style: normal; } p { margin-bottom: 0; clear: both; text-indent: 0; } p + p { text-indent: @line-height * 2; } h2#summary, h2#summary_1, h2#summary_2, h2#summary_3 { display: none; } .summary > p:first-of-type, .summary_1 > p:first-of-type, .summary_2 > p:first-of-type, .summary_3 > p:first-of-type { text-indent: 16em; margin-top: 1em; } .summary > p:first-of-type:first-letter, .summary_1 > p:first-of-type:first-letter, .summary_2 > p:first-of-type:first-letter, .summary_3 > p:first-of-type:first-letter { font-size: 2.5 * @font-size; font-family: @font-lettrine; } .summary > p:first-of-type:first-line, .summary_1 > p:first-of-type:first-line, .summary_2 > p:first-of-type:first-line, .summary_3 > p:first-of-type:first-line { font-variant: small-caps; font-family: @font-lettrine; } /* Define two variables as the loop limits */ @from : 0; @to : 10; /* Create a Parametric mixin and add a guard operation */ .loop(@index) when(@index =< @to) { /* As the mixin is called CSS is outputted */ .summary img:nth-child(@{index}) { margin-top: unit(@index * 80, px); } /* Interation call and operation */ .loop(@index + 1); } /* the mixin is called, css outputted and iterations called */ //.loop(@from); .summary p { //position: relative; } .summary img { //position: absolute; width: 2.5cm; } hr { border: 0; height: @line-height; margin: 0; clear: both; } hr + hr { display: block; border-bottom: 1px solid black; } code, pre { font-family: @mono; white-space: pre-wrap; font-weight: bold; } pre { outline: 1px solid @color; padding: @line-height; width: 100%; } /* Style des légendes d'images */ figcaption { font-family: @sans; font-size: @font-size-small; line-height: @line-height-small; text-align: center; margin-bottom: @line-height; } /* Style des frames de vidéo ou autres objets hors image */ figure iframe { max-width: 70%; margin: @line-height auto; display: block; } figure { text-align: center; } figure img { float: none; margin-left: auto; margin-right: auto; } audio, video, iframe { display: none; } /* Style des notes de bas de pages */ .footnote { font-size: -1 + @font-size-small; line-height: @line-height-small; ol { list-style-position: inside; margin: 0; } p { margin-bottom: 0; } } /* INLINES ------------------------------------- */ /* Style des liens hypertextes */ a, a:visited { text-decoration: none; color: @color; } /* Style du texte en roll-over sur les liens */ a:hover { text-decoration: none; color: black; } /* Style quand on arrive à une ancre */ .target { background-color: @color; } /* Style de l'italique */ em { font-style: italic; } /* Style du bold */ strong { font-weight: bold; } /* Style des exposants */ sup { font-size: 0.65em; line-height: 0; vertical-align: 0.5em; text-decoration: none; margin-left: 1px; font-weight: bold; } sup a { font-family: @sans; } /* Style du texte souligné */ u { text-decoration: none; border-bottom: 2px solid yellow; } dl { margin: @line-height/2 0; } dt { font-style: italic; font-weight: bold; display: inline; font-family: @sans; text-indent: 0; margin-right: 0; } dt strong { text-decoration: underline; } dd + dt:before, .metadata dt:before { content: " "; display: block; height: 8.75px /2 ; } dt:after { content: ": "; } dd { display: inline; margin: 0; text-indent: 0; } dd + dd { padding-left: @line-height * 2; } dd:after { content:'\0A'; white-space:pre; } .metadata dd:after { content: ''; white-space:pre; } .metadata dd:before { content: ", "; margin-left: 0px; } .metadata dt + dd:before { content: ""; margin-left: 0; } .metadata dt.meta-theme, .metadata dt.meta-theme + dd { display: none; } .metadata dd { padding-left: 0; } hr + dl { margin-top: -@line-height; } dl + p { margin-top: @line-height; } .comment:before { background-color: yellow !important; border-radius: 1em; display: inline; height: 1em; margin: 0 0.5em; padding-left: 7px; padding-right: 9px; text-align: center; width: 1em; content: "!"; font-family: @sans; } /* FORMS -------------------------- */ form { margin-bottom: none; } form label, form textarea { font-family: inherit; font-size: inherit; } form input, form textarea { background: none; border-style: solid; border-color: black; font-family: sans-serif; font-size: inherit; } /* Style de l'élément activé */ form input:focus, form textarea:focus { background-color: white; } form input[type=text], form input[type=password] { height: 25px; position: relative; top: -1px; width: 200px; } form input[type=submit] { cursor: pointer; padding: 0; height: 26px; border-style: none; border-color: none; text-decoration: none; color: @color; } form input[type=submit]:hover { background-color: white; text-decoration: none; color: black; } /* GENERIC CLASSES -------------------------------- */ .clearfix { overflow: auto; } /* Style des boutons */ .button { text-decoration: none; margin: 0 @line-height / 2; } /* Style des boutons en roll over */ .button:hover { background-color: none; outline: none; } /* Classe pour transformer des éléments blocs en éléments en ligne */ .inline { display: inline; } /* PAGE STRUCTURE --------------------------------- */ /* Style des containers */ .wrap { margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Style des sous-parties de containers */ .left-side, .middle, .right-side { float: left; position: relative; } .left-side, .right-side { margin-top:0; height: 0; } .middle { width: 50em; padding: @line-height 2 * @line-height; } .write-mode .middle { width: 70%; } /* NAV ------------------------------------------ */ /* Navigation */ nav { font-family: @sans; line-height: @line-height-small; font-size: @font-size-small; position: fixed; top: 0; background-color: white; padding: @line-height / 4; z-index: 1000; } nav#nav-left { left: 0; width: 100%; } nav#nav-right { right: 0; text-align: right; } nav div#staff-menu { display: inline; color: darkgray; } nav h1 { display: inline; } nav span:before { content: " — "; } nav div#sort-by { display: inline; color: darkgray; } /* Texte précédent/suivant */ div#previous a, div#next a { position: fixed; top: 6.5em; font-family: sans-serif; font-size: @font-size-small; line-height: @line-height-small; padding: @line-height; } div#previous a span, div#next a span { display: none; } div#previous a:hover span, div#next a:hover span { display: block; } div#next { text-align: right; padding-right: 0; } div#next a { right: 0; } /* MAIN CONTENT ---------------------------------- */ header { margin-top: -0.5px; font-size: 2.5 * @font-size; line-height: 1.2em; text-align: center; margin-bottom: @line-height; } header p, header h2 { font-family: inherit; margin-bottom: 0; line-height: inherit; text-align: center; display: inline; } header h2 { font-size: inherit; line-height: 1em; display: block; font-family: @font-lettrine; text-transform: none; margin-top: 0; } header p.authors:after { content: ", "; } #content ul li:before { content: "– "; margin-left: @line-height; } #content { h1, h2, h3, h4, h5, h6, p, ul, ol, div { max-width: 380px; } } ol { list-style-type: decimal; margin-left: @line-height; li { text-indent: 0; } } .footnote ol li { margin-bottom: 0em; } .note { margin: @line-height; margin-left: 25%; text-indent: 0; font-family: @sans; font-size: @font-size; & + p { text-indent: 0; } } .noteA { width: 75%; float: right; margin: 0; } .noteB { width: 75%; font-family: @sans; } #content { position: relative; } div#go-up { clear: both; margin-top: 2 * @line-height; a { border-bottom: none; } a:hover { color: @color; } } /* AUTHORSHIP ----------------------------- */ .authors { display: inline; } /* Hides Etherpad background colours */ #content span { background-color: inherit !important; } /* ------ PRINT/SCREEN ------ */ @media screen { .print-only { display: none; } } /* SPECIFIC PADS -------------------------------- */ /* AFTER-LIFE */ .pad-summit_afterlifemd, .pad-mobile_expo_afterlifemd, .pad-documenting_afterlifemd, .pad-boxes-doosjes-boites_afterlifemd, .pad-fathers_afterlifemd { * { font-family: @sans; } header { display: none; } &:before { content: "Afterlife"; display: block; font-size: 3em; font-family: @sans; text-align: center; text-transform: uppercase; } .summary > p:first-of-type, .summary_1 > p:first-of-type { text-indent: 0; margin-top: 1em; } .summary > p:first-of-type:first-letter, .summary_1 > p:first-of-type:first-letter { font-size: @font-size; font-family: @sans; } .summary > p:first-of-type:first-line, .summary_1 > p:first-of-type:first-line { font-variant: normal; font-family: @sans; } pre, code { font-family: @mono; } } /* PLAYLIST */ .pad-playlistmd ol, .pad-playlistmd ol p { max-width: none !important; width: 524px; } .pad-playlistmd .side-a ol { margin-left: -3.25cm; } /* SUMMIT */ .pad-summitmd .notes dt:after { content: "" !important;} /* SUMMIT AFTERLIFE */ .pad-summit_afterlifemd pre { line-height: 14.5px;} /* CREDITS */ .pad-creditsmd #content { text-align: center; .note { text-align: left; } h3 { margin-bottom: 0;} } /* PARTICIPANTS */ .pad-participantsmd { #content { max-width: none; width: 587px !important; margin-left: -4cm; } //header { display: none;} } /* <PRE> TAG GOING ALL WIDTH*/ .pad-tableau_vivantmd pre{ width: 537px; } /* TOC */ ul#contents { font-family: @font-lettrine; max-width: none; width: 587px; //margin-left: -4cm; & > li:before { content: ""; margin-left: 0; } ul { margin-left: @line-height * 2; font-family: @sans; max-width: 507px; } a.page-ref { float: right; } & li.toc-afterlife:before { content: "+ "; } } div#content.overview { padding-left: 4cm; } /* ================================================================================== */ @page { size: 170mm 200mm; margin: 0; } .page .main-section { top: 23mm; padding-bottom: 17mm; } div.marginalia { position: absolute; width: 35mm; height: 100%; top: 10mm; -webkit-flow-from: marginalia; } div.metadata { -webkit-flow-into: marginalia; } div.metadata { -webkit-region-break-after: always; display: block; position: static; clear: both; font-family: @sans; font-size: @font-size-small; line-height: -1+@line-height-small ; } div.footnote-marginalia { position: absolute; width: 35mm; height: 100%; top: 10mm; -webkit-flow-from: footnote-marginalia; } div.footnote { -webkit-flow-into: footnote-marginalia !important; -webkit-region-break-after: always; } .header { font-family: @sans; } /* PAGE DE GAUCHE */ .page:nth-child(odd) .header, .page:nth-child(odd) .main-section, .page:nth-child(odd) .footer { padding-left: 20mm; padding-right: 10mm; } .page:nth-child(odd) section.header:before { font-family: @font-lettrine; content: "Are You Being Served?"; right: 10mm; float: right; } .page:nth-child(odd) section.header { text-align: left; float: left; } .page:nth-child(odd) section.header:after { content: ""; left: 20mm; position: absolute; text-align: right; font-family: @sans; } .page:nth-child(odd) .marginalia, .page:nth-child(odd) .footnote-marginalia { right: 10mm; } .page:nth-child(odd) .column { margin-left: -4cm; width: 688px; } /* PAGE DE DROITE */ .page:nth-child(even) .header, .page:nth-child(even) .main-section, .page:nth-child(even) .footer { padding-left: 10mm; padding-right: 20mm; } .page:nth-child(even) section.header:before { content: "Are You Being Served?"; left: 10mm; font-family: @font-lettrine; float: left; } .page:nth-child(even) section.header { text-align: right; } .page:nth-child(even) section.header:after { content: ""; right: 20mm; position: absolute; text-align: left; float: left; font-family: @sans !important; } .page:nth-child(even) .marginalia, .page:nth-child(even) .footnote-marginalia { left: 10mm; } .footer, .page-ref { font-family: @font-lettrine; } .footnote-backref { display: none; } .middle, #content { padding: 0; } /* Pour les inclusions de pads dans les compilations */ .include .middle { width: 100%; } .include .middle #content { width: 100%; } #logo { position: fixed; top: 10px; left: 0; z-index: 10000; display: none; } #logo:after { content: attr(data-article); } div.column + div.column { padding-left: @line-height; } .screen-only, .button, nav span, .left, .right, div#go-up { display: none; } video, audio { display: none; } a.include { -webkit-region-break-before: always !important; position: static; display: block; } .debug .column { outline: 1px solid yellow;} .debug #content { outline: 1px solid blue;} .debug .marginalia, .debug .footnote-marginalia, { outline: 1px solid blue;} /* FOOTNOTES */ #page-81 .footnote-marginalia { height: 37mm; } #page-82 .footnote-marginalia { height: 60mm; } #page-83 .footnote-marginalia { height: 100mm; } #page-96 .footnote-marginalia { height: 78mm; top: 75mm;} #page-97 .footnote-marginalia { height: 156mm; } #page-98 .footnote-marginalia { height: 98mm; } #page-121 .footnote-marginalia { height: 155mm;} #page-122 .footnote-marginalia { height: 110mm;} #page-123 .footnote-marginalia { height: 90mm;} #page-124 .footnote-marginalia { height: 14mm;} /* HIDE PARATEXT ON BLANK AND TITLE PAGES*/ #page-2, #page-3, #page-6, #page-7, #page-72, #page-73, #page-93, #page-128, #page-129, #page-163, #page-177, #page-183, #page-184 { .header, .footer { display: none;} } #page-1 .footer { display: none; } #plates { position: absolute; top: 123px; left: -31px; } .plate { position: absolute; top: 0mm; left: 0mm; width: 21mm; height: 7mm; font-size: @font-size-small; line-height: @line-height-small; -webkit-flow-from: plates; } .debug .plate { outline: 1px solid springgreen; } div#tags span { font-family: @sans; font-size: @font-size-small; line-height: @line-height-small; display: block; text-align: center; //align-items: center; //justify-content: center; -webkit-flow-into: plates; -webkit-region-break-after: always; outline: 1px solid cyan; } #page-1 { .header { text-align: center;} .header:before { float: none; text-align:center; font-size: @font-size *3 !important; } } .overview > div.metadata { color: white; }