Update responsive styling

This commit is contained in:
Dilson's Pickles
2023-03-29 17:06:00 +01:00
parent 6b14b5a524
commit c677ba470b
3 changed files with 5 additions and 5 deletions

View File

@@ -12,7 +12,7 @@ function DownloadButton(props) {
function renderButton(href) {
return (
<a
className={`flex flex-col flex-grow gap-1 py-3 px-8 items-center rounded justify-center text-center + ${
className={`flex flex-col flex-1 gap-1 py-3 items-center rounded justify-center text-center + ${
primary
? "bg-blue-700 hover:bg-blue-600 active:bg-blue-800 text-white rounded"
: "bg-white hover:bg-gray-200 text-blue-700"

View File

@@ -11,7 +11,7 @@ function DownloadMuseHubButton(props) {
function renderButton(href) {
return (
<a
className="flex flex-col flex-grow gap-1 py-3 px-4 items-center rounded justify-center border border-gray-200 text-blue-700 hover:bg-gray-100 hover:border-gray-300"
className="flex flex-col flex-1 gap-1 py-3 items-center rounded justify-center border border-gray-200 text-blue-700 hover:bg-gray-100 hover:border-gray-300 text-center"
href={href}
>
Audacity + free effects & samples

View File

@@ -5,13 +5,13 @@ import DownloadMuseHubButton from "../button/DownloadMuseHubButton";
---
<section>
<div class="mt-12 mx-auto max-w-md xl:max-w-xl px-3 lg:px-0">
<div class="mt-12 mx-auto max-w-md sm:max-w-xl px-3 lg:px-0">
<div
class="pt-12 pb-16 lg:pt-12 lg:pb-16 flex flex-col space-y-8 lg:space-y-8"
>
<div class="flex flex-col items-center text-center space-y-4">
<img class="w-16 xl:w-24" src={Audacity_Logo} />
<h1 class="text-2xl xl:text-4xl leading-snug font-bold text-gray-800">
<h1 class="text-2xl xl:text-3xl leading-snug font-bold text-gray-800">
The world's most popular audio editing and recording app
</h1>
</div>
@@ -25,7 +25,7 @@ import DownloadMuseHubButton from "../button/DownloadMuseHubButton";
<p class="text-gray-600 px-3">Latest version 3.2.4</p><a
href="https://github.com/audacity/audacity/releases/tag/Audacity-3.2.4"
target="_blank"
class="text-gray-600 px-3 underline">Read release notes</a
class="text-gray-600 px-3 underline hover:text-blue-700">Read release notes</a
>
</div>
</div>