3 files changed, 120 insertions, 98 deletions
diff --git a/src/SMAPI.Web/wwwroot/Content/css/index.css b/src/SMAPI.Web/wwwroot/Content/css/index.css
index 06cd6fb4..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
 *********/
@@ -48,10 +101,6 @@ h1 {
     padding-left: 1em;
 }
 
-.github-description .noinclude {
-    display: none;
-}
-
 #support-links li small {
     display: block;
     width: 50em;
diff --git a/src/SMAPI.Web/wwwroot/Content/css/log-parser.css b/src/SMAPI.Web/wwwroot/Content/css/log-parser.css
index 789274e2..1fcd1bff 100644
--- a/src/SMAPI.Web/wwwroot/Content/css/log-parser.css
+++ b/src/SMAPI.Web/wwwroot/Content/css/log-parser.css
@@ -1,12 +1,8 @@
 /*********
 ** Main layout
 *********/
-input[type="button"] {
-    font-size: 20px;
-    border-radius: 5px;
-    outline: none;
-    box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, .2);
-    cursor: pointer;
+#content {
+    max-width: 100%;
 }
 
 caption {
@@ -20,15 +16,6 @@ caption {
     font-family: monospace;
 }
 
-input#upload-button {
-    background: #ccf;
-    border: 1px solid #000088;
-}
-
-input#upload-button {
-    background: #eef;
-}
-
 table caption {
     font-weight: bold;
 }
@@ -39,6 +26,7 @@ table caption {
 .banner {
     border: 2px solid gray;
     border-radius: 5px;
+    margin-top: 1em;
     padding: 1em;
 }
 
@@ -91,6 +79,10 @@ table#metadata, table#mods {
     cursor: pointer;
 }
 
+#mods.filters-disabled tr {
+    cursor: default;
+}
+
 #metadata tr,
 #mods tr {
     background: #eee
@@ -200,6 +192,12 @@ table#metadata, table#mods {
     color: #f00;
 }
 
+#log .critical {
+    background-color: #c00;
+    color: #fff;
+    font-weight: bold;
+}
+
 #log {
     border-spacing: 0;
 }
@@ -256,88 +254,19 @@ table#metadata, table#mods {
 
 
 /*********
-** Upload popup
+** Upload form
 *********/
-#upload-area .popup,
-#upload-area #uploader {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, .33);
-    z-index: 2;
-    display: none;
-    padding: 5px;
-}
-
-#upload-area #uploader:after {
-    content: attr(data-text);
-    display: block;
-    width: 100px;
-    height: 24px;
-    line-height: 25px;
-    border: 1px solid #000;
-    background: #fff;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin: -12px -50px 0 0;
-    font-size: 18px;
-    font-weight: bold;
-    text-align: center;
-    border-radius: 5px;
-}
-
-#upload-area .popup h1 {
-    position: absolute;
-    top: 10%;
-    left: 50%;
-    margin-left: -150px;
-    text-align: center;
-    width: 300px;
-    border: 1px solid #008;
-    border-radius: 5px;
-    background: #fff;
-    font-family: sans-serif;
-    font-size: 40px;
-    margin-top: -25px;
-    z-index: 10;
-    border-bottom: 0;
+#os-list {
+    list-style: none;
 }
 
-#upload-area .frame {
-    margin: auto;
-    margin-top: 25px;
-    padding: 2em;
-    position: absolute;
-    top: 10%;
-    left: 10%;
-    right: 10%;
-    bottom: 10%;
-    padding-bottom: 30px;
-    background: #FFF;
-    border-radius: 5px;
-    border: 1px solid #008;
-}
-
-#upload-area #cancel {
-    border: 1px solid #880000;
-    background-color: #fcc;
-}
-
-#upload-area #submit {
-    border: 1px solid #008800;
-    background-color: #cfc;
-}
-
-#upload-area #submit:hover {
-    background-color: #efe;
+div[data-os] {
+    display: none;
 }
 
-#upload-area #input {
+#input {
     width: 100%;
-    height: 30em;
+    height: 20em;
     max-height: 70%;
     margin: auto;
     box-sizing: border-box;
@@ -346,3 +275,13 @@ table#metadata, table#mods {
     outline: none;
     box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 192, .2);
 }
+
+#submit {
+    font-size: 1.5em;
+    border-radius: 5px;
+    outline: none;
+    box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, .2);
+    cursor: pointer;
+    border: 1px solid #008800;
+    background-color: #cfc;
+}
diff --git a/src/SMAPI.Web/wwwroot/Content/css/main.css b/src/SMAPI.Web/wwwroot/Content/css/main.css
index d1fa49e0..57eeee88 100644
--- a/src/SMAPI.Web/wwwroot/Content/css/main.css
+++ b/src/SMAPI.Web/wwwroot/Content/css/main.css
@@ -28,7 +28,8 @@ h2 {
 h3 {
     font-size: 1.2em;
     border-bottom: 1px solid #AAA;
-    width: 50%;
+    width: 55em;
+    max-width: 100%;
 }
 
 a {
@@ -44,6 +45,8 @@ a {
 
 #content {
     min-height: 140px;
+    width: calc(100% - 2em);
+    max-width: 60em;
     padding: 0 1em 1em 1em;
     border-left: 1px solid #CCC;
     background: #FFF;
@@ -51,7 +54,7 @@ a {
 }
 
 #content p {
-    max-width: 55em;
+    max-width: 100%;
 }
 
 .section {
@@ -105,3 +108,34 @@ a {
 #footer a {
     color: #669;
 }
+
+/* mobile fixes */
+@media (min-width: 1020px) and (max-width: 1199px) {
+    #sidebar {
+        width: 7em;
+        background: none;
+    }
+
+    #content-column {
+        left: 7em;
+    }
+}
+
+@media (max-width: 1019px) {
+    h1 {
+        margin-top: 0;
+    }
+
+    #sidebar {
+        margin-top: 0;
+        width: auto;
+        min-height: 0;
+        background: none;
+    }
+
+    #content-column {
+        position: inherit;
+        top: inherit;
+        left: inherit;
+    }
+}