Feautres/sign in beautification

.hound.yml

@@ -1,2 +1,4 @@
+scss:
+  enabled: false
 ruby:
   config_file: .rubocop.yml

Gemfile

@@ -10,11 +10,11 @@ gem "jbuilder", "~> 2.0"
 gem "sdoc", "~> 0.4.0", group: :doc
 gem "figaro", "1.0"
 gem "puma"
-gem "bootstrap-sass"
 gem "bcrypt"
 gem "responders", "~>2.0"
 gem "whenever"
 gem "interactor"
+gem "normalize-rails"
 
 group :test do
   gem "coveralls"

Gemfile.lock

@@ -40,19 +40,13 @@ GEM
     ast (2.1.0)
     astrolabe (1.3.1)
       parser (~> 2.2)
-    autoprefixer-rails (6.1.0.1)
-      execjs
-      json
     bcrypt (3.1.10)
     better_errors (2.1.1)
       coderay (>= 1.0.0)
       erubis (>= 2.6.6)
       rack (>= 0.9.0)
     binding_of_caller (0.7.2)
       debug_inspector (>= 0.0.1)
-    bootstrap-sass (3.3.5.1)
-      autoprefixer-rails (>= 5.0.0.1)
-      sass (>= 3.3.0)
     builder (3.2.2)
     byebug (8.2.0)
     capybara (2.5.0)
@@ -143,6 +137,7 @@ GEM
     netrc (0.11.0)
     nokogiri (1.6.6.3)
       mini_portile (~> 0.6.0)
+    normalize-rails (3.0.3)
     notiffany (0.0.8)
       nenv (~> 0.1)
       shellany (~> 0.0)
@@ -294,7 +289,6 @@ DEPENDENCIES
   bcrypt
   better_errors
   binding_of_caller
-  bootstrap-sass
   byebug
   capybara
   coffee-rails (~> 4.1.0)
@@ -308,6 +302,7 @@ DEPENDENCIES
   interactor
   jbuilder (~> 2.0)
   jquery-rails
+  normalize-rails
   pg
   pry-byebug
   pry-rails

app/assets/javascripts/application.js

@@ -13,5 +13,4 @@
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
-//= require bootstrap
 //= require_tree .

app/assets/stylesheets/application.scss

@@ -10,8 +10,192 @@
  * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
  * file per style scope.
  *
+ *= require normalize-rails
  *= require_tree .
  *= require_self
  */
- @import "bootstrap-sprockets";
- @import "bootstrap";
+
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900|Open+Sans:600);
+
+/****
+  breakpoints
+****/
+
+@media screen and (max-width: 640px) {
+  body .content .hero .sign_in_btn {
+    display: block;
+  }
+
+  body .content .hero h1 {
+    padding-top: 0;
+  }
+
+  body .navbar {
+    display: none;
+  }
+
+  body .content p {
+    font-size: 90%;
+  }
+}
+
+/****
+  general state and body
+****/
+
+body {
+  background-image: image-url("bg.jpg");
+}
+
+.hidden {
+  display: none;
+}
+
+.button {
+  background-color: #9b59b6;
+  margin-top: 1rem;
+  padding: 15px 32px;
+  text-align: center;
+  border: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+/****
+  navbar
+****/
+
+.navbar {
+  position: relative;
+  padding: 0.5rem;
+  background-color: white;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.navbar .logo {
+  position: relative;
+  left: 3rem;
+}
+
+.navbar img {
+  max-width: 200px;
+}
+
+.navbar .links-container {
+  display: table;
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0;
+  height: 61px;
+}
+
+.links-container .navbar-link {
+  display: table-cell;
+  position: relative;
+  padding-left: 3rem;
+  padding-right: 3rem;
+  height: 100%;
+  text-transform: lowercase;
+  vertical-align: middle;
+}
+
+.navbar-link a {
+  text-decoration: none;
+  color: #14d8b2;
+}
+
+/****
+  footer
+****/
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  background-color: white;
+  width: 100%;
+  text-align: center;
+  font-size: 0.7rem;
+}
+
+.footer .credits {
+  margin-bottom: 1rem;
+}
+
+.footer .by-line {
+  margin-bottom: 0.3rem;
+}
+
+/****
+  content
+****/
+
+.content {
+  color: white;
+  font-family: "Lato", sans-serif;
+  text-align: center;
+}
+
+.content .hero h1 {
+  padding-top: 5rem;
+  font-size: 3.5rem;
+  font-weight: 900;
+  margin-bottom: 0;
+}
+
+.hero p {
+  font-size: 1.5rem;
+}
+
+.content button {
+  background-color: #9b59b6;
+  margin-top: 1rem;
+  padding: 15px 32px;
+  text-align: center;
+  border: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/****
+  forms
+****/
+
+.form-group input {
+  border: 1px solid #cec8bd;
+  border-radius: 4px;
+  font-size: 1rem;
+  padding: .5rem;
+  text-align: center;
+  color: black;
+  font-family: "Open Sans", sans-serif;
+}
+
+.content .form-group {
+  padding-top: 1rem;
+}
+
+.form-group .button {
+  color: white;
+  padding: 15px 32px;
+  border: none;
+}
+
+/****
+  alerts
+****/
+
+.alert {
+  background-color: #9b59b6;
+  width: 25%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 2rem;
+  padding: 1rem;
+  box-sizing: border-box;
+  color: white;
+  text-align: center;
+}
+
+.alert button {
+  float: right;
+}

app/assets/stylesheets/password_resets.scss

@@ -1,3 +1,7 @@
 // Place all the styles related to the PasswordResets controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+
+.password-reset-head {
+  padding-bottom: 2rem;
+}

app/assets/stylesheets/users.scss

@@ -1,3 +1,89 @@
-// Place all the styles related to the users controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
+.login-helpers {
+  padding-top: .5rem;
+}
+
+.login-helpers a {
+  text-decoration: none;
+  font-size: 0.8rem;
+  padding-right: 1rem;
+  color: #9b59b6;
+}
+
+/******
+  Todos
+******/
+
+.clearfix:after {
+  content: ".";
+  visibility: hidden;
+  display: block;
+  height: 0;
+  clear: both;
+}
+
+.todos-list {
+  padding-top: 5rem;
+}
+
+.todos-list .todo-container {
+  display: table;
+  border: solid 2px white;
+  border-radius: 4px;
+  box-shadow: 2px 2px;
+  box-sizing: border-box;
+  padding: 0.5rem;
+  width: 50%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1rem;
+  background-color: white;
+  color: #989898;
+}
+
+.todo-container .todo-description {
+  display: table-cell;
+  vertical-align: middle;
+  width: 50%;
+}
+
+.todo-container .todo-days-left {
+  display: table-cell;
+  vertical-align: middle;
+  text-align: right;
+}
+
+.todo-container .todo-checkbox {
+  display: table-cell;
+  box-sizing: border-box;
+  border: 2px solid #989898;
+  border-radius: 50%;
+  width: 5px;
+  height: 5px;
+  padding: 1rem;
+  cursor: pointer;
+}
+
+.todo-container .todo-checkbox:hover {
+  background-color: #9b59b6;
+  opacity: 0.5;
+}
+
+.todo-container .todo-checkbox:active {
+  background-color: #9b59b6;
+  opacity: 1;
+}
+
+.todo-form .new_todo {
+  padding: 2rem;
+}
+
+.new_todo input {
+  width: 50%;
+  padding: 0.5rem;
+  color: #989898;
+  border: solid 2px white;
+  border-radius: 4px;
+  box-shadow: 2px 2px;
+  box-sizing: border-box;
+  text-align: center;
+}

app/assets/stylesheets/welcome.scss

@@ -1,20 +1,5 @@
-.footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 60px;
-  background-color: rgb(238, 238, 238);
-}
-
-.container .text-muted {
-  margin: 20px 0;
-}
-
-.text-muted {
-  color: rgb(240, 240, 240);
-}
-
-body > .container {
-  padding: 100px;
-  text-align: center;
+.content .hero .sign_in_btn {
+  display: none;
+  margin-left: auto;
+  margin-right: auto;
 }