[OMBU-821] Restyle the app, mobile first, with a copy-as-markdown block

Gemfile

@@ -15,7 +15,7 @@ end
 gem 'pg', '>= 0.18', '< 2.0'
 gem 'rack', '~> 2.2'
 gem 'puma', '~> 8.0'
-gem 'sass-rails'
+gem 'sprockets-rails'
 gem 'ostruct'
 
 group :development do

Gemfile.lock

@@ -205,16 +205,6 @@ GEM
       tsort
     reline (0.7.0)
       io-console (~> 0.5)
-    sass-rails (6.0.0)
-      sassc-rails (~> 2.1, >= 2.1.1)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    sassc-rails (2.1.2)
-      railties (>= 4.0.0)
-      sassc (>= 2.0)
-      sprockets (> 3.0)
-      sprockets-rails
-      tilt
     securerandom (0.4.1)
     sprockets (4.4.0)
       concurrent-ruby (~> 1.1)
@@ -225,7 +215,6 @@ GEM
       activesupport (>= 6.1)
       sprockets (>= 3.0.0)
     thor (1.5.0)
-    tilt (2.9.0)
     timeout (0.6.1)
     tsort (0.2.0)
     tzinfo (2.0.6)
@@ -256,7 +245,7 @@ DEPENDENCIES
   puma (~> 8.0)
   rack (~> 2.2)
   rails (~> 7.1.0)
-  sass-rails
+  sprockets-rails
   tzinfo-data
   web-console (>= 3.3.0)
 

Gemfile.next.lock

@@ -198,16 +198,6 @@ GEM
       tsort
     reline (0.7.0)
       io-console (~> 0.5)
-    sass-rails (6.0.0)
-      sassc-rails (~> 2.1, >= 2.1.1)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    sassc-rails (2.1.2)
-      railties (>= 4.0.0)
-      sassc (>= 2.0)
-      sprockets (> 3.0)
-      sprockets-rails
-      tilt
     securerandom (0.4.1)
     sprockets (4.4.0)
       concurrent-ruby (~> 1.1)
@@ -218,7 +208,6 @@ GEM
       activesupport (>= 6.1)
       sprockets (>= 3.0.0)
     thor (1.5.0)
-    tilt (2.9.0)
     timeout (0.6.1)
     tsort (0.2.0)
     tzinfo (2.0.6)
@@ -250,7 +239,7 @@ DEPENDENCIES
   puma (~> 8.0)
   rack (~> 2.2)
   rails (~> 7.2.0)
-  sass-rails
+  sprockets-rails
   tzinfo-data
   web-console (>= 3.3.0)
 

README.md

@@ -112,6 +112,17 @@ one.
 
 Visit http://localhost:3000 and share a benchmark at it using the `SHARE_URL` example above.
 
+To look at a report page without running a benchmark first, load the samples:
+
+```bash
+bin/rails db:seed
+```
+
+That creates three reports covering the variations the page has to handle: a
+comparison report with a noisy entry, one without `compare!`, and one from an
+older client that sent no ruby/os/arch fields. It prints their paths and does
+nothing if reports already exist, so pass `FORCE=1` to add them anyway.
+
 ## Verifying a change end to end
 
 The suite uses Rack::Test, so it never exercises the real server or a real

app/assets/config/manifest.js

@@ -1,2 +1,3 @@
 //= link_tree ../images
 //= link_directory ../stylesheets .css
+//= link_tree ../fonts

app/assets/fonts/README.md

@@ -0,0 +1,12 @@
+Self-hosted so the app makes no third-party request for fonts.
+
+Latin subsets pulled from Google Fonts. Source Code Pro is a variable font, so
+one file covers every weight the app uses.
+
+  oxygen-400.woff2         Oxygen Regular
+  oxygen-700.woff2         Oxygen Bold
+  source-code-pro.woff2    Source Code Pro, variable 200..900
+
+Both families are licensed under the SIL Open Font License 1.1:
+https://fonts.google.com/specimen/Oxygen/license
+https://fonts.google.com/specimen/Source+Code+Pro/license

app/assets/stylesheets/application.css

@@ -1,21 +1,171 @@
 /*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
+ * Base styles and page furniture. Per-page styles live in their own files and
+ * are pulled in by require_tree below.
  *
- * Any CSS and SCSS file within this directory, lib/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 other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
+ * Colors and type follow fastruby.io: Oxygen for text, Source Code Pro for
+ * anything numeric, and square corners throughout.
  *
  *= require_tree .
  *= require_self
  */
 
+:root {
+  --ink: #262320;
+  --muted: #57514a;
+  --page: #f8f8f8;
+  --surface: #fff;
+  --cream: #f1ebe1;
+  --line: #dadada;
+  --faint: #6b6b6b;
+  --green: #00d242;
+  --green-pale: #b5e0c3;
+  --yellow: #fdca31;
+  --warn-ink: #8a6d3b;
+  --mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
-               Roboto, Oxygen-Sans, Ubuntu, Cantarell,
-               "Helvetica Neue", sans-serif;
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--page);
+  color: var(--ink);
+  font-family: Oxygen, Helvetica, Arial, sans-serif;
+  font-size: 17px;
+  line-height: 1.45;
+  letter-spacing: 0.36px;
+}
+
+a {
+  color: var(--ink);
+  text-decoration: none;
+  border-bottom: 1px solid var(--line);
+}
+
+a:hover {
+  color: var(--green);
+  border-bottom-color: var(--green);
+}
+
+code {
+  font-family: var(--mono);
+  font-size: 0.925em;
+}
+
+/* Masthead */
+
+.masthead {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 24px;
+  padding: 22px 20px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--line);
+}
+
+.masthead__wordmark {
+  font-weight: 700;
+  font-size: 20px;
+  letter-spacing: 1.18px;
+  border-bottom: 0;
+}
+
+.masthead__wordmark span {
+  color: var(--green);
+}
+
+.masthead__wordmark:hover {
+  color: var(--ink);
+}
+
+.masthead__link {
+  font-size: 14px;
+  color: var(--muted);
+}
+
+/* Page shell */
+
+.shell {
+  flex: 1;
+  width: 100%;
+  max-width: 940px;
+  margin: 0 auto;
+  padding: 28px 20px 40px;
+}
+
+/* Colophon */
+
+.colophon {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 24px 20px;
+  background: var(--surface);
+  border-top: 1px solid var(--line);
+  font-size: 14px;
+  color: var(--muted);
+}
+
+/* Shared bits */
+
+.eyebrow {
+  margin: 0;
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 1.4px;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+/* Lines are separate elements rather than one <pre>, so the markup can be
+   indented normally without leading whitespace reaching the page. */
+
+.terminal {
+  display: flex;
+  flex-direction: column;
+  background: var(--ink);
+  padding: 22px 24px;
+  overflow-x: auto;
+}
+
+.terminal__line {
+  font-family: var(--mono);
+  font-size: 14px;
+  line-height: 1.85;
+  color: var(--page);
+  white-space: nowrap;
+}
+
+.terminal__result {
+  margin-top: 1.85em;
+  color: var(--green-pale);
+}
+
+.terminal .prompt {
+  color: var(--green);
+}
+
+/* Wider screens opt into more generous spacing. Everything above is the
+   small-screen baseline. */
+
+@media screen and (min-width: 40em) {
+  .masthead,
+  .colophon {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+
+  .shell {
+    padding: 44px 32px 56px;
+  }
 }