Skip to content

Instantly share code, notes, and snippets.

@jendiamond

jendiamond/flixnpix.md

Last active March 9, 2017 23:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jendiamond/e2914bf518cff35da1cca39b2ef9c0cf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jendiamond/e2914bf518cff35da1cca39b2ef9c0cf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flixnpix.md

Tutorial | Codebase | Stylesheets

$ rails new flixnpix --database=postgresql

$ git init

$ git status

$ git add .

$ git status

$ git commit -m "Initial commit"

$ git status

$ git remote add origin [email protected]:jendiamond/flixnpix.git

$ git remote -v

$ git push -u origin master

$ git status

$ rake db:create

$ rails s -b 33.33.33.33

Add index page

$ rails g controller posts

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  def index
  end
end

Add routes

config/routes.rb

Rails.application.routes.draw do
 resources :posts
 root "posts#index"
end

Add index view

app/views/posts/index.html.erb

<h1> Post index page</h1>

Create Post Model and Controller

Add index and new actions

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  def index
  end
  
  def new
  end
end

Add a form to the new view page

app/views/posts/new.html.erb

<h1>Add something</h1>

<%= form_for :post, url: posts_path do |f| %>
  <p>
    <%= f.label :title %><br/>
    <%= f.text_field :title %>
  </p>

  <p>
    <%= f.label :body %><br/>
    <%= f.text_area :body %>
  </p>

  <p>
    <%= f.submit %><br/>
  </p>
<% end %>

Add the Post model with the title and text fields

$ rail g model Post title:string body:text

$ rake db:migrate

Create and Show Posts

Add the create and show action to the Post Controller

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  def index
  end
  
  def new
  end
  
  def show
  end
  
  def create
    @post = Post.new(post_params)
    @post.save
    
    redirect_to @post
  end
  
  private
  
  def post_params
    params.require(:post).permit(:title, :body)
  end
end

Add the show page

app/views/posts/show.html.erb

<h1 class="title">
  <%= @post.title %>
</h1>

<p class="date">
  Submitted <%= time_ago_in_words(@post.created_at) %> ago
</p>

<p class="body">
  <%= @post.body %>
</p>

Add the new Post to the show action to the Post Controller

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  def index
  end

  def new
  end

  def show
    @post = Post.find(params[:id])
  end

  def create
    @post = Post.new(post_params)
    @post.save

    redirect_to @post
  end

  private

  def post_params
    params.require(:post).permit(:title, :body)
  end
end

Display all Posts

Add all Posts to the index action in the PostsController

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  def index
    @posts = Posts.all.order("created_at DESC")
  end

  def new
  end

  def show
    @post = Post.find(params[:id])
  end

  def create
    @post = Post.new(post_params)
    @post.save

    redirect_to @post
  end

  private

  def post_params
    params.require(:post).permit(:title, :body)
  end
end

Add all Posts to the index view

app/views/posts/index.html.erb

<h1>All Posts</h1>
<% @posts.each do |post| %>
  <div class="post_wrapper">
    <h2 class="title"><%= link_to post.title, post %></h2>
    <p class="date"><%= time_ago_in_words(post.created_at) %></p>
  </div>
<% end %>

Navigation, Styling and Structure of the Application

$ git checkout -b styling

$ git branch

master

  • styling

Rename application.css to application.css.scss

$ app/assets/stylesheets/application.css.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

@import 'normalize';
https://gist.github.com/jendiamond/e2914bf518cff35da1cca39b2ef9c0cf#file-stylesheets-md

https://gist.github.com/jendiamond/e2914bf518cff35da1cca39b2ef9c0cf#file-stylesheets-md

Add Normalize CSS

Normalize CSS makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
https://raw.githubusercontent.com/CrashLearner/TumblrApp/master/Stylesheets%20for%20Tumblr/_normalize.css.scss

Add Google Font Raleway

https://fonts.google.com/?selection.family=Raleway#UsePlace:use

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Flixnpix</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_link_tag 'application', 'https://fonts.googleapis.com/css?family=Raleway:400,700' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Add Favicon

Add the favicon image to the app/assets/images

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Flixnpix</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_link_tag 'application', 'https://fonts.googleapis.com/css?family=Raleway:400,700' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= favicon_link_tag 'favicon.ico' %>
    <%= csrf_meta_tags %>
  </head>

Add wrapper to the post new page

app/views/posts/new.html.erb

<div id="page_wrapper">
  <h1 class="title">Add something</h1>

  <%= form_for :post, url: posts_path do |f| %>
    <p>
      <%= f.label :title %><br/>
      <%= f.text_field :title %>
    </p>

    <p>
      <%= f.label :body %><br/>
      <%= f.text_area :body %>
    </p>

    <p>
      <%= f.submit %><br/>
    </p>
  <% end %>
</div>

Add wrapper to the post show page

app/views/posts/show.html.erb

<div id="post_content">
  <h1 class="title"><%= @post.title.upcase %></h1>

  <p class="date_and_author">
    Submitted <%= time_ago_in_words(@post.created_at) %> ago
  </p>

  <p class="body">
    <%= @post.body %>
  </p>
</div>

Add a truncated body blurb to the post index page

app/views/posts/index.html.erb

<% @posts.each do |post| %>
  <div class="post_wrapper">
    <h2 class="title"><%= link_to post.title, post %></h2>
    <p class="body"><%= truncate(post.body, length:100) %></p>
    <p class="date"><%= time_ago_in_words(post.created_at) %></p>
  </div>
<% end %>

Merge your branch

$ git status

$ git add -A

$ git status

$ git commit -m 'Add styling and structure'

$ git status

$ git checkout master

$ git merge styling

$ git status

$ git push origin master

$ git branch -d styling

Validations to the Post Model

app/models/post.rb



Add Errors to the post new page


app/views/posts/new.html.erb




Add Edit and Delete to Posts


app/controllers/post_controller.rb




app/views/posts/new.html.erb




Add Comments to Posts


$ rails g model Comment name body:text post:references


Create the associations


app/models/post.rb


class Post < ApplicationRecord
  has_many :comments
  validates :title, presence: true, length: { minimum: 5 }
  validates :body, presence: true
end


app/models/comment.rb


class Comment < ApplicationRecord
  belongs_to :post
end


$ rake db:migrate


Set up the routes - Nest the comments in the posts


app/config/routes.rb


Rails.application.routes.draw do
 resources :posts do
   resources :comments
 end
 root "posts#index"
end


$ rails g controller Comments


app/controllers/comments_controller.rb


class CommentsController < ApplicationController

  def create
    @post = Post.find(params[:post_id])
    @comment = @post.comments.create(params[:comment].permit(:name, :body))
    redirect_to post_path(@post)
  end
end


Create a comment partial which will be called in the Post show page


app/views/comments/_comment.html.erb


<div class='comment_clearfix'>
  <div class='comment_content'>
    <p class='comment_name'><em><%= comment.name %></em></p>
    <p class='comment_body'><%= comment.body %></p>
    <p class='comment_title'><%= comment.time_ago_in_words(comment.created_at) ago%></p>
  </div>
</div>


Create the form for the comments


app/views/comments/_comment.html.erb


<% form_for([@post, @post.comments.build]) do |f| %>
  <p>
    <%= f.label :name %>
    <%= f.text_field :name %>
  </p>
  <p>
    <%= f.label :body %>
    <%= f.text_area :body %>
  </p>
  <p>
    <%= f.submit %>
  </p>
<% end %>



Add the abillity to delete comments


app/controllers/comments_controller.rb


class CommentsController < ApplicationController

  def create
    @post = Post.find(params[:post_id])
    @comment = @post.comments.create(params[:comment].permit(:name, :body))
    redirect_to post_path(@post)
  end

  def destroy
    @post = Post.find(params[:post_id])
    @comment = @post.comments.find(params [:id])
    @comment.destroy
    redirect_to post_path(@post)
  end
end


Add a delete button to the Post page through the comment partial


app/views/comments/_comment.html.erb


<div class='comment_clearfix'>
  <div class='comment_content'>
    <p class='comment_name'><strong><%= comment.name %></strong></p>
    <p class='comment_body'><%= comment.body %></p>
    <p class='comment_title'><%= time_ago_in_words(comment.created_at) %> ago</p>
  </div>
   <p><%= link_to 'Delete', [comment.post, comment], method: :delete, class: "button", data: {confirm: "Are you sure?"} %></p>
</div>


Dependent Destroy


app/models/post.rb


class Post < ApplicationRecord
  has_many :comments, dependent: :destroy
  validates :title, presence: true, length: { minimum: 5 }
  validates :body, presence: true
end




Show the number of comments for each post on the post/index page


app/views/posts/index.html.erb


<p class="date"><%= time_ago_in_words(post.created_at) %> ago | <%= (post.comments.count) %> comments</p>




Add the About page


$ rails g controller pages


Add the about action to the Pages controller


app/controllers/pages_controller.rb


class PagesController < ApplicationController
  def about
  end
end


Add the route


config/routes.rb


Rails.application.routes.draw do
 resources :posts do
   resources :comments
 end
 root "posts#index"

+ get '/about', to: 'pages#about'
end


Create the About page view with a profile image and blurb about the User


app/views/pages/about.html.erb


<div id="page_wrapper">
  <div id="profile_image">
    <%= image_tag "flixnpixprofile.jpg" %>
  </div>

  <div id="content">
    <h1>Profile Image</h1>
    <p>Jen comes from a creative background in performance, film, music, painting and clothing design. She plans on using her new confidence in coding to build more sites, do some coding performances and to finally use her arduino kit. She will continue to contribute to the Ruby community by coaching, organizing Rails Girls events and maintaining and continuing to build up Feats of Daring.</p>
  </div>
</div>


Add the link to the About page and some conditionals for the header


application.html.erb


<!DOCTYPE html>
<html>
  <head>
    <title>Flixnpix</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_link_tag 'application', 'https://fonts.googleapis.com/css?family=Raleway:400,700' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= favicon_link_tag 'favicon.ico' %>
    <%= csrf_meta_tags %>
  </head>

  <body>
    <div id="sidebar">
      <ul>
        <li class="category"><%= link_to "Flix n'Pix", root_path %></li>
        <li><%= link_to "Posts", root_path %></li>
 +       <li><%= link_to "About", about_path %></li>
      </ul>

      <p class="sign_in">User Login</p>
    </div>

    <div id="main_content">
      <div id="header">
+        <% if current_page?(root_path) %>
+          <p>Post Feed</p>
+        <% elsif current_page?(about_path) %>
+          <p>My Site</p>
+        <% else %>
+           <%= link_to "Back to Post Feed", root_path %>
+        <% end %>

        <div class="buttons">
          <button class="button"><%= link_to "Make Post", new_post_path %></button>
          <button class="button">Log Out</button>
        </div>
      </div>

      <% flash.each do |name, msg| %>
       <%= content_tag(:div, msg, class: "alert") %>
      <% end %>

      <%= yield %>
    </div>
  </body>
</html>


Add Users to App


Add Devise


Gemfile


source 'https://rubygems.org'
# ruby-2.3.0

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end

gem 'coffee-rails', '~> 4.2'
+ gem 'devise', '~> 4.2'
gem 'jbuilder', '~> 2.5'
gem 'jquery-rails'
gem 'pg', '~> 0.18'
gem 'puma', '~> 3.0'
gem 'rails', '~> 5.0.1'
gem 'sass-rails', '~> 5.0'
gem 'turbolinks', '~> 5'
gem 'uglifier', '>= 1.3.0'

group :development, :test do
  gem 'byebug', platform: :mri
end

group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '~> 3.0.5'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]




$ bundle


$ rails generate devise:install


Configure Devise


config/environments/development.rb


Rails.application.configure do
  # Settings specified here will take precedence over those in config/application.rb.

  # In the development environment your application's code is reloaded on
  # every request. This slows down response time but is perfect for development
  # since you don't have to restart the web server when you make code changes.
  config.cache_classes = false

  # Do not eager load code on boot.
  config.eager_load = false

  # Show full error reports.
  config.consider_all_requests_local = true

  # Enable/disable caching. By default caching is disabled.
  if Rails.root.join('tmp/caching-dev.txt').exist?
    config.action_controller.perform_caching = true

    config.cache_store = :memory_store
    config.public_file_server.headers = {
      'Cache-Control' => 'public, max-age=172800'
    }
  else
    config.action_controller.perform_caching = false

    config.cache_store = :null_store
  end

  # Don't care if the mailer can't send.
  config.action_mailer.raise_delivery_errors = false

  config.action_mailer.perform_caching = false

  # Print deprecation notices to the Rails logger.
  config.active_support.deprecation = :log

  # Raise an error on page load if there are pending migrations.
  config.active_record.migration_error = :page_load

  # Debug mode disables concatenation and preprocessing of assets.
  # This option may cause significant delays in view rendering with a large
  # number of complex assets.
  config.assets.debug = true

  # Suppress logger output for asset requests.
  config.assets.quiet = true

  # Raises error for missing translations
  # config.action_view.raise_on_missing_translations = true

  # Use an evented file watcher to asynchronously detect changes in source code,
  # routes, locales, etc. This feature depends on the listen gem.
  config.file_watcher = ActiveSupport::EventedFileUpdateChecker

+  config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }`
end


$ rails g devise:views


$ rails g devise User


$ rake db:migrate


Add stying to the Log in page


app/views/devise/sessions/new.html.erb


<div id="page_wrapper">
  <h2>Log in</h2>

  <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
    <div class="field">
      <%= f.label :email %><br />
      <%= f.email_field :email, autofocus: true %>
    </div>
    <br/>

    <div class="field">
      <%= f.label :password %><br />
      <%= f.password_field :password, autocomplete: "off" %>
    </div>
    <br/>

    <% if devise_mapping.rememberable? -%>
      <div class="field">
        <%= f.check_box :remember_me %>
        <%= f.label :remember_me %>
      </div>
    <% end -%>
    <br/>

    <div class="actions">
      <%= f.submit "Log in" %>
    </div>
  <% end %>
    <br/>

  <%= render "devise/shared/links" %>
</div>


app/views/devise/registrations/new.html.erb


<div id="page_wrapper">
  <h2>Sign up</h2>

  <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
    <%= devise_error_messages! %>  

    <div class="field">
      <%= f.label :email %><br />
      <%= f.email_field :email, autofocus: true %>
    </div>
    <br/>

    <div class="field">
      <%= f.label :password %>
      <% if @minimum_password_length %>
      <em>(<%= @minimum_password_length %> characters minimum)</em>
      <% end %><br />
      <%= f.password_field :password, autocomplete: "off" %>
    </div>
    <br/>

    <div class="field">
      <%= f.label :password_confirmation %><br />
      <%= f.password_field :password_confirmation, autocomplete: "off" %>
    </div>
    <br/>

    <div class="actions">
      <%= f.submit "Sign up" %>
    </div>
  <% end %>

    <br/>
  <%= render "devise/shared/links" %>
</div>


Add authentication for the Posts


app/controllers/posts_controller.rb


class PostsController < ApplicationController
+  before_action :authenticate_user!, except: [:index, :show]

  def index
    @posts = Post.all.order("created_at DESC")
  end

  def new
    @post = Post.new
  end

  def create
    @post = Post.new(post_params)

    if @post.save
      redirect_to @post
    else
      render :new
    end
  end

  def show
    @post = Post.find(params[:id])
  end

  def edit
    @post = Post.find(params[:id])
  end

  def update
    @post = Post.find(params[:id])

    if @post.update(params[:post].permit(:title, :body))
      redirect_to @post
    else
      render :edit
    end
  end

  def destroy
    @post = Post.find(params[:id])
    @post.destroy

    redirect_to root_path
  end

  private

  def post_params
    params.require(:post).permit(:title, :body)
  end
end




Add User Restrictions


Add links and hide buttons from people who haven't logged in


app/views/posts/show.html.erb 


<!DOCTYPE html>
<html>
  <head>
    <title>Flixnpix</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_link_tag 'application', 'https://fonts.googleapis.com/css?family=Raleway:400,700' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= favicon_link_tag 'favicon.ico' %>
    <%= csrf_meta_tags %>
  </head>

  <body>
    <div id="sidebar">
      <ul>
        <li class="category"><%= link_to "Flix n'Pix", root_path %></li>
        <li><%= link_to "Posts", root_path %></li>
        <li><%= link_to "About", about_path %></li>
      </ul>

      <p class="sign_in"><%= link_to "User Login", new_user_session_path %></p>
    </div>

    <div id="main_content">
      <div id="header">
        <% if current_page?(root_path) %>
          <p>Post Feed</p>
        <% elsif current_page?(about_path) %>
          <p>My Site</p>
        <% else %>
           <%= link_to "Back to Post Feed", root_path %>
        <% end %>

        <div class="buttons">
          <button class="button"><%= link_to "Make Post", new_post_path %></button>
          <button class="button"><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></button>
        </div>
      </div>

      <% flash.each do |name, msg| %>
       <%= content_tag(:div, msg, class: "alert") %>
      <% end %>

      <%= yield %>
    </div>
  </body>
</html>


Make some chanfes in the Devise YAML


config/locales/devise.en.yml


en:
devise:
    sessions:
      signed_in: "Awesome, you have signed in successfully."
      signed_out: "Signed out successfully."
      already_signed_out: "Signed out successfully."


Hide the ability to edit and delete Posts from someone who is not signed in


app/views/layouts/application.html.erb 


<!DOCTYPE html>
<html>
  <head>
    <title>Flixnpix</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_link_tag 'application', 'https://fonts.googleapis.com/css?family=Raleway:400,700' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= favicon_link_tag 'favicon.ico' %>
    <%= csrf_meta_tags %>
  </head>

  <body>
    <div id="sidebar">
      <ul>
        <li class="category"><%= link_to "Flix n'Pix", root_path %></li>
        <li><%= link_to "Posts", root_path %></li>
        <li><%= link_to "About", about_path %></li>
      </ul>

+      <% if !user_signed_in? %>
        <p class="sign_in"><%= link_to "User Login", new_user_session_path %></p>
+      <% end %>
    </div>

    <div id="main_content">
      <div id="header">
+        <% if current_page?(root_path) %>
          <p>Post Feed</p>
+        <% elsif current_page?(about_path) %>
          <p>My Site</p>
+        <% else %>
           <%= link_to "Back to Post Feed", root_path %>
        <% end %>
+        <% if user_signed_in? %>
          <div class="buttons">
            <button class="button"><%= link_to "Make Post", new_post_path %></button>
            <button class="button"><%= link_to "Sign Out", destroy_user_session_path, method: :delete %>
            </button>
          </div>
+        <% end %>
      </div>

      <% flash.each do |name, msg| %>
       <%= content_tag(:div, msg, class: "alert") %>
      <% end %>

      <%= yield %>
    </div>
  </body>
</html>


Hide the delete comment buttons from someone who is not signed in


app/views/comments/_comment.html.erb 


<div class='comment_clearfix'>
  <div class='comment_content'>
    <p class='comment_name'><strong><%= comment.name %></strong></p>
    <p class='comment_body'><%= comment.body %></p>
    <p class='comment_title'><%= time_ago_in_words(comment.created_at) %> ago</p>
  </div>
+  <% if user_signed_in? %>
   <p><%= link_to 'Delete', [comment.post, comment], method: :delete, class: "button", data: {confirm: "Are you sure?"} %></p>
+  <% end %>
</div>
<hr/>



  


  




        

  

      

        

            
    Raw
  


        

        

          
            
          
          
            
              stylesheets.md
            
          
        

      

      

    
$ app/assets/stylesheets/application.css.scss


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

@import 'normalize';

html, body {
  font-family: 'PT Sans Narrow', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

a {
  text-decoration: none;
  color: inherit;
}

#sidebar {
  color: #555;
  width: 200px;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  background: #88D0AD;
  padding: 7em 0 0 0;
  border-right: 1px solid #b8e2fe;

  ul {
    list-style: none;
    text-align: right;
    padding-right: 3em;
    .category {
      font-weight: 900;
      font-size: 2.5em;
      text-transform: uppercase;
      color: #22747b;
    }
    li {
      padding: .45em 0;
      a {
        color: #555;
        text-decoration: none;
        transition: all .4s ease;
        &:hover {
          color: #3d4d56;
        }
      }
    }
    .active {
      a {
        color: #33acb7;
      }
    }
  }
  .sign_in {
    position: absolute;
    right: 3.1em;
    top: 39%;
    font-size: 1.0em;
    color: #FFFFFF;
  }
}

.button {
  outline: none;
  background: transparent;
  border: 1.5px solid #FFF;
  padding: .5em 2.5em;
  border-radius: 0.5em;
  &:hover {
    border: 1px solid #333734;
    color: #22487b;
    a {
      color: #22487b !important;
    }
  }
}

.clearfix:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#main_content {
  margin-left: 200px;
  #header {
    padding: 1.2em 3.5em;
    border-bottom: 1px solid #b8e2fe;
    background: #529FCD;
    color: #FFF;
    p {
      display: inline;
    }
    a {
      color: #FFF;
      text-decoration: none;
    }
    .buttons {
      float: right;
      margin-top: -6px;
      .button {
        font-size: .8em;
        margin-left: .5em;
      }
    }
  }
  .post_wrapper {
    padding: 1.9em;
    border-bottom: 1px solid #d6dce0;
    .title {
      margin: 2px;
      a {
        font-weight: 500;
        text-decoration: none;
        color: #529FCD;
        font-size: 1.2em;
        &:hover {
          color: #22487b;
        }
      }
    }
    .date_and_author {
      color: #22487b;
      margin: .5em 0 0 0;
    }
    .body {
      color: #8C8C8C;
      margin: .5em 0 0 0;
    }
  }
  #post_content {
    padding: 1em 3em;
    .title {
      font-weight: 500;
      text-decoration: none;
      color: #529FCD;
      font-size: 2.5em;
      margin-bottom: 0;
    }
    .body {
      color: #555;
      font-size: 1.1em;
      line-height: 1.75;
    }
    .date_and_author {
      color: #8C8C8C;
      margin: .5em 0 2em 0;
    }
    #comments {
      h2 {
        margin: 3em 0 1em 0;
        border-bottom: 1px solid #d6dce0;
        padding-bottom: 0.5em;
      }
      h3 {
        margin-top: 2em;
      }
      .comment {
        border-bottom: 1px solid #d6dce0;
        padding: 1.5em 2em;
        .clear_both {
          clear: both;
        }
        &:after {
          clear: both;
        }
        .comment_content {
          float: left;
          .comment_name {
            margin: 1em 0 0 0;
            font-size: 1.0em;
            text-transform: uppercase;
          }
          .comment_body {
            font-size: 1.2em;
            margin: 0.2em 0 0 0;
          }
          .comment_time {
            margin-top: 1.2em;
            font-size: .8em;
          }
        }
        .button {
          float: right;
        }
      }
      input[type="text"], textarea {
        width: 50%;
      }
    }
  }
  #page_wrapper {
    padding: 3em;
    .title {
      font-weight: 500;
      text-decoration: none;
      color: #529FCD;
      font-size: 2.5em;
      margin-bottom: 0;
    }
    #profile_image {
      width: 300px;
      float: left;
      margin-right: 2em;
      img {
        width: 100%;
        border-radius: 0.35em;
      }
    }
    #content {
      h1 {
        font-weight: 500;
      }
      p {
        font-size: 1.1em;
        line-height: 1.75;
      }
      a {
        color: #33acb7;
        font-weight: 700;
        text-decoration: none;
      }
    }
  }
  .links {
    margin: 2em 0;
  }
  input[type="text"], input[type="email"], input[type="password"], textarea {
    width: 70%;
    border: 1px solid #d6dce0;
    border-radius: .35em;
    margin-top: 20px;
    padding: .5em 1em;
    line-height: 1.75;
  }
  input[type="text"] {
    height: 35px;
  }
  textarea {
    min-height: 180px;
  }
  input[type="submit"] {
    outline: none;
    background: transparent;
    border: 1px solid #d6dce0;
    padding: .5em 1.5em;
    font-size: 1.1em;
    border-radius: 1.5em;
    margin-left: .5em;
    &:hover {
      border: 1px solid #33acb7;
      color: #33acb7;
    }
  }
}



  


  





        
        

          

            

              









            


            

              

  
    Sign up for free
    to join this conversation on GitHub.
    Already have an account?
    Sign in to comment