mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-04-05 15:54:34 +00:00
feat: add mobile responsive design
This commit is contained in:
parent
1a4ebe4fe1
commit
2158f3ae86
GPG key ID:
858E8EE696525EED
3 changed files with 608 additions and 146 deletions
248
index.html
248
index.html
|
|
@ -11,39 +11,39 @@
|
||||||
<body class="overflow-x-hidden bg-bg-black">
|
<body class="overflow-x-hidden bg-bg-black">
|
||||||
<header class="fixed top-0 left-0 right-0 z-10 w-full text-white opacity-[var(--header-opacity,0)] bg-bg-pink"
|
<header class="fixed top-0 left-0 right-0 z-10 w-full text-white opacity-[var(--header-opacity,0)] bg-bg-pink"
|
||||||
id="header">
|
id="header">
|
||||||
<div class="container flex items-center justify-between gap-1 mx-auto">
|
<div class="container flex flex-wrap gap-1 mx-auto sm:items-center sm:justify-between">
|
||||||
<a href="#section_landing">
|
<a href="#section_landing">
|
||||||
<div class="flex items-center gap-4 px-4 py-4">
|
<div class="flex items-center gap-4 px-4 py-2 sm:py-4">
|
||||||
<img src="./static/avatar_512.png" alt="" class="w-[64px] lg:w-[64px] 2xl:w-[64px]" />
|
<img src="./static/avatar_512.png" alt="" class="w-[64px] lg:w-[64px] 2xl:w-[64px]" />
|
||||||
<h1 class="text-xl font-semibold lg:text-2xl xl:text-3xl 2xl:text-4xl">KENTAI RADIQUUM</h1>
|
<h1 class="text-2xl font-semibold xl:text-3xl 2xl:text-4xl">KENTAI RADIQUUM</h1>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-1 px-4 mb-2 sm:px-0 sm:gap-2">
|
||||||
<a class="px-4 py-2 text-xl hover:underline bg-bg-gray" href="#section_about">ABOUT ME</a>
|
<a class="px-4 py-2 sm:text-xl hover:underline bg-bg-gray" href="#section_about">ABOUT ME</a>
|
||||||
<a class="px-4 py-2 text-xl hover:underline bg-bg-gray" href="#section_links">LINKS</a>
|
<a class="px-4 py-2 sm:text-xl hover:underline bg-bg-gray" href="#section_links">LINKS</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="container px-2 2xl:h-screen" id="section_landing">
|
<div class="container px-2 2xl:h-screen" id="section_landing">
|
||||||
<div class="text-white h-full xl:max-h-[40vh] 2xl:max-h-[60vh] relative">
|
<div class="text-white h-full xl:max-h-[40vh] 2xl:max-h-[60vh] relative">
|
||||||
<div class="bg-bg-pink w-full h-full xl:max-h-[40vh] 2xl:max-h-[60vh] max-w-[46.25%] absolute top-0 right-0 -z-10"></div>
|
<div class="bg-bg-pink w-full h-full xl:max-h-[40vh] 2xl:max-h-[60vh] max-w-[46.25%] absolute top-0 right-0 -z-10 hidden sm:block"></div>
|
||||||
<div class="flex items-center justify-center gap-12 px-8 py-8">
|
<div class="flex flex-col items-center justify-center gap-4 pt-8 pb-4 sm:gap-12 sm:py-8 sm:px-8 sm:flex-row">
|
||||||
<img src="./static/avatar_512.png" alt="" class="w-[256px] lg:w-[372px] 2xl:w-[512px]" />
|
<img src="./static/avatar_512.png" alt="" class="w-[256px] lg:w-[372px] 2xl:w-[512px]" />
|
||||||
<div>
|
<div class="p-4 bg-bg-pink sm:bg-transparent">
|
||||||
<h1 class="text-2xl font-semibold lg:text-4xl xl:text-6xl 2xl:text-8xl">KENTAI RADIQUUM</h1>
|
<h1 class="text-2xl font-semibold lg:text-4xl xl:text-6xl 2xl:text-8xl">KENTAI RADIQUUM</h1>
|
||||||
<p class="text-2xl font-medium lg:text-3xl xl:text-4xl 2xl:text-5xl">Async / Await • Red panda /
|
<p class="text-2xl font-light lg:text-3xl xl:text-4xl 2xl:text-5xl">Async / Await • Red panda /
|
||||||
Protogen</p>
|
Protogen</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap text-white h-full max-h-[40vh]">
|
<div class="flex flex-wrap text-white sm:h-full xl:max-h-[40vh]">
|
||||||
<div class="xl:max-w-[53.75%] bg-bg-gray py-4 w-full h-full">
|
<div class="xl:max-w-[53.75%] bg-bg-gray py-4 w-full sm:h-full">
|
||||||
<div class="flex items-center justify-between gap-2 px-4">
|
<div class="flex items-center justify-between gap-2 px-4">
|
||||||
<img src="./static/file_icon.svg" alt="" class="w-[30px] h-[37px]" />
|
<img src="./static/file_icon.svg" alt="" class="w-[30px] h-[37px]" />
|
||||||
<p class="text-3xl text-bg-pink">yaml</p>
|
<p class="text-2xl xl:text-3xl text-bg-pink">yaml</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-white w-full h-full max-h-[4px] my-4"></div>
|
<div class="bg-white w-full h-full max-h-[4px] my-4 border border-solid border-white"></div>
|
||||||
<div class="px-4 text-2xl bio">
|
<div class="px-4 text-base xl:text-2xl bio">
|
||||||
<p>BIO:</p>
|
<p>BIO:</p>
|
||||||
<p class="ml-4"> Furry: <span class="text-bg-pink">true</span></p>
|
<p class="ml-4"> Furry: <span class="text-bg-pink">true</span></p>
|
||||||
<p class="ml-4"> About: </p>
|
<p class="ml-4"> About: </p>
|
||||||
|
|
@ -56,77 +56,77 @@
|
||||||
href="https://last.fm/user/radiquum" id="track-name" target="_blank" referrerpolicy="origin">"LOADING . . ."</a></p>
|
href="https://last.fm/user/radiquum" id="track-name" target="_blank" referrerpolicy="origin">"LOADING . . ."</a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-end justify-end w-full xl:max-w-[45%] gap-4 p-8 font-medium text-4xl mb-[3%] xl:flex-col 2xl:flex-row">
|
<div class="flex items-center justify-center sm:items-end sm:justify-end w-full xl:max-w-[45%] gap-4 p-8 font-medium text-4xl mb-[3%] flex-col sm:flex-row xl:flex-col 2xl:flex-row">
|
||||||
<a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[320px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue"
|
<a class="border-black border-4 sm:hover:translate-x-2 sm:hover:-translate-y-2 shadow-transparent sm:hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[320px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue"
|
||||||
href="#section_about">ABOUT ME</a>
|
href="#section_about">ABOUT ME</a>
|
||||||
<a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[320px] 2xl:w-[300px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue"
|
<a class="border-black border-4 sm:hover:translate-x-2 sm:hover:-translate-y-2 shadow-transparent sm:hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[320px] 2xl:w-[300px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue"
|
||||||
href="#section_links">LINKS</a>
|
href="#section_links">LINKS</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="container min-h-screen py-6 text-white scroll-mt-12" id="section_about">
|
<div class="container min-h-screen px-2 py-6 overflow-hidden text-white scroll-mt-14 md:scroll-mt-20" id="section_about">
|
||||||
<h1 class="mt-16 mb-12 text-6xl font-bold text-center">ABOUT ME</h1>
|
<h1 class="mt-16 mb-12 text-4xl font-bold text-center md:mt-24 sm:text-6xl">ABOUT ME</h1>
|
||||||
<div class="flex flex-wrap justify-center gap-8 mx-auto w-fit">
|
<div class="flex flex-wrap gap-8 mx-auto sm:justify-center w-fit">
|
||||||
<div class="flex flex-col w-[416px]">
|
<div class="flex flex-col w-[344px] sm:w-[416px]">
|
||||||
<div class="relative w-[416px] h-[120px] flex justify-center items-center bg-bg-gray">
|
<div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-bg-gray">
|
||||||
<p class="font-bold text-4xl p-[8px]">Tech enthusiast</p>
|
<p class="font-bold text-3xl sm:text-4xl p-[8px]">Tech enthusiast</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative w-[416px] min-h-[196px] p-[16px] flex justify-center bg-bg-gray bg-opacity-50">
|
<div class="relative w-[344px] sm:w-[416px] sm:min-h-[196px] p-[16px] flex justify-center bg-bg-gray bg-opacity-50">
|
||||||
<p class="text-2xl font-light">I'm a tech enthusiast with a passion for software development. I love diving into code and exploring new software, though hardware fascinates me too.</p>
|
<p class="text-xl font-light sm:text-2xl">I'm a tech enthusiast with a passion for software development. I love diving into code and exploring new software, though hardware fascinates me too.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col gap-8 w-fit">
|
<div class="flex flex-col gap-8 w-fit">
|
||||||
<div class="flex flex-col w-[416px]">
|
<div class="flex flex-col w-[344px] sm:w-[416px]">
|
||||||
<div class="relative w-[416px] h-[120px] flex justify-center items-center bg-bg-gray">
|
<div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-bg-gray">
|
||||||
<p class="font-bold text-4xl p-[8px]">Self-Hosting stuff</p>
|
<p class="font-bold text-3xl sm:text-4xl p-[8px]">Self-Hosting stuff</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative w-[416px] min-h-[196px] p-[16px] flex justify-center bg-bg-gray bg-opacity-50">
|
<div class="relative w-[344px] sm:w-[416px] sm:min-h-[196px] p-[16px] flex justify-center bg-bg-gray bg-opacity-50">
|
||||||
<p class="text-2xl font-light">I'm really into self-hosting through my <a class="text-bg-pink hover:underline" href="https://home.wah.su" target="_blank" referrerpolicy="origin">wah.su</a> project, which helps me dive into server management and hosting platforms.</p>
|
<p class="text-xl font-light sm:text-2xl">I'm really into self-hosting through my <a class="text-bg-pink hover:underline" href="https://home.wah.su" target="_blank" referrerpolicy="origin">wah.su</a> project, which helps me dive into server management and hosting platforms.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col w-[416px]">
|
<div class="flex flex-col w-[344px] sm:w-[416px]">
|
||||||
<div class="relative w-[416px] h-[120px] flex justify-center items-center bg-green-500">
|
<div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-green-500">
|
||||||
<p class="font-bold text-4xl p-[8px]">Photographer</p>
|
<p class="font-bold text-3xl sm:text-4xl p-[8px]">Photographer</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative w-[416px] p-[16px] flex justify-center bg-green-500 bg-opacity-50">
|
<div class="relative w-[344px] sm:w-[416px] p-[16px] flex justify-center bg-green-500 bg-opacity-50">
|
||||||
<p class="text-2xl font-light">I’m also getting into <a class="text-bg-pink hover:underline" href="https://wah.su/photos" target="_blank" referrerpolicy="origin">photography</a> and excited to share my progress.</p>
|
<p class="text-xl font-light sm:text-2xl">I’m also getting into <a class="text-bg-pink hover:underline" href="https://wah.su/photos" target="_blank" referrerpolicy="origin">photography</a> and excited to share my progress.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col w-[416px] xl:-mt-[248px] 2xl:-mt-0">
|
<div class="flex flex-col w-[344px] sm:w-[416px] xl:-mt-[248px] 2xl:-mt-0">
|
||||||
<div class="relative w-[416px] h-[120px] flex justify-center items-center bg-orange-600">
|
<div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-orange-600">
|
||||||
<p class="font-bold text-4xl p-[8px]">Red Pandas admirer</p>
|
<p class="font-bold text-3xl sm:text-4xl p-[8px]">Red Pandas admirer</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative w-[416px] min-h-[196px] p-[16px] flex justify-center bg-orange-600 bg-opacity-50">
|
<div class="relative w-[344px] sm:w-[416px] sm:min-h-[196px] p-[16px] flex justify-center bg-orange-600 bg-opacity-50">
|
||||||
<p class="text-2xl font-light">One of my biggest loves is red pandas—I can’t get enough of them! I’ve been collecting red panda stickers and sharing them on the <a class="text-bg-pink hover:underline" href="https://wahs.wah.su" target="_blank" referrerpolicy="origin">Red Panda Stickers Telegram channel</a>. Plus, I’ve curated a <a class="text-bg-pink hover:underline" href="https://home.wah.su" target="_blank" referrerpolicy="origin">collection</a> of over 3000 red panda photos and videos.</p>
|
<p class="text-xl font-light sm:text-2xl">One of my biggest loves is red pandas—I can’t get enough of them! I’ve been collecting red panda stickers and sharing them on the <a class="text-bg-pink hover:underline" href="https://t.me/red_panda_stickers"target="_blank" referrerpolicy="origin">Red Panda Stickers Telegram channel</a>. Plus, I’ve curated a <a class="text-bg-pink hover:underline" href="https://wahs.wah.su" target="_blank" referrerpolicy="origin">collection</a> of over 3000 red panda photos and videos.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col gap-8 w-fit">
|
<div class="flex flex-col gap-8 w-fit">
|
||||||
<div class="flex flex-col w-[416px]">
|
<div class="flex flex-col w-[344px] sm:w-[416px]">
|
||||||
<div class="relative w-[416px] h-[120px] flex justify-center items-center bg-bg-pink">
|
<div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-bg-pink">
|
||||||
<p class="font-bold text-4xl p-[8px]">Music</p>
|
<p class="font-bold text-3xl sm:text-4xl p-[8px]">Music</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative w-[416px] min-h-[196px] p-[16px] flex justify-center bg-bg-pink bg-opacity-50">
|
<div class="relative w-[344px] sm:w-[416px] sm:min-h-[196px] p-[16px] flex justify-center bg-bg-pink bg-opacity-50">
|
||||||
<p class="text-2xl font-light">I listen a lot of various music, but mainly listen to EDM \ Happy Hardcore \ Tech \ Rock \ Alternative. By artist like: S3RL, Camellia, t+pazolite, BTMH, Saint Motel, and more...</p>
|
<p class="text-xl font-light sm:text-2xl">I listen a lot of various music, but mainly listen to EDM \ Happy Hardcore \ Tech \ Rock \ Alternative. By artist like: S3RL, Camellia, t+pazolite, BTMH, Saint Motel, and more...</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col w-[416px]">
|
<div class="flex flex-col w-[344px] sm:w-[416px]">
|
||||||
<div class="relative w-[416px] h-[120px] flex justify-center items-center bg-bg-blue">
|
<div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-bg-blue">
|
||||||
<p class="font-bold text-4xl p-[8px]">Contact</p>
|
<p class="font-bold text-3xl sm:text-4xl p-[8px]">Contact</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative w-[416px] p-[16px] flex justify-center bg-bg-blue bg-opacity-50">
|
<div class="relative w-[344px] sm:w-[416px] p-[16px] flex justify-center bg-bg-blue bg-opacity-50">
|
||||||
<p class="text-2xl font-light">Feel free to reach out anytime! Ways to contact me via instant messengers are available in <a class="text-bg-pink hover:underline" href="#section_links">links</a> section!</p>
|
<p class="text-xl font-light sm:text-2xl">Feel free to reach out anytime! Ways to contact me via instant messengers are available in <a class="text-bg-pink hover:underline" href="#section_links">links</a> section!</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="container min-h-screen py-6 text-white scroll-mt-12" id="section_links">
|
<div class="container min-h-screen py-6 overflow-hidden text-white scroll-mt-14 md:scroll-mt-20" id="section_links">
|
||||||
<h1 class="mt-16 mb-12 text-6xl font-bold text-center">LINKS</h1>
|
<h1 class="mt-16 mb-12 text-4xl font-bold text-center md:mt-24 sm:text-6xl">LINKS</h1>
|
||||||
<div class="flex flex-wrap justify-center gap-8 mx-auto w-fit">
|
<div class="flex flex-wrap justify-center gap-8 mx-auto w-fit">
|
||||||
<!-- Photo Links -->
|
<!-- Photo Links -->
|
||||||
<div class="flex flex-col w-[416px] gap-4">
|
<div class="flex flex-col w-[344px] sm:w-[416px] gap-1 sm:gap-4">
|
||||||
<div class="relative w-[416px] h-[376px] flex justify-end items-end overflow-hidden" id="photos-image">
|
<div class="relative w-[344px] sm:w-[416px] h-[376px] flex justify-end items-end overflow-hidden" id="photos-image">
|
||||||
<img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform duration-[var(--transform-duration,150ms)]" alt=""
|
<img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform duration-[var(--transform-duration,150ms)]" alt=""
|
||||||
src="./static/assets/photo_building.png" data-section-image="photos" data-slide="0" data-photo="photo_building" />
|
src="./static/assets/photo_building.png" data-section-image="photos" data-slide="0" data-photo="photo_building" />
|
||||||
<img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform duration-[var(--transform-duration,150ms)]" alt=""
|
<img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform duration-[var(--transform-duration,150ms)]" alt=""
|
||||||
|
|
@ -141,8 +141,8 @@
|
||||||
src="./static/assets/photo_trains.png" data-section-image="photos" data-slide="5" data-photo="photo_trains" />
|
src="./static/assets/photo_trains.png" data-section-image="photos" data-slide="5" data-photo="photo_trains" />
|
||||||
<p class="font-bold text-[40px] leading-[1] p-[8px]">PHOTOS</p>
|
<p class="font-bold text-[40px] leading-[1] p-[8px]">PHOTOS</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-1 sm:gap-4">
|
||||||
<a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[170px] sm:w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://pixey.org/radiquum" target="_blank" referrerpolicy="origin">
|
href="https://pixey.org/radiquum" target="_blank" referrerpolicy="origin">
|
||||||
<div class="flex flex-col justify-around w-full h-full p-2 text-black bg-white">
|
<div class="flex flex-col justify-around w-full h-full p-2 text-black bg-white">
|
||||||
<img class="w-20 h-20 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
|
<img class="w-20 h-20 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
|
||||||
|
|
@ -152,7 +152,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[170px] sm:w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://instafops.net/radiquwum" target="_blank" referrerpolicy="origin">
|
href="https://instafops.net/radiquwum" target="_blank" referrerpolicy="origin">
|
||||||
<div class="flex flex-col justify-around w-full h-full p-2 text-black bg-white">
|
<div class="flex flex-col justify-around w-full h-full p-2 text-black bg-white">
|
||||||
<img class="w-20 h-20 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
|
<img class="w-20 h-20 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
|
||||||
|
|
@ -162,7 +162,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a class="hover:border-bg-blue w-[416px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[344px] sm:w-[416px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://wah.su/photos" target="_blank" referrerpolicy="origin">
|
href="https://wah.su/photos" target="_blank" referrerpolicy="origin">
|
||||||
<div class="flex items-center justify-around w-full h-full p-2 text-black bg-white -z-10">
|
<div class="flex items-center justify-around w-full h-full p-2 text-black bg-white -z-10">
|
||||||
<img class="w-20 h-20" alt="" src="./static/assets/immich.png" />
|
<img class="w-20 h-20" alt="" src="./static/assets/immich.png" />
|
||||||
|
|
@ -175,62 +175,62 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Social Media Links -->
|
<!-- Social Media Links -->
|
||||||
<div class="flex flex-col w-[416px] gap-4">
|
<div class="flex flex-col w-[344px] sm:w-[416px] gap-1 sm:gap-4">
|
||||||
<div class="relative w-[416px] h-[180px] flex justify-end items-end bg-bg-blue">
|
<div class="relative w-[344px] sm:w-[416px] h-[180px] flex justify-end items-end bg-bg-blue">
|
||||||
<p class="font-bold text-[40px] leading-[1] p-[8px]">SOCIAL MEDIA</p>
|
<p class="font-bold text-[40px] leading-[1] p-[8px]">SOCIAL MEDIA</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-1 sm:gap-4">
|
||||||
<a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[170px] sm:w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://furry.engineer/@radiquum" target="_blank" referrerpolicy="origin">
|
href="https://furry.engineer/@radiquum" target="_blank" referrerpolicy="origin">
|
||||||
<div class="flex flex-col justify-around w-full h-full p-2 text-black bg-white">
|
<div class="flex flex-col justify-around w-full h-full p-2 text-black bg-white">
|
||||||
<img class="mx-auto w-14 h-14" alt="" src="./static/assets/logos--mastodon-icon.svg" />
|
<img class="w-16 h-16 mx-auto" alt="" src="./static/assets/logos--mastodon-icon.svg" />
|
||||||
<div class="flex flex-col justify-end gap-1">
|
<div class="flex flex-col justify-end gap-1">
|
||||||
<p class="font-medium text-[24px] leading-[1]">Mastodon</p>
|
<p class="font-medium text-[18px] sm:text-[24px] leading-[1]">Mastodon</p>
|
||||||
<p class="font-light text-[14px] leading-[1]">@radiquum@furry.engineer</p>
|
<p class="font-light text-[12px] sm:text-[14px] leading-[1]">@radiquum@furry.engineer</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[170px] sm:w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://bsky.app/profile/radiquum.wah.su" target="_blank" referrerpolicy="origin">
|
href="https://bsky.app/profile/radiquum.wah.su" target="_blank" referrerpolicy="origin">
|
||||||
<div class="flex flex-col justify-around w-full h-full p-2 text-black bg-white">
|
<div class="flex flex-col justify-around w-full h-full p-2 text-black bg-white">
|
||||||
<img class="w-16 mx-auto h-14" alt="" src="./static/assets/Bluesky_Logo.png" />
|
<img class="w-16 mx-auto h-14" alt="" src="./static/assets/Bluesky_Logo.png" />
|
||||||
<div class="flex flex-col gap-1">
|
<div class="flex flex-col gap-1">
|
||||||
<p class="font-medium text-[24px] leading-[1]">Bluesky</p>
|
<p class="font-medium text-[18px] sm:text-[24px] leading-[1]">Bluesky</p>
|
||||||
<p class="font-light text-[14px] leading-[1]">@radiquum.wah.su</p>
|
<p class="font-light text-[12px] sm:text-[14px] leading-[1]">@radiquum.wah.su</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[170px] sm:w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://x.com/radiquum" target="_blank" referrerpolicy="origin">
|
href="https://x.com/radiquum" target="_blank" referrerpolicy="origin">
|
||||||
<div class="flex flex-col justify-around w-full h-full p-2 text-black bg-white">
|
<div class="flex flex-col justify-around w-full h-full p-2 text-black bg-white">
|
||||||
<img class="mx-auto w-14 h-14" alt="" src="./static/assets/logos--twitter.svg" />
|
<img class="mx-auto w-14 h-14" alt="" src="./static/assets/logos--twitter.svg" />
|
||||||
<div class="flex flex-col justify-end gap-1">
|
<div class="flex flex-col justify-end gap-1">
|
||||||
<p class="font-medium text-[24px] leading-[1]">Twitter</p>
|
<p class="font-medium text-[18px] sm:text-[24px] leading-[1]">Twitter</p>
|
||||||
<p class="font-light text-[14px] leading-[1]">@radiquum</p>
|
<p class="font-light text-[12px] sm:text-[14px] leading-[1]">@radiquum</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[170px] sm:w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://vk.com/radiquum" target="_blank" referrerpolicy="origin">
|
href="https://vk.com/radiquum" target="_blank" referrerpolicy="origin">
|
||||||
<div class="flex flex-col justify-around w-full h-full p-2 text-black bg-white">
|
<div class="flex flex-col justify-around w-full h-full p-2 text-black bg-white">
|
||||||
<img class="mx-auto w-14 h-14" alt="" src="./static/assets/VKLogo.png" />
|
<img class="mx-auto w-14 h-14" alt="" src="./static/assets/VKLogo.png" />
|
||||||
<div class="flex flex-col gap-1">
|
<div class="flex flex-col gap-1">
|
||||||
<p class="font-medium text-[24px] leading-[1]">VKontakte</p>
|
<p class="font-medium text-[18px] sm:text-[24px] leading-[1]">VKontakte</p>
|
||||||
<p class="font-light text-[14px] leading-[1]">radiquum</p>
|
<p class="font-light text-[12px] sm:text-[14px] leading-[1]">radiquum</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Projects Links -->
|
<!-- Projects Links -->
|
||||||
<div class="flex flex-col w-[416px] gap-4">
|
<div class="flex flex-col w-[344px] sm:w-[416px] gap-1 sm:gap-4">
|
||||||
<div class="relative w-[416px] h-[180px] flex justify-end items-end bg-black">
|
<div class="relative w-[344px] sm:w-[416px] h-[180px] flex justify-end items-end bg-black">
|
||||||
<p class="font-bold text-[40px] leading-[1] p-[8px]">PROJECTS</p>
|
<p class="font-bold text-[40px] leading-[1] p-[8px]">PROJECTS</p>
|
||||||
</div>
|
</div>
|
||||||
<a class="hover:border-bg-blue w-[416px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[344px] sm:w-[416px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://anix.wah.su" target="_blank" referrerpolicy="origin">
|
href="https://anix.wah.su" target="_blank" referrerpolicy="origin">
|
||||||
<div class="relative flex items-end w-full h-full px-2 py-4">
|
<div class="relative flex items-end w-full h-full px-2 py-4">
|
||||||
<img class="absolute [filter:darken(10%)] inset-0 w-[416px] h-[180px] object-cover -z-10" alt=""
|
<img class="absolute [filter:darken(10%)] inset-0 w-[344px] sm:w-[416px] h-[180px] object-cover -z-10" alt=""
|
||||||
src="./static/assets/ANIX.png" />
|
src="./static/assets/ANIX.png" />
|
||||||
<div class="flex flex-col gap-1">
|
<div class="flex flex-col gap-1">
|
||||||
<p class="font-medium text-[24px] leading-[1]">Anix</p>
|
<p class="font-medium text-[24px] leading-[1]">Anix</p>
|
||||||
|
|
@ -239,8 +239,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-1 sm:gap-4">
|
||||||
<a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[170px] sm:w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://github.com/Radiquum/TG-Photos" target="_blank" referrerpolicy="origin">
|
href="https://github.com/Radiquum/TG-Photos" target="_blank" referrerpolicy="origin">
|
||||||
<div
|
<div
|
||||||
class="bg-[#0E1621] text-white w-full h-full p-2 flex flex-col justify-around relative overflow-hidden">
|
class="bg-[#0E1621] text-white w-full h-full p-2 flex flex-col justify-around relative overflow-hidden">
|
||||||
|
|
@ -253,11 +253,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[170px] sm:w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://radiquum.github.io/WordGen" target="_blank" referrerpolicy="origin">
|
href="https://radiquum.github.io/WordGen" target="_blank" referrerpolicy="origin">
|
||||||
<div
|
<div
|
||||||
class="bg-[#F5F5F5] text-black w-full h-full p-2 flex flex-col justify-around relative overflow-hidden">
|
class="bg-[#F5F5F5] text-black w-full h-full p-2 flex flex-col justify-around relative overflow-hidden">
|
||||||
<img class="absolute [filter:darken(10%)] top-0 left-0 right-0 w-[200px] object-cover"
|
<img class="absolute [filter:darken(10%)] top-0 left-0 right-0 w-[170px] sm:w-[200px] object-cover"
|
||||||
alt="" src="./static/assets/WordGen.png" />
|
alt="" src="./static/assets/WordGen.png" />
|
||||||
<div class="flex flex-col justify-end h-full gap-1">
|
<div class="flex flex-col justify-end h-full gap-1">
|
||||||
<p class="font-medium text-[24px] leading-[1]">WordGen</p>
|
<p class="font-medium text-[24px] leading-[1]">WordGen</p>
|
||||||
|
|
@ -266,7 +266,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[170px] sm:w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://github.com/Radiquum/furaffinity-dl" target="_blank" referrerpolicy="origin">
|
href="https://github.com/Radiquum/furaffinity-dl" target="_blank" referrerpolicy="origin">
|
||||||
<div
|
<div
|
||||||
class="relative flex flex-col justify-around w-full h-full p-2 overflow-hidden text-white bg-black">
|
class="relative flex flex-col justify-around w-full h-full p-2 overflow-hidden text-white bg-black">
|
||||||
|
|
@ -277,7 +277,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a class="hover:border-bg-blue w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[170px] sm:w-[200px] h-[180px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://github.com/Radiquum" target="_blank" referrerpolicy="origin">
|
href="https://github.com/Radiquum" target="_blank" referrerpolicy="origin">
|
||||||
<div class="flex flex-col justify-around w-full h-full p-2 text-white bg-black">
|
<div class="flex flex-col justify-around w-full h-full p-2 text-white bg-black">
|
||||||
<img class="mx-auto w-14 h-14" alt="" src="./static/assets/github-mark-white.png" />
|
<img class="mx-auto w-14 h-14" alt="" src="./static/assets/github-mark-white.png" />
|
||||||
|
|
@ -290,97 +290,97 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Contact and Friends links Links -->
|
<!-- Contact and Friends links Links -->
|
||||||
<div class="flex flex-col w-[416px] gap-8 xl:gap-4 xl:-mt-[196px] 2xl:-mt-0">
|
<div class="flex flex-col w-[344px] sm:w-[416px] gap-8 lg:gap-4 xl:-mt-[196px] 2xl:-mt-0">
|
||||||
<!-- Contact Links -->
|
<!-- Contact Links -->
|
||||||
<div class="flex flex-col gap-4">
|
<div class="flex flex-col gap-1 sm:gap-4">
|
||||||
<div class="relative w-[416px] h-[180px] flex justify-end items-end bg-bg-pink">
|
<div class="relative w-[344px] sm:w-[416px] h-[180px] flex justify-end items-end bg-bg-pink">
|
||||||
<p class="font-bold text-[40px] leading-[1] p-[8px]">CONTACT</p>
|
<p class="font-bold text-[40px] leading-[1] p-[8px]">CONTACT</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-1 sm:gap-4">
|
||||||
<a class="hover:border-bg-blue w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[170px] sm:w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://t.me/radiquum" target="_blank" referrerpolicy="origin">
|
href="https://t.me/radiquum" target="_blank" referrerpolicy="origin">
|
||||||
<div class="flex items-center w-full h-full gap-2 px-4 py-2 text-black bg-white">
|
<div class="flex items-center w-full h-full gap-2 px-2 py-2 text-black bg-white sm:px-4">
|
||||||
<img class="w-10 h-10" alt="" src="./static/assets/Telegram.png" />
|
<img class="w-8 h-8 sm:w-10 sm:h-10" alt="" src="./static/assets/Telegram.png" />
|
||||||
<div class="flex flex-col gap-1">
|
<div class="flex flex-col gap-1">
|
||||||
<p class="font-medium text-[24px] leading-[1]">Telegram</p>
|
<p class="font-medium text-[18px] sm:text-[24px] leading-[1]">Telegram</p>
|
||||||
<p class="font-light text-[14px] leading-[1]">@radiquum</p>
|
<p class="font-light text-[12px] sm:text-[14px] leading-[1]">@radiquum</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a class="hover:border-bg-blue w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[170px] sm:w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://matrix.to/#/@radiquum:wah.su" target="_blank" referrerpolicy="origin">
|
href="https://matrix.to/#/@radiquum:wah.su" target="_blank" referrerpolicy="origin">
|
||||||
<div class="flex items-center w-full h-full gap-2 px-4 py-2 text-black bg-white">
|
<div class="flex items-center w-full h-full gap-2 px-2 py-2 text-black bg-white sm:px-4">
|
||||||
<img class="w-10 h-10" alt="" src="./static/assets/matrix-favicon.svg" />
|
<img class="w-8 h-8 sm:w-10 sm:h-10" alt="" src="./static/assets/matrix-favicon.svg" />
|
||||||
<div class="flex flex-col gap-1">
|
<div class="flex flex-col gap-1">
|
||||||
<p class="font-medium text-[24px] leading-[1]">Matrix</p>
|
<p class="font-medium text-[18px] sm:text-[24px] leading-[1]">Matrix</p>
|
||||||
<p class="font-light text-[14px] leading-[1]">@radiquum:wah.su</p>
|
<p class="font-light text-[12px] sm:text-[14px] leading-[1]">@radiquum:wah.su</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a class="hover:border-bg-blue w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[170px] sm:w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://vk.com/radiquum" target="_blank" referrerpolicy="origin">
|
href="https://vk.com/radiquum" target="_blank" referrerpolicy="origin">
|
||||||
<div class="flex items-center w-full h-full gap-2 px-4 py-2 text-black bg-white">
|
<div class="flex items-center w-full h-full gap-2 px-2 py-2 text-black bg-white sm:px-4">
|
||||||
<img class="w-10 h-10" alt="" src="./static/assets/VKLogo.png" />
|
<img class="w-8 h-8 sm:w-10 sm:h-10" alt="" src="./static/assets/VKLogo.png" />
|
||||||
<div class="flex flex-col gap-1">
|
<div class="flex flex-col gap-1">
|
||||||
<p class="font-medium text-[24px] leading-[1]">VK</p>
|
<p class="font-medium text-[18px] sm:text-[24px] leading-[1]">VK</p>
|
||||||
<p class="font-light text-[14px] leading-[1]">radiquum</p>
|
<p class="font-light text-[12px] sm:text-[14px] leading-[1]">radiquum</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a class="w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="w-[170px] sm:w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
target="_blank" referrerpolicy="origin">
|
target="_blank" referrerpolicy="origin">
|
||||||
<div class="flex items-center w-full h-full gap-2 px-4 py-2 text-black bg-white">
|
<div class="flex items-center w-full h-full gap-2 px-2 py-2 text-black bg-white sm:px-4">
|
||||||
<img class="w-10" alt="" src="./static/assets/discord-mark-blue.png" />
|
<img class="w-8 sm:w-10" alt="" src="./static/assets/discord-mark-blue.png" />
|
||||||
<div class="flex flex-col gap-1">
|
<div class="flex flex-col gap-1">
|
||||||
<p class="font-medium text-[24px] leading-[1]">Discord</p>
|
<p class="font-medium text-[18px] sm:text-[24px] leading-[1]">Discord</p>
|
||||||
<p class="font-light text-[14px] leading-[1]">radiquum</p>
|
<p class="font-light text-[12px] sm:text-[14px] leading-[1]">radiquum</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Friends Links -->
|
<!-- Friends Links -->
|
||||||
<div class="flex flex-col gap-4">
|
<div class="flex flex-col gap-1 sm:gap-4">
|
||||||
<div class="relative w-[416px] h-[180px] flex justify-end items-end bg-black">
|
<div class="relative w-[344px] sm:w-[416px] h-[180px] flex justify-end items-end bg-black">
|
||||||
<p class="font-bold text-[40px] leading-[1] p-[8px] text-right">COLLECTIONS & FRIENDS</p>
|
<p class="font-bold text-[40px] leading-[1] p-[8px] text-right">COLLECTIONS & FRIENDS</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-1 sm:gap-4">
|
||||||
<a class="hover:border-bg-blue w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[170px] sm:w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://t.me/red_panda_stickers" target="_blank" referrerpolicy="origin">
|
href="https://t.me/red_panda_stickers" target="_blank" referrerpolicy="origin">
|
||||||
<div class="flex items-end w-full h-full gap-2 p-2 text-black bg-white">
|
<div class="flex items-end w-full h-full gap-2 p-2 text-black bg-white">
|
||||||
<div class="flex flex-col gap-1">
|
<div class="flex flex-col gap-1">
|
||||||
<p class="font-medium text-[18px] leading-[1]">Red Pandas Stickers</p>
|
<p class="font-medium text-[14px] sm:text-[18px] leading-[1]">Red Pandas Stickers</p>
|
||||||
<p class="font-light text-[14px] leading-[1]">Telegram channel with red panda
|
<p class="font-light text-[12px] sm:text-[14px] leading-[1]">Telegram channel with red panda
|
||||||
sticker packs</p>
|
sticker packs</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a class="hover:border-bg-blue w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[170px] sm:w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://wahs.wah.su" target="_blank" referrerpolicy="origin">
|
href="https://wahs.wah.su" target="_blank" referrerpolicy="origin">
|
||||||
<div class="flex items-end w-full h-full gap-2 p-2 text-black bg-white">
|
<div class="flex items-end w-full h-full gap-2 p-2 text-black bg-white">
|
||||||
<div class="flex flex-col gap-1">
|
<div class="flex flex-col gap-1">
|
||||||
<p class="font-medium text-[18px] leading-[1]">Red Panda Images</p>
|
<p class="font-medium text-[14px] sm:text-[18px] leading-[1]">Red Panda Images</p>
|
||||||
<p class="font-light text-[14px] leading-[1]">Collection with 3000+ Photos and
|
<p class="font-light text-[12px] sm:text-[14px] leading-[1]">Collection with 3000+ Photos and
|
||||||
Videos of a red pandas</p>
|
Videos of a red pandas</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a class="hover:border-bg-blue w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[170px] sm:w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://vk.com/blepstash" target="_blank" referrerpolicy="origin">
|
href="https://vk.com/blepstash" target="_blank" referrerpolicy="origin">
|
||||||
<div class="flex items-end w-full h-full gap-2 p-2 text-black bg-white">
|
<div class="flex items-end w-full h-full gap-2 p-2 text-black bg-white">
|
||||||
<div class="flex flex-col gap-1">
|
<div class="flex flex-col gap-1">
|
||||||
<p class="font-medium text-[18px] leading-[1]">blep stash</p>
|
<p class="font-medium text-[14px] sm:text-[18px] leading-[1]">blep stash</p>
|
||||||
<p class="font-light text-[14px] leading-[1]">VK Group of a photographer. City and
|
<p class="font-light text-[12px] sm:text-[14px] leading-[1]">VK Group of a photographer. City and
|
||||||
Trains photography</p>
|
Trains photography</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a class="hover:border-bg-blue w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
|
<a class="hover:border-bg-blue w-[170px] sm:w-[200px] h-[81px] border-transparent border-2 border-solid transition-[border-color]"
|
||||||
href="https://github.com/itc1205" target="_blank" referrerpolicy="origin">
|
href="https://github.com/itc1205" target="_blank" referrerpolicy="origin">
|
||||||
<div class="flex items-end w-full h-full gap-2 p-2 text-black bg-white">
|
<div class="flex items-end w-full h-full gap-2 p-2 text-black bg-white">
|
||||||
<div class="flex flex-col gap-1">
|
<div class="flex flex-col gap-1">
|
||||||
<p class="font-medium text-[18px] leading-[1]">itc1205</p>
|
<p class="font-medium text-[14px] sm:text-[18px] leading-[1]">itc1205</p>
|
||||||
<p class="font-light text-[14px] leading-[1]">Github profile of another furry
|
<p class="font-light text-[12px] sm:text-[14px] leading-[1]">Github profile of another furry
|
||||||
programmer</p>
|
programmer</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -560,6 +560,12 @@ video {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 360px) {
|
||||||
|
.container {
|
||||||
|
max-width: 360px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 640px) {
|
||||||
.container {
|
.container {
|
||||||
max-width: 640px;
|
max-width: 640px;
|
||||||
|
|
@ -664,10 +670,18 @@ video {
|
||||||
margin-top: 4rem;
|
margin-top: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mb-2 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.flex {
|
.flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.h-10 {
|
.h-10 {
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -712,8 +726,32 @@ video {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-screen {
|
.h-\[18\.5px\] {
|
||||||
height: 100vh;
|
height: 18.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-\[22px\] {
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-\[60px\] {
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-\[80px\] {
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-4 {
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-8 {
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-16 {
|
||||||
|
height: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.max-h-\[40vh\] {
|
.max-h-\[40vh\] {
|
||||||
|
|
@ -724,10 +762,6 @@ video {
|
||||||
max-height: 4px;
|
max-height: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.max-h-\[60vh\] {
|
|
||||||
max-height: 60vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.min-h-\[196px\] {
|
.min-h-\[196px\] {
|
||||||
min-height: 196px;
|
min-height: 196px;
|
||||||
}
|
}
|
||||||
|
|
@ -736,6 +770,14 @@ video {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.min-h-\[98px\] {
|
||||||
|
min-height: 98px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.min-h-\[100px\] {
|
||||||
|
min-height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
.w-10 {
|
.w-10 {
|
||||||
width: 2.5rem;
|
width: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -764,10 +806,6 @@ video {
|
||||||
width: 256px;
|
width: 256px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-\[300px\] {
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-\[30px\] {
|
.w-\[30px\] {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
}
|
}
|
||||||
|
|
@ -793,16 +831,112 @@ video {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.max-w-\[45\%\] {
|
.w-\[15px\] {
|
||||||
max-width: 45%;
|
width: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[20px\] {
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[208px\] {
|
||||||
|
width: 208px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[308px\] {
|
||||||
|
width: 308px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[372px\] {
|
||||||
|
width: 372px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[364px\] {
|
||||||
|
width: 364px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[354px\] {
|
||||||
|
width: 354px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[350px\] {
|
||||||
|
width: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[344px\] {
|
||||||
|
width: 344px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[164px\] {
|
||||||
|
width: 164px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[166px\] {
|
||||||
|
width: 166px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[165px\] {
|
||||||
|
width: 165px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-4 {
|
||||||
|
width: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-8 {
|
||||||
|
width: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[168px\] {
|
||||||
|
width: 168px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[170px\] {
|
||||||
|
width: 170px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[184px\] {
|
||||||
|
width: 184px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[180px\] {
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[174px\] {
|
||||||
|
width: 174px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[172px\] {
|
||||||
|
width: 172px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[171px\] {
|
||||||
|
width: 171px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[342px\] {
|
||||||
|
width: 342px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[340px\] {
|
||||||
|
width: 340px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[343px\] {
|
||||||
|
width: 343px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[17px\] {
|
||||||
|
width: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.max-w-\[46\.25\%\] {
|
.max-w-\[46\.25\%\] {
|
||||||
max-width: 46.25%;
|
max-width: 46.25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.max-w-\[53\.75\%\] {
|
.flex-1 {
|
||||||
max-width: 53.75%;
|
flex: 1 1 0%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.translate-y-\[var\(--transform-y\2c 0\)\] {
|
.translate-y-\[var\(--transform-y\2c 0\)\] {
|
||||||
|
|
@ -814,6 +948,14 @@ video {
|
||||||
scroll-margin-top: 3rem;
|
scroll-margin-top: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.scroll-mt-8 {
|
||||||
|
scroll-margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-mt-14 {
|
||||||
|
scroll-margin-top: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.flex-col {
|
.flex-col {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
@ -886,6 +1028,10 @@ video {
|
||||||
border-width: 4px;
|
border-width: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
.border-l-8 {
|
.border-l-8 {
|
||||||
border-left-width: 8px;
|
border-left-width: 8px;
|
||||||
}
|
}
|
||||||
|
|
@ -907,6 +1053,11 @@ video {
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.border-white {
|
||||||
|
--tw-border-opacity: 1;
|
||||||
|
border-color: rgb(255 255 255 / var(--tw-border-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
.bg-\[\#0E1621\] {
|
.bg-\[\#0E1621\] {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(14 22 33 / var(--tw-bg-opacity));
|
background-color: rgb(14 22 33 / var(--tw-bg-opacity));
|
||||||
|
|
@ -982,6 +1133,14 @@ video {
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.p-4 {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-1 {
|
||||||
|
padding: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.px-2 {
|
.px-2 {
|
||||||
padding-left: 0.5rem;
|
padding-left: 0.5rem;
|
||||||
padding-right: 0.5rem;
|
padding-right: 0.5rem;
|
||||||
|
|
@ -1025,6 +1184,22 @@ video {
|
||||||
padding-right: 0.5rem;
|
padding-right: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pb-4 {
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-4 {
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-8 {
|
||||||
|
padding-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pr-4 {
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.text-center {
|
.text-center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -1074,6 +1249,19 @@ video {
|
||||||
line-height: 1.75rem;
|
line-height: 1.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-base {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-\[12px\] {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-\[16px\] {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.font-bold {
|
.font-bold {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
@ -1230,6 +1418,250 @@ body {
|
||||||
--tw-shadow: var(--tw-shadow-colored);
|
--tw-shadow: var(--tw-shadow-colored);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 360px) {
|
||||||
|
.xm\:block {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.sm\:mb-12 {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:mt-16 {
|
||||||
|
margin-top: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:block {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:h-full {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:h-\[120px\] {
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:h-14 {
|
||||||
|
height: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:h-10 {
|
||||||
|
height: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:h-\[180px\] {
|
||||||
|
height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:min-h-\[196px\] {
|
||||||
|
min-height: 196px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:w-\[416px\] {
|
||||||
|
width: 416px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:w-\[200px\] {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:w-14 {
|
||||||
|
width: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:w-10 {
|
||||||
|
width: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:scroll-mt-12 {
|
||||||
|
scroll-margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:flex-row {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:flex-col {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:items-start {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:items-end {
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:items-center {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:justify-end {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:justify-center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:justify-between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:justify-around {
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:gap-12 {
|
||||||
|
gap: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:gap-1 {
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:gap-2 {
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:gap-4 {
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:gap-8 {
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:bg-transparent {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:p-2 {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:px-8 {
|
||||||
|
padding-left: 2rem;
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:py-8 {
|
||||||
|
padding-top: 2rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:py-6 {
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:py-4 {
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:px-0 {
|
||||||
|
padding-left: 0px;
|
||||||
|
padding-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:px-4 {
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:pb-\[unset\] {
|
||||||
|
padding-bottom: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:pt-\[unset\] {
|
||||||
|
padding-top: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:pr-0 {
|
||||||
|
padding-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:text-4xl {
|
||||||
|
font-size: 2.25rem;
|
||||||
|
line-height: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:text-6xl {
|
||||||
|
font-size: 3.75rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:text-2xl {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:text-xl {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:text-\[24px\] {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:text-\[14px\] {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:text-\[18px\] {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:font-medium {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:hover\:translate-x-2:hover {
|
||||||
|
--tw-translate-x: 0.5rem;
|
||||||
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:hover\:-translate-y-2:hover {
|
||||||
|
--tw-translate-y: -0.5rem;
|
||||||
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm\:hover\:shadow-md:hover {
|
||||||
|
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||||
|
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
||||||
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.md\:mt-20 {
|
||||||
|
margin-top: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:mt-24 {
|
||||||
|
margin-top: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:scroll-mt-20 {
|
||||||
|
scroll-margin-top: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:gap-4 {
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:font-medium {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: 1000px) {
|
@media (min-width: 1000px) {
|
||||||
.xl\:-mt-\[196px\] {
|
.xl\:-mt-\[196px\] {
|
||||||
margin-top: -196px;
|
margin-top: -196px;
|
||||||
|
|
@ -1239,22 +1671,34 @@ body {
|
||||||
margin-top: -248px;
|
margin-top: -248px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.xl\:max-h-\[30vh\] {
|
.xl\:h-\[37px\] {
|
||||||
max-height: 30vh;
|
height: 37px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xl\:h-full {
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.xl\:max-h-\[40vh\] {
|
.xl\:max-h-\[40vh\] {
|
||||||
max-height: 40vh;
|
max-height: 40vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.xl\:max-w-\[53\.75\%\] {
|
.xl\:w-\[30px\] {
|
||||||
max-width: 53.75%;
|
width: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xl\:w-\[416px\] {
|
||||||
|
width: 416px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.xl\:max-w-\[45\%\] {
|
.xl\:max-w-\[45\%\] {
|
||||||
max-width: 45%;
|
max-width: 45%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.xl\:max-w-\[53\.75\%\] {
|
||||||
|
max-width: 53.75%;
|
||||||
|
}
|
||||||
|
|
||||||
.xl\:flex-col {
|
.xl\:flex-col {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
@ -1263,6 +1707,10 @@ body {
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.xl\:gap-8 {
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.xl\:text-3xl {
|
.xl\:text-3xl {
|
||||||
font-size: 1.875rem;
|
font-size: 1.875rem;
|
||||||
line-height: 2.25rem;
|
line-height: 2.25rem;
|
||||||
|
|
@ -1277,6 +1725,11 @@ body {
|
||||||
font-size: 3.75rem;
|
font-size: 3.75rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.xl\:text-2xl {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
|
|
@ -1288,6 +1741,10 @@ body {
|
||||||
width: 64px;
|
width: 64px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lg\:gap-4 {
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.lg\:text-2xl {
|
.lg\:text-2xl {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
line-height: 2rem;
|
line-height: 2rem;
|
||||||
|
|
@ -1302,6 +1759,10 @@ body {
|
||||||
font-size: 2.25rem;
|
font-size: 2.25rem;
|
||||||
line-height: 2.5rem;
|
line-height: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lg\:font-medium {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1800px) {
|
@media (min-width: 1800px) {
|
||||||
|
|
@ -1317,6 +1778,10 @@ body {
|
||||||
max-height: 60vh;
|
max-height: 60vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.\32xl\:w-\[300px\] {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
.\32xl\:w-\[512px\] {
|
.\32xl\:w-\[512px\] {
|
||||||
width: 512px;
|
width: 512px;
|
||||||
}
|
}
|
||||||
|
|
@ -1325,10 +1790,6 @@ body {
|
||||||
width: 64px;
|
width: 64px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.\32xl\:w-\[300px\] {
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.\32xl\:flex-row {
|
.\32xl\:flex-row {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ module.exports = {
|
||||||
'bg-gray': '#484848'
|
'bg-gray': '#484848'
|
||||||
},
|
},
|
||||||
screens: {
|
screens: {
|
||||||
|
'xm': '360px',
|
||||||
// 'sm': '640px',
|
// 'sm': '640px',
|
||||||
// 'md': '768px',
|
// 'md': '768px',
|
||||||
// 'lg': '1024px',
|
// 'lg': '1024px',
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue