7 files changed, 102 insertions, 13 deletions
diff --git a/src/SMAPI.Web/Views/Index/Index.cshtml b/src/SMAPI.Web/Views/Index/Index.cshtml
index 0f056ada..411448fa 100644
--- a/src/SMAPI.Web/Views/Index/Index.cshtml
+++ b/src/SMAPI.Web/Views/Index/Index.cshtml
@@ -3,9 +3,9 @@
 }
 @model StardewModdingAPI.Web.ViewModels.IndexModel
 @section Head {
-    <link rel="stylesheet" href="~/Content/css/index.css?r=20180611" />
+    <link rel="stylesheet" href="~/Content/css/index.css?r=20180615" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script>
-    <script src="~/Content/js/index.js"></script>
+    <script src="~/Content/js/index.js?r=20180615"></script>
 }
 
 <p id="blurb">
@@ -15,16 +15,29 @@
 </p>
 
 <div id="call-to-action">
-    <a href="@Model.StableVersion.DownloadUrl" class="main-cta download">Download SMAPI @Model.StableVersion.Version</a><br />
+    <div class="cta-dropdown">
+        <a href="@Model.StableVersion.DownloadUrl" class="main-cta download">Download SMAPI @Model.StableVersion.Version</a><br/>
+        <div class="dropdown-content">
+            <a href="https://www.nexusmods.com/stardewvalley/mods/2400"><img src="Content/images/nexus-icon.png" /> Download from Nexus</a>
+            <a href="@Model.StableVersion.DownloadUrl"><img src="Content/images/direct-download-icon.png" /> Direct download</a>
+        </div>
+    </div><br />
+
     @if (Model.BetaVersion != null)
     {
-        <a href="@Model.BetaVersion.DownloadUrl" class="secondary-cta download">Download SMAPI @Model.BetaVersion.Version<br /><small>for Stardew Valley 1.3 beta</small></a><br />
+        <div class="cta-dropdown secondary-cta-dropdown">
+            <a href="@Model.BetaVersion.DownloadUrl" class="secondary-cta download">Download SMAPI @Model.BetaVersion.Version<br/><small>for Stardew Valley 1.3 beta</small></a><br/>
+            <div class="dropdown-content">
+                <a href="https://www.nexusmods.com/stardewvalley/mods/2400"><img src="Content/images/nexus-icon.png" /> Download from Nexus</a>
+                <a href="@Model.BetaVersion.DownloadUrl"><img src="Content/images/direct-download-icon.png" /> Direct download</a>
+            </div>
+        </div><br />
     }
     <a href="https://stardewvalleywiki.com/Modding:Player_Guide" class="secondary-cta">Player guide</a><br />
-    <img id="pufferchick" src="favicon.ico" />
+    <img id="pufferchick" src="Content/images/pufferchick.png" />
 </div>
 
-<h2>Get help</h2>
+<h2 id="help">Get help</h2>
 <ul>
     <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>
@@ -32,7 +45,7 @@
 
 @if (Model.BetaVersion == null)
 {
-    <h2>What's new in SMAPI @Model.StableVersion.Version?</h2>
+    <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>
@@ -40,7 +53,7 @@
 }
 else
 {
-    <h2>What's new in...</h2>
+    <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))
@@ -54,7 +67,7 @@ else
     <p>See the <a href="https://github.com/Pathoschild/SMAPI/blob/develop/docs/release-notes.md#release-notes">release notes</a> and <a href="https://stardewvalleywiki.com/Modding:SMAPI_compatibility">mod compatibility list</a> for more info.</p>
 }
 
-<h2>Donate to support SMAPI ♥</h2>
+<h2 id="donate">Donate to 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.
@@ -85,7 +98,7 @@ else
     and a few anonymous users for their ongoing support; you're awesome! 🏅
 </p>
 
-<h2>For mod creators</h2>
+<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)
diff --git a/src/SMAPI.Web/wwwroot/Content/css/index.css b/src/SMAPI.Web/wwwroot/Content/css/index.css
index 6340ed87..514e1a5c 100644
--- a/src/SMAPI.Web/wwwroot/Content/css/index.css
+++ b/src/SMAPI.Web/wwwroot/Content/css/index.css
@@ -18,7 +18,8 @@ h1 {
     text-align: center;
 }
 
-#call-to-action a {
+#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;
@@ -40,6 +41,58 @@ h1 {
     text-shadow: #2b665e 0 1px 0;
 }
 
+.cta-dropdown {
+    position: relative;
+    display: inline-block;
+    margin-bottom: 1em;
+}
+
+.cta-dropdown a.download {
+    margin-bottom: 0 !important;
+}
+
+.cta-dropdown .dropdown-content {
+    display: none;
+    position: absolute;
+    text-align: left;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+    border: 1px solid #566963;
+    background: #5cb811;
+    border-top: 0;
+    border-radius: 0 0 6px 6px;
+    margin-top: -6px;
+    z-index: 1;
+}
+
+.cta-dropdown .dropdown-content a:hover {
+    background-color: #ddd;
+}
+
+.cta-dropdown .dropdown-content img {
+    width: 0.85em;
+    height: 0.85em;
+}
+
+.cta-dropdown.secondary-cta-dropdown .dropdown-content a:hover {
+    background-color: #566963;
+}
+
+.cta-dropdown.secondary-cta-dropdown .dropdown-content {
+    background-color: #768d87;
+    border-color: #566963;
+}
+
+.cta-dropdown.secondary-cta-dropdown .dropdown-content a {
+    color: #fff;
+    text-shadow: #2b665e 0 1px 0;
+}
+
+.cta-dropdown .dropdown-content a {
+    padding: 0.75em 1em;
+    text-decoration: none;
+    display: block;
+}
+
 /*********
 ** Subsections
 *********/
diff --git a/src/SMAPI.Web/wwwroot/Content/images/direct-download-icon.png b/src/SMAPI.Web/wwwroot/Content/images/direct-download-icon.png
new file mode 100644
index 00000000..6c30ca36
--- /dev/null
+++ b/src/SMAPI.Web/wwwroot/Content/images/direct-download-icon.png
diff --git a/src/SMAPI.Web/wwwroot/Content/images/nexus-icon.png b/src/SMAPI.Web/wwwroot/Content/images/nexus-icon.png
new file mode 100644
index 00000000..10c66712
--- /dev/null
+++ b/src/SMAPI.Web/wwwroot/Content/images/nexus-icon.png
diff --git a/src/SMAPI.Web/wwwroot/Content/images/pufferchick-cool.png b/src/SMAPI.Web/wwwroot/Content/images/pufferchick-cool.png
index 63eb8970..f359146c 100644
--- a/src/SMAPI.Web/wwwroot/Content/images/pufferchick-cool.png
+++ b/src/SMAPI.Web/wwwroot/Content/images/pufferchick-cool.png
diff --git a/src/SMAPI.Web/wwwroot/Content/images/pufferchick.png b/src/SMAPI.Web/wwwroot/Content/images/pufferchick.png
new file mode 100644
index 00000000..1de9cf47
--- /dev/null
+++ b/src/SMAPI.Web/wwwroot/Content/images/pufferchick.png
diff --git a/src/SMAPI.Web/wwwroot/Content/js/index.js b/src/SMAPI.Web/wwwroot/Content/js/index.js
index 016d5fa4..d0734b02 100644
--- a/src/SMAPI.Web/wwwroot/Content/js/index.js
+++ b/src/SMAPI.Web/wwwroot/Content/js/index.js
@@ -1,11 +1,34 @@
 $(document).ready(function () {
+    /* enable pufferchick */
     var pufferchick = $("#pufferchick");
-    $(".download").hover(
+    $(".cta-dropdown").hover(
         function () {
             pufferchick.attr("src", "Content/images/pufferchick-cool.png");
         },
         function () {
-            pufferchick.attr("src", "favicon.ico");
+            pufferchick.attr("src", "Content/images/pufferchick.png");
         }
     );
+
+    /* enable download dropdowns */
+    $(".cta-dropdown a.download").each(function(i, button) {
+        button = $(button);
+        var wrapper = button.parent(".cta-dropdown");
+        var button = wrapper.find(".download");
+        var dropdownContent = wrapper.find(".dropdown-content");
+
+        $(window).on("click", function(e) {
+            var target = $(e.target);
+
+            // toggle dropdown on button click
+            if (target.is(button) || $.contains(button.get(0), target.get(0))) {
+                e.preventDefault();
+                dropdownContent.toggle();
+            }
+
+            // else hide dropdown
+            else
+                dropdownContent.hide();
+        });
+    });
 });