From 2b9ed7a6094fb17f25d423254a9f3678b90dec00 Mon Sep 17 00:00:00 2001 From: Asian Programmer Date: Fri, 4 Jul 2025 15:25:08 +0600 Subject: [PATCH 01/11] Centered body content & Making mobile & tablet friendly UI --- main.css | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/main.css b/main.css index 591efd0..3c68fa3 100644 --- a/main.css +++ b/main.css @@ -3,8 +3,9 @@ src: url(fonts/Alegreya-Regular.ttf); } body { - width: 480px; + width: 90%; margin: auto; + max-width: 480px; position: relative; background: #181818; color: #EEE; @@ -14,6 +15,14 @@ body { margin-top: 35px; margin-bottom: 35px; } + +html { + display: flex; + min-height: 100vh; + flex-direction: column; + justify-content: center; +} + small { font-size: 16px; } From f2c07dd8b0a9a912412daeea3919afb4656aecc2 Mon Sep 17 00:00:00 2001 From: Asian Programmer Date: Fri, 4 Jul 2025 15:40:49 +0600 Subject: [PATCH 02/11] Optimized page load by reducing CSS selectors only - Removed unused CSS selectors from reset.css to minimize file size - Kept only the selectors that are actually used in the HTML document - This reduces unnecessary CSS parsing and improves page load performance --- reset.css | 61 +++++++++++++++---------------------------------------- 1 file changed, 16 insertions(+), 45 deletions(-) diff --git a/reset.css b/reset.css index e29c0f5..56b3cc8 100644 --- a/reset.css +++ b/reset.css @@ -1,48 +1,19 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; +html, body, +h1, h2, p, a, +ul, li, +small { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; + line-height: 1; } + +ul { + list-style: none; +} \ No newline at end of file From c6ac3d1e6d53fa37009c6c01b482fd2cb99013bd Mon Sep 17 00:00:00 2001 From: Asian Programmer Date: Fri, 4 Jul 2025 16:45:13 +0600 Subject: [PATCH 03/11] Distraction less update --- main.css | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/main.css b/main.css index 3c68fa3..70455a1 100644 --- a/main.css +++ b/main.css @@ -61,7 +61,43 @@ li::before { li { position: relative; margin-bottom: 4px; + transform-origin: left; + transition: all .3s cubic-bezier(.93,1.04,0,.82); } + +body li:hover { + transform: scale(1.3); +} + +body:has(li:hover) li { + opacity: .4; + filter: grayscale(1) blur(3px); +} + +li:hover, +li:hover a { + opacity: 1 !important; + filter: none !important; +} + +li:hover a { + text-decoration-color: #73c936; +} + +li:active a { + text-decoration-color: #f43841; +} + +body:has(#title:hover) .logo { + border-radius: 50%; +} + +body:has(#title:active) .logo { + border-radius: 0%; + transform: rotate(45deg); + background: #f43841; +} + a:link { color: #EEE; text-decoration: underline; From d2634736b0568cbaea3f3846ffc54f783c4d38f4 Mon Sep 17 00:00:00 2001 From: Asian Programmer Date: Fri, 4 Jul 2025 16:48:41 +0600 Subject: [PATCH 04/11] Auto scaling depending on device --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 9035901..0b62a96 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ + From d4e7aede68b59965a70040faddc5e39009ea4750 Mon Sep 17 00:00:00 2001 From: Asian Programmer Date: Fri, 4 Jul 2025 16:56:09 +0600 Subject: [PATCH 05/11] body width: 100% --- index.html | 1 - main.css | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/index.html b/index.html index 0b62a96..9035901 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,6 @@ - diff --git a/main.css b/main.css index 70455a1..e733120 100644 --- a/main.css +++ b/main.css @@ -3,7 +3,7 @@ src: url(fonts/Alegreya-Regular.ttf); } body { - width: 90%; + width: 1000%; margin: auto; max-width: 480px; position: relative; From 6ba8b9b8fa11e3359ec3de51938bfd8caec65386 Mon Sep 17 00:00:00 2001 From: Asian Programmer Date: Fri, 4 Jul 2025 17:08:54 +0600 Subject: [PATCH 06/11] hover and active on list pseudo element --- main.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/main.css b/main.css index e733120..a495898 100644 --- a/main.css +++ b/main.css @@ -150,13 +150,15 @@ h2 a:link { li:has(a:hover)::before, .logo:hover, -body:has(.logo:hover) li::before { +body:has(.logo:hover) li::before, +li:hover::before { border-radius: 50%; } li:has(a:active)::before, .logo:active, -body:has(.logo:active) li::before { +body:has(.logo:active) li::before, +li:active::before { background: #f43841; border-radius: 0%; transform: rotate(45deg); From b7d0e1c91839cffeec648df0fc17abce6fa8434f Mon Sep 17 00:00:00 2001 From: Asian Programmer Date: Fri, 4 Jul 2025 17:18:56 +0600 Subject: [PATCH 07/11] Nice pop animation --- main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main.css b/main.css index a495898..2901b9f 100644 --- a/main.css +++ b/main.css @@ -62,7 +62,7 @@ li { position: relative; margin-bottom: 4px; transform-origin: left; - transition: all .3s cubic-bezier(.93,1.04,0,.82); + transition: all .3s cubic-bezier(.41,1.94,0,1); } body li:hover { From bfcbdff554a32bdc27ca0cd939f1a159c1b01c13 Mon Sep 17 00:00:00 2001 From: Asian Programmer Date: Fri, 4 Jul 2025 17:25:59 +0600 Subject: [PATCH 08/11] Trun regular color to vareable --- main.css | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/main.css b/main.css index 2901b9f..c566bf5 100644 --- a/main.css +++ b/main.css @@ -2,6 +2,10 @@ font-family: Alegreya; src: url(fonts/Alegreya-Regular.ttf); } +:root { + --standard: #73c936; + --danger: var(--danger); +} body { width: 1000%; margin: auto; @@ -53,7 +57,7 @@ li::before { position: absolute; width: 10px; height: 10px; - background-color: #73c936; + background-color: var(--standard); top: 0.5rem; left: -21px; transition: all 0.2s; @@ -81,11 +85,11 @@ li:hover a { } li:hover a { - text-decoration-color: #73c936; + text-decoration-color: var(--standard); } li:active a { - text-decoration-color: #f43841; + text-decoration-color: var(--danger); } body:has(#title:hover) .logo { @@ -95,14 +99,14 @@ body:has(#title:hover) .logo { body:has(#title:active) .logo { border-radius: 0%; transform: rotate(45deg); - background: #f43841; + background: var(--danger); } a:link { color: #EEE; text-decoration: underline; text-decoration-thickness: 2px; - text-decoration-color: #73c936; + text-decoration-color: var(--standard); transition: text-decoration-color 0.2s; text-underline-offset: 2px; } @@ -110,7 +114,7 @@ a:visited { color: #EEE; text-decoration: underline; text-decoration-thickness: 2px; - text-decoration-color: #73c936; + text-decoration-color: var(--standard); transition: text-decoration-color 0.2s; text-underline-offset: 2px; } @@ -126,7 +130,7 @@ a:active { color: #EEE; text-decoration: underline; text-decoration-thickness: 2px; - text-decoration-color: #f43841; + text-decoration-color: var(--danger); transition: text-decoration-color 0.2s; text-underline-offset: 2px; } @@ -139,7 +143,7 @@ h2 a:link { .logo { border: none; position: absolute; - background: #73c936; + background: var(--standard); width: 45px; height: 45px; left: -70px; @@ -159,12 +163,12 @@ li:has(a:active)::before, .logo:active, body:has(.logo:active) li::before, li:active::before { - background: #f43841; + background: var(--danger); border-radius: 0%; transform: rotate(45deg); } body:has(.logo:active) a:link, body:has(.logo:active) a:visited { - text-decoration-color: #f43841; + text-decoration-color: var(--danger); } From 45266fac25199398ee07ec84c33e17a20e72a1f6 Mon Sep 17 00:00:00 2001 From: Asian Programmer Date: Fri, 4 Jul 2025 17:27:04 +0600 Subject: [PATCH 09/11] Trun regular color to vareable --- main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main.css b/main.css index c566bf5..ee53b2d 100644 --- a/main.css +++ b/main.css @@ -4,7 +4,7 @@ } :root { --standard: #73c936; - --danger: var(--danger); + --danger: var(#f43841); } body { width: 1000%; From 40191ca6f177556546373e8c0d4fe67d7d797c83 Mon Sep 17 00:00:00 2001 From: Asian Programmer Date: Fri, 4 Jul 2025 17:27:38 +0600 Subject: [PATCH 10/11] Fix color code erro --- main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main.css b/main.css index ee53b2d..e1f5f5a 100644 --- a/main.css +++ b/main.css @@ -4,7 +4,7 @@ } :root { --standard: #73c936; - --danger: var(#f43841); + --danger: #f43841; } body { width: 1000%; From c50af63c1e72893595c6bce9bc0bbd6f6fd02caa Mon Sep 17 00:00:00 2001 From: Asian Programmer Date: Fri, 4 Jul 2025 17:29:41 +0600 Subject: [PATCH 11/11] Making list item width fit --- main.css | 1 + 1 file changed, 1 insertion(+) diff --git a/main.css b/main.css index e1f5f5a..0c6dd73 100644 --- a/main.css +++ b/main.css @@ -63,6 +63,7 @@ li::before { transition: all 0.2s; } li { + width: fit-content; position: relative; margin-bottom: 4px; transform-origin: left;