sample.scss

sample.scss

@import "reset";

@mixin rounded($radius: 5px) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

@mixin shadow($dist: 5px, $str: 3px, $top: 0, $left: 0, $color: rgba(0,0,0,.1) ) {
  box-shadow: $color $top $left $dist $str;
  -moz-box-shadow: $color $top $left $dist $str;
  -webkit-box-shadow: $color $top $left $dist $str;
}

@mixin image($width, $height, $img) {
  display: block;
  text-indent: -9999%;
  overflow: hidden;
  width: $width;
  height: $height;
  background: url($img) 0 0 no-repeat;
}

body {
  background: #e1e1e1;
  font-family: Arial, Helvetica, sans-serif;
}

header {
  width: 698px;
  height: 55px;
  margin: 1em auto;
  h1 {
    float: left;
    margin: 0;
    @include rounded;
    a {
      @include image(200px, 55px, '/images/retreet-logo.png');
    }
    &:hover {
      background: #fff;
      @include shadow;
    }
  }
  nav {
    float: left;
    ul {
      display: block;
      margin: 1.7em 0 0;
      li {
        float: left;
        margin: 0 .3em;
        a {
          color: #000;
          text-decoration: none;
          padding: .1em .3em;
          @include rounded;
          font-size: 1.2em;
          &:hover {
            color: #fff;
            background: #000;
          }
        }
      }
    }
  }
}

section.content {
  width: 700px;
  margin: 1em auto;
  background: #fff;
  @include rounded;
  @include shadow;
  overflow: hidden;
}

h1 {
  font-size: 2em;
  color: #333;
  margin: .5em;
}

p {
  font-size: 1em;
  color: #666;
  margin: 1em;
}

a {
  color: #990000;
  text-decoration: none;
  &:hover {
    color: #000;
  }
}

a.signup-btn {
  margin: .5em;
  font-size: 2em;
  color: #fff;
  background: #000;
  padding: .2em .35em;
  @include rounded;
  display: inline-block;
  &:hover {
    background: #990000;
  };
}




/* Footer Content */

footer {
  margin: 1em auto;
  background: #fff;
  width: 700px;
  @include rounded;
  @include shadow;
  overflow: hidden;
  ul {
    display: block;
    margin: .75em 1em .65em;
    overflow: hidden;
    li {
      float: left;
      margin: 0 1em 0 0;
    }
  }
}

/* Debug Content */
pre.debug_dump {
  width: 670px;
  margin: 1em auto;
  background: #fff;
  @include shadow;
  @include rounded;
  padding: .5em 1em;
}


/* Micropost Form Styles */
form.new_micropost {
  margin: 1em;
  textarea {
    width: 22.3em;
    height: 2.5em;
    font-size: 1.1em;
    border: 1px solid #ccc;
    color: #555;
    padding: .25em .4em;
    outline: none;
    display: block;
    margin: 0;
  }
  .field_with_errors {
    textarea {
      border: 1px solid #990000;
      border-top: 3px solid #990000;
    }
  }
  input[type=submit] {
    font-size: 1.1em;
    color: #fff;
    background: #000;
    padding: .2em .35em;
    @include rounded;
    display: inline-block;
    border: 0;
    cursor: pointer;
    margin: .5em 0 0 19em;
    &:hover {
      background: #990000;
    };
  }
}

/* User Show Page Styles */

section.posts {
  float: left;
  border-right: 1px solid rgba(0,0,0,.15);
  width: 440px;
  min-height: 15em;
  input#relationship_submit {
    margin: 0 .85em;
    font-size: 1.2em;
    color: #fff;
    background: #000;
    padding: .2em .35em;
    @include rounded;
    display: inline-block;
    border: 0;
    cursor: pointer;
    &:hover {
      background: #990000;
    };
  }
  h1 {
    line-height: 1.5;
    margin: .5em;
    img {
      float: left;
    }
    &.with_avatar {
      text-indent: .4em;
    }
  }
  ul.microposts {
    & > li {
      margin: 1em;
      overflow: hidden;
      img {
        float: left;
        margin: 0 .5em .4em 0;
      }
      p {
        margin: .2em 0;
        &.user {
          font-size: .9em;
          font-weight: bold;
        }
        &.content {
          color: #666;
        }
        &.timestamp {
          color: #999;
          font-size: .8em;
        }
      }
    }
  }
}

section.profile {
  float: left;
  ul {
    margin: 1em 1em 2em;
    line-height: 1.4;
  }
  img {
    margin: 1.6em 1.1em 0;
  }
}

/* User Index Styles */
ul.users {
  margin: 1em;
  li {
    overflow: hidden;
    margin: 1em 0;
    img {
      float: left;
      margin: 0 .5em 0 0;
      @include rounded(5px);
    }
    h3 {
      font-size: 1.5em;
      margin: .2em 0 0;
    }
  }
}

/* Followers Styles */

section.follow {
  float: left;
  width: 440px;
  border-right: 1px solid rgba(0,0,0,.15);
  min-height: 15em;
  h1 {
    line-height: 1.5;
    margin: .5em;
  }
  ul.follow {
    & > li {
      margin: 1em;
      overflow: hidden;
      img {
        float: left;
        margin: 0 .5em .4em 0;
      }
      p {
        margin: .2em 0;
        &.user {
          font-size: .9em;
          font-weight: bold;
        }
        &.content {
          color: #666;
        }
        &.timestamp {
          color: #999;
          font-size: .8em;
        }
      }
    }
  }
}

/* Sign Up and Sign In Page Styles */

ul.signup, ul.signin {
  margin: 1em 1em 2em;
  li {
    margin: 1em 0;
  }
  label {
    display: block;
    line-height: 1.3;
    text-indent: .4em;
  }
  input[type=text], input[type=password] {
    border: 1px solid #bbb;
    font-size: 1.1em;
    padding: .2em;
    color: #666;
  }
  input[type=submit] {
    font-size: 2em;
    color: #fff;
    background: #000;
    padding: .2em .35em;
    @include rounded;
    display: inline-block;
    border: 0;
    cursor: pointer;
    &:hover {
      background: #990000;
    };
  }
  .field_with_errors input[type=text], .field_with_errors input[type=password], .field_with_errors textarea {
    border: 1px solid #990000;
    border-top: 5px solid #990000;
  }
}

/* Edit page styles */

a.gravatar {
  display: inline-block;
  margin: 0 .9em;
  font-size: 1.3em;
  line-height: 2.4;
  @include rounded;
  img {
    float: left;
    margin-right: .5em;
  }
}

/* Flash message styles */
h5.flash {
  background: #000;
  color: #fff;
  padding: .5em 1em;
  font-size: 1em;
  line-height: 1.6;
  overflow: hidden;
  &.success {
    font-size: 1.8em;
  }
}

/* Error message styles */
div.error_explanation {
  border: 1px solid #333;
  margin: 1em 0;
  background: #fffceb;
  h5 {
    color: #990000;
    font-size: 1em;
    margin: 1em 1em 0;
    font-weight: bold;
    & + p {
      margin: .2em 1em .3em;
      color: #333;
      border-bottom: 1px solid #ccc;
      padding-bottom: .3em;
    }
  }
  ul {
    list-style: disc;
    margin: .3em 1em 1em 2em;
    line-height: 1.3;
    li {
      color: #666;
    }
  }
}