Move page title into header

app/assets/stylesheets/home.scss

@@ -32,4 +32,23 @@ body {
 header {
   background-color: black;
   text-align: right;
+
+  h1 {
+    display: inline-block;
+    font-size: 1rem;
+    font-weight: bold;
+    margin: 0;
+  }
+
+  .container {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+main {
+  .container {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
 }

app/assets/stylesheets/images/index.scss

@@ -1,10 +1,12 @@
 ul.images {
-  list-style: none;
-  padding-left: 0;
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
   grid-gap: 0.75rem;
+  grid-template-columns: repeat(2, 1fr);
   justify-content: space-between;
+  list-style: none;
+  margin-bottom: 0;
+  margin-top: 0;
+  padding-left: 0;
 
   li {
     margin-bottom: 1em;

app/assets/stylesheets/images/show.scss

@@ -2,8 +2,6 @@
   display: grid;
   grid-gap: 1.5rem;
   height: calc(100% - 12rem);
-  margin-top: 2rem;
-  margin-bottom: 2rem;
 
   .image-container {
     align-items: center;

app/views/images/index.html.erb

@@ -1,4 +1,6 @@
-<h1>My Images</h1>
+<% content_for :title do %>
+  <h1>My Images</h1>
+<% end %>
 
 <ul class="images">
   <% @images.each do |image| %>

app/views/images/show.html.erb

@@ -1,3 +1,9 @@
+<% content_for :title do %>
+  <h1>My Images</h1>
+  &rarr;
+  <%= @image.image.name %>
+<% end %>
+
 <div class="show-image">
   <div class="image-container">
     <%= image_tag(@image.image.url) %>

app/views/layouts/application.html.erb

@@ -11,11 +11,17 @@
 
   <header>
     <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 class="title">
+        <%= content_for :title %>
+      </div>
+
+      <div class="profile">
+        <% 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>
     </div>
   </header>
 

app/views/sessions/new.html.erb

@@ -1,3 +1,5 @@
+<% content_for :title, "My Images" %>
+
 <div class="centre-stage">
   <%= link_to '/auth/github', class: "github-button" do %>
     <%= image_tag "github.svg" %>