Replace Generated Files with Static HTML and CSS

To serve as placeholder content for future commits, this commit commits the site’s index page, along with some foundational CSS rules.

The static content was generated by transforming the project’s README.md through Markdown into HTML.

Desktop: Collapsed history

git-read in desktop dimensions with the history
collapsed

Desktop: Expanded history

git-read in desktop dimensions with the history
expanded

Mobile: Collapsed history

git-read in mobile dimensions with the history
collapsed

Mobile: Expanded history

git-read in mobile dimensions with the history
expanded

source/index.html.erb

diff --git a/source/index.html.erb b/source/index.html.erb
index 7147cc5..c5a68ef 100644
--- a/source/index.html.erb
+++ b/source/index.html.erb
@@ -1,23 +1,69 @@
 ---
-title: Welcome to Middleman
+title: Elaborate on the project's goals in the README.md
 ---
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 340" class="middleman-logo" aria-labelledby="middleman-logo__title" role="img">
-  <title id="middleman-logo__title">Middleman</title>
-  <path class="middleman-logo__top-left-bar" fill-opacity=".45" d="M0 40L200 0v30L0 60z"/>
-  <path class="middleman-logo__top-right-bar" fill="#fff" d="M200 0l200 40v20L200 30z"/>
-  <path class="middleman-logo__left-m" fill-opacity=".45" d="M0 78v184l45 5V152l45 83 47-83v129l53 7V52l-57 8-43 83-43-70z"/>
-  <path class="middleman-logo__right-m" fill="#fff" d="M400 78v184l-45 5V152l-45 83-47-83v129l-53 7V52l57 8 43 83 43-70z"/>
-  <path class="middleman-logo__bottom-left-bar" fill-opacity=".45" d="M0 300l200 40v-30L0 280z"/>
-  <path class="middleman-logo__bottom-right-bar" fill="#fff" d="M200 340l200-40v-20l-200 30z"/>
-</svg>
-
 <h1>
-  Middleman is Running
+  git-read
 </h1>
 
-<%= link_to(
-  "Read Documentation",
-  "https://middlemanapp.com/basics/templating_language/",
-  target: "_blank"
-) %>
+<p>
+  Generate a website based on a project's Git history.
+</p>
+
+<ul>
+  <li>
+    Serve the project's
+    <code>README.md</code>
+    as the homepage
+  </li>
+  <li>
+    Index the history through its commits
+  </li>
+  <li>
+    Transforms commit messages HTML through a syntax-aware Markdown parser
+  </li>
+  <li>
+    Display the commits alongside their code changes
+  </li>
+</ul>
+
+<h2>
+  Command-line Interface
+</h2>
+
+<p>
+  Once installed, make sure that the
+  <code>bin/git-read</code>
+  executable is available on
+  your path so that the
+  <a href="http://mirrors.edge.kernel.org/pub/software/scm/git/docs/howto/new-command.html">
+    <code>git</code> program can invoke it as a subcommand
+  </a>.
+</p>
+
+<p>
+  To learn of the ways to to invoke the command, execute
+  <code>git read --help</code>
+  :
+</p>
+
+<code>
+  <pre>
+    usage: git read [--help] [-v|--verbose] [-s|--server|--serve]
+                    [-g | --git-dir &lt;path&gt;] [-o | --output-dir &lt;path&gt;]
+    Generate HTML from your project's Git history
+
+    OPTIONS
+          --output-dir
+              specify the directory where the site will be built
+          --git-dir
+              specify the parent directory of the project's .git/ directory
+          --verbose
+              print debugging information during the build process
+          --server
+              build and serve assets with a server available at
+              http://127.0.0.1:4567
+          --help
+              generate this help output
+  </pre>
+</code>

source/javascripts/site.js

diff --git a/source/javascripts/site.js b/source/javascripts/site.js
index dd250e0..6a4c3be 100644
--- a/source/javascripts/site.js
+++ b/source/javascripts/site.js
@@ -1 +1 @@
-import "tailwindcss/tailwind.css"
+import "../stylesheets/site.css"

source/layouts/layout.erb

diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
index 013d880..ef90774 100644
--- a/source/layouts/layout.erb
+++ b/source/layouts/layout.erb
@@ -1,15 +1,60 @@
-<!doctype html>
+<!DOCTYPE HTML>
 <html>
   <head>
     <meta charset="utf-8">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="viewport"
-          content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <!-- Use the title from a page's frontmatter if it has one -->
     <title><%= current_page.data.title || "Middleman" %></title>
     <%= javascript_include_tag "site" %>
   </head>
-  <body>
-    <%= yield %>
+  <body class="min-h-screen">
+    <header class="flex flex-row h-12 border-b">
+      <h1 class="flex items-center justify-center w-full md:border-r md:w-96">
+        <a href="#">
+          git-read
+        </a>
+      </h1>
+
+      <nav class="flex flex-grow justify-between items-center border-t p-3 fixed inset-x-0 bottom-0 bg-white z-10 md:px-4 md:py-0 md:bg-transparent md:border-0 md:relative">
+        <a href="#">
+          &#8592; Previous
+        </a>
+
+        <a href="#">
+          Next &#8594;
+        </a>
+      </nav>
+    </header>
+
+    <main class="flex flex-col md:flex-row">
+      <details class="relative pb-8 md:h-screen-fit">
+        <summary class="cursor-pointer inset-0 top-auto list-none outline-none md:relative">
+          <span class="sr-only open:hidden">Expand History</span>
+          <span class="sr-only hidden open:initial">Collapse History</span>
+          <div class="md:h-screen-fit flex flex-col border-b border-t h-8 w-full justify-center md:w-8 md:border-r md:border-l md:border-t-0 open:absolute inset-x-0 bottom-0 top-auto md:top-0 md:left-auto">
+            <svg class="transform rotate-90 open:-rotate-90 md:rotate-0 md:open:rotate-180" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L10.293 8 4.646 2.354a.5.5 0 010-.708z" clip-rule="evenodd"/>
+            </svg>
+          </div>
+        </summary>
+
+        <nav class="flex flex-col px-4 my-4 overflow-y-auto h-48 w-screen md:h-screen-fit md:w-96 md:my-auto md:p-2 md:pr-10 md:space-y-2">
+          <a href="#">
+            [GENERATED]: Scaffold the project with Middleman
+          </a>
+
+          <a href="#">
+            Elaborate on the project's goals in the README.md
+          </a>
+        </nav>
+      </details>
+
+      <article class="flex-grow justify-center p-4 md:flex md:h-screen-fit md:p-8 md:overflow-y-auto">
+        <section class="prose prose-lg md:prose-xl">
+          <%= yield %>
+        </section>
+      </article>
+    </main>
   </body>
 </html>

source/stylesheets/site.css

diff --git a/source/stylesheets/site.css b/source/stylesheets/site.css
new file mode 100644
index 0000000..58aa686
--- /dev/null
+++ b/source/stylesheets/site.css
@@ -0,0 +1,38 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+summary::-webkit-details-marker {
+  @apply hidden;
+}
+
+[open].open\:hidden,
+[open] .open\:hidden {
+  @apply hidden;
+}
+
+[open].open\:initial,
+[open] .open\:initial {
+  display: initial;
+}
+
+[open].open\:-rotate-90,
+[open] .open\:-rotate-90 {
+  @apply -rotate-90;
+}
+
+[open].open\:absolute,
+[open] .open\:absolute {
+  @apply absolute;
+}
+
+@screen md {
+  .md\:h-screen-fit {
+    height: calc(100vh - 3rem); /* 3rem is our header height */
+  }
+
+  [open].md\:open\:rotate-180,
+  [open] .md\:open\:rotate-180 {
+    @apply rotate-180;
+  }
+}

source/stylesheets/site.css.scss

diff --git a/source/stylesheets/site.css.scss b/source/stylesheets/site.css.scss
deleted file mode 100644
index fda2be7..0000000
--- a/source/stylesheets/site.css.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-body {
-  background-color: #fbc547;
-  color: #333;
-  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir",
-    "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans",
-    "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu",
-    "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
-  padding: 18vh 1rem;
-  text-align: center;
-}
-
-a {
-  color: rgba(#000, 0.7);
-
-  &:focus,
-  &:hover {
-    color: rgba(#000, 0.6);
-  }
-}
-
-.middleman-logo {
-  margin-bottom: 1rem;
-  width: 10rem;
-}