From 6936911880bd148d2bb0b777c53d0bdfc7c0adb3 Mon Sep 17 00:00:00 2001
From: Dan Barber <github@danbarber.me>
Date: Wed, 8 Aug 2018 10:13:23 -0400
Subject: [PATCH] Looks of things to make it pretty

* Convert SASS to SCSS
* Dark mode! (no light mode anymore though)
* Pretty GitHub login button
* Media queries to keep thumbnail sizes consistent by changing the
number of grid columns
---
 app/assets/images/github-64.png          | Bin 0 -> 2625 bytes
 app/assets/stylesheets/home.css.sass     |  14 --------
 app/assets/stylesheets/home.css.scss     |  35 ++++++++++++++++++++
 app/assets/stylesheets/images.css.sass   |  20 ------------
 app/assets/stylesheets/images.css.scss   |  40 +++++++++++++++++++++++
 app/assets/stylesheets/sessions.css.sass |   3 --
 app/assets/stylesheets/sessions.css.scss |  27 +++++++++++++++
 app/views/layouts/application.html.erb   |  16 +++++----
 app/views/sessions/new.html.erb          |   7 +++-
 9 files changed, 118 insertions(+), 44 deletions(-)
 create mode 100644 app/assets/images/github-64.png
 delete mode 100644 app/assets/stylesheets/home.css.sass
 create mode 100644 app/assets/stylesheets/home.css.scss
 delete mode 100644 app/assets/stylesheets/images.css.sass
 create mode 100644 app/assets/stylesheets/images.css.scss
 delete mode 100644 app/assets/stylesheets/sessions.css.sass
 create mode 100644 app/assets/stylesheets/sessions.css.scss

diff --git a/app/assets/images/github-64.png b/app/assets/images/github-64.png
new file mode 100644
index 0000000000000000000000000000000000000000..182a1a3f734fc1b7d712c68b04c29bad9460d6cd
GIT binary patch
literal 2625
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
W4I>>0bz>}E>ge79v<vGaGyei9dr3zC

literal 0
HcmV?d00001

diff --git a/app/assets/stylesheets/home.css.sass b/app/assets/stylesheets/home.css.sass
deleted file mode 100644
index 747e487..0000000
--- a/app/assets/stylesheets/home.css.sass
+++ /dev/null
@@ -1,14 +0,0 @@
-// Place all the styles related to the home controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
-
-html
-  font-size: 100%
-  font-family: 'Helvetica Neue', 'Arial', sans-serif
-
-header, main
-  max-width: 60rem
-  margin: 0 auto
-
-header
-  text-align: right
diff --git a/app/assets/stylesheets/home.css.scss b/app/assets/stylesheets/home.css.scss
new file mode 100644
index 0000000..d3afaa1
--- /dev/null
+++ b/app/assets/stylesheets/home.css.scss
@@ -0,0 +1,35 @@
+// Place all the styles related to the home controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+html {
+  background-color: #333333;
+  color: white;
+  font-size: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+               Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+               "Segoe UI Symbol";
+}
+
+h1, h2, h3 {
+  font-weight: normal;
+}
+
+a {
+  color: #677b83;
+}
+
+body {
+  margin: 0;
+}
+
+.container {
+  padding: 0.5rem 4%;
+  max-width: 80rem;
+  margin: 0 auto;
+}
+
+header {
+  background-color: black;
+  text-align: right;
+}
diff --git a/app/assets/stylesheets/images.css.sass b/app/assets/stylesheets/images.css.sass
deleted file mode 100644
index c1714cb..0000000
--- a/app/assets/stylesheets/images.css.sass
+++ /dev/null
@@ -1,20 +0,0 @@
-// Place all the styles related to the images controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
-
-ul.images
-  list-style: none
-  padding-left: 0
-  display: grid
-  grid-template-columns: repeat(6, 1fr)
-  grid-gap: 0.75rem
-  justify-content: space-between
-
-  li
-    margin-bottom: 1em
-
-  img
-    max-width: calc(100% - 0.5rem)
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)
-    border-radius: 2px
-    padding: 0.25rem
diff --git a/app/assets/stylesheets/images.css.scss b/app/assets/stylesheets/images.css.scss
new file mode 100644
index 0000000..a174919
--- /dev/null
+++ b/app/assets/stylesheets/images.css.scss
@@ -0,0 +1,40 @@
+// Place all the styles related to the images controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+ul.images {
+  list-style: none;
+  padding-left: 0;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 0.75rem;
+  justify-content: space-between;
+
+  li {
+    margin-bottom: 1em;
+  }
+
+  img {
+    background-color: white;
+    max-width: calc(100% - 0.5rem);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+    border-radius: 2px;
+    padding: 0.25rem;
+  }
+}
+
+@media (min-width: 380px) {
+  ul.images { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (min-width: 590px) {
+  ul.images { grid-template-columns: repeat(4, 1fr); }
+}
+
+@media (min-width: 820px) {
+  ul.images { grid-template-columns: repeat(5, 1fr); }
+}
+
+@media (min-width: 1000px) {
+  ul.images { grid-template-columns: repeat(6, 1fr); }
+}
diff --git a/app/assets/stylesheets/sessions.css.sass b/app/assets/stylesheets/sessions.css.sass
deleted file mode 100644
index 7bef9cf..0000000
--- a/app/assets/stylesheets/sessions.css.sass
+++ /dev/null
@@ -1,3 +0,0 @@
-// Place all the styles related to the sessions controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/app/assets/stylesheets/sessions.css.scss b/app/assets/stylesheets/sessions.css.scss
new file mode 100644
index 0000000..63745ae
--- /dev/null
+++ b/app/assets/stylesheets/sessions.css.scss
@@ -0,0 +1,27 @@
+// Place all the styles related to the sessions controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+.centre-stage {
+  align-items: center;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.github-button {
+  display: block;
+  background: white;
+  color: black;
+  text-decoration: none;
+  padding: 0.5rem 2rem;
+  border-radius: 0.5rem;
+  img {
+    width: 1.2rem;
+    vertical-align: middle;
+    margin-right: 0.25rem;
+  }
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index b87df0a..e9a4eaa 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -9,15 +9,19 @@
 <body>
 
   <header>
-    <% if @current_user %>
-      Signed in as: <%= @current_user.name %> | <%= link_to 'Sign out', session_path, method: :delete %>
-    <% end %>
+    <div class="container">
+      <% if @current_user %>
+        Signed in as: <%= @current_user.name %> | <%= link_to 'Sign out', session_path, method: :delete %>
+      <% else %>
+        <%= link_to 'Sign in with GitHub', '/auth/github' %>
+      <% end %>
+    </div>
   </header>
 
   <main>
-
-<%= yield %>
-
+    <div class="container">
+      <%= yield %>
+    </div>
   </main>
 
 </body>
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
index ab95a24..885b5ae 100644
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -1 +1,6 @@
-<%= link_to 'Sign in with GitHub', '/auth/github' %>
+<div class="centre-stage">
+  <%= link_to '/auth/github', class: "github-button" do %>
+    <%= image_tag "github-64.png" %>
+    Sign in with GitHub
+  <% end %>
+</div>