fixed responsiveness issues

This commit is contained in:
liyunze 2023-06-18 19:38:18 +08:00
parent 8f88f1285b
commit 3865b64f7f
4 changed files with 15 additions and 8 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 312 KiB

After

Width:  |  Height:  |  Size: 203 KiB

View file

@ -40,7 +40,7 @@ import Layout from "../layouts/Layout.astro";
</div> </div>
<div class="w-full h-full flex flex-col text-white"> <div class="w-full h-full flex flex-col text-white">
<div <div
class="w-full h-1/3 bg-gray-900 flex flex-col justify-center items-center text-center" class="w-full h-fit py-5 sm:py-0 sm:h-1/3 bg-gray-900 flex flex-col justify-center items-center text-center"
> >
<h2 class="font-bold text-2xl mb-5"> <h2 class="font-bold text-2xl mb-5">
What are Coworking & Study streams? What are Coworking & Study streams?
@ -52,7 +52,7 @@ import Layout from "../layouts/Layout.astro";
</p> </p>
</div> </div>
<div <div
class="w-full h-1/3 flex flex-col justify-center items-center text-center" class="w-full h-fit py-5 sm:py-0 sm:h-1/3 flex flex-col justify-center items-center text-center"
> >
<h2 class="font-bold text-2xl mb-5"> <h2 class="font-bold text-2xl mb-5">
How can this guide benefit me? How can this guide benefit me?
@ -65,7 +65,7 @@ import Layout from "../layouts/Layout.astro";
</p> </p>
</div> </div>
<div <div
class="w-full h-1/3 bg-gray-900 flex flex-col justify-center items-center text-center" class="w-full h-fit py-5 sm:py-0 sm:h-1/3 bg-gray-900 flex flex-col justify-center items-center text-center"
> >
<h2 class="font-bold text-2xl mb-5"> <h2 class="font-bold text-2xl mb-5">
Why should I stream myself working? Why should I stream myself working?

View file

@ -15,13 +15,20 @@ import Layout from "../layouts/Layout.astro";
<div <div
class="flex flex-col justify-center items-center lg:items-start text-center lg:text-left" class="flex flex-col justify-center items-center lg:items-start text-center lg:text-left"
> >
<p class="text-xl mb-1">How to get started with</p> <p class="text-xl mb-1 mt-24 lg:mt-0">
How to get started with
</p>
<h1 class="text-2xl lg:text-4xl font-bold"> <h1 class="text-2xl lg:text-4xl font-bold">
Coworking Streams Coworking Streams
</h1> </h1>
<p class="text-lg lg:text-xl mt-2"> <p class="text-lg lg:text-xl mt-2">
For coworking & study streamers on Twitch For coworking & study streamers on Twitch
</p> </p>
<p class="text-lg mt-0 md:hidden">
<a href="/tips" class="hover:underline"
>Click on the navigation icon to get started!</a
>
</p>
</div> </div>
</div> </div>
<div <div

View file

@ -70,9 +70,9 @@ Do check beforehand the volumes for the alarms, as sometimes they may be startli
## Task list widget ## Task list widget
<div class="flex flex-row mb-5"> <div class="flex flex-col sm:flex-row mb-5">
<img src="/assets/moh-task-list.webp" class="h-[300px] rounded-md mr-5"> <img src="/assets/moh-task-list.webp" class="rounded-md mr-5 w-56 h-56 mb-5 sm:mb-0">
<img src="/assets/ryanpython-task-list.webp" class="h-[300px] rounded-md"> <img src="/assets/ryanpython-task-list.webp" class="rounded-md w-60 h-56">
</div> </div>
A task list widget is a great way to keep track of your tasks along with your viewers! For these overlays, you may only add 1 incomplete task at a time. You may only add another task once the previous task is completed. A task list widget is a great way to keep track of your tasks along with your viewers! For these overlays, you may only add 1 incomplete task at a time. You may only add another task once the previous task is completed.
@ -92,7 +92,7 @@ A task list widget is a great way to keep track of your tasks along with your vi
</li> </li>
</ul> </ul>
<img src="/assets/multi-task.webp" class="h-[300px] rounded-md mb-5 mt-10"> <img src="/assets/multi-task.webp" class="rounded-md mb-5 mt-10 w-68 h-56">
If you're interested in a task list overlay that allows you to add multiple tasks at a time, check out <a href="https://www.twitch.tv/RyanPython" target="_blank" class="underline hover:text-blue-400">RyanPython's stream</a>! If you're interested in a task list overlay that allows you to add multiple tasks at a time, check out <a href="https://www.twitch.tv/RyanPython" target="_blank" class="underline hover:text-blue-400">RyanPython's stream</a>!