Download raw (22.6 KB)
@import "../style.less";
@header-height: (@page-height/18)*1;
@page-margin-inside: (@page-width/18)*4;
@page-margin-outside: (@page-width/18)*3;
@body-height: (@page-height/18)*15+@line-height;
body {
&#I-1-1, &#I-1-2, &#I-1-3,
&#I-1-4, &#I-1-5, &#I-1-6,
&#I-1-7, &#I-1-8, &#I-1-9 {
.paper:nth-child(odd) .header:after {
content: "The City of Organization (Forces and Flows)"
}
}
&#I-2-1, &#I-2-2, &#I-2-3,
&#I-2-4, &#I-2-5, &#I-2-6,
&#I-2-7 {
.paper:nth-child(odd) .header:after {
content: "The City of Order (‘Wisconst’ and Discipline)"
}
}
&#I-1-1 .paper:nth-child(even) .header:after {
content: "The Return of the Sphinx";
}
&#I-1-2 .paper:nth-child(even) .header:after {
content: "Modern Urbanism: Reversing the Fortress";
}
&#I-1-3 .paper:nth-child(even) .header:after {
content: "The Historical Event as Accidental Intertwining";
}
&#I-1-4 .paper:nth-child(even) .header:after {
content: "The Milieu Machine";
}
&#I-1-5 .paper:nth-child(even) .header:after {
content: "The Emergence of the Engineer and His ‘Unexcelled Theoretical Background’";
}
&#I-1-6 .paper:nth-child(even) .header:after {
content: "Politics of the Street";
}
&#I-1-7 .paper:nth-child(even) .header:after {
content: "The Street Machine";
}
&#I-1-8 .paper:nth-child(even) .header:after {
content: "Boosting the City or the Principle of Conditioned Ground";
}
&#I-1-9 .paper:nth-child(even) .header:after {
content: "The Power of Expressiveness and Will to Direct";
}
&#I-2-1 .paper:nth-child(even) .header:after {
content: "On the Ordering of Cities";
}
&#I-2-2 .paper:nth-child(even) .header:after {
content: "Mathēsis, or Wisconst (the Art of What Is Certain)";
}
&#I-2-3 .paper:nth-child(even) .header:after {
content: "The Maurice Conspiracy and Neo-Stoicism";
}
&#I-2-4 .paper:nth-child(even) .header:after {
content: "The Ethical Series: Vital Ascesis";
}
&#I-2-5 .paper:nth-child(even) .header:after {
content: "Vita Politica – Civil Life";
}
&#I-2-6 .paper:nth-child(even) .header:after {
content: "Discipline and Army Camp";
}
&#I-2-7 .paper:nth-child(even) .header:after {
content: "Wealth and Representation";
}
.paper.headerless .header:after {
content: "" !important;
}
}
.main {
-webkit-flow-from: main;
flow-from: main;
float:left;
top: (@page-height/18)*1;
margin: 0;
width: (@page-width/18)*11;
height: (@page-height/18)*15;
}
.break-before {
-webkit-region-break-before: always;
region-break-before: always;
break-before: always;
}
#main {
-webkit-flow-into: main;
flow-into: main;
width: @page-width - (@page-margin-inside + @page-margin-outside);
hyphens: auto;
-webkit-hyphens: auto;
font-family: 'Garamond12';
font-size: @font-size;
text-align: justify;
> p.big-break {
margin-top: @line-height;
text-indent: 0pt;
> .inlineFootnote {
text-indent: 0pt;
}
}
> p {
margin: 0px;
text-indent: @line-height;
&:first-of-type {
font-family: 'Garamond8';
font-size: 16pt;
line-height: @line-height*1.3;
text-indent:-39pt;
margin-bottom:@line-height;
margin-left: 65pt;
.inlineFootnote {
text-indent: 0;
}
}
&:nth-of-type(2) {
text-indent: 0pt !important;
&:first-letter {
padding: 28pt;
// padding-top: 4.5pt;
height: 10px;
// height: @line-height * 1.8;
float: left;
width: 10px;
text-transform: lowercase;
font-style: italic;
line-height: @line-height * 0;
position: relative;
}
&:first-letter {
background-repeat: no-repeat;
// color:transparent;
text-transform: uppercase;
font-style: normal;
font-size: 40pt;
color: black;
-webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: black;
background-size: contain;
display: inline;
z-index: 1000;
}
}
}
&[data-src*="I.1.1"] {
> p:nth-of-type(2){
&:first-letter{
background-image: url(/assets/lettrines/wrapp-letters-chap1_000.png);
}
}
}
&[data-src*="I.1.2"] {
> p:nth-of-type(2){
&:first-letter{
background-image: url(/assets/lettrines/wrapp-letters-chap1_001.png);
}
}
}
&[data-src*="I.1.3"] {
> p:nth-of-type(2){
&:first-letter{
background-image: url(/assets/lettrines/wrapp-letters-chap1_002.png);
}
}
}
&[data-src*="I.1.4"] {
> p:nth-of-type(2){
&:first-letter{
background-image: url(/assets/lettrines/wrapp-letters-chap1_003.png);
}
}
}
&[data-src*="I.1.5"] {
> p:nth-of-type(2){
&:first-letter{
background-image: url(/assets/lettrines/wrapp-letters-chap1_004.png);
}
}
}
&[data-src*="I.1.6"] {
> p:nth-of-type(2){
&:first-letter{
background-image: url(/assets/lettrines/wrapp-letters-chap1_005.png);
}
}
}
&[data-src*="I.1.7"] {
> p:nth-of-type(2){
&:first-letter{
background-image: url(/assets/lettrines/wrapp-letters-chap1_006.png);
}
}
}
&[data-src*="I.1.8"] {
> p:nth-of-type(2){
&:first-letter{
background-image: url(/assets/lettrines/wrapp-letters-chap1_007.png);
}
}
}
&[data-src*="I.1.9"] {
> p:nth-of-type(2){
&:first-letter{
background-image: url(/assets/lettrines/wrapp-letters-chap1_008.png);
}
}
}
&[data-src*="I.2.1"] {
> p:nth-of-type(2){
&:first-letter{
background-image: url(/assets/lettrines/wrapp-letters_000.png);
}
}
}
&[data-src*="I.2.2"] {
> p:nth-of-type(2){
&:first-letter{
background-image: url(/assets/lettrines/wrapp-letters_001.png);
}
}
}
&[data-src*="I.2.3"] {
> p:nth-of-type(2){
&:first-letter{
background-image: url(/assets/lettrines/wrapp-letters_002.png);
}
}
}
&[data-src*="I.2.4"] {
> p:nth-of-type(2){
&:first-letter{
background-image: url(/assets/lettrines/wrapp-letters_003.png);
}
}
}
&[data-src*="I.2.5"] {
> p:nth-of-type(2){
&:first-letter{
background-image: url(/assets/lettrines/wrapp-letters_004.png);
}
}
}
&[data-src*="I.2.6"] {
> p:nth-of-type(2){
&:first-letter{
background-image: url(/assets/lettrines/wrapp-letters_005.png);
}
}
}
&[data-src*="I.2.7"] {
> p:nth-of-type(2){
&:first-letter{
background-image: url(/assets/lettrines/wrapp-letters_006.png);
}
}
}
sup {
line-height: 0pt !important;
position: relative;
top: 1.75mm;
}
li p, li p:first-of-type, li > p:nth-of-type(2){
margin: 0px;
font-size: @font-size;
font-family:@body-font;
line-height: @line-height;
text-align: justify;
font-weight: normal !important;
display: inline;
}
// li p:first-of-type, {
// text-indent: 39pt !important;
// }
ul {
list-style-type: none !important;
display: inline-block;
margin-left: 0pt;
padding-left: 0pt;
}
ul li {
display: list-item;
margin-left: 14pt;
padding-left: 0pt;
&::before{
content: "\25c8 ";
//content: "\23e3 ";
margin-right: 7.25pt;
//padding-left: 14.5pt;
}
}
ol {
list-style-type: none !important;
display: block;
margin-left: 0pt;
padding-left: 0pt;
}
ol li {
display: list-item;
margin-left: 0pt;
padding-left: 0pt;
&::before{
content: "— ";
}
}
h1 {
font-family: 'GaramondSC12';
font-size:@font-size*3 !important;
line-height:@line-height*2.5 !important;
margin-bottom:@line-height*3;
letter-spacing: -0.05em;
text-align: center;
margin-left: -@page-width / 18;
margin-right: -@page-width / 18;
-webkit-hyphens: none;
}
h2 {
font-family: 'Garamond12';
font-size:@font-size*2;
font-style: italic;
line-height:@line-height*2;
margin-bottom:@line-height*3;
text-align: center;
}
ul, ol {
margin: 0pt !important;
}
h4 {
font-family: 'GaramondSC12';
font-size:@font-size*1.5 !important;
margin-top: -@line-height*3;
text-align: center;
}
// sections excursions
section.excursion {
width: (@page-width/18) * 4.5;
float: left;
margin-top: 0;
margin-right: @line-height/2;
margin-left: -@page-width/18;
margin-bottom: @line-height * 2;
clear: left;
display: none;
font-family: 'Dauphine';
color : @color-canal;
font-size: @font-size*.9;
line-height: 12.8pt;
font-style: normal;
text-align: left;
-webkit-hypens: auto;
&.expanded {
display: block;
.excursion-sources, .excursion-sources.expanded {
ul {
padding-left: 0;
margin-left: 0;
text-align: left;
list-style-type: none !important;
li {
&:before {
display: none;
}
list-style-type: none !important;
padding-left: none;
text-align: left;
font-size: 80%;
line-height: 12pt;
margin-left: 0;
margin-bottom: 0 !important;
}
}
}
}
&.no-float {
width: (@page-width/18) * 10 + 2mm;
margin-left: @page-width/18;
float: none;
clear: none;
.figure {
max-width: (@page-width/18) * 7;
margin-left: -(@page-width/18) * 1.5;
&.full {
max-width: @page-width;
}
}
}
}
section.expanded.excursion p {
display: block !important;
cursor: zoom-out;
margin: 0pt !important;
}
section.excursion p em {
font-style:italic;
}
section.excursion p + p {
text-transform: none;
text-indent:@line-height;
}
section.expanded.excursion div.2column {
display: block;
width: 100%;
// width: 50%;
// float: left;
// position: relative;
margin: 12pt 0pt;
}
section.expanded.excursion ul {
list-style-type: none !important;
display: block;
margin: 0pt 0pt !important;
padding-left: 0pt;
margin-top: @line-height !important;
}
section.expanded.excursion ul li {
display: list-item;
margin-bottom: @line-height !important;
// &::before{
// content: "\23e3 ";
// margin-right: 7.25pt;
// padding-left: 7.25pt;
// }
}
section.expanded.excursion ol {
list-style-type: none !important;
display: block;
// margin: 0pt @line-height*3.5 !important;
padding-left: 0pt;
margin-bottom: @line-height !important;
width: 100%;
}
section.expanded.excursion ol li {
display: list-item;
&::before{
content: "— ";
}
}
section.expanded h2 {
cursor: zoom-out;
}
section.excursion h2 {
font-family: 'Dauphine';
font-size: @font-size*1.3 !important;
text-transform: none !important;
display: block;
font-style: normal !important;
float: initial;
max-width: 100%;
line-height: 18pt;
color : @color-canal !important;
cursor: zoom-in;
// margin-top: @line-height !important;
// margin-right: 12pt;
margin-top: @line-height * .5;
margin-bottom: @line-height;
-webkit-hyphens: none;
}
section.excursion h2:before {
content: " ";
// background: url("img/carto-picto-river-rotate.svg") no-repeat 0 0;
background: url("img/carto-picto-river.svg") no-repeat 0 0;
background-position: 0pt 10pt;
background-size: 100%;
width: 25px;
height: 25px;
display: inline-block;
// content:"ant ";
font-family:DauphineDings;
}
section.excursion .figure {
float: left;
clear: both;
max-width: initial;
margin-right: 0;
margin-top: 0;
img {
max-width: 100%;
float: left;
margin-left: -@page-width/36;
margin-right: @page-width/36;
}
.figcaption {
float: left;
margin-left: -@page-width/36;
margin-right: @page-width/36;
margin-bottom: @line-height/2;
}
}
section.excursion {
h2 + .figure {
margin-top: -@line-height;
}
}
.figure {
max-width: 88.5mm;
float: right;
clear: right;
text-indent: 0;
margin: @line-height/2 -@page-width/18 * 1.2 @line-height/2 @line-height/2 + @page-width/18 * 0.2;
break-inside: avoid;
region-break-before: avoid;
page-break-inside: avoid;
-webkit-region-break-inside: avoid;
&.left {
float: left;
clear: left;
margin-left: -(@page-width) / 18 * 1.2;
margin-right: @line-height / 2 + (@page-width) / 18 * 0.2;
}
&.stacked {
max-width: 85mm;
clear: none;
margin-right: 9pt;
}
&.pull-up {
margin-top: 0;
img {
margin-top: 0;
margin-bottom: @line-height/2;
}
}
&.pull-further-up {
margin-top: -@line-height/2;
}
&.push-down {
margin-top: @line-height * 1;
}
&.pull-down {
margin-bottom: 0;
img {
margin-bottom: @line-height/2;
}
}
&.pull-further-down {
margin-bottom: -@line-height/2;
}
&.half {
max-width: 69mm;
&.stacked {
margin-right: @line-height/2;
margin-left: -@page-width / 18;
}
}
&.full {
max-width: @page-width;
}
&.medium {
max-width: (@page-width / 18) * 6;
}
&.small {
max-width: (@page-width / 18) * 3.5;
&.stacked {
margin-left: 20pt;
}
}
.figcaption {
display: block;
font-family : 'Dauphine';
font-size: @font-size/1.3;
line-height:@line-height/1.2;
text-align: left !important;
// width: (@page-width/18)*7;
&.more-space-bottom {
margin-bottom: 9pt;
}
}
&.extra-bottom-white-space {
.figcaption {
margin-bottom: 5mm;
}
}
&.double-extra-bottom-white-space {
.figcaption {
margin-bottom: 10mm;
}
}
.figcaption.expanded {
display: block;
}
.pull-up {
margin-bottom: -@line-height / 2;
}
}
// .inlineFootnote .figcaption {
// width: (@page-width/18)*3;
// color:black;
// }
img {
max-width: 100%;
position: relative;
height: 18px;
margin-bottom: -5px;
margin-right: 5px;
cursor: zoom-in;
}
img.expanded {
height: inherit;
break-inside: avoid;
-webkit-region-break-inside: avoid;
cursor: zoom-out;
margin-top: 12px;
margin-bottom: 12px;
}
.inlineFootnote {
display: none;
text-align: left;
color: @color-canal;
cursor: zoom-out;
font-size: @font-size*0.75;
font-family: @body-font;
margin: @line-height*0.1 -(@page-width/18 + 2mm) 0 @line-height/2;
margin-bottom: 0;
line-height: @line-height*0.8;
display: inline-block;
width: 40mm;
float: right;
-webkit-hyphens: auto;
clear: right;
+ .inlineFootnote {
margin-top: @line-height*0.8;
}
.drifted_footnotes {
font-family: "Dauphine";
}
&.big-break {
margin-top: @line-height + @line-height * .1;
+ .inlineFootnote.big-break {
margin-top: @line-height*0.8;
}
}
.numberFootnote {
color:@color-canal;
font-family: 'Dauphine';
font-size: 80%;
float: left;
margin-right: 2mm;
}
p {
text-indent: 0;
margin-top: 0;
margin-bottom: 0;
+ p {
text-indent: @line-height*1.6;
}
}
.figure {
max-width: 100%;
float: initial;
margin-left: 0;
margin-right: 0;
margin-top: 0;
.figcaption {
color: @color-canal;
}
}
ol {
list-style-type: decimal !important;
li {
list-style-position: inside;
&:before {
content: "";
}
}
}
&.no-float {
float: none;
}
&.block-end {
width: 75%;
float: left;
margin: @line-height*0.8 0 0 0;
}
}
.footnoteRef {
color:@color-canal;
font-family: 'Dauphine';
position: relative;
top: -5px;
font-size: 80%;
margin-left: 4px;
cursor: zoom-in;
}
.block-end-small {
width: 35%;
float: left;
margin: @line-height*2.8 0 0 0;
}
}
/* Specific modifications */
#I-1-4 {
#main {
p:nth-of-type(2) {
-webkit-region-break-before: always;
}
}
}
body#I-1-8 #main {
.figure {
float: left;
clear: left;
margin-left: -(@page-width) / 18 * 1.2;
margin-right: 0;
max-width: 100mm;
&.half {
max-width: 90mm;
margin-right: @line-height/2 + @page-width/18 * 0.2;
}
&.full {
max-width: 200mm;
}
&.medium {
max-width: (@page-width / 18) * 6;
margin-left: -(@page-width) / 18 * 1.4;
margin-right: @line-height/2 + @page-width/18 * 0.2;
}
}
.inlineFootnote .figure {
margin-left: 0;
margin-right: 0;
&.I185 {
clear: none;
margin-right: -7mm;
margin-top: -8mm;
margin-left: 4mm;
+ p {
clear: both;
}
}
}
}
#I-2-7 {
#main {
.block-end {
margin-top: 2.8 * @line-height;
}
.I2712 {
margin-bottom: 11pt;
}
}
}
#I-2-2 {
#main {
.block-end-small {
margin-top: .8 * @line-height;
}
}
}
span.img_ref, #main section.excursion span.img_ref{
display: none;
}
.running{
font-family:@body-font;
font-style:italic;
padding-top: 24pt;
// font-size: 9pt
text-align: center;
}
.header:after {
content: "The Riddle of the Real City and the Dark Knowledge of Urbanism";
}
.paper:nth-child(odd) .header {
text-align: center;
}
.paper:nth-child(odd) .header:after {
content: "Grid City and the Birth of (Modern) Urbanism";
font-style:normal;
font-size: 10pt;
text-transform: uppercase;
font-size: "GaramondSC12";
}
.footer {
padding-top: @page-width/36;
}
.footer:after {
font-family: dauphine;
font-size: @font-size;
}
.paper:nth-child(even) .footer{
text-align: left;
}
.paper:nth-child(odd) .footer{
text-align: right;
}
.main.footer {
color: red;
}
.footnotes.hidden {
display: none;
}
.footnoteRef {
top:0pt;
}
.footnoteRef.collapsed {
display: initial;
}
// //K
// body #main {
// // PMS
// * {
// color: black !important;
// }
// > p:nth-of-type(2):first-letter {
// // background-image: none !important;
// -webkit-text-stroke-color: transparent;
// }
// .inlineFootnote, .footnoteRef, .excursion, section.excursion, .footnotefigure {
// visibility: hidden !important;
// *, h2, p {
// visibility: hidden;
// }
// }
// }
// body #main {
// > p {
// .fakeLettrines {
// position: absolute !important;
// top: 0;
// left: 0;
// width: calc(~"2 * 28pt + 10px");
// height: calc(~"2 * 28pt + 10px");
// margin: 0 !important;
// padding: 0 !important;
// visibility: visible !important;
// }
// }
// }
// // PMS
// body #main {
// * {
// visibility: hidden !important;
// }
// > p:nth-of-type(2):first-letter {
// visibility: visible !important;
// background-image: none !important;
// }
// .inlineFootnote, .footnoteRef, .excursion, section.excursion, .footnotefigure {
// visibility: visible !important;
// color: black !important;
// *, h2, p {
// visibility: visible !important;
// color: black !important;
// }
// }
// }
// .paper {
// background-image: none;
// }
// .header {
// visibility: hidden;
// }
// .footer {
// visibility: hidden;
// }