Improve responsive styling

This commit is contained in:
Dilson's Pickles
2023-02-27 14:49:59 +00:00
parent 11d4d4c48c
commit ec11220ce8
3 changed files with 32 additions and 31 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>