Beautification; mobile optimization

This commit is contained in:
Thomas Smith 2022-12-15 15:24:51 -05:00
parent d07f1804db
commit 08bda95f88
3 changed files with 44 additions and 6 deletions

View file

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

View file

@ -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 }}

View file

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