mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 15:53:57 +00:00
improved mobile responsiveness
This commit is contained in:
liyunze
parent
2184a7ca9f
commit
2bd51de3ad
2 changed files with 6802 additions and 6734 deletions
13418
package-lock.json
generated
13418
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -270,16 +270,33 @@
|
||||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
font-bold
|
font-bold
|
||||||
transition-colors duration-300
|
transition-colors duration-300
|
||||||
|
hidden lg:block
|
||||||
hover:bg-white hover:text-blue-500
|
hover:bg-white hover:text-blue-500
|
||||||
">Visit site</a
|
">Visit site</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="lg:hidden flex justify-center items-center mb-10">
|
||||||
|
<a
|
||||||
|
href="https://coworking-guide.vercel.app/"
|
||||||
|
target="_blank"
|
||||||
|
class="
|
||||||
|
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
|
font-bold
|
||||||
|
transition-colors duration-300
|
||||||
|
hover:bg-white hover:text-blue-500
|
||||||
|
">View repository</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10"
|
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center"
|
||||||
>
|
>
|
||||||
<h2 class="text-3xl font-bold mb-5">Coworking Guide</h2>
|
<h2 class="text-3xl font-bold mb-5 text-center">
|
||||||
<p class="text-xl">
|
Coworking Guide
|
||||||
|
</h2>
|
||||||
|
<p
|
||||||
|
class="text-xl text-center lg:text-left lg:max-w-none max-w-lg"
|
||||||
|
>
|
||||||
A guide to coworking streams for Twitch streamers, covers
|
A guide to coworking streams for Twitch streamers, covers
|
||||||
wide range of topics from tips on how to get started with
|
wide range of topics from tips on how to get started with
|
||||||
setting up stream to how to grow your audience!
|
setting up stream to how to grow your audience!
|
||||||
|
|
@ -290,18 +307,32 @@
|
||||||
class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
|
class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10"
|
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center"
|
||||||
>
|
>
|
||||||
<h2 class="text-3xl font-bold mb-5 lg:text-right">
|
<h2 class="text-3xl font-bold mb-5 lg:text-right text-center">
|
||||||
Chat-Task-Tic Widget
|
Chat-Task-Tic Widget
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-xl lg:text-right">
|
<p
|
||||||
|
class="text-xl lg:text-right text-center lg:max-w-none max-w-lg"
|
||||||
|
>
|
||||||
Used by 100+ Twitch streamers, allow viewers and streamers
|
Used by 100+ Twitch streamers, allow viewers and streamers
|
||||||
to add their own tasks to the widget for accountability!
|
to add their own tasks to the widget for accountability!
|
||||||
Easy to setup and the customization possibilities are
|
Easy to setup and the customization possibilities are
|
||||||
endless!
|
endless!
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="lg:hidden flex justify-center items-center mb-10">
|
||||||
|
<a
|
||||||
|
href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
|
||||||
|
target="_blank"
|
||||||
|
class="
|
||||||
|
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
|
font-bold
|
||||||
|
transition-colors duration-300
|
||||||
|
hover:bg-white hover:text-blue-500
|
||||||
|
">View repository</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="image-container lg:w-1/2 aspect-video [perspective:200px] relative mb-3 lg:mb-0 md:mr-5 mr-0 lg:mr-0 ml-0 lg:ml-1"
|
class="image-container lg:w-1/2 aspect-video [perspective:200px] relative mb-3 lg:mb-0 md:mr-5 mr-0 lg:mr-0 ml-0 lg:ml-1"
|
||||||
>
|
>
|
||||||
|
|
@ -410,6 +441,7 @@
|
||||||
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
||||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
font-bold
|
font-bold
|
||||||
|
hidden lg:block
|
||||||
transition-colors duration-300
|
transition-colors duration-300
|
||||||
hover:bg-white hover:text-blue-500
|
hover:bg-white hover:text-blue-500
|
||||||
">View repository</a
|
">View repository</a
|
||||||
|
|
@ -417,6 +449,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20 mt-5 lg:mt-0"
|
class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20 mt-5 lg:mt-0"
|
||||||
>
|
>
|
||||||
|
|
@ -455,18 +488,35 @@
|
||||||
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
||||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
font-bold
|
font-bold
|
||||||
|
hidden lg:block
|
||||||
transition-colors duration-300
|
transition-colors duration-300
|
||||||
hover:bg-white hover:text-blue-500
|
hover:bg-white hover:text-blue-500
|
||||||
">Visit site</a
|
">Visit site</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="lg:hidden flex justify-center items-center mb-10">
|
||||||
|
<a
|
||||||
|
href="https://hex-guess.vercel.app/"
|
||||||
|
target="_blank"
|
||||||
|
class="
|
||||||
|
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
|
font-bold
|
||||||
|
transition-colors duration-300
|
||||||
|
hover:bg-white hover:text-blue-500
|
||||||
|
">View repository</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10"
|
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center"
|
||||||
>
|
>
|
||||||
<h2 class="text-3xl font-bold mb-5">HexGuess</h2>
|
<h2 class="text-3xl font-bold mb-5 text-center">HexGuess</h2>
|
||||||
<p class="text-xl">
|
<p
|
||||||
Decode colours in 5 attempts. Guess the hexadecimal code and receive instant feedback! Built with Next.JS, TailwindCSS and TypeScript.
|
class="text-xl text-center lg:text-left lg:max-w-none max-w-lg"
|
||||||
|
>
|
||||||
|
Decode colours in 5 attempts. Guess the hexadecimal code and
|
||||||
|
receive instant feedback! Built with Next.JS, TailwindCSS
|
||||||
|
and TypeScript.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -474,17 +524,32 @@
|
||||||
class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
|
class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10"
|
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center"
|
||||||
>
|
>
|
||||||
<h2 class="text-3xl font-bold mb-5 lg:text-right">
|
<h2 class="text-3xl font-bold mb-5 lg:text-right text-center">
|
||||||
ProductiVue
|
ProductiVue
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-xl lg:text-right">
|
<p
|
||||||
Boost your productivity streaming with ProductiVue,
|
class="text-xl text-center lg:text-right lg:max-w-none max-w-lg"
|
||||||
a sleek minimalism-focused desktop app for Twitch streamers.
|
>
|
||||||
Built using Vue, Tauri, Typescript and TailwindCSS.
|
Boost your productivity streaming with ProductiVue, a sleek
|
||||||
|
minimalism-focused desktop app for Twitch streamers. Built
|
||||||
|
using Vue, Tauri, Typescript and TailwindCSS.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="lg:hidden flex justify-center items-center mb-10">
|
||||||
|
<a
|
||||||
|
href="https://www.github.com/liyunze-coding/ProductiVue"
|
||||||
|
target="_blank"
|
||||||
|
class="
|
||||||
|
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
|
font-bold
|
||||||
|
hidden lg:block
|
||||||
|
transition-colors duration-300
|
||||||
|
hover:bg-white hover:text-blue-500
|
||||||
|
">View repository</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
|
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
|
||||||
>
|
>
|
||||||
|
|
@ -519,6 +584,7 @@
|
||||||
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
||||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
font-bold
|
font-bold
|
||||||
|
hidden lg:block
|
||||||
transition-colors duration-300
|
transition-colors duration-300
|
||||||
hover:bg-white hover:text-blue-500
|
hover:bg-white hover:text-blue-500
|
||||||
">View Repo</a
|
">View Repo</a
|
||||||
|
|
@ -534,16 +600,18 @@
|
||||||
.image-container .task-widget {
|
.image-container .task-widget {
|
||||||
transition: transform 0.5s ease-in-out;
|
transition: transform 0.5s ease-in-out;
|
||||||
}
|
}
|
||||||
.image-container:hover > img,
|
@media (min-width: 1025px) {
|
||||||
.image-container:hover > .task-widget {
|
.image-container:hover > img,
|
||||||
transform: rotateY(0deg) rotateX(0deg) translateZ(0px) translateX(-50%)
|
.image-container:hover > .task-widget {
|
||||||
translateY(-50%);
|
transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
|
||||||
}
|
translateX(-50%) translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
.image-container:hover > .visit-div {
|
.image-container:hover > .visit-div {
|
||||||
opacity: 100%;
|
opacity: 100%;
|
||||||
transition: opacity 0.3s ease-in-out;
|
transition: opacity 0.3s ease-in-out;
|
||||||
transition-delay: 0.3s;
|
transition-delay: 0.3s;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary {
|
.primary {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue