audacity/audacity.github.io
1
0
Fork 0
mirror of https://github.com/audacity/audacity.github.io.git synced 2026-06-13 03:38:11 -05:00
Code Issues 9 Packages Projects Releases Wiki Activity

Update responsive text

Browse Source
This commit is contained in:
Dilson's Pickles
2023-08-24 16:06:06 +10:00
parent 49472f8630
commit fd70c5b59f
5 changed files with 52 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/button/DownloadButton.jsx
View File

@@ -21,7 +21,7 @@ function DownloadButton() {
return (
<a className="flex flex-1 flex-col justify-center bg-blue-700 hover:bg-blue-600 rounded-md items-center text-center py-3" href={href} onClick={() => handleDownloadButtonClick()}>
<div className="flex gap-2 items-center">
<span className="icon icon-export text-white"></span>
<span className="icon icon-import text-white"></span>
<p className="button-text font-semibold text-white"> Download Audacity</p>
</div>
<p className="button-caption text-white opacity-80">Installs with no add-ons</p>

10
src/components/card/IconLinkCard.jsx
View File

@@ -5,13 +5,13 @@ function IconLinkCard(props) {
return (
<div className="col-span-12 sm:col-span-6 flex flex-1 flex-col gap-12 border rounded-lg drop-shadow-lg bg-white p-6 justify-between">
<div className="flex flex-col gap-2">
<span className={`icon icon-large ${icon} text-blue-700`}></span>
<h4 className="text-xl font-bold">{title}</h4>
<p className="text-xl">{description}</p>
<span className={`icon icon-medium ${icon} text-blue-700`}></span>
<h4>{title}</h4>
<p>{description}</p>
</div>
<a href={targetURL} className="text-blue-700 underline text-xl">
{linkText} <span className="icon icon-share text-blue-700"></span>
<a href={targetURL} className="hyperlink">
{linkText}
</a>
</div>
);

59
src/pages/downloads.astro
View File

@@ -5,52 +5,69 @@ import "../styles/icons.css";
---
<BaseLayout title="Audacity | Downloads">
<section class="mt-14 max-w-screen-xl mx-auto">
<section class="max-w-screen-xl mx-auto">
<div class="grid grid-cols-12 py-12 gap-y-12">
<div class="col-start-2 col-span-10 sm:text-center">
<h2 class="text-5xl font-bold">Downloads</h2>
<div class="mt-4">
Current version: 3.3.3 | <a class="text-blue-700 underline" href="https://github.com/audacity/audacity/releases/latest" target="_blank"
>View release notes</a
<h1>Downloads</h1>
<div class="inline-flex items-center mt-2">
<p>Current version: 3.3.3 |</p>
<a
class="hyperlink ml-2"
href="https://github.com/audacity/audacity/releases/latest"
target="_blank">View release notes</a
>
</div>
</div>
<div class="col-start-2 col-span-10 sm:col-start-2 sm:col-span-5">
<h4 class="text-gray-600">Download for</h4>
<small>Download for</small>
<div class="flex flex-col gap-4 mt-2">
<OperatingSystemCard title="Windows" description="32 & 64 bit" targetURL="/downloads/download-for-windows"/>
<OperatingSystemCard title="Mac OS" description="64 bit intel" targetURL="/downloads/download-for-mac"/>
<OperatingSystemCard title="Linux" description="64 bit appimage" targetURL="/downloads/download-for-linux"/>
<OperatingSystemCard
title="Windows"
description="32 & 64 bit"
targetURL="/downloads/download-for-windows"
/>
<OperatingSystemCard
title="Mac OS"
description="64 bit intel"
targetURL="/downloads/download-for-mac"
/>
<OperatingSystemCard
title="Linux"
description="64 bit appimage"
targetURL="/downloads/download-for-linux"
/>
</div>
</div>
<div class="col-start-2 col-span-10 sm:col-start-8 sm:col-span-4">
<h4 class="text-gray-600">Additional resources</h4>
<small>Additional resources</small>
<div class="flex flex-col gap-6 mt-2">
<div>
<h3 class="text-lg font-bold">Manual download</h3>
<h4>Manual download</h4>
<div class="gap-2">
<a href="/" class="text-blue-700 underline" href="/"
>Download Audacity manual</a
<a href="/" class="hyperlink" href="/">Download Audacity manual</a
>
<span class="align-middle icon icon-share text-blue-700"></span>
<span class="align-middle icon icon-share text-blue-600"></span>
</div>
</div>
<div>
<h3 class="text-lg font-bold">Ffmpeg library</h3>
<h4>Ffmpeg library</h4>
<div class="gap-2">
<a href="/" class="text-blue-700 underline" href="/"
<a href="/" class="hyperlink" href="/"
>Ffmpeg import/export library</a
>
<span class="align-middle icon icon-share text-blue-700"></span>
<span class="align-middle icon icon-share text-blue-600"></span>
</div>
</div>
<div>
<h3 class="text-lg font-bold">Older versions of Audacity</h3>
<h4>Older versions of Audacity</h4>
<div class="gap-2">
<a href="https://www.fosshub.com/Audacity.html" target="_blank" class="text-blue-700 underline" href="/"
>Download older versions from Fosshub</a
<a
href="https://www.fosshub.com/Audacity.html"
target="_blank"
class="hyperlink"
href="/">Download older versions from Fosshub</a
>
<span class="align-middle icon icon-share text-blue-700"></span>
<span class="align-middle icon icon-share text-blue-600"></span>
</div>
</div>
</div>

4
src/styles/icons.css
View File

@@ -30,6 +30,10 @@
content: "\EF24"
}
.icon-import:before {
content: "\F357"
}
.icon-mixer:before {
content: "\EF27"
}

8
src/styles/input.css
View File

@@ -4,20 +4,20 @@
@layer base {
h1 {
@apply text-3xl md:text-4xl lg:text-5xl text-gray-900 font-semibold
@apply text-3xl md:text-4xl lg:text-5xl text-gray-900 font-bold xl:leading-snug
}
h2 {
@apply text-2xl md:text-3xl lg:text-4xl text-gray-800 font-semibold
@apply text-2xl md:text-3xl lg:text-4xl text-gray-800 font-bold
}
h3 {
@apply text-xl md:text-2xl lg:text-3xl text-gray-700 font-semibold
@apply text-xl md:text-2xl lg:text-3xl text-gray-700 font-bold
}
h4 {
@apply text-base lg:text-lg text-gray-700 font-semibold
@apply text-base md:text-lg text-gray-700 font-bold xl:leading-snug
}
p {