From 91f70e3f15490ac7c93ae4e88aac79fda6065fe6 Mon Sep 17 00:00:00 2001
From: ReznoRMichael <mic3arena@gmail.com>
Date: Wed, 27 Jan 2021 20:25:21 +0100
Subject: [PATCH] Steam Cloud Saves button

---
 docs/index.html   |  6 +++++-
 docs/main.css     | 13 ++++++++++---
 src/css/style.css | 11 +++++++++--
 src/index.html    |  6 +++++-
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 4012249..8e6000e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -48,7 +48,7 @@
         <!-- <a href="https://pastebin.com/raw/shfZ4Vqs" target="_blank">[ Decoded 5% Save Example ]</a><br> -->
         <code>%USERPROFILE%\AppData\LocalLow\Team Cherry\Hollow Knight\</code>
         <br>
-        Choose a HK user*.dat save OR <a href="https://bloodorca.github.io/hollow/" target="_blank">Decode</a> it manually. <a href="https://store.steampowered.com/account/remotestorageapp/?appid=367520" target="_blank">HK Steam Cloud storage</a>
+        Choose a HK user*.dat save OR <a href="https://bloodorca.github.io/hollow/" target="_blank">Decode</a> it manually.
     </p>
 
     <div>
@@ -58,6 +58,10 @@
             <div class="input-buttons">
                 <input id="save-area-file" class="" type="file" name="file" accept=".dat,.bak*" onchange="LoadSaveFile(this);">
             </div>
+
+            <div class="input-buttons">
+                <a class="button" href="https://store.steampowered.com/account/remotestorageapp/?appid=367520" target="_blank">Steam Cloud Saves</a>
+            </div>
             
         </div>
 
diff --git a/docs/main.css b/docs/main.css
index 1cb611d..787b7d8 100644
--- a/docs/main.css
+++ b/docs/main.css
@@ -242,7 +242,7 @@ textarea {
     color: #fff;
     caret-color: #fff;
     border: 1px solid #e3ebf7;
-    padding: 2px 2px 2px 0;
+    padding: 2px;
     margin: 0.5rem 2px 0.3rem 2px;
     overflow-x: hidden;
     overflow-y: scroll;
@@ -322,10 +322,17 @@ input[type="file"] {
 }
 
 .centered {
-    flex-direction: column;
+    flex-direction: row;
     align-items: flex-start;
 }
 
+@media screen and (max-width: 566px) {
+    .centered {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+
 @media screen and (max-width: 400px) {
     .buttons {
         flex-direction: column;
@@ -336,7 +343,7 @@ input[type="file"] {
         justify-content: center;
     }
     .centered {
-        flex-direction: row;
+        flex-direction: column;
         align-items: flex-start;
     }
     .checkboxes {
diff --git a/src/css/style.css b/src/css/style.css
index afa4328..d2d74e2 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -212,10 +212,17 @@ input[type="file"] {
 }
 
 .centered {
-    flex-direction: column;
+    flex-direction: row;
     align-items: flex-start;
 }
 
+@media screen and (max-width: 566px) {
+    .centered {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+
 @media screen and (max-width: 400px) {
     .buttons {
         flex-direction: column;
@@ -226,7 +233,7 @@ input[type="file"] {
         justify-content: center;
     }
     .centered {
-        flex-direction: row;
+        flex-direction: column;
         align-items: flex-start;
     }
     .checkboxes {
diff --git a/src/index.html b/src/index.html
index 4b5f289..2094751 100644
--- a/src/index.html
+++ b/src/index.html
@@ -48,7 +48,7 @@
         <!-- <a href="https://pastebin.com/raw/shfZ4Vqs" target="_blank">[ Decoded 5% Save Example ]</a><br> -->
         <code>%USERPROFILE%\AppData\LocalLow\Team Cherry\Hollow Knight\</code>
         <br>
-        Choose a HK user*.dat save OR <a href="https://bloodorca.github.io/hollow/" target="_blank">Decode</a> it manually. <a href="https://store.steampowered.com/account/remotestorageapp/?appid=367520" target="_blank">HK Steam Cloud storage</a>
+        Choose a HK user*.dat save OR <a href="https://bloodorca.github.io/hollow/" target="_blank">Decode</a> it manually.
     </p>
 
     <div>
@@ -58,6 +58,10 @@
             <div class="input-buttons">
                 <input id="save-area-file" class="" type="file" name="file" accept=".dat,.bak*" onchange="LoadSaveFile(this);">
             </div>
+
+            <div class="input-buttons">
+                <a class="button" href="https://store.steampowered.com/account/remotestorageapp/?appid=367520" target="_blank">Steam Cloud Saves</a>
+            </div>
             
         </div>