blogelator 0.1.0

data/app/assets/stylesheets/blogelator/admin/posts/_form.scss

@@ -0,0 +1,12 @@
+@import "bourbon";
+@import "blogelator/variables";
+@import "neat";
+
+body.blogelator.admin.posts {
+  .post-form {
+    padding: 0.5em;
+    input.title {
+      font-size: 1.1em;
+    }
+  }
+}

data/app/assets/stylesheets/blogelator/admin/posts/_form_action_bar.scss

@@ -0,0 +1,84 @@
+@import "bourbon";
+@import "blogelator/variables";
+@import "neat";
+
+body.blogelator.admin.posts .form-action-bar .save-button {
+  background-color: $base-accent-color;
+  color: $base-body-color;
+  display: block;
+  float: right;
+  font-weight: bold;
+  margin: 6px 0.5em;
+  min-width: 100px;
+  text-align: center;
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  
+  &.destroy {
+    float: left;
+  }
+  
+  &.disabled {
+    cursor: default;
+    opacity: 0.6;
+  }
+}
+  
+body.blogelator.admin.posts .form-action-bar .save-button {
+  .button-label {
+    border: 1px solid $base-accent-color;
+    padding: 4px;
+    @include transition(border-color 0.1s linear);
+  }
+  
+  &.publish {
+    background-color: adjust-hue($base-accent-color, 210deg);
+    
+    .button-label {
+      border: 1px solid adjust-hue($base-accent-color, 210deg);
+    }
+    
+    .saving {
+      background-color: adjust-hue($base-accent-color, 210deg);
+      color: $base-body-color;
+    }
+    
+    .saved,
+    .error {
+      color: adjust-hue($base-accent-color, 210deg);
+    }
+    
+    &.disabled:hover {
+      .button-label {
+        border: 1px solid adjust-hue($base-accent-color, 210deg);
+      }
+    }
+  }
+  
+  &:hover {
+    .button-label {
+      border-color: rgba($base-body-color, 0.8);
+    }
+    &.disabled {
+      .button-label {
+        border-color: $base-accent-color;
+      }
+    }
+  }
+}
+
+body.blogelator.admin.posts .form-action-bar .last-saved {
+  color: $base-body-color;
+  float: right;
+  font-size: 0.75em;
+  opacity: 0.9;
+  margin-right: 4px;
+  min-width: 110px;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  
+  label {
+    font-size: 1em;
+    margin: 4px 0 0 0;
+  }
+}

data/app/assets/stylesheets/blogelator/admin/posts/_posts_list.scss

@@ -0,0 +1,43 @@
+@import "bourbon";
+@import "blogelator/variables";
+@import "blogelator/mixins/blogelator_logo";
+@import "neat";
+
+body.blogelator.admin.posts section.posts-list .post {
+  background-color: darken($base-body-color, 2%);
+  border-bottom: 1px solid lighten($base-border-color, 5%);
+  border-left: 10px solid darken($base-body-color, 2%);
+  border-top: 1px solid lighten($base-border-color, 5%);
+  color: lighten($base-font-color, 30%);
+  cursor: pointer;
+  margin-bottom: -1px;
+  padding: 0.6em 0.5em 0.8em 0.4em;
+  position: relative;
+  z-index: 1;
+  
+  .summary {
+    font-size: 0.8em;
+    line-height: 1.2em;
+  }
+}
+
+body.blogelator.admin.posts section.posts-list .post {
+  h2 {
+    color: lighten($base-font-color, 20%);
+    font-size: 1.2em;
+    margin-bottom: 0;
+  }
+  
+  &.active {
+    background-color: $base-body-color;
+    border-bottom: 1px solid $base-accent-color;
+    border-left: 10px solid $base-accent-color;
+    border-top: 1px solid $base-accent-color;
+    color: $base-font-color;
+    z-index: 2;
+    
+    h2 {
+      color: $base-font-color;
+    }
+  }
+}

data/app/assets/stylesheets/blogelator/admin/posts/edit.scss

@@ -0,0 +1,7 @@
+@import "bourbon";
+@import "blogelator/variables";
+@import "neat";
+
+body.blogelator.admin.posts.edit {
+  background-color: darken($base-body-color, 5%);
+}

data/app/assets/stylesheets/blogelator/admin/posts/index.scss

@@ -0,0 +1,14 @@
+@import "blogelator/mixins/blogelator_logo";
+
+body.blogelator.admin.posts.index {
+  article.post {
+    font-size: 2em;
+    padding-top: 2em;
+    text-align: center;
+    
+    .logo {
+      @include blogelator-logo(50);
+      margin: 2em auto 1em;
+    }
+  }
+}

data/app/assets/stylesheets/blogelator/admin/posts/new.scss

@@ -0,0 +1,16 @@
+@import "bourbon";
+@import "blogelator/variables";
+@import "neat";
+
+body.blogelator.admin.posts.new {
+  background-color: darken($base-body-color, 5%);
+  
+  header ul li a.posts-index-link.active {
+    border-bottom: 5px solid $base-accent-color;
+    color: $base-accent-color;
+    &:hover {
+      border-bottom: 5px solid $admin-header-highlight-color;
+      color: $admin-header-highlight-color;
+    }
+  }
+}

data/app/assets/stylesheets/blogelator/admin/posts/show.scss

@@ -0,0 +1,17 @@
+@import "bourbon";
+@import "blogelator/variables";
+@import "neat";
+
+body.blogelator.admin.posts.show {
+  article.post > * {
+    max-width: 100%;
+  }
+  article.post > h1 {
+    margin: 0.5em 0 0 0;
+    padding: 0;
+    text-align: center;
+  }
+  article.post > .date {
+    text-align: center;
+  }
+}

data/app/assets/stylesheets/blogelator/application/all.scss

@@ -0,0 +1,19 @@
+/*
+ *= require normalize
+ *= require font-awesome
+ *= require_tree ../shared
+ *= require_tree .
+ *= require_self
+ */
+
+@import "font-awesome/variables";
+@font-face {
+  font-family: 'FontAwesome';
+  src: font-url('fontawesome-webfont.eot?v=#{$fa-version}');
+  src: font-url('fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
+       font-url('fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
+       font-url('fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
+       font-url('fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}

data/app/assets/stylesheets/blogelator/application/layout.scss

@@ -0,0 +1,49 @@
+// Global styles for the application layout
+
+@import "bourbon";
+@import "blogelator/variables";
+@import "blogelator/mixins/blogelator_logo";
+@import "neat";
+
+body.blogelator {
+  header {
+    h1 {
+      padding: 1em 0;
+      text-align: center;
+      a {
+        border-bottom: 1px solid lighten($base-border-color, 8%);
+        color: $base-font-color;
+        padding: 0 1em 0.5em 1em;
+        text-decoration: none;
+        @include transition(border-bottom 0.2s linear);
+        
+        &:hover {
+          border-bottom: 1px solid lighten($base-accent-color, 30%);
+        }
+      }
+    }
+    h2 {
+      border-bottom: 1px solid #f2f2f2;
+      margin-bottom: 1em;
+      padding: 0 0.5em 0.5em;
+      
+      a {
+        @include outer-container;
+        color: $base-font-color;
+        display: block;
+        max-width: 900px;
+        text-decoration: none;
+        @include transition(color 0.1s linear);
+        
+        &:hover {
+          color: $base-accent-color;
+        }
+      }
+    }
+  }
+  
+  footer .logo {
+    @include blogelator-logo(32);
+    margin: 2em auto;
+  }
+}

data/app/assets/stylesheets/blogelator/application/posts/index.scss

@@ -0,0 +1,50 @@
+// Styles for PostsController#index
+
+@import "bourbon";
+@import "blogelator/variables";
+@import "blogelator/mixins/blogelator_button";
+@import "neat";
+
+body.blogelator.posts.index .post {
+  & > h2 {
+    margin-bottom: 0;
+    
+    a {
+      text-decoration: none;
+    }
+  }
+  
+  .summary {
+    .continue {
+      color: $base-body-color;
+      font-size: 0.8em;
+      margin: 0 0.2em;
+    }
+  }
+  
+  &:hover {
+    .summary .continue {
+      border-bottom: 1px solid $base-body-color;
+      color: lighten($base-font-color, 30%);
+      
+      &:hover {
+        color: $base-accent-color;
+      }
+    }
+  }
+}
+
+body.blogelator.posts.index .pagination {
+  @include outer-container;
+  max-width: 700px;
+  padding: 0 1em;
+  
+  a.older {
+    @include blogelator-button($base-body-color, $base-accent-color, "chevron-circle-right", "right");
+    float: right;
+  }
+  a.newer {
+    @include blogelator-button($base-body-color, $base-accent-color, "chevron-circle-left", "left");
+    float: left;
+  }
+}

data/app/assets/stylesheets/blogelator/application/posts/show.scss

@@ -0,0 +1,64 @@
+// Styles for PostsController#show
+
+@import "bourbon";
+@import "blogelator/variables";
+@import "blogelator/mixins/blogelator_button";
+@import "neat";
+
+body.blogelator.posts.show .post {
+  & > h1 {
+    margin-bottom: 0;
+    text-align: center;
+    
+    a {
+      border-bottom: 1px solid $base-body-color;
+      color: $base-font-color;
+      text-decoration: none;
+      @include transition(border-bottom 0.2s linear);
+      
+      &:hover {
+        border-bottom: 1px solid lighten($base-accent-color, 30%);
+      }
+    }
+  }
+  
+  & > .date {
+    text-align: center;
+  }
+}
+
+body.blogelator.posts.show .more-posts {
+  @include outer-container;
+  max-width: 700px;
+  padding: 0 1em;
+  
+  a.previous {
+    @include blogelator-button($base-body-color, $base-accent-color, "chevron-circle-right", "right");
+    float: right;
+  }
+  
+  a.next {
+    @include blogelator-button($base-body-color, $base-accent-color, "chevron-circle-left", "left");
+    float: left;
+  }
+  
+  a.previous,
+  a.next {
+    line-height: normal;
+    max-width: 300px;
+    text-align: left;
+    width: auto;
+    
+    time {
+      color: lighten($base-font-color, 40%);
+      font-size: 0.8em;
+      font-weight: normal;
+    }
+    
+    &:hover {
+      time {
+        color: rgba($base-body-color, 0.8);
+      }
+    }
+  }
+}

data/app/assets/stylesheets/blogelator/mixins/blogelator_button.scss

@@ -0,0 +1,57 @@
+@import "bourbon";
+@import "blogelator/variables";
+@import "font-awesome/variables";
+@import "font-awesome/core";
+@import "font-awesome/icons";
+
+@mixin blogelator-button($background-color:$base-body-color, $accent-color:$base-accent-color, $icon:"none", $icon-position:"none") {
+  background-color: $background-color;
+  border: 1px solid $accent-color;
+  border-radius: 1.5em;
+  color: $accent-color;
+  display: block;
+  font-weight: bold;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  @include transition(all 0.1s linear);
+  
+  &:active,
+  &:hover {
+    background-color: $accent-color;
+    color: $background-color;
+  }
+  
+  @if $icon != "none" {
+    $icon-class: "." + $fa-css-prefix + "-" + $icon;
+    padding: 0.8em 1.1em;
+    
+    &:before {
+      @extend .fa;
+      height: 1em;
+      font-size: 1.3em;
+      margin-top: -0.5em;
+      position: absolute;
+      top: 50%;
+    }
+    
+    @if $icon-position == "left" {
+      padding-left: 2.6em;
+    
+      &:before {
+        @extend #{$icon-class};
+        left: 0.7em;
+      }
+    } @else if $icon-position == "right" {
+      padding-right: 2.6em;
+    
+      &:before {
+        @extend #{$icon-class};
+        right: 0.7em;
+      }
+    }
+  }
+}