From c7eb07fb06ff46b10738acdbd36d5ec272d4687b Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Tue, 17 Sep 2024 14:35:46 +0500
Subject: [PATCH] refactor: change main block text sizing for mobile
---
index.html | 9 ++---
static/tailwind.css | 99 +++++++++++++++++++++++++--------------------
2 files changed, 59 insertions(+), 49 deletions(-)
diff --git a/index.html b/index.html
index bbcaae9..226f712 100644
--- a/index.html
+++ b/index.html
@@ -49,12 +49,11 @@
<div class="container px-2 2xl:h-screen" id="section_landing">
<div class="text-white h-full lg:max-h-[45vh] xl:max-h-[40vh] 2xl:max-h-[60vh] relative">
<div class="bg-bg-pink w-full h-full lg:max-h-[45vh] 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 flex-col items-center justify-center gap-4 pt-8 pb-4 sm:gap-12 sm:py-8 sm:px-8 sm:flex-row">
+ <div class="flex flex-col items-center justify-center gap-4 pt-8 pb-4 sm:justify-between 2xl:justify-center 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]" />
- <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>
- <p class="text-2xl font-light lg:text-3xl xl:text-4xl 2xl:text-5xl">Async / Await • Red panda /
- Protogen</p>
+ <div class="w-full p-4 bg-bg-pink sm:bg-transparent md:w-auto">
+ <h1 class="text-3xl font-semibold lg:text-4xl xl:text-6xl 2xl:text-8xl">KENTAI RADIQUUM</h1>
+ <p class="text-xl font-light lg:text-2xl xl:text-4xl 2xl:text-5xl">Async / Await <br class="md:hidden" /> <span class="hidden md:inline">•</span> Red panda / Protogen</p>
</div>
</div>
</div>
diff --git a/static/tailwind.css b/static/tailwind.css
index b7c1074..35bd4ae 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -686,6 +686,14 @@ video {
margin-top: 4rem;
}
+.block {
+ display: block;
+}
+
+.inline {
+ display: inline;
+}
+
.flex {
display: flex;
}
@@ -738,6 +746,10 @@ video {
height: 100%;
}
+.h-2 {
+ height: 0.5rem;
+}
+
.max-h-\[4px\] {
max-height: 4px;
}
@@ -799,6 +811,10 @@ video {
width: 100%;
}
+.w-2 {
+ width: 0.5rem;
+}
+
.max-w-\[46\.25\%\] {
max-width: 46.25%;
}
@@ -872,6 +888,10 @@ video {
scroll-behavior: smooth;
}
+.rounded-full {
+ border-radius: 9999px;
+}
+
.border {
border-width: 1px;
}
@@ -989,6 +1009,10 @@ video {
padding: 8px;
}
+.p-1 {
+ padding: 0.25rem;
+}
+
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
@@ -1153,10 +1177,6 @@ video {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
-.ease-in {
- transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-}
-
.\[filter\:darken\(10\%\)\] {
filter: darken(10%);
}
@@ -1244,6 +1264,10 @@ body {
display: block;
}
+ .sm\:inline {
+ display: inline;
+ }
+
.sm\:h-10 {
height: 2.5rem;
}
@@ -1397,8 +1421,16 @@ body {
margin-top: 6rem;
}
- .md\:h-screen {
- height: 100vh;
+ .md\:inline {
+ display: inline;
+ }
+
+ .md\:hidden {
+ display: none;
+ }
+
+ .md\:w-auto {
+ width: auto;
}
.md\:scroll-mt-20 {
@@ -1415,10 +1447,6 @@ body {
margin-top: -248px;
}
- .xl\:h-screen {
- height: 100vh;
- }
-
.xl\:max-h-\[40vh\] {
max-height: 40vh;
}
@@ -1435,6 +1463,10 @@ body {
flex-direction: column;
}
+ .xl\:justify-center {
+ justify-content: center;
+ }
+
.xl\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
@@ -1457,44 +1489,10 @@ body {
}
@media (min-width: 1024px) {
- @media (min-width: 1000px) {
- .lg\:xl\:max-h-\[40vh\] {
- max-height: 40vh;
- }
- }
-
- .lg\:h-screen {
- height: 100vh;
- }
-
- .lg\:max-h-\[40vh\] {
- max-height: 40vh;
- }
-
- .lg\:max-h-\[50vh\] {
- max-height: 50vh;
- }
-
- .lg\:max-h-\[50\%\] {
- max-height: 50%;
- }
-
- .lg\:max-h-\[40\%\] {
- max-height: 40%;
- }
-
- .lg\:max-h-\[45\%\] {
- max-height: 45%;
- }
-
.lg\:max-h-\[45vh\] {
max-height: 45vh;
}
- .lg\:max-h-\[30vh\] {
- max-height: 30vh;
- }
-
.lg\:w-\[372px\] {
width: 372px;
}
@@ -1507,6 +1505,10 @@ body {
gap: 1rem;
}
+ .lg\:p-4 {
+ padding: 1rem;
+ }
+
.lg\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
@@ -1516,6 +1518,11 @@ body {
font-size: 2.25rem;
line-height: 2.5rem;
}
+
+ .lg\:text-2xl {
+ font-size: 1.5rem;
+ line-height: 2rem;
+ }
}
@media (min-width: 1800px) {
@@ -1547,6 +1554,10 @@ body {
flex-direction: row;
}
+ .\32xl\:justify-center {
+ justify-content: center;
+ }
+
.\32xl\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;