From 08bda95f88e9b563c5db0f71b53f110808840232 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Thu, 15 Dec 2022 15:24:51 -0500
Subject: [PATCH] Beautification; mobile optimization

---
 src/assets/scripts/bottles.jsx     | 11 +++++----
 src/layouts/page/bottles.html      | 38 ++++++++++++++++++++++++++++--
 src/layouts/partials/tea-icon.html |  1 +
 3 files changed, 44 insertions(+), 6 deletions(-)
 create mode 100644 src/layouts/partials/tea-icon.html

diff --git a/src/assets/scripts/bottles.jsx b/src/assets/scripts/bottles.jsx
index fef0b36..d7c4eb1 100644
--- a/src/assets/scripts/bottles.jsx
+++ b/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>
     );
   }
diff --git a/src/layouts/page/bottles.html b/src/layouts/page/bottles.html
index 48cb363..c53b705 100644
--- a/src/layouts/page/bottles.html
+++ b/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 }}
diff --git a/src/layouts/partials/tea-icon.html b/src/layouts/partials/tea-icon.html
new file mode 100644
index 0000000..2fd933c
--- /dev/null
+++ b/src/layouts/partials/tea-icon.html
@@ -0,0 +1 @@
+<i class="icon-tea-logo-iconasset-1">