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

Responsive designs

Browse Source
This commit is contained in:
Dilson's Pickles
2023-08-23 14:40:28 +10:00
parent 5109ed62ce
commit 09feb5c24b
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/card/OperatingSystemCard.jsx
View File

@@ -1,7 +1,7 @@
import React from "react";
function OperatingSystemCard(props) {
const { title, description } = props;
const { title, description, targetURL } = props;
function renderOSIcon(title) {
switch (title) {
@@ -55,7 +55,7 @@ function OperatingSystemCard(props) {
}
return (
<a href="/downloads/download-for-mac">
<a href={targetURL}>
<div class="bg-white border drop-shadow-md rounded-md p-6">
{renderOSIcon(title)}
<h3 class="text-2xl font-bold">{title}</h3>

10
src/pages/downloads.astro
View File

@@ -17,15 +17,15 @@ import "../styles/icons.css";
</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>
<div class="flex flex-col gap-4">
<OperatingSystemCard title="Windows" description="32 & 64 bit" />
<OperatingSystemCard title="Mac OS" description="64 bit intel" />
<OperatingSystemCard title="Linux" description="64 bit appimage" />
<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"/>
</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>
<div class="flex flex-col gap-6">
<div class="flex flex-col gap-6 mt-2">
<div>
<h3 class="text-lg font-bold">Manual download</h3>
<div class="gap-2">