Fonts, grid and other stuff

source/index.html.erb

@@ -4,15 +4,15 @@ title: Persephone
 
 <header role="banner">
   <h1>Persephone</h1>
+
+  <h2>A modern, open source MPD client for macOS.</h2>
 </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.
+    <h3>MP… what?</h3>
-
-    <h2>MP… what?</h2>
 
     <p>From the <a href="https://www.musicpd.org" rel="nofollow">website</a>:</p>
 
@@ -28,14 +28,14 @@ title: Persephone
       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>
+  <div 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>
+  </div>
+
+  <picture class="screenshot">
     <source srcset="/images/screenshot-dark.png" media="(prefers-color-scheme: dark)">
-    <img class="screenshot" src="/images/screenshot-light.png">
+    <img src="/images/screenshot-light.png">
   </picture>
 </main>

source/layouts/layout.erb

@@ -7,6 +7,7 @@
           content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <!-- Use the title from a page's frontmatter if it has one -->
     <title><%= current_page.data.title || "Middleman" %></title>
+    <link rel="stylesheet" type="text/css" href="https://cloud.typography.com/7434852/6168012/css/fonts.css" />
     <%= stylesheet_link_tag "site" %>
     <%= javascript_include_tag "site" %>
   </head>

source/stylesheets/site.css.scss

@@ -1,13 +1,15 @@
-$dark-color: #181818;
 $light-color: white;
+$dark-color: #181818;
+
+$light-link-color: #253FA1;
+$dark-link-color: #75B3ED;
 
 body {
   background-color: $light-color;
   color: $dark-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir",
+  font-family: "Gotham A", "Gotham B", sans-serif;
-    "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans",
+  font-style: normal;
-    "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu",
+  font-weight: 400;
-    "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
   padding: 4vw 1rem;
   text-align: center;
 
@@ -17,13 +19,40 @@ body {
   }
 }
 
+h1 {
+  font-size: 2.5rem;
+  font-weight: 800;
+  margin-bottom: 0.5em;
+
+  @media (min-width: 25rem) {
+    font-size: 3rem;
+  }
+
+  @media (min-width: 35rem) {
+    font-size: 4rem;
+  }
+
+  @media (min-width: 50rem) {
+    font-size: 5rem;
+  }
+}
+
 main {
-  max-width: 50rem;
   margin: 0 auto;
+  max-width: 50rem;
+
+  @media (min-width: 40rem) {
+    display: grid;
+    grid-column-gap: 2rem;
+    grid-template-areas:
+      "icon text"
+      "download download"
+      "screenshot screenshot";
+  }
 }
 
 a {
-  color: rgba($dark-color, 0.7);
+  color: $light-link-color;
 
   &:focus,
   &:hover {
@@ -31,7 +60,7 @@ a {
   }
 
   @media (prefers-color-scheme: dark) {
-    color: rgba($light-color, 0.7);
+    color: $dark-link-color;
 
     &:focus,
     &:hover {
@@ -51,18 +80,31 @@ blockquote {
 }
 
 .text {
+  grid-area: text;
   text-align: left;
 }
 
 .icon {
+  grid-area: icon;
   width: 16rem;
+
+  @media (min-width: 40rem) {
+    float: left;
+  }
 }
 
 .screenshot {
-  width: 100%;
+  display: block;
+  grid-area: screenshot;
+  margin: 0 -4.25%;
+
+  img {
+    width: 100%;
+  }
 }
 
 .download-section {
+  grid-area: download;
   margin: 2rem 0;
   text-align: center;
 }
@@ -71,12 +113,24 @@ blockquote {
   background: $dark-color;
   border-radius: 0.5rem;
   color: $light-color;
+  font-weight: 700;
   padding: 0.5rem 2rem 0.5rem 1.5rem;
   text-decoration: none;
-  font-weight: bold;
+
+  &:focus,
+  &:hover {
+    background: lighten($dark-color, 10%);
+    color: $light-color;
+  }
 
   @media (prefers-color-scheme: dark) {
     background: $light-color;
     color: $dark-color;
+
+    &:focus,
+    &:hover {
+      background: darken($light-color, 10%);
+      color: $dark-color;
+    }
   }
 }