mirror of
https://github.com/audacity/audacity.github.io.git
synced 2026-06-13 12:30:38 -05:00
Improve responsive styling
This commit is contained in:
@@ -1,12 +1,12 @@
|
||||
<section class="bg-gray-900">
|
||||
<div
|
||||
class="max-w-4xl mx-auto pt-16 pb-24 lg:pt-24 lg:pb-32 xl:px-0 px-3"
|
||||
class="max-w-4xl mx-auto pt-16 pb-24 lg:pt-24 lg:pb-32 xl:px-0 px-8"
|
||||
>
|
||||
<div class="space-y-4 text-center text-white">
|
||||
<h2 class="text-xl lg:text-2xl font-bold">New in Audacity 3.2</h2>
|
||||
</div>
|
||||
<iframe
|
||||
class="w-full aspect-video rounded-md shadow-xl mt-4 lg:mt-8 "
|
||||
class="w-full aspect-video rounded-md shadow-xl mt-8 lg:mt-8 "
|
||||
src="https://www.youtube.com/embed/DTRnDNR9LR8"
|
||||
title="YouTube video player"></iframe>
|
||||
</div>
|
||||
|
||||
@@ -4,8 +4,8 @@ import RealTimeEffects from "../../../assets/img/features/Spectrogram.png";
|
||||
---
|
||||
|
||||
<section class="bg-gray-100">
|
||||
<div class="grid lg:grid-cols-2 mx-auto max-w-6xl">
|
||||
<div class="flex flex-col justify-center lg:pr-16 px-3 mt-6 mb-8">
|
||||
<div class="grid sm:grid-cols-2 mx-auto max-w-xl sm:max-w-6xl pb-8 sm:pb-0">
|
||||
<div class="flex flex-col justify-center lg:pr-16 p-3 sm:p-6">
|
||||
<Badge badgeText="New in v3.2" />
|
||||
<h1 class="text-2xl lg:text-4xl font-bold mt-2">Real-time effects</h1>
|
||||
<p class="text-base lg:text-lg mt-2 lg:mt-6">
|
||||
@@ -30,6 +30,6 @@ import RealTimeEffects from "../../../assets/img/features/Spectrogram.png";
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="h-56 lg:h-auto row-start-1 lg:row-auto"><img class="object-cover w-full h-full" src={RealTimeEffects} /></div>
|
||||
<div class="flex h-56 sm:h-auto p-3 sm:p-0 row-start-1 sm:row-auto"><img class="rounded-sm object-cover w-full" src={RealTimeEffects} /></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -4,32 +4,33 @@ import ShareAudio from "../../../assets/img/features/ShareAudio.png";
|
||||
---
|
||||
|
||||
<section class="">
|
||||
<div class="grid lg:grid-cols-2 mx-auto max-w-6xl">
|
||||
<div class="h-56 lg:h-auto row-start-1 lg:row-auto"><img class="object-cover w-full h-full" src={ShareAudio} /></div>
|
||||
<div class="grid lg:grid-cols-2 mx-auto max-w-6xl">
|
||||
<div class="flex flex-col justify-center lg:pr-16 px-3 mt-6 mb-8">
|
||||
<Badge badgeText="New in v3.2" />
|
||||
<h1 class="text-2xl lg:text-4xl font-bold mt-2">Share to Audio.com</h1>
|
||||
<p class="text-base lg:text-lg mt-2 lg:mt-6">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
||||
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
||||
commodo consequat.
|
||||
</p>
|
||||
<a
|
||||
class="font-lg font-bold inline-flex gap-x-2 hover:underline text-blue-700 items-center mt-8 lg:mt-12"
|
||||
href="https://support.audacityteam.org/audio-editing/using-realtime-effects"
|
||||
target="_blank"
|
||||
>Find out more<svg
|
||||
class="fill-blue-700 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
>
|
||||
<path
|
||||
d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"
|
||||
></path></svg
|
||||
></a
|
||||
<div class="grid sm:grid-cols-2 mx-auto max-w-xl sm:max-w-6xl pb-8 sm:pb-0">
|
||||
<div class="flex h-56 sm:h-auto p-3 sm:p-0 lg:row-auto"><img class="rounded-sm object-cover w-full" src={ShareAudio} /></div>
|
||||
<div class="flex flex-col justify-center lg:pl-16 p-3 sm:p-6">
|
||||
<Badge badgeText="New in v3.2" />
|
||||
<h1 class="text-2xl lg:text-4xl font-bold mt-2">Share to audio.com</h1>
|
||||
<p class="text-base lg:text-lg mt-2 lg:mt-6">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
||||
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
||||
commodo consequat.
|
||||
</p>
|
||||
<a
|
||||
class="font-lg font-bold inline-flex gap-x-2 hover:underline text-blue-700 items-center mt-8 lg:mt-12"
|
||||
href="https://support.audacityteam.org/audio-editing/using-realtime-effects"
|
||||
target="_blank"
|
||||
>Find out more<svg
|
||||
class="fill-blue-700 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
>
|
||||
</div>
|
||||
<path
|
||||
d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"
|
||||
></path></svg
|
||||
></a
|
||||
>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user