Commit 345254ec authored by gijs's avatar gijs
Browse files

Style update

parent 19a6686d
......@@ -123,7 +123,7 @@
.body {
height: 245.87291667mm;
width: 100%;
padding-top: 13.5pt;
padding-top: 12pt;
overflow: hidden;
}
#my-story {
......@@ -323,7 +323,7 @@ img.fit-width {
/* -------------------------------------------- VARIABLES ----------------------------------------- */
/* -------------------------------------------- GENERIC CLASSES ----------------------------------------- */
body {
line-height: 13.5pt;
line-height: 12pt;
}
h1,
h2 {
......@@ -338,7 +338,7 @@ em {
}
div.column {
float: left;
padding: 0 6.75pt;
padding: 0 6pt;
height: 100%;
box-sizing: border-box;
}
......@@ -357,6 +357,81 @@ div.column30 {
div.column25 {
width: 25%;
}
body#I-1-1 #pages {
counter-reset: page-counter 0;
}
body#I-1-1 #pages {
counter-reset: page-counter 0;
}
body#I-1-2 #pages {
counter-reset: page-counter 10;
}
body#I-1-3 #pages {
counter-reset: page-counter 15;
}
body#I-1-4 #pages {
counter-reset: page-counter 27;
}
body#I-1-5 #pages {
counter-reset: page-counter 43;
}
body#I-1-6 #pages {
counter-reset: page-counter 56;
}
body#I-1-7 #pages {
counter-reset: page-counter 64;
}
body#I-1-8 #pages {
counter-reset: page-counter 71;
}
body#I-1-9 #pages {
counter-reset: page-counter 89;
}
body#I-2-1 #pages {
counter-reset: page-counter 103;
}
body#I-2-2 #pages {
counter-reset: page-counter 109;
}
body#I-2-3 #pages {
counter-reset: page-counter 125;
}
body#I-2-4 #pages {
counter-reset: page-counter 137;
}
body#I-2-5 #pages {
counter-reset: page-counter 149;
}
body#I-2-6 #pages {
counter-reset: page-counter 160;
}
body#I-2-7 #pages {
counter-reset: page-counter 169;
}
body#II-1 #pages {
counter-reset: page-counter-left 181 page-counter-right 182;
}
body#II-2 #pages {
counter-reset: page-counter-left 205 page-counter-right 206;
}
body#II-2 #pages {
counter-reset: page-counter-left 205 page-counter-right 206;
}
body#II-3 #pages {
counter-reset: page-counter-left 245 page-counter-right 246;
}
body#II-4 #pages {
counter-reset: page-counter-left 271 page-counter-right 272;
}
body#II-5 #pages {
counter-reset: page-counter-left 283 page-counter-right 284;
}
body#II-6 #pages {
counter-reset: page-counter-left 311 page-counter-right 312;
}
body#III #pages {
counter-reset: page-counter 343;
}
.body {
position: relative;
}
......@@ -367,10 +442,10 @@ div.column25 {
cursor: zoom-out;
font-size: 9pt;
font-family: 'Garamond12';
margin-top: 1.35pt;
margin-left: 6.75pt;
margin-bottom: 3.375pt;
line-height: 10.8pt;
margin-top: 1.2pt;
margin-left: 6pt;
margin-bottom: 3pt;
line-height: 9.6pt;
-webkit-hyphens: auto;
}
.inlineFootnote.expanded {
......@@ -402,12 +477,12 @@ div.column25 {
font-size: 80%;
}
p.big-break {
margin-top: 13.5pt;
margin-top: 12pt;
text-indent: 0pt;
}
.index-entry {
font-size: 12pt;
line-height: 13.5pt;
line-height: 12pt;
font-family: "Garamond12";
-webkit-break-inside: avoid;
break-inside: avoid;
......@@ -426,8 +501,8 @@ p.big-break {
}
#book0-index .main {
float: left;
width: 55.55555556mm;
padding-right: 8mm;
width: 44.44444444mm;
padding-right: 5mm;
}
#stories ul {
-webkit-flow-into: references;
......@@ -487,19 +562,19 @@ div.footer {
height: 282mm;
}
* {
font-size: 12pt;
line-height: 13.5pt;
font-size: 11.5pt;
line-height: 12.5pt;
}
.main {
position: relative;
float: left;
width: calc(50% - 16px);
height: calc(100% - 11px);
height: calc(100% - 51px);
border: 0px solid black;
padding-bottom: 6px;
padding-left: 6pt;
padding-right: 6pt;
padding-top: 13.5pt;
padding-top: 12pt;
}
.main:nth-of-type(n+2) {
border-left: 0px;
......@@ -514,23 +589,33 @@ p {
hyphens: auto;
-webkit-hyphens: auto;
font-family: "dauphine" !important;
font-size: 12pt !important;
line-height: 13.5pt;
text-align: left !important;
display: inline-block;
padding-left: 6mm;
text-indent: -6mm;
margin-top: 0pt ;
margin-bottom: 13.5pt;
margin-bottom: 12pt;
}
strong {
font-family: "Garamond8" !important;
font-size: 12pt;
letter-spacing: 0.03em;
}
p + blockquote,
blockquote + blockquote {
margin-top: -13.5pt;
margin-top: -12pt;
}
h1 + p + p,
h1 + p + p + p {
text-indent: 0pt;
}
h1 + p + p,
h1 + p + p + p,
h1 + p {
font-family: "Garamond12" !important;
font-size: 10pt;
letter-spacing: 0.03em;
line-height: 12pt;
}
blockquote {
margin: 0pt;
}
......@@ -552,7 +637,7 @@ h1 {
font-size: 17pt !important;
margin-top: 0pt;
text-align: left;
margin-bottom: 22.5pt;
margin-bottom: 19pt;
margin-right: 6px;
letter-spacing: 1pt;
line-height: 18.4pt;
......
@import "../style.less";
@crop-size: 0mm;
@bleed: 0mm;
@header-height: (@page-height/18)*1;
@page-margin-inside: (@page-width/18)*4;
......@@ -208,6 +205,8 @@
}
sup {
line-height: 0pt !important;
position: relative;
top: .35mm;
}
li p, li p:first-of-type, li p:nth-of-type(2){
margin: 0px;
......@@ -266,13 +265,14 @@
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 !important;
font-size:@font-size*2;
font-style: italic;
line-height:@line-height*2 !important;
line-height:@line-height*2;
margin-bottom:@line-height*3;
text-align: center;
}
......@@ -289,7 +289,7 @@
// sections excursions
section.excursion {
width: (@page-width/18) * 5;
width: (@page-width/18) * 4.5;
float: left;
margin-right: @line-height/2;
margin-left: -@page-width/18;
......@@ -298,7 +298,7 @@
display: none;
font-family: 'Dauphine';
color : @color-canal;
font-size: @font-size*.85;
font-size: @font-size*.95;
line-height: @line-height;
font-style: normal;
text-align: left;
......@@ -307,6 +307,23 @@
&.expanded {
display: block;
}
&.no-float {
break-before: region;
width: (@page-width/18) * 10;
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 {
......@@ -322,11 +339,7 @@
section.excursion p + p {
text-transform: none;
text-indent:@line-height*3.5 !important;
}
section.excursion + p {
margin-top: @line-height*0.25;
text-indent: @line-height;
text-indent:@line-height*2;
}
section.expanded.excursion div.2column {
......@@ -385,13 +398,14 @@
font-style: normal !important;
float: initial;
max-width: 100%;
line-height: @line-height;
line-height: 20pt;
color : @color-canal !important;
cursor: zoom-in;
// margin-top: @line-height !important;
// margin-right: 12pt;
margin-top: 0;
margin-bottom: @line-height;
-webkit-hyphens: none;
}
section.excursion h2:before {
......@@ -431,16 +445,24 @@
}
.figure {
max-width: 30%;
max-width: 88.5mm;
float: right;
clear: right;
text-indent: 0;
margin: @line-height -@page-width/18 0 @line-height;
margin: @line-height/2 -@page-width/18 @line-height/2 @line-height/2;
break-inside: avoid;
region-break-before: avoid;
page-break-inside: avoid;
-webkit-region-break-inside: avoid;
&.full {
max-width: @page-width;
}
&.small {
max-width: (@page-width / 18) * 3.5;
}
.figcaption {
display: block;
font-family : 'Dauphine';
......@@ -448,6 +470,10 @@
line-height:@line-height/1.2;
text-align: left !important;
// width: (@page-width/18)*7;
&.more-space-bottom {
margin-bottom: 9pt;
}
}
.figcaption.expanded {
......@@ -463,7 +489,7 @@
margin-right: 0;
.figcaption {
color: @color-brown;
color: @color-canal;
}
}
}
......@@ -490,6 +516,55 @@
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-top: @line-height*0.1;
margin-left: @line-height/2;
margin-bottom: @line-height*0.25;
line-height: @line-height*0.8;
-webkit-hyphens: auto;
}
.inlineFootnote.expanded {
display: inline-block;
width: (@page-width/18)*3;
float: right;
}
.inlineFootnote.expanded p {
text-indent: none;
}
.inlineFootnote.expanded p + p {
text-indent: none;
}
.footnoteRef {
color:@color-canal;
font-family: 'Dauphine';
position: relative;
top: -5px;
font-size: 80%;
margin-left: 4px;
cursor: zoom-in;
}
.footnoteRef.collapsed {
display: none;
}
.numberFootnote {
color:@color-canal;
font-family: 'Dauphine';
font-size: 80%;
}
}
span.img_ref, #main section.excursion span.img_ref{
......@@ -515,9 +590,14 @@ span.img_ref, #main section.excursion span.img_ref{
text-transform: uppercase;
font-size: "GaramondSC12";
}
.footer {
padding-top: @page-width/36;
}
.footer:after {
font-family: dauphine;
font-size: 20pt;
font-size: @font-size;
}
.paper:nth-child(even) .footer{
text-align: left;
......@@ -541,7 +621,7 @@ span.img_ref, #main section.excursion span.img_ref{
.inlineFootnote {
/* Comment clear to activate stacking */
/* clear: right; */
clear: right;
margin-right: -@page-width/18;
text-indent: 0pt !important;
......@@ -551,5 +631,5 @@ span.img_ref, #main section.excursion span.img_ref{
}
.inlineFootnote .drifted_footnotes {
color:@color-canal;
font-family: "Dauphine";
}
@import "../style.less";
@paper-width: @page-width * 2 + @crop * 2;
@page {
......@@ -7,6 +8,45 @@
margin: 0;
}
.header {
&:before {
position: absolute;
left: (@page-width)/18 !important;
content: "Solidifcation Of History";
}
&:after {
position: absolute;
right: (@page-width)/18 !important;
}
}
body {
&#II-1 .header:after {
content: "The Image of the City and the Process of Planning";
}
&#II-2 .header:after {
content: "City Frontiers and Their Disappearance";
}
&#II-3 .header:after {
content: "Passion for the Hiatus and the Liquidisation of Architecture";
}
&#II-4 .header:after {
content: "Information Cloud and the Rise of the Omnipolis";
}
&#II-5 .header:after {
content: "Solidification of History";
}
&#II-6 .header:after {
content: "Compulsion to Sit";
}
}
#pages {
counter-reset: page-counter-left -1 page-counter-right;
......@@ -27,12 +67,12 @@
font-family: "Dauphine";
// overflow: hidden;
.figcaption {
.figcaption, .figcaption_break {
-webkit-flow-into: figcaptions;
flow-into: figcaptions;
}
.img {
.img, .img_break {
-webkit-flow-into: images;
flow-into: images;
}
......@@ -91,6 +131,7 @@
margin-top: 0pt;
}
blockquote {
font-family: 'Dauphine';
margin-right: 0pt !important;
padding-right: 0pt !important;
}
......@@ -108,15 +149,19 @@
}
.figcaption {
/* font-size: 25px; */
line-height: 12pt;
margin-top: @line-height - 12pt;
margin-bottom: 12pt;
font-family: @body-font;
font-size: 9pt;
display: block;
margin-top: 14.5pt;
text-indent: 0pt;
}
p:first-of-type {
margin-top: 0;
}
p {
font-size: 12pt;
line-height: 13.5pt;
......@@ -128,7 +173,7 @@
}
p + p {
text-indent: @line-height;
text-indent: @line-height * 2;
margin-top: 0pt;
}
p.big-break {
......@@ -140,18 +185,6 @@
margin-top: @line-height;
}
.full_img {
width: 418mm;
height: 318mm;
position: relative;
top: 3mm;
background-size: contain;
background-position: center top;
background-repeat: no-repeat;
-webkit-break-inside: avoid;
break-inside: avoid;
}
p .img.full {
left: -@line-height;
}
......@@ -171,9 +204,9 @@
// // float: left;
// }
&.small {
width: 20%;
height: auto;
max-width: 20%;
max-height: @body-height * .4;
max-width: ( @page-width / 18 ) * 16 * .45;
display: inline-block;
margin-right: 6px;
}
......@@ -184,8 +217,8 @@
max-width: initial;
max-height: initial;
width: 418mm;
height: 318mm;
min-width: 418mm;
max-height: 318mm;
position: relative;
top: 3mm;
......@@ -199,15 +232,15 @@
img {
max-width: initial;
max-height: initial;
width: 418mm;
height: 318mm;
min-width: 418mm;
max-height: 318mm;
}
}
&.half {
width: @page-width;
width: (@page-width/18)*15;
height: @body-height * .5;
max-width: @page-width;
max-width: (@page-width/18)*15;
max-height: @body-height * .5;
// display: inline-block;
......@@ -216,7 +249,7 @@
break-before: always;
img {
max-width: @page-width;
max-width: (@page-width/18)*15;
max-height: @body-height * .5;
}
......@@ -226,49 +259,6 @@
break-after: always;
}
}
&.half:nth-of-type(29) {
width: @page-width ;
height: auto;
max-width: @page-width ;
max-height: @page-height * .75;
// display: inline-block;
img {
max-width: @page-width ;
max-height: @page-height * .75;
}
}
// &.half__odd {
// -webkit-region-break-before: always;
// }
// &.half__even {
// -webkit-region-break-after: always;
// }
// }
// &.cover {