From b02412ade55489a3d12cff47b9320bd99d499218 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Tue, 17 Sep 2024 14:49:23 +0500
Subject: [PATCH] refactor: change section title margins
---
index.html | 8 ++---
static/tailwind.css | 84 +++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 88 insertions(+), 4 deletions(-)
diff --git a/index.html b/index.html
index 01559da..a1d17d0 100644
--- a/index.html
+++ b/index.html
@@ -87,8 +87,8 @@
</div>
</div>
</div>
- <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-4xl font-bold text-center md:mt-24 sm:text-6xl">ABOUT ME</h1>
+ <div class="container min-h-screen px-2 py-6 overflow-hidden text-white scroll-mt-20 lg:scroll-mt-8 xl:scroll-mt-20" id="section_about">
+ <h1 class="mb-12 text-4xl font-bold text-center mt-28 sm:mt-32 md:mt-28 2xl:mt-20 sm:text-6xl">ABOUT ME</h1>
<div class="flex flex-wrap gap-8 mx-auto sm:justify-center w-fit">
<div class="flex flex-col w-[344px] sm:w-[416px]">
<div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-bg-gray">
@@ -144,8 +144,8 @@
</div>
</div>
</div>
- <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-4xl font-bold text-center md:mt-24 sm:text-6xl">LINKS</h1>
+ <div class="container min-h-screen py-6 overflow-hidden text-white scroll-mt-20 lg:scroll-mt-8 xl:scroll-mt-20" id="section_links">
+ <h1 class="mb-12 text-4xl font-bold text-center mt-28 sm:mt-32 md:mt-28 2xl:mt-20 sm:text-6xl">LINKS</h1>
<div class="flex flex-wrap justify-center gap-8 mx-auto w-fit">
<!-- Photo Links -->
<div class="flex flex-col w-[344px] sm:w-[416px] gap-1 sm:gap-4">
diff --git a/static/tailwind.css b/static/tailwind.css
index 35bd4ae..3d2c29c 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -686,6 +686,18 @@ video {
margin-top: 4rem;
}
+.mt-24 {
+ margin-top: 6rem;
+}
+
+.mt-32 {
+ margin-top: 8rem;
+}
+
+.mt-28 {
+ margin-top: 7rem;
+}
+
.block {
display: block;
}
@@ -828,6 +840,30 @@ video {
scroll-margin-top: 3.5rem;
}
+.scroll-mt-16 {
+ scroll-margin-top: 4rem;
+}
+
+.scroll-mt-20 {
+ scroll-margin-top: 5rem;
+}
+
+.scroll-mt-4 {
+ scroll-margin-top: 1rem;
+}
+
+.scroll-mt-8 {
+ scroll-margin-top: 2rem;
+}
+
+.scroll-mt-12 {
+ scroll-margin-top: 3rem;
+}
+
+.scroll-mt-24 {
+ scroll-margin-top: 6rem;
+}
+
.flex-col {
flex-direction: column;
}
@@ -1260,6 +1296,14 @@ body {
top: -6rem;
}
+ .sm\:mt-16 {
+ margin-top: 4rem;
+ }
+
+ .sm\:mt-32 {
+ margin-top: 8rem;
+ }
+
.sm\:block {
display: block;
}
@@ -1302,6 +1346,18 @@ body {
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\:scroll-mt-16 {
+ scroll-margin-top: 4rem;
+ }
+
+ .sm\:scroll-mt-24 {
+ scroll-margin-top: 6rem;
+ }
+
+ .sm\:scroll-mt-32 {
+ scroll-margin-top: 8rem;
+ }
+
.sm\:flex-row {
flex-direction: row;
}
@@ -1421,6 +1477,10 @@ body {
margin-top: 6rem;
}
+ .md\:mt-28 {
+ margin-top: 7rem;
+ }
+
.md\:inline {
display: inline;
}
@@ -1459,6 +1519,10 @@ body {
max-width: 53.75%;
}
+ .xl\:scroll-mt-20 {
+ scroll-margin-top: 5rem;
+ }
+
.xl\:flex-col {
flex-direction: column;
}
@@ -1501,6 +1565,22 @@ body {
width: 64px;
}
+ .lg\:scroll-mt-20 {
+ scroll-margin-top: 5rem;
+ }
+
+ .lg\:scroll-mt-10 {
+ scroll-margin-top: 2.5rem;
+ }
+
+ .lg\:scroll-mt-8 {
+ scroll-margin-top: 2rem;
+ }
+
+ .lg\:scroll-mt-12 {
+ scroll-margin-top: 3rem;
+ }
+
.lg\:gap-4 {
gap: 1rem;
}
@@ -1530,6 +1610,10 @@ body {
margin-top: -0px;
}
+ .\32xl\:mt-20 {
+ margin-top: 5rem;
+ }
+
.\32xl\:h-screen {
height: 100vh;
}