Beautification; mobile optimization

src/assets/scripts/bottles.jsx

@@ -13,7 +13,7 @@ function Bottles() {
 
   return (
     <div>
-      <p>{names.length} packages</p>
+      <p>Showing {names.length} packages</p>
       {names.map((name) => (
         <Bottle key={name} name={name} />
       ))}
@@ -27,9 +27,9 @@ function Bottles() {
     ];
     return (
       <div className="expand" onClick={() => toggleExpanded(!expanded)}>
-        <div className="expand-text">
-          <h3>{name}</h3>
-          <h4>
+        <div className="expand-text one-box-down">
+          <h3 className="display-3">{name}</h3>
+          <h4 className="display-6">
             {versions.length} version{versions.length === 1 ? "" : "s"} bottled
           </h4>
         </div>
@@ -64,6 +64,9 @@ function Bottles() {
             </tbody>
           </table>
         )}
+        <div className="one-box-down">
+          <hr />
+        </div>
       </div>
     );
   }

src/layouts/page/bottles.html

@@ -3,7 +3,19 @@
 <section>
   <div class="container">
     <div class="row">
-      <div class="col">
+      <div class="col title-col" style="padding:1.4vw;">
+        <h1 class="display-1">Bottles</h1>
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr>
+
+<section>
+  <div class="container">
+    <div class="row">
+      <div class="col bottles-container">
 
         {{- partial "bottle-grid.html" -}}
 
@@ -16,10 +28,11 @@
 
   table{
     color: #fff;
+    width: 100%;
   }
 
   table, th, td {
-    border: 1px solid;
+    border: 1px solid #949494;
     font-family: "sono", sans-serif;
     padding: 20px;
   }
@@ -28,6 +41,27 @@
     cursor: pointer;
   }
 
+  @media screen and (max-width: 576px) {
+
+    .bottles-container{
+      padding: 0px !important;
+    }
+
+    table, th, td {
+      border: 1px solid #949494;
+      font-family: "sono", sans-serif;
+      padding: 10px;
+      font-size: 12px;
+    }
+
+    .title-col{
+      padding: 4vw !important;
+
+    }
+
+  }
+
+
 </style>
 
 {{ end }}

src/layouts/partials/tea-icon.html

@@ -0,0 +1 @@
+<i class="icon-tea-logo-iconasset-1">