diaspora/app/assets/stylesheets/new_styles/_canvas.scss

$container-width : 1170;

$margin-between-columns : 30;
$column-width : 255 - $margin-between-columns;
$raw-two-column-width : ($column-width * 2) + ($margin-between-columns * 2) ;
$two-column-width : $raw-two-column-width + 7;  //why do we need these extra 7?

$margin-between-rows : 20;

$row-height : $column-width;
$two-row-height : $raw-two-column-width + $margin-between-rows;

/* colors : http://www.colourlovers.com/palette/2134203/Awezome_in_argyle */
$cyan : rgb(8,204,249);
$yellow : rgb(242,244,9);
$green : rgb(29,235,134);
$purple : rgb(220,23,166);
$lime-green : rgb(143, 199,10);
$orange : rgb(237, 165, 13);
$red : rgb(246, 68, 60);
$turquoise : rgb(8, 224, 173);
$sand : rgb(245, 239, 237);

@mixin tall() {
  height : $two-row-height + px;
  min-height : $two-row-height + px;
  max-height : $two-row-height + px;
}

@mixin wide() {
  width : $two-column-width + px;
  min-width : $two-column-width + px;
  max-width : $two-column-width + px;
}

body {
  background-color : #F6F6F6;
  background-image : image_url('pattern.jpg')
}

#canvas {
  margin-top : 100px;
}

.canvas-frame {
  float : left;
  margin : 10px;

  .content {
    @include transition(box-shadow);
    @include box-shadow(0,1px,3px,rgba(0,0,0,0.2));

    background-image : image_url("paper-texture-1.jpg");

    &:hover {
      @include box-shadow(0,1px,5px,rgba(0,0,0,0.5));
      cursor : pointer;
    }

    &:active {
      -webkit-transform : scale(0.99);
    }

    //hax to deal with markdownify
    p {
      font-size: inherit;
      line-height: inherit;
    }

    position : relative;

    background-color : #fff;
    min-height : $column-width + px;
    max-height : $column-width + px;

    width : $column-width + px;
    min-width : $column-width + px;
    max-width : $column-width + px;

    overflow : hidden;
    padding : 20px;

    /* used in masking photos with overflow: hidden; */
    .image-container {
      position : absolute;
      overflow : hidden;

      top : 0;
      left : 0;

      min-width : 100%;

      img {
        max-height : 100%;
        max-width : 100%;
      }
    }
  }

  .embed-frame {
    position : absolute;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;

    iframe {
      height : 100%;
      width : 100%;
    }
  }

  .fav {
    position : absolute;
    z-index : 100;
    top : 10px;
    right : 10px;
  }

  .info {
    @include opacity(0.3);

    padding : 5px;
    max-height : 10px;
    text-align : right;
    i {
      margin-left:  3px;
    }
  }

  .background-color {
    height : 100%;
    width : 100%;
    position: absolute;
    top : 0;
    left : 0;
  }

  .text-content {
    @include opacity(0.65);
    position : relative;
    z-index : 10;
    color : #000;

    text-shadow : 0 2px 0 rgba(#fff,0.6), 0 -1px 2px rgba(#555, 0.1);
    font-weight : bold;
    font-size : 1.5em;
    line-height : 1.2em;
  }

  &.cyan .background-color   { background-color : rgba($cyan, 0.2); }
  &.green .background-color  { background-color : rgba($green, 0.2); }
  &.yellow .background-color { background-color : rgba($yellow, 0.2); }
  &.purple .background-color { background-color : rgba($purple, 0.2); }
  &.lime-green .background-color { background-color : rgba($lime-green, 0.2); }
  &.orange .background-color { background-color : rgba($orange, 0.2); }
  &.red .background-color { background-color : rgba($red, 0.2); }
  &.turquoise .background-color { background-color : rgba($turquoise, 0.2); }
  &.sand .background-color { background-color : rgba($sand, 0.8); }

  &.blog-text {
    .text-content {
      padding : 10px;
      @include opacity(0.9);

      p {
        text-shadow : 0 1px 0 #ccc;

        font-family : Palatino, Georgia, Times, serif;
        font-weight : normal;
        font-size : 0.8em;
        line-height : 1.5em;
        text-align : justify;
      }
    }
  }

  &.big-text {
    .text-content {
      p {
        font-size : 2.0em;
        line-height : 1.1em;
        text-align : center;
      }
  }
  }


  /* larger declarations */
  &.x2.width  .content { @include wide(); }
  &.x2.height .content { @include tall(); }

  &.x2.width .content img  { max-height: none; max-width: none; min-width: 100%; }
  &.x2.height .content img { max-width: none; max-height: none; min-height: 100%; }

  &.scale-vertical .content img,
  &.scale-vertical .content .image-container {height : 100%; max-width : none; }

  &.scale-horizontal .content img,
  &.scale-horizontal .content .image-container {width : 100%; max-height : none; }


}