Download raw (9.5 KB)

@import "../style.less";

@page-margin-inside: 30px;
@page-margin-outside:30px;
@page-margin-top: 3px;
@page-margin-bottom: 0pt;

@line-height: 12.5pt;

@color-canal: black;

.paper:nth-child(odd) .header:after {
    content: "Knowing the City";
  }

// .collapsed h2 {
//
//       background-image: url("img/light_7864.svg");
//       background-color: red;
//   }
// .paper:nth-of-type(1) {
//   > .page {
//     background-image: url("img/light_7864.svg");
//   }
// }
// .paper:nth-of-type(2),
// .paper:nth-of-type(3) {
//         > .page {
//       background-image: url("img/light_8585.svg");
//       }
//   }
// .paper:nth-of-type(4),
// .paper:nth-of-type(5),
// .paper:nth-of-type(6) {
//         > .page {
//           background-image: url("img/light_7132.svg");
//       }
//   }
// .paper:nth-of-type(7),
// .paper:nth-of-type(8),
// .paper:nth-of-type(9),
// .paper:nth-of-type(10),
// .paper:nth-of-type(11)  {
//         > .page {
//         background-image: url("img/light_4322.svg");
//       }
//   }
//
// .paper:nth-of-type(12),
// .paper:nth-of-type(13),
// .paper:nth-of-type(14) {
//         > .page {
//         background-image: url("img/light_780.svg");
//       }
//   }
//
// .paper:nth-of-type(15),
// .paper:nth-of-type(16),
// .paper:nth-of-type(17),
// .paper:nth-of-type(18),
// .paper:nth-of-type(19),
// .paper:nth-of-type(20),
// .paper:nth-of-type(21),
// .paper:nth-of-type(22) {
//         > .page {
//           background-image: url("img/light_9074.svg");
//
//       }
//   }
//
// .paper:nth-of-type(23),
// .paper:nth-of-type(24),
// .paper:nth-of-type(25),
// .paper:nth-of-type(26),
// .paper:nth-of-type(27) {
//           > .page {
//             background-image: url("img/light_9666.svg");
//
//         }
//     }
// .paper:nth-of-type(28),
// .paper:nth-of-type(29),
// .paper:nth-of-type(30),
// .paper:nth-of-type(31),
// .paper:nth-of-type(32) {
//         > .page {
//           background-image: url("img/light_9778.svg");
//
//       }
//
//     }

.page {
  // background-image: url("img/bay-test.png");
  // background-image: url("img/TexTuring-output_894.png");
  // background-image: url("img/TexTuring-output_5768.png");
  // background-image: url("img/TexTuring-output_9820.png");
  // background-image: url("img/TexTuring-output_567.png");
  // background-image: url("img/TexTuring-output_4353.png");
  // background-image: url("img/TexTuring-output_4726.png");

  position: relative;
  top: -3mm;
  left: -3mm;
  width: calc(~"100% + 6mm");
  height: calc(~"100% + 6mm");
  background-repeat: no-repeat;
  background-size: cover;
}

#stories ul {
    -webkit-flow-into: references;
    flow-into: references;
}

#stories article {
    -webkit-flow-into: main;
    flow-into: main;
    background: white;
    background-clip: content-box;
}


.main {
    -webkit-flow-from: main;
    flow-from: main;
}

.references {
    -webkit-flow-from: references;
    flow-from: references;
}
div.header, div.footer {
  background-color: white;
}

.header {
    height: 10mm;
    width:30%;
    margin: auto;
    text-align: center !important;
    font-family: 'dauphine' !important;
    font-size: 7.5pt;
    margin-top: 0mm !important;
    margin-bottom: @header-height;
    padding-top: 5mm;
    padding-bottom: 6mm;
    text-transform: uppercase !important;
    // font-style:italic;
    // font-size: @body-size !important;
    letter-spacing: 0.06em !important;
}
.footer {
  height: 20mm;
  width:10%;
  margin: auto;
  text-align: center !important;
  font-family: 'dauphine' !important;
  font-size: 8pt !important;
  margin-top: 10mm !important;
  padding-top: 3mm;
  padding-bottom: 5mm;
  text-transform: uppercase !important;
  // font-style:italic;
  // font-size: @body-size !important;
  letter-spacing: 0.06em !important;
}

.header, .footer {
    padding-left: 0%;
    padding-right: 0%;
}

.body {
  // width: calc(~"100% - @page-margin-inside");
  width: 80%;
  margin:auto;
}

* {
    font-size: 9pt;
    line-height: @line-height;
}

.main {
   position:relative;
   float:left;
   width: calc(~"50% - 4.5px");
   height: calc(~"100% - 11px");
   border: 0px solid black;
   padding-top: 6px;
   padding-bottom: 6px;

   &:nth-of-type(n+2) {
     border-left: 0px;
   }
}

.references {
  height: @line-height;
  width: 250mm;
  position:absolute;
  z-index: 1;

  bottom: 0mm;
  transform: rotate(-90deg);
  transform-origin: bottom left;

  &.first {
    left: 33%;
  }

  &.second {
    left: 66%;
  }
}




h1, h2, ul, li, blockquote {
  margin: 0px;
}

article + article {
  margin-top: -3px;
  -webkit-region-break-before:always;
  padding-top: 0.5 * (@page-height - (@page-margin-top + @page-margin-bottom + @header-height + @footer-height));
}
article.expand {
  div:first-of-type  {
    display: none;
  }
}
article.collapsed {
  -webkit-region-break-before:avoid;
  padding-top: 0px;


  * {
    display: none;
  }

  h1, h2, div:first-of-type, div:first-of-type img   {
    display: block;

  }
  h1{
    font-size: 10pt !important;
    padding: 1px 6px 0px 5pt !important;
  }
  h2 {
    font-size: 18pt !important;
    line-height: 19pt;
  }
}

article h2.collapsed {
  border-bottom : none !important;
}

.body,
.paper:nth-child(odd) .page .body,
.paper:nth-child(even) .page .body {
  padding: 6px 0px;
}
article.epub {
  padding-bottom: 0pt !important;
}
article {
//  outline: 3px solid @color-canal;
//  outline-color: @color-canal;
//  outline-width: 3px 0px 3px 3px;
//  outline-style: solid;
  // border-width: 0px 0px 3px 0px;
  // border-color: @color-canal;
  // border-style: solid;
  padding-bottom: 103pt !important;
  // border-bottom: solid 0px black;
  &:first-of-type {
    // margin-top: 0px;
    border-top: none;
  }
}

p {
    text-rendering: initial;
    hyphens: auto;
    -webkit-hyphens: auto;
    margin-top:0pt;
    margin-bottom:0pt;
    font-weight: 400;
    padding : 0pt 16pt;
    text-indent: 29px;

    /* Garamond */
    /*@text-align: justify;
    @font-family: 'Garamond8'; // 'HKGrotesk';
    @font-size: 11.5pt;
    @line-height: 13.5pt;*/

    /* HKGrotesk */
    /*@text-align: justify;
    @font-family: 'HKGrotesk'; // 'HKGrotesk';
    @font-size: 10pt;
    @line-height: 13.5pt;*/

    /* Fira Mono */
    @text-align: left;
    @font-family: 'Fira Mono';
    @font-size: 9pt;
    @line-height: 12pt;

    text-align: @text-align;
    font-family: @font-family;
    font-size: @font-size;
    line-height: @line-height;

    &.big-break {
      padding-top: @line-height;
    }
}

article > p:first-of-type {
  // border-top: 3px solid black;
  padding-top: @line-height*0.5;
  text-indent: 0px;
}

em {
    font-style: normal;
    // text-decoration: underline;
    font-weight: 400;

    background: linear-gradient(#000000, #000000);
    background-size: 1px 1px;
    background-position: 0 100%;
    background-repeat: repeat-x;
    // border-bottom: solid 1px black;
}

strong {
  letter-spacing: 1.4em;
  hyphens: none;
  -webkit-hyphens: none;

}

strong::before {
  content: " \00a0 \00a0" !important;
}

strong::after {
  content: "\00a0 \00a0"!important;
}

h1 {
  border-right: 2px solid black;
    border-bottom: 2px solid black;
    margin-bottom: -9pt;
    margin-right: 6px;
    float: left;
    position: relative;
    display: block;
}

h1, h1 span {
    font-family: "dauphine";
    font-size: 16pt !important;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1pt;
    line-height: 21pt;
    padding:3px 13px 0px 10pt;
    color:black;
}

h2#problematisation-and-essayism {
      // margin-top: 7px;
   }





h2, h2 span {
   font-family: "dauphine" !important;
   font-weight: "regular";
   font-size: 23pt !important;
   line-height: 21pt;
   letter-spacing: -0.02em;
   text-align: left;
}

h2 {
   margin-top: -3px;
   padding: 8pt 8pt 8pt 18pt;
   text-align: left;
   border-top: 3px solid black !important;
}

h2:first-line::before {
  content: "\00a0" !important;
}

h4 {
  padding : 0px 18px;
  margin-top : 16px;
  margin-bottom : 6px;
}

h4, h4 span {
  font-family: "dauphine" !important;
  font-size: 13.5pt !important;
  line-height: 13.25pt;
  text-align: left !important;
  text-transform: uppercase;
}

ul {
  list-style-type: none;
  padding: 0pt !important;
}

li {
  // padding: 4pt 8pt;
  // -ms-transform: rotate(90deg); /* IE 9 */
  // -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  // transform: rotate(90deg)
  margin: 0;
  display: block;

        p {
          border: 3px solid black;
          margin: 0;
          text-indent: 0;
          padding : 6pt 21pt;
          font-family: "dauphine" !important;
          font-size: 9pt !important;
          line-height: 15pt;
          text-align: left !important;
          display: inline-block;
          background: white;
        }

      em{
        // font-size: 10pt !important;
        font-style: italic;
      }
}

blockquote {
  p {
    padding: 0px 18px 0pt 37pt;
    margin: 14.5px 0;
    font-family: 'Garamond12' !important;
    font-size: 10pt !important;
    line-height: 12pt;
    text-align: left !important;
    letter-spacing: 0.03em;
    text-indent: 0pt;
  }
        p:first-of-type{
          border-top: none;
        }


  em {
    font-size: 10pt !important;
    font-style: regular;
    text-decoration: none;
      // text-shadow: none;
      // background: none;
      text-shadow: 0 1px 0 #fff, 0 2px 0 #fff, 0 -1px 0 #fff, 0 -2px 0 #fff, -1px 1px 0 #fff, -1px 2px 0 #fff, 1px 1px 0 #fff, 1px 2px 0 #fff, -1px 0 0 #fff, 0 -3px 0 #fff;
      background: linear-gradient(#000000, #000000);
      background-size: 1px 1px;
      background-position: 0 96%;
      background-repeat: repeat-x;


  }
}

.footer:after {
    // content: @footer-text ".";
}