More Progress

Improve Responsive Breakpoints and Make Progress with Button Placement

index.html

@@ -11,7 +11,7 @@
 
   <header>
     <h1 id="logo">Torrent<span class="fad fa-magnet fa-fw"></span>Parts</h1>
-    <iframe src="https://ghbtns.com/github-btn.html?user=leoherzog&repo=TorrentParts&type=star&count=true" frameborder="0" scrolling="0" width="150" height="20" title="GitHub"></iframe>
+    <iframe src="https://ghbtns.com/github-btn.html?user=leoherzog&repo=TorrentParts&type=star&count=true" frameborder="0" scrolling="0" width="90" height="20" title="GitHub"></iframe>
   </header>
 
   <div id="startButtons">
@@ -26,9 +26,21 @@
   <div id="properties" style="display:none">
 
     <button id="reset">
-      <span class="fas fa-minus-circle"></span> Reset
+      <span class="far fa-times fa-fw"></span>
     </button>
     
+    <div id="download">
+      <button id="copyURL">
+        <span class="fas fa-share-alt fa-fw fa-2x" data-fa-transform="left-1"></span>
+      </button>
+      <button id="copyMagnet">
+        <span class="fas fa-magnet fa-fw fa-2x" data-fa-transform="down-1"></span>
+      </button>
+      <button id="downloadTorrent">
+        <span class="fas fa-file-download fa-fw fa-2x"></span>
+      </button>
+    </div>
+
     <div class="property">
       <label for="hash">Unique Hash</label>
       <input id="hash" type="text" placeholder="" disabled/>
@@ -89,27 +101,6 @@
       </table>
     </div>
 
-    <div>
-      <div id="copyURL">
-        <span class="fa-stack fa-2x">
-          <span class="fas fa-circle fa-stack-2x"></span>
-          <span class="fas fa-share-alt fa-stack-1x fa-inverse" data-fa-transform="left-1"></span>
-        </span>
-      </div>
-      <div id="copyMagnet">
-        <span class="fa-stack fa-2x">
-          <span class="fas fa-circle fa-stack-2x"></span>
-          <span class="fas fa-magnet fa-stack-1x fa-inverse" data-fa-transform="down-1"></span>
-        </span>
-      </div>
-      <div id="downloadTorrent">
-        <span class="fa-stack fa-2x">
-          <span class="fas fa-circle fa-stack-2x"></span>
-          <span class="fas fa-file-download fa-stack-1x fa-inverse"></span>
-        </span>
-      </div>
-    </div>
-
   </div>
 
   <script src="bundle.min.js"></script>

style.css

@@ -52,6 +52,7 @@ button {
   border-radius: 900px;
   text-align: center;
   margin: auto;
+  cursor: pointer;
 }
 
 button:disabled {
@@ -72,15 +73,21 @@ header {
 }
 
 #startButtons {
+  height: 80px;
+  max-width: 960px;
   margin: 64px auto;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: space-evenly;
 }
 
 #startButtons > * {
   width: 440px;
+  height: 36px;
+}
+
+#magnet {
+  text-align: center;
 }
 
 #torrent {
@@ -99,13 +106,32 @@ label[for="torrent"] {
 }
 
 #properties {
+  position: relative;
+  max-width: 960px;
   background: var(--dark-blue);
-  margin: 80px 160px;
+  margin: 80px auto;
   padding: 40px;
   border-radius: 30px;
   flex-direction: column;
   justify-content: space-evenly;
+}
 
+#reset {
+  position: absolute;
+  top: -12px;
+  right: -12px;
+}
+
+#download {
+  position: absolute;
+  top: 0;
+  left: -28px;
+  display: flex;
+  flex-direction: column;
+}
+
+#download > * {
+  margin: 4px 0;
 }
 
 .property {
@@ -113,14 +139,81 @@ label[for="torrent"] {
   margin: 20px 0px;
   display: flex;
   justify-content: space-between;
-
+  align-items: center;
 }
 
 .property > label {
-  width: 40%;
+  width: 160px;
+  text-align: right;
   text-transform: uppercase;
+  margin: 0 auto;
 }
 
 .property > input {
   width: 440px;
 }
+
+@media (max-width: 1080px) {
+
+  #reset {
+    top: 0px;
+    right: 8px;
+  }
+
+  #download {
+    justify-content: center;
+    width: 96%;
+    top: auto;
+    bottom: 16px;
+    left: auto;
+    right: auto;
+    flex-direction: row;
+  }
+
+  #download > * {
+    margin: 0 4px;
+  }
+
+  #properties {
+    padding-bottom: 80px !important;
+  }
+
+}
+
+@media (max-width: 900px) {
+
+  #startButtons {
+    flex-direction: column;
+    justify-content: space-around;
+  }
+
+  #properties {
+    margin: 0;
+    padding: 0 2vw;
+    width: 96vw;
+  }
+
+  .property {
+    margin: 8px 0;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .property > label {
+    width: fit-content;
+    margin: 8px 0;
+  }
+
+  input {
+    text-align: center;
+  }
+
+}
+
+@media (max-width: 460px) {
+  
+  #startButtons > *, .property > input {
+    width: 95%;
+  }
+
+}