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 (
-

{names.length} packages

+

Showing {names.length} packages

{names.map((name) => ( ))} @@ -27,9 +27,9 @@ function Bottles() { ]; return (
toggleExpanded(!expanded)}> -
-

{name}

-

+
+

{name}

+

{versions.length} version{versions.length === 1 ? "" : "s"} bottled

@@ -64,6 +64,9 @@ function Bottles() { )} +
+
+

); } 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 @@
-
+
+

Bottles

+
+
+
+
+ +
+ +
+
+
+
{{- 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; + + } + + } + + {{ 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 @@ +