streamline front page design

3 files changed, 113 insertions, 86 deletions

diff --git a/src/SMAPI.Web/Views/Index/Index.cshtml b/src/SMAPI.Web/Views/Index/Index.cshtml
index 5d91dc84..778da2d1 100644
--- a/src/SMAPI.Web/Views/Index/Index.cshtml
+++ b/src/SMAPI.Web/Views/Index/Index.cshtml
@@ -1,4 +1,3 @@
-@using Markdig
 @using Microsoft.Extensions.Options
 @using StardewModdingAPI.Web.Framework
 @using StardewModdingAPI.Web.Framework.ConfigModels
@@ -6,18 +5,22 @@
 @model StardewModdingAPI.Web.ViewModels.IndexModel
 @{
     ViewData["Title"] = "SMAPI";
+    ViewData["ViewTitle"] = string.Empty;
 }
 @section Head {
-    <link rel="stylesheet" href="~/Content/css/index.css?r=20190620" />
+    <link rel="stylesheet" href="~/Content/css/index.css?r=20200105" />
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" crossorigin="anonymous"></script>
-    <script src="~/Content/js/index.js?r=20190620"></script>
+    <script src="~/Content/js/index.js?r=20200105"></script>
 }
 
-<p id="blurb">
-    The mod loader for Stardew Valley. It works fine with GOG and Steam achievements, it's
-    compatible with Linux/Mac/Windows, you can uninstall it anytime, and there's a friendly
-    community if you need help. It's a cool pufferchick.
-</p>
+<h1>
+    SMAPI
+    <img id="pufferchick" src="Content/images/pufferchick.png" />
+</h1>
+<div id="blurb">
+    <p>The mod loader for Stardew Valley.</p>
+    <p>Compatible with GOG/Steam achievements and Linux/Mac/Windows, uninstall anytime, and there's a friendly community if you need help.</p>
+</div>
 
 <div id="call-to-action">
     <div class="cta-dropdown">
@@ -45,80 +48,82 @@
         </div><br />
     }
     <div><a href="https://stardewvalleywiki.com/Modding:Player_Guide" class="secondary-cta">Player guide</a></div>
-    <div class="sublinks">
-        <a href="https://github.com/Pathoschild/SMAPI">source code</a> | <a href="@Url.PlainAction("Privacy", "Index")">privacy</a>
-    </div>
-    <img id="pufferchick" src="Content/images/pufferchick.png" />
 </div>
 
-<h2 id="help">Get help</h2>
-<ul>
-    <li><a href="@Url.PlainAction("Index", "Mods")">Mod compatibility list</a></li>
-    <li>Get help <a href="https://smapi.io/community">on Discord or in the forums</a></li>
-</ul>
-
-@if (Model.BetaVersion == null)
-{
-    <h2 id="whatsnew">What's new in SMAPI @Model.StableVersion.Version?</h2>
-    <div class="github-description">
-        @Html.Raw(Markdig.Markdown.ToHtml(Model.StableVersion.Description))
-    </div>
-    <p>See the <a href="https://github.com/Pathoschild/SMAPI/blob/develop/docs/release-notes.md#release-notes">release notes</a> and <a href="@Url.PlainAction("Index", "Mods")">mod compatibility list</a> for more info.</p>
-}
-else
-{
-    <h2 id="whatsnew">What's new in...</h2>
-    <h3>SMAPI @Model.StableVersion.Version?</h3>
-    <div class="github-description">
-        @Html.Raw(Markdig.Markdown.ToHtml(Model.StableVersion.Description))
-    </div>
-    <p>See the <a href="https://github.com/Pathoschild/SMAPI/blob/develop/docs/release-notes.md#release-notes">release notes</a> and <a href="@Url.PlainAction("Index", "Mods")">mod compatibility list</a> for more info.</p>
+<div class="area">
+    <h2 id="help">Get help</h2>
+    <ul>
+        <li><a href="@Url.PlainAction("Index", "Mods")">Mod compatibility list</a></li>
+        <li><a href="https://smapi.io/community">Ask questions</a> (or join the community!)</li>
+    </ul>
+</div>
 
-    <h3>SMAPI @Model.BetaVersion.Version?</h3>
-    <div class="github-description">
-        @Html.Raw(Markdig.Markdown.ToHtml(Model.BetaVersion.Description))
-    </div>
-    <p>See the <a href="https://github.com/Pathoschild/SMAPI/blob/develop/docs/release-notes.md#release-notes">release notes</a> and <a href="@Url.PlainAction("Index", "Mods")">mod compatibility list</a> for more info.</p>
-}
+<div class="area">
+    @if (Model.BetaVersion == null)
+    {
+        <h2 id="whatsnew">What's new</h2>
+        <div class="github-description">
+            @Html.Raw(Markdig.Markdown.ToHtml(Model.StableVersion.Description))
+        </div>
+        <p>See the <a href="https://github.com/Pathoschild/SMAPI/blob/develop/docs/release-notes.md#release-notes">release notes</a> and <a href="@Url.PlainAction("Index", "Mods")">mod compatibility list</a> for more info.</p>
+    }
+    else
+    {
+        <h2 id="whatsnew">What's new in...</h2>
+        <h3>SMAPI @Model.StableVersion.Version?</h3>
+        <div class="github-description">
+            @Html.Raw(Markdig.Markdown.ToHtml(Model.StableVersion.Description))
+        </div>
+        <p>See the <a href="https://github.com/Pathoschild/SMAPI/blob/develop/docs/release-notes.md#release-notes">release notes</a> and <a href="@Url.PlainAction("Index", "Mods")">mod compatibility list</a> for more info.</p>
 
-<h2 id="donate">Support SMAPI ♥</h2>
-<p>
-    SMAPI is an open-source project by Pathoschild. It will always be free, but donations
-    are much appreciated to help pay for development, server hosting, domain fees, coffee, etc.
-</p>
+        <h3>SMAPI @Model.BetaVersion.Version?</h3>
+        <div class="github-description">
+            @Html.Raw(Markdig.Markdown.ToHtml(Model.BetaVersion.Description))
+        </div>
+        <p>See the <a href="https://github.com/Pathoschild/SMAPI/blob/develop/docs/release-notes.md#release-notes">release notes</a> and <a href="@Url.PlainAction("Index", "Mods")">mod compatibility list</a> for more info.</p>
+    }
+</div>
 
-<ul id="donate-links">
-    <li>
-        <a href="https://www.patreon.com/pathoschild" class="donate-button">
-            <img src="Content/images/patreon.png" /> Become a patron
-        </a>
-    </li>
-    <li>
-        <a href="https://ko-fi.com/pathoschild" class="donate-button">
-            <img src="Content/images/ko-fi.png" /> Buy me a coffee
-        </a>
-    </li>
-    <li>
-        <a href="https://www.paypal.me/pathoschild" class="donate-button">
-            <img src="Content/images/paypal.png" /> Donate via PayPal
-        </a>
-    </li>
-</ul>
+<div class="area">
+    <h2 id="donate">Support SMAPI ♥</h2>
+    <p>
+        SMAPI is an open-source project by Pathoschild. It will always be free, but donations
+        are much appreciated to help pay for development, server hosting, domain fees, coffee, etc.
+    </p>
 
-@if (!string.IsNullOrWhiteSpace(Model.SupporterList))
-{
-    @Html.Raw(Markdig.Markdown.ToHtml(
-        $"Special thanks to {Model.SupporterList}, and a few anonymous users for their ongoing support on Patreon; you're awesome!"
-    ))
-}
+    <ul id="donate-links">
+        <li>
+            <a href="https://www.patreon.com/pathoschild" class="donate-button">
+                <img src="Content/images/patreon.png" /> Become a patron
+            </a>
+        </li>
+        <li>
+            <a href="https://ko-fi.com/pathoschild" class="donate-button">
+                <img src="Content/images/ko-fi.png" /> Buy me a coffee
+            </a>
+        </li>
+        <li>
+            <a href="https://www.paypal.me/pathoschild" class="donate-button">
+                <img src="Content/images/paypal.png" /> Donate via PayPal
+            </a>
+        </li>
+    </ul>
 
-<h2 id="modcreators">For mod creators</h2>
-<ul>
-    <li><a href="@Model.StableVersion.DevDownloadUrl">SMAPI @Model.StableVersion.Version for developers</a> (includes <a href="https://docs.microsoft.com/en-us/visualstudio/ide/using-intellisense">intellisense</a> and full console output)</li>
-    @if (Model.BetaVersion != null)
+    @if (!string.IsNullOrWhiteSpace(Model.SupporterList))
     {
-        <li><a href="@Model.BetaVersion.DevDownloadUrl">SMAPI @Model.BetaVersion.Version for developers</a> (includes <a href="https://docs.microsoft.com/en-us/visualstudio/ide/using-intellisense">intellisense</a> and full console output)</li>
+        @Html.Raw(Markdig.Markdown.ToHtml(
+            $"Special thanks to {Model.SupporterList}, and a few anonymous users for their ongoing support on Patreon; you're awesome!"
+        ))
     }
-    <li><a href="https://stardewvalleywiki.com/Modding:Index">Modding documentation</a></li>
-    <li>Need help? Come <a href="https://smapi.io/community">chat on Discord</a>.</li>
-</ul>
+</div>
+
+    <h2 id="modcreators">For mod creators</h2>
+    <ul>
+        <li><a href="@Model.StableVersion.DevDownloadUrl">SMAPI @Model.StableVersion.Version for developers</a> (includes <a href="https://docs.microsoft.com/en-us/visualstudio/ide/using-intellisense">intellisense</a> and full console output)</li>
+        @if (Model.BetaVersion != null)
+        {
+            <li><a href="@Model.BetaVersion.DevDownloadUrl">SMAPI @Model.BetaVersion.Version for developers</a> (includes <a href="https://docs.microsoft.com/en-us/visualstudio/ide/using-intellisense">intellisense</a> and full console output)</li>
+        }
+        <li><a href="https://stardewvalleywiki.com/Modding:Index">Modding documentation</a></li>
+        <li><a href="https://github.com/Pathoschild/SMAPI">Source code</a></li>
+    </ul>
diff --git a/src/SMAPI.Web/Views/Shared/_Layout.cshtml b/src/SMAPI.Web/Views/Shared/_Layout.cshtml
index 17f1f673..2d06ceb1 100644
--- a/src/SMAPI.Web/Views/Shared/_Layout.cshtml
+++ b/src/SMAPI.Web/Views/Shared/_Layout.cshtml
@@ -29,12 +29,15 @@
     </div>
     <div id="content-column">
         <div id="content">
-            <h1>@(ViewData["ViewTitle"] ?? ViewData["Title"])</h1>
+            @if (ViewData["ViewTitle"] != string.Empty)
+            {
+                <h1>@(ViewData["ViewTitle"] ?? ViewData["Title"])</h1>
+            }
             @RenderBody()
         </div>
         <div id="footer">
             <div id="license">
-                Hi! You can <a href="https://github.com/pathoschild/SMAPI" title="view source">view the source code</a> or <a href="https://github.com/pathoschild/SMAPI/issues" title="report issue">report a bug or suggestion</a>.
+                Hi! See the <a href="@Url.PlainAction("Privacy", "Index")">privacy page</a>, <a href="https://github.com/pathoschild/SMAPI" title="view source">SMAPI's source code</a>, or <a href="https://smapi.io/community" title="community pages">ask questions</a>.
             </div>
         </div>
     </div>
diff --git a/src/SMAPI.Web/wwwroot/Content/css/index.css b/src/SMAPI.Web/wwwroot/Content/css/index.css
index 93a85bed..1cf8d261 100644
--- a/src/SMAPI.Web/wwwroot/Content/css/index.css
+++ b/src/SMAPI.Web/wwwroot/Content/css/index.css
@@ -21,12 +21,10 @@ h1 {
 #call-to-action a.main-cta,
 #call-to-action a.secondary-cta {
     box-shadow: #caefab 0 1px 0 0 inset;
-    background: linear-gradient(#77d42a 5%, #5cb811 100%) #77d42a;
     border-radius: 6px;
     border: 1px solid #268a16;
     display: inline-block;
     cursor: pointer;
-    color: #306108;
     font-weight: bold;
     margin-bottom: 1em;
     padding: 6px 24px;
@@ -34,10 +32,16 @@ h1 {
     text-shadow: #aade7c 0 1px 0;
 }
 
+#call-to-action a.main-cta {
+    background: linear-gradient(#77d42a 5%, #5cb811 75%) #77d42a;
+    font-size: 1.5em;
+    color: #306108;
+}
+
 #call-to-action a.secondary-cta {
     background: #768d87;
     border: 1px solid #566963;
-    color: #ffffff;
+    color: #eee;
     text-shadow: #2b665e 0 1px 0;
 }
 
@@ -101,9 +105,24 @@ h1 {
 /*********
 ** Subsections
 *********/
-.github-description {
-    border-left: 0.25em solid #dfe2e5;
-    padding-left: 1em;
+.area {
+    background: rgba(0, 170, 0, 0.2);
+    padding: 0 1em 1em 1em;
+    margin-bottom: 1em;
+}
+
+.area > ul,
+.area > div,
+.area > p {
+    margin-left: 3em;
+}
+
+.area > ul {
+    padding-left: 0;
+}
+
+.area > h2 {
+    border: 0;
 }
 
 #donate-links li {
@@ -114,12 +133,12 @@ h1 {
 #donate-links .donate-button {
     display: inline-block;
     min-width: 10em;
-    background: #2A413B;
+    background: #2a413b;
     padding: 6px 12px;
     font-family: Quicksand, Helvetica, Century Gothic, sans-serif;
     text-decoration: none;
     font-weight: 700;
-    color: #FFF;
+    color: #fff;
     border-radius: 8px;
 }