Use colors to separate meta from blog contents

c4lliope · Sep 20, 2016 · 451755d · 451755d
1 parent 8e82ca0
commit 451755d
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 14 deletions.
diff --git a/app/assets/stylesheets/_layout.scss b/app/assets/stylesheets/_layout.scss
@@ -1,20 +1,33 @@
+body {
+  height: 100%;
+}
+
 .content {
-  @include outer-container;
-  padding: $base-spacing 0;
+  align-items: stretch;
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 100%;
 }
 
 .left-column,
 .right-column {
   padding: $base-spacing;
+  flex: 0 0 100%;
+}
+
+.left-column {
+  background-color: $dark-blue;
+  color: $white;
+}
+
+.right-column {
+  background-color: $white;
+  color: $dark-gray;
 }
 
 @include media($large-screen) {
   .left-column,
   .right-column {
-    @include span-columns(5.5 of 12);
-  }
-
-  .right-column {
-    @include shift(1);
+    flex: 0 0 50%;
   }
 }
diff --git a/app/assets/stylesheets/_timer.scss b/app/assets/stylesheets/_timer.scss
@@ -22,7 +22,7 @@
 .timer-label {
   @include span-columns(4 of 6);
   @include omega;
-  color: $medium-gray;
+  color: $action-color;
 }
 
 .right-aligned {

diff --git a/app/assets/stylesheets/base/_forms.scss b/app/assets/stylesheets/base/_forms.scss
@@ -57,7 +57,7 @@ textarea {
   }
 
   &::placeholder {
-    color: tint($base-font-color, 40%);
+    color: $medium-gray;
   }
 }
 

diff --git a/app/assets/stylesheets/base/_variables.scss b/app/assets/stylesheets/base/_variables.scss
@@ -20,17 +20,18 @@ $small-spacing: $base-spacing / 2;
 $base-z-index: 0;
 
 // Colors
-$blue: #1565c0;
-$dark-gray: #333;
+$dark-blue: #1856c7;
+$blue: #248eff;
+$dark-gray: #036;
 $medium-gray: #999;
-$light-gray: #ddd;
+$white: #f1f1f9;
 
 // Font Colors
-$base-font-color: $dark-gray;
+$base-font-color: $white;
 $action-color: $blue;
 
 // Border
-$base-border-color: $light-gray;
+$base-border-color: $medium-gray;
 $base-border: 1px solid $base-border-color;
 
 // Background Colors

diff --git a/app/views/posts/show.html.erb b/app/views/posts/show.html.erb
@@ -1,3 +1,5 @@
+<%= link_to "Back", posts_path %>
+
 <h1><%= @post.title %></h1>
 
 <p>
-Original file line number
+Diff line change
@@ Expand Up / @@ -57,7 +57,7 @@ textarea { @@
       }
       &::placeholder {
-        color: tint($base-font-color, 40%);
+        color: $medium-gray;
       }
     }
@@ Expand Down @@