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

$container-width : 1170;

$margin-between-columns : 30;
$column-width : 295 - $margin-between-columns;
$raw-two-column-width : ($column-width * 2) + ($margin-between-columns * 2) ;
$two-column-width : $raw-two-column-width - 30;  //simply subtract an arbitrary ammount :)

$margin-between-rows : 20;

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

/* 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 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-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));

      .info {
        bottom : 0;
      }

      cursor : pointer;
    }

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

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

    position : relative;

    background-color : #fff;

    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 {

      overflow : hidden;
      width : 100%;

      img {
        width: 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 transition(bottom);
    @include opacity(0.8);
    @include box-shadow(0, -1px, 3px, rgba(0,0,0,0.1));

    border : 1px solid rgba(255,255,255,0.5);
    background-color : rgba(255,255,255,0.4);

    position : absolute;
    bottom : -30px;
    right : 0;
    text-align : center;
    width : 100%;

    padding : 5px;
    padding-right : 8px;
    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;

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

  &.sticky-note {
    .content{
      min-height : $column-width + px;
      .text-content {
        margin: 20px 20px 30px;
      }
    }

    &.big-text {
      display : table;

      .text-content {
        display : table-cell;
        position : absolute;

        margin : 0;

        margin-top : 40%;
        height : 100%;
        width : 100%;

        top : 0;
        left : 0;
      }

      p {
        font-family : "Noteworthy", "Marker Felt", "Comic Sans";
        font-style : italic;
        text-align : center;
        padding: 0 20px;
        word-break : break-all;
      }
    }
  }

  &.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 : 20px;
      @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(); }

  &.sticky-note.x2.height  .content {
    min-height : $two-row-height + px;
  }

  &.rich-media {
    width: auto;
    height: auto;
  }

  &.wallpaper {
    .content{
      display: table;
    }

    .image-container {
      background-color: black;
      display: table-cell;

      img {
        @include opacity(0.7);
      }
    }

    .text-content {
      position: absolute;
      left: 0;
      width: 100%;
      top: 40%;
      @include centered-frame();
      font-size: 2em;
      color: white;
      @include opacity(1);
      text-shadow : none;
      font-weight: bold;
    }
  }
}