Pretty good initial version of the site

source/index.html.erb

@@ -2,6 +2,40 @@
 title: Persephone
 ---
 
-<h1>
-  Persephone
-</h1>
+<header role="banner">
+  <h1>Persephone</h1>
+</header>
+
+<main>
+  <img class="icon" src="/images/icon-512.png" alt="">
+
+  <div class="text">
+    <p>Persephone is a modern, open source MPD client for macOS.
+
+    <h2>MP… what?</h2>
+
+    <p>From the <a href="https://www.musicpd.org" rel="nofollow">website</a>:</p>
+
+    <blockquote>
+      <p>
+        “Music Player Daemon (MPD) is a flexible, powerful, server-side
+        application for playing music. Through plugins and libraries it can play a
+        variety of sound files while being controlled by its network protocol.”
+      </p>
+    </blockquote>
+
+    <p>
+      Wikipedia has a
+      <a href="https://en.wikipedia.org/wiki/Music_Player_Daemon" rel="nofollow">more comprehensive description</a>.
+    </p>
+
+    <p class="download-section">
+      <a class="download-button" href="https://github.com/danbee/persephone/releases/download/0.13.0-alpha/Persephone-0.13.0-alpha.zip">↓ Download</a>
+    </p>
+  </div>
+
+  <picture>
+    <source srcset="/images/screenshot-dark.png" media="(prefers-color-scheme: dark)">
+    <img class="screenshot" src="/images/screenshot-light.png">
+  </picture>
+</main>

source/stylesheets/site.css.scss

@@ -1,19 +1,82 @@
+$dark-color: #181818;
+$light-color: white;
+
 body {
-  background-color: white;
-  color: black;
+  background-color: $light-color;
+  color: $dark-color;
   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;
+  padding: 4vw 1rem;
   text-align: center;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $dark-color;
+    color: $light-color;
+  }
+}
+
+main {
+  max-width: 50rem;
+  margin: 0 auto;
 }
 
 a {
-  color: rgba(#000, 0.7);
+  color: rgba($dark-color, 0.7);
 
   &:focus,
   &:hover {
-    color: rgba(#000, 0.6);
+    color: rgba($dark-color, 0.6);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    color: rgba($light-color, 0.7);
+
+    &:focus,
+    &:hover {
+      color: rgba($light-color, 0.6);
+    }
+  }
+}
+
+blockquote {
+  margin: 0;
+  padding-left: 1rem;
+  border-left: 5px solid darken($light-color, 25%);
+
+  @media (prefers-color-scheme: dark) {
+    border-left: 5px solid lighten($dark-color, 25%);
+  }
+}
+
+.text {
+  text-align: left;
+}
+
+.icon {
+  width: 16rem;
+}
+
+.screenshot {
+  width: 100%;
+}
+
+.download-section {
+  margin: 2rem 0;
+  text-align: center;
+}
+
+.download-button {
+  background: $dark-color;
+  border-radius: 0.5rem;
+  color: $light-color;
+  padding: 0.5rem 2rem 0.5rem 1.5rem;
+  text-decoration: none;
+  font-weight: bold;
+
+  @media (prefers-color-scheme: dark) {
+    background: $light-color;
+    color: $dark-color;
   }
 }