tiny booklet

index.jade

.book

  .page.cover 
    img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/102827/dispersion.jpg' alt='|:|')
 
  .page.noscreen
    p (this page intentionally left blank)

  .page.noprint

  .page
    h1 DISP ERS ING.

  .page
    p something to say, forgotten words. where?

  .page
    img(src="http://40.media.tumblr.com/a0ad5c65f0827aa14714cc11b66a15a0/tumblr_nf9hty6qEf1qz7igvo1_1280.jpg")

  .page
    img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/102827/tumblr_n21wjyhr4I1qz7igvo1_1280.jpg')

  .page
    p begin with thoughts, sinister old friends.

  .page
    p "a triumph," said in great passion.

  .page.black.white
    h1 fin.


// fun links
a(href='javascript:window.print()') Print
//a(href="http://www.prestophoto.com/help/index.php?structure_id=476" target='_blank') Create →

script.js

// based on http://codepen.io/somethingformed/pen/VYWBre

style.less

// uses print dialog to save to a pdf suitable for printing
// made to work for creating mini photo books
// such as
// prestophoto.com/help/index.php?structure_id=476
// or printstud.io/products
// or artifactuprising.com/photo-books/print-photobooks-from-instagram

//////////////////////////////////
//  everywhere                  //
//////////////////////////////////

@media all {
  * {
    box-sizing: border-box;
  }
  body {
    font-size: 10pt;
    line-height: 1.45;
  }
  .page {
    height: @print-height;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    position: relative;
    width: @print-width;
    min-width: @print-width;
  }
  h1 {
    font-family: @font-cover;
    font-size: 8rem;
    word-break: break-all;
    font-weight: 100;
    text-transform: uppercase;
    line-height: 0.7;
    height: 100%;
    width: 100%;
    padding: @print-bleed*3;
  }
  img {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  p {
    font-family: @font-copy;
    //white-space: pre;
  }
  h2 {
    font-family: @font-header;
  }
  a {
    display: none;
  }
  p, .centered {
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
  }
  // &:nth-of-type(3n+2) { }
}

//////////////////////////////////
//  only for screens            //
//////////////////////////////////

@media screen {
  body {
    padding-top: @spread-spacing;
    -webkit-font-smoothing: anti-aliased;
  }
  .book {
    align-content: flex-start;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: @spread-width;
    margin: 0 auto;
    justify-content: space-around;
  }
  .page {
    box-shadow:
      inset 0 0 0 @print-bleed @color-ui-guides,
      inset 0 0 3rem @print-bleed @color-ui-page,
      0 0.4rem 0.8rem 0 @color-ui-drop;
    margin-bottom: @spread-spacing;
  }
  img {
    opacity: 0.8;
  }
  a {
    display: block;
    position: fixed;
    top: 10%;
    left: 0;
    background-color: @color-ink;
    padding: @print-bleed;
    color: @color-paper;
    text-decoration: none;
    font-family: @font-header;
    transform: translateY(-50%);
    z-index: 999;
  }
  .black {
    background-color: @color-ink-preview;
  }
  .white {
    color: @color-paper-preview;
  }
  .cover {
    margin-right: 1px;
  }  
  .noscreen {
    display: none;
  }
}

//////////////////////////////////
//  only for print              //
//////////////////////////////////

@media print {
  .book {
    display: block;
  }
  .page {
    box-shadow: none;
    page-break-after: always;
  }
  .black {
    background-color: @color-ink;
  }
  .white {
    color: @color-paper;
  }
  .noprint {
    display: none;
  }
}

@page {
  background-color: @color-paper;
  color: @color-ink;
  margin: @print-margin;
  size: @print-width @print-height;
}

//////////////////////////////////
//  variables                   //
//////////////////////////////////

//  layout  //
@print-width: 3.75in;
@print-height: 3.75in;
@print-margin: 0;
@print-bleed: 0.125in;
@spread-width: (@print-width*2);
@spread-spacing: 10vh;

//  colors  //
@color-ink: black;
@color-paper: white;
@color-ink-preview: lighten(@color-ink,10%);
@color-paper-preview: darken(@color-paper,10%);
@color-ui-guides: rgba(0,255,255,0.05);
@color-ui-page: rgba(0,0,0,0.1);
@color-ui-drop: rgba(0,0,0,0.3);


//  typography  //
@font-copy: @serif;
@font-cover: @sans;
@font-header: @serif;

@sans: 'Raleway', sans-serif;
@serif: 'Merriweather', serif;

@import url(http://fonts.googleapis.com/css?family=Merriweather:400italic,400,900,300italic,300,700,700italic,900italic);

@import url(http://fonts.googleapis.com/css?family=Raleway:800,100);

tiny-booklet-.markdown

tiny booklet

creating some simple little page layouts that look good wherever. concept based on print guidelines for presto photo 3.5in square mini photobooks.

A Pen by Max Rubenacker on CodePen.

License.