Merge pull request #640 from PAIR-code/docs

Update Jekyll documentation site to match PR #634 changes

Author: cjqian

README.md

@@ -3,6 +3,11 @@
 🕊️ **Deliberate Lab** is a platform for running online research experiments
 on human + LLM group dynamics.
 
+<img
+  src="./docs/assets/images/deliberate-lab-example-tv-debate.png"
+  alt="Screenshot of Deliberate Lab experiment dashboard"
+/>
+
 - 🔎 [Documentation for researchers + developers](https://pair-code.github.io/deliberate-lab/)
 - 👉 [Quick start for developers](https://pair-code.github.io/deliberate-lab/developers/run-locally)
 

docs/_config.yml

@@ -18,7 +18,7 @@
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
 
-title: Deliberate Lab Docs
+title: Deliberate Lab
 author: Google PAIR
 email: llm-mediation-core@google.com
 description: >- # this means to ignore newlines
@@ -33,7 +33,7 @@ keywords: >-
   research,
 baseurl: "/deliberate-lab" # the subpath of your site, e.g. /blog
 url: "https://pair-code.github.io" # the base hostname & protocol for your site
-github_username: pair-code
+github_username: PAIR-code
 collections:
     pages:
         order: # TODO: update

docs/_layouts/default.html

@@ -19,7 +19,12 @@
         {% include sidenav.html %}
         <article>
           <div class="content-wrapper">
-            <h1>{{ page.title }}</h1>
+            <header>
+              <h1>{{ page.title }}</h1>
+              {%- if page.subtitle -%}
+              <div class="subtitle">{{ page.subtitle }}</div>
+              {%- endif -%}
+            </header>
             {{ content }}
           </div>
         </article>

docs/assets/css/main.css

@@ -10,7 +10,7 @@ body {
   --md-sys-color-on-surface: var(--md-ref-palette-gray5);
   --md-sys-color-gray: var(--md-ref-palette-gray40);
   --md-sys-color-blue: var(--md-ref-palette-blue40);
-  --md-sys-color-blue-light: var(--md-ref-palette-blue50);
+  --md-sys-color-blue-light: var(--md-ref-palette-blue60);
 
   background: #fefefe;
   font-family: 'Roboto', Helvetica, sans-serif;
@@ -94,9 +94,7 @@ article {
   align-items: center;
   display: flex;
   flex-shrink: 0;
-  font-family: 'Roboto Mono';
   font-size: 0.9em;
-  font-weight: 500;
   height: 40px;
   border-bottom: 1px solid var(--md-sys-color-outline);
   padding: 0 1em;
@@ -112,7 +110,6 @@ article {
 
 .nav-section-title {
   color: var(--md-sys-color-outline);
-  font-family: 'Roboto Mono';
   font-size: 0.7em;
   font-weight: 400;
   text-transform: uppercase;
@@ -134,26 +131,34 @@ a.nav-link:hover {
 }
 
 header {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
   padding: 0.75em;
 }
 
-h1 {
-  font-family: 'Roboto Mono';
+.subtitle {
   font-size: 1.2em;
+  line-height: 1.3em;
+  text-align: center;
+}
+
+h1 {
+  font-size: 2em;
   font-weight: 500;
+  line-height: 1.5em;
+  text-align: center;
 }
 
 h2 {
   color: var(--md-sys-color-blue);
   border-bottom: 2px solid var(--md-sys-color-blue-light);
-  margin-top: 2em;
+  margin-top: 1em;
   padding-bottom: 4px;
-  font-family: 'Roboto Mono';
 }
 
 h3 {
   color: var(--md-sys-color-outline);
-  font-family: 'Roboto Mono';
   font-size: 0.9em;
   font-weight: 500;
 }

docs/assets/images/deliberate-lab-example-tv-debate.png

@@ -1,10 +1,15 @@
 ---
-title: Home
+title: Deliberate Lab
+subtitle: Create and run human-LLM group experiments
 layout: default
 ---
 
-Deliberate Lab is a platform for running online research experiments on human +
-LLM group dynamics.
+<img
+  src="./assets/images/deliberate-lab-example-tv-debate.png"
+  alt="Screenshot of Deliberate Lab experiment dashboard"
+/>
+
+## Information
 
 > [Log into the Google-hosted platform](https://deliberate-lab.appspot.com/){:target="_blank"}
 (or [request access here](https://forms.gle/VCmYQxsZWEA3mbZN6){:target="_blank"})