diff --git a/apps/website/src/components/DownloadButton.css b/apps/website/src/components/DownloadButton.css index 854f65530..d7ed4cf8f 100644 --- a/apps/website/src/components/DownloadButton.css +++ b/apps/website/src/components/DownloadButton.css @@ -1,17 +1,27 @@ -.download-button { - &.big { - padding: 1em 2em; - margin: 1em 0; +a.download-button { + display: none; + align-items: center; + justify-content: center; + gap: 1em; + + @media (min-width: 720px) { + display: flex !important; } - + .platform { font-size: 0.75em; opacity: 0.75; } + + &.big { + padding: 0.5em 3.5em; + margin: 1em 0; + gap: m; + text-align: left; + + .platform { + display: block; + } + } } -@media (min-width: 720px) { - .download-button { - display: inline-block !important; - } -} \ No newline at end of file diff --git a/apps/website/src/components/DownloadButton.tsx b/apps/website/src/components/DownloadButton.tsx index c5b1d4d6a..da5786879 100644 --- a/apps/website/src/components/DownloadButton.tsx +++ b/apps/website/src/components/DownloadButton.tsx @@ -2,6 +2,7 @@ import { getRecommendedDownload } from "../download-helper"; import "./DownloadButton.css"; import Button from "./Button"; import downloadIcon from "../assets/boxicons/bx-arrow-in-down-square-half.svg?raw"; +import packageJson from "../../../../package.json" with { type: "json" }; interface DownloadButtonProps { big?: boolean; @@ -17,7 +18,10 @@ export default function DownloadButton({ big }: DownloadButtonProps) { iconSvg={downloadIcon} text={<> Download now{" "} - for {name} + {big + ? v{packageJson.version} for {name} + : for {name} + } } /> ) diff --git a/apps/website/src/pages/GetStarted/get-started.tsx b/apps/website/src/pages/GetStarted/get-started.tsx index 4b6d70074..3c6ba49b6 100644 --- a/apps/website/src/pages/GetStarted/get-started.tsx +++ b/apps/website/src/pages/GetStarted/get-started.tsx @@ -7,6 +7,7 @@ import Button, { Link } from "../../components/Button"; import Icon from "../../components/Icon"; import helpIcon from "../../assets/boxicons/bx-help-circle.svg?raw"; import "./get-started.css"; +import packageJson from "../../../../../package.json" with { type: "json" }; export default function DownloadPage() { const [ currentArch, setCurrentArch ] = useState(getArchitecture()); @@ -14,7 +15,7 @@ export default function DownloadPage() { return ( <> -
+
Architecture: