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

$container-width : 1170;

$margin-between-columns : 20;
$column-width : 255 - $margin-between-columns;
$two-column-width : ($column-width * 2) + ($margin-between-columns * 2);


$margin-between-rows : 20;

$row-height : $column-width;
$two-row-height : $two-column-width;

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

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

body {
  background-color : #F6F6F6;
}

#canvas {
  margin-top : 100px;
}

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

  //clear : both; // here for testing!

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

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

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

    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 : 10px;

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

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

    .image-set {
      float : left;
      width : 100%;
    }
  }

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

  &.text {
    &.extra-small .content {
      font-weight : bold;
      font-size: 2.5em;
      line-height: 1em;
    }

    &.content {
      display: table;
    }

    &.small  .content {
      font-size: 1.4em;
      line-height: 1.25em;

      text-decoration: bold;
    }
    &.medium .content {
      @include tall();
      font-size: 1.6em;
    }
    &.large  .content { @include wide() }
  }

  &.photo {
    &.one  .content {
      //padding : 0;
      //
      //min-height : $column-width + 10 + px;
      //max-height : $column-width + 10 +  px;
      //
      //min-width : $column-width + 10 + px;
      //max-width : $column-width + 10 +  px;

      .text-content {
        position : absolute;
        padding : 10px;
        bottom : 0;
        color : #eee;
      }
    }

    &.two .content {
    //  @include tall();
    //  .image-container {
    //    width : 50%;
    //  }
    }
    &.many .content { @include tall(); @include wide(); }
  }

  &.text.small + .photo.one  .content {

  }
  &.text.small + .photo.two  .content { @include wide() }
  &.text.small + .photo.many .content { @include tall(); @include wide(); }

  &.text.medium + .photo.one  .content {}
  &.text.medium + .photo.two  .content {}
  &.text.medium + .photo.many .content {}

  &.text.large.photo.one .content {
    @include tall(); @include wide();
    .text-content {
      max-height: 26%;
      padding : 20px;
      color : #333;
    }

    .image-set {
      height: 65%;
      width: 100%;
    }

    .image-container {
      width : 100%;
      height : 100%;

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

  }
  &.text.large + .photo.two  .content {}
  &.text.large + .photo.many .content {}

}