Improve information in site index

Author: weavejester

site/index.html

@@ -34,12 +34,12 @@ <h1 class="title">
     <section class="section">
       <div class="container is-max-tablet">
         <p class="is-size-4">
-          Duct defines the structure of your application as <strong>pure
-          data</strong>.
+          Define the structure of your application as <strong>pure data</strong>.
         </p>
         <p>
-          A data structure is far more powerful than a prescribed
-          file tree from an application template.
+          Instead of a prescribed file tree, Duct uses a Clojure data structure
+          to describe how the components of your application are connected and
+          configured.
         </p>
         <pre class="highlight"><code class="language-clojure">{:system
  {:duct.module/logging {}
@@ -52,11 +52,12 @@ <h1 class="title">
     <section class="section">
       <div class="container is-max-tablet">
         <p class="is-size-4">
-          Instead of templates and generators, Duct has <strong>modules</strong>.
+          Factor out common configuration with <strong>modules</strong>.
         </p>
         <p>
           Modules expand out into extra configuration that you can inspect and
-          optionally override.
+          optionally override. These fulfil a similar role to templates and
+          generators in frameworks based around a file tree.
         </p>
         <div class="columns split-view">
           <div class="column left">
@@ -83,17 +84,19 @@ <h1 class="title">
     <section class="section">
       <div class="container is-max-tablet">
         <p class="is-size-4">
-          Lorem ipsum
+          Write the rest of your code in idiomatic <strong>Clojure</strong>.
         </p>
         <p>
-          Lorem ipsum dolar.
+          The top-level keywords in your system are linked to normal Clojure
+          functions or multimethods. This code is <em>simpler</em> as it
+          doesn't need to know how it's connected to the rest of the system.
         </p>
         <pre class="highlight"><code class="language-clojure">(ns demo.routes
   (:require [next.jdbc :as jdbc]))
 
 (defn items [{:keys [db]}]
   (fn handler [_request]
-    {:body {:results (jdbc/execute! db ["SELECT * FROM items"])}}))</code></pre>
+    {:body {:items (jdbc/execute! db ["SELECT * FROM items"])}}))</code></pre>
       </div>
     </section>
   </body>

site/style.css

@@ -25,7 +25,8 @@
 }
 
 .is-size-4 {
-  font-size: 1.55rem !important;
+  font-size: 1.75rem !important;
+  color: #d0d0d0;
 }
 
 .is-size-5 {
@@ -46,6 +47,10 @@ p {
   padding: 0.1rem 0;
 }
 
+p strong {
+  color: white;
+}
+
 pre.highlight {
   padding: 0;
   margin: 1rem 0;
@@ -56,7 +61,7 @@ pre.highlight {
 pre.highlight code {
   font-family: JetBrains Mono, monospace;
   font-size: 1rem;
-  border: 1px solid #2e8665;
+  border: 1px solid #666;
   border-radius: 10px;
   background: #292929;
   padding: 15px;
@@ -70,6 +75,10 @@ pre.highlight code {
   padding: 0;
 }
 
+.split-view .left {
+  max-width: 18rem;
+}
+
 .split-view .left pre.highlight code {
   border-radius: 10px 0 0 10px;
   border-right: none;