prettify download page (#411)

2 files changed, 76 insertions, 28 deletions

diff --git a/src/SMAPI.Web/Views/Index/Index.cshtml b/src/SMAPI.Web/Views/Index/Index.cshtml
index b2b8c0dd..93dd389f 100644
--- a/src/SMAPI.Web/Views/Index/Index.cshtml
+++ b/src/SMAPI.Web/Views/Index/Index.cshtml
@@ -2,38 +2,26 @@
     ViewData["Title"] = "SMAPI";
 }
 @model StardewModdingAPI.Web.ViewModels.IndexModel
+@section Head {
+    <link rel="stylesheet" href="~/Content/css/index.css" />
+}
 
-<style>
-    li.main-download * {
-        font-size: 1.2em;
-        font-weight: bold;
-    }
-
-    li.main-download img {
-        height: 1em;
-    }
+<p id="blurb">
+    The mod loader for Stardew Valley. It works fine with GOG and Steam achievements, 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>
 
-    .github-description .noinclude {
-        display: none;
-    }
+<div id="call-to-action">
+    <a href="@Model.DownloadUrl" class="main-cta">Download SMAPI @Model.LatestVersion</a><br />
+    <a href="https://stardewvalleywiki.com/Modding:Installing_SMAPI" class="secondary-cta">Install guide</a><br />
+    <a href="https://stardewvalleywiki.com/Modding:Player_FAQs" class="secondary-cta">FAQs</a><br />
+    <img src="favicon.ico" />
+</div>
 
-    li small {
-        display: block;
-        width: 50em;
-    }
-</style>
 
-<p>
-    SMAPI is the modding API for Stardew Valley. It works fine with Steam achievements and the
-    overlay, you can uninstall it anytime, and there's a friendly community if you need help. It's
-    a cool boy.
-</p>
-
-<h2>Download and links</h2>
+<h2>Find help</h2>
 <ul>
-    <li class="main-download"><a href="@Model.DownloadUrl">Download SMAPI @Model.LatestVersion</a> <img src="favicon.ico" /></li>
-    <li><a href="https://stardewvalleywiki.com/Modding:Installing_SMAPI">Install guide</a></li>
-    <li><a href="https://stardewvalleywiki.com/Modding:Player_FAQs">FAQs</a></li>
     <li><a href="https://stardewvalleywiki.com/Modding:SMAPI_compatibility">Mod compatibility list</a></li>
     <li>Get help <a href="https://stardewvalleywiki.com/Modding:Community#Discord">on Discord</a> or <a href="https://community.playstarbound.com/threads/smapi-stardew-modding-api.108375/">in the forums</a></li>
 </ul>
@@ -43,8 +31,10 @@
     @Html.Raw(Markdig.Markdown.ToHtml(Model.Description))
 </div>
 
+<p>See the <a href="https://github.com/Pathoschild/SMAPI/blob/develop/docs/release-notes.md#release-notes">release notes</a> for more info.</p>
+
 <h2>Support SMAPI ♥</h2>
-<ul>
+<ul id="support-links">
     <li><a href="https://www.paypal.me/pathoschild">Donate once</a></li>
     <li>
         <a href="https://www.patreon.com/pathoschild">Donate $1+/month</a><br />
diff --git a/src/SMAPI.Web/wwwroot/Content/css/index.css b/src/SMAPI.Web/wwwroot/Content/css/index.css
new file mode 100644
index 00000000..06cd6fb4
--- /dev/null
+++ b/src/SMAPI.Web/wwwroot/Content/css/index.css
@@ -0,0 +1,58 @@
+/*********
+** Intro
+*********/
+h1 {
+    text-align: center;
+    font-size: 6em;
+    color: #000;
+}
+
+#blurb {
+    margin: auto;
+    width: 30em;
+    text-align: center;
+}
+
+#call-to-action {
+    margin: 3em 0;
+    text-align: center;
+}
+
+#call-to-action a {
+    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;
+    text-decoration: none;
+    text-shadow: #aade7c 0 1px 0;
+}
+
+#call-to-action a.secondary-cta {
+    background: #768d87;
+    border: 1px solid #566963;
+    color: #ffffff;
+    text-shadow: #2b665e 0 1px 0;
+}
+
+/*********
+** Subsections
+*********/
+.github-description {
+    border-left: 0.25em solid #dfe2e5;
+    padding-left: 1em;
+}
+
+.github-description .noinclude {
+    display: none;
+}
+
+#support-links li small {
+    display: block;
+    width: 50em;
+}