feat(reference-app): adopt Pico CSS for the login, logout, and landing pages (#192)

ardetrick · web-flow · commit f67ddf96f194 · 2026-07-25T23:02:54.000-05:00
Vendors Pico v2.1.1 as static/pico.min.css and restyles the pages as a centered card. Login now pre-fills the demo credentials with a caption so they are obvious. Page titles are normalized to h1, and the screenshot viewport is pinned to 576x520 so captures are a uniform, GitHub-column-friendly size.
diff --git a/reference-app/src/main/resources/static/pico.min.css b/reference-app/src/main/resources/static/pico.min.css
diff --git a/reference-app/src/main/resources/templates/demo.ftlh b/reference-app/src/main/resources/templates/demo.ftlh
@@ -3,8 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <title>Ory Hydra Reference App</title>
+  <link rel="stylesheet" href="/pico.min.css">
 </head>
 <body>
+<main class="container"><article>
 <h1>Ory Hydra Reference App</h1>
 
 <p>This app implements the login, consent, and logout screens for an
@@ -68,5 +70,6 @@ curl -X PATCH \
 </pre>
 </div>
 </details>
+</article></main>
 </body>
 </html>
diff --git a/reference-app/src/main/resources/templates/login.ftlh b/reference-app/src/main/resources/templates/login.ftlh
@@ -2,24 +2,33 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <title>Log In</title>
+  <link rel="stylesheet" href="/pico.min.css">
 </head>
 <body>
-<h2>Log In</h2>
-<form action="/login/usernamePassword" method="post">
-  <input type="hidden" name="loginChallenge" value="${loginChallenge}" />
+<main class="container"><article>
+  <h1>Log In</h1>
+  <p><small>Demo credentials are pre-filled. Select Log in to continue.</small></p>
+  <form action="/login/usernamePassword" method="post">
+    <input type="hidden" name="loginChallenge" value="${loginChallenge}" />
 
-  <label for="loginEmail">Email:</label>
-  <input type="email" name="loginEmail" placeholder="foo@bar.com" /><br>
-  <label for="loginPassword">Password:</label>
-  <input type="password" name="loginPassword" placeholder="password" /><br>
+    <label for="loginEmail">Email</label>
+    <input type="email" id="loginEmail" name="loginEmail" value="foo@bar.com" />
 
-  <label for="remember">Remember me:</label>
-  <input type="checkbox" id="remember" name="remember" /><br>
+    <label for="loginPassword">Password</label>
+    <input type="password" id="loginPassword" name="loginPassword" value="password" />
 
-  <input type="submit" name="submit" value="Log in" />
-</form>
+    <label>
+      <input type="checkbox" id="remember" name="remember" />
+      Remember me
+    </label>
 
-<p>${(error)!}</p>
+    <input type="submit" name="submit" value="Log in" />
+  </form>
 
+  <#if (error)?has_content>
+    <p>${error}</p>
+  </#if>
+</article></main>
 </body>
 </html>
diff --git a/reference-app/src/main/resources/templates/logout.ftlh b/reference-app/src/main/resources/templates/logout.ftlh
@@ -2,15 +2,21 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <title>Log Out</title>
+  <link rel="stylesheet" href="/pico.min.css">
 </head>
 <body>
-<h2>Log Out</h2>
-<p>Do you want to log out ${subject}?</p>
-<form action="/logout" method="post">
-  <input type="hidden" name="logoutChallenge" value="${logoutChallenge}" />
+<main class="container"><article>
+  <h1>Log Out</h1>
+  <p>Do you want to log out ${subject}?</p>
+  <form action="/logout" method="post">
+    <input type="hidden" name="logoutChallenge" value="${logoutChallenge}" />
 
-  <input type="submit" id="confirm" name="confirm" value="Yes, log out" />
-  <input type="submit" id="cancel" name="cancel" value="Cancel" />
-</form>
+    <div role="group">
+      <input type="submit" id="confirm" name="confirm" value="Yes, log out" />
+      <input type="submit" id="cancel" name="cancel" value="Cancel" class="secondary" />
+    </div>
+  </form>
+</article></main>
 </body>
 </html>
diff --git a/reference-app/src/test/java/com/ardetrick/oryhydrareference/OryHydraReferenceApplicationFunctionalTests.java b/reference-app/src/test/java/com/ardetrick/oryhydrareference/OryHydraReferenceApplicationFunctionalTests.java
@@ -128,7 +128,7 @@ void stopTestEnvironment() {
   // because GitHub scales README images down to its ~880px column but never up: captures
   // narrower than the column render 1:1, and the unstyled pages carry less dead space.
   private Page newPage() {
-    return browser.newPage(new Browser.NewPageOptions().setViewportSize(640, 400));
+    return browser.newPage(new Browser.NewPageOptions().setViewportSize(576, 520));
   }
 
   @BeforeEach

Original file line number	Diff line number	Diff line change
`@@ -128,7 +128,7 @@ void stopTestEnvironment() {`
`128`	`128`	`// because GitHub scales README images down to its ~880px column but never up: captures`
`129`	`129`	`// narrower than the column render 1:1, and the unstyled pages carry less dead space.`
`130`	`130`	`private Page newPage() {`
`131`		`- return browser.newPage(new Browser.NewPageOptions().setViewportSize(640, 400));`
	`131`	`+ return browser.newPage(new Browser.NewPageOptions().setViewportSize(576, 520));`
`132`	`132`	`}`
`133`	`133`
`134`	`134`	`@BeforeEach`