Skip to content

Commit b8c1fdf

Browse files
Bharath-codeBharath-code
committed
feat: Enhance documentation UI with Neo-Brutalist card styles, hero animations, back-to-top pulse, improved KBD styling, and accessibility attributes.
1 parent 040e03d commit b8c1fdf

File tree

1 file changed

+96
-25
lines changed

1 file changed

+96
-25
lines changed

‎docs/index.html‎

Lines changed: 96 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1026,6 +1026,76 @@
10261026
bottom: 90px;
10271027
}
10281028
}
1029+
1030+
/* Neo-Brutalist Card Enhancements */
1031+
.roadmap .card {
1032+
border: 2px solid var(--border);
1033+
box-shadow: 4px 4px 0px 0px var(--border);
1034+
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1035+
}
1036+
1037+
.roadmap .card:hover {
1038+
transform: translate(-2px, -2px);
1039+
box-shadow: 8px 8px 0px 0px var(--primary);
1040+
border-color: var(--primary);
1041+
}
1042+
1043+
/* Hero Animation */
1044+
.hero-animate {
1045+
opacity: 0;
1046+
transform: translateY(20px);
1047+
animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
1048+
}
1049+
1050+
@keyframes fadeInUp {
1051+
to {
1052+
opacity: 1;
1053+
transform: translateY(0);
1054+
}
1055+
}
1056+
1057+
.delay-1 {
1058+
animation-delay: 0.1s;
1059+
}
1060+
1061+
.delay-2 {
1062+
animation-delay: 0.2s;
1063+
}
1064+
1065+
.delay-3 {
1066+
animation-delay: 0.3s;
1067+
}
1068+
1069+
/* Back to Top Pulse */
1070+
.back-to-top:hover svg {
1071+
animation: bounce 0.5s ease-in-out infinite alternate;
1072+
}
1073+
1074+
@keyframes bounce {
1075+
from {
1076+
transform: translateY(0);
1077+
}
1078+
1079+
to {
1080+
transform: translateY(-3px);
1081+
}
1082+
}
1083+
1084+
/* KBD Styling override */
1085+
kbd {
1086+
background-color: #2D2D2D;
1087+
border: 1px solid #444;
1088+
border-radius: 4px;
1089+
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.1) inset;
1090+
color: #fff;
1091+
display: inline-block;
1092+
font-family: 'JetBrains Mono', monospace;
1093+
font-size: 0.85em;
1094+
font-weight: 700;
1095+
line-height: 1;
1096+
padding: 2px 4px;
1097+
white-space: nowrap;
1098+
}
10291099
</style>
10301100
</head>
10311101

@@ -1044,7 +1114,7 @@
10441114
<!-- Sponsor Button -->
10451115
<a href="https://buymeacoffee.com/iam_pbk" target="_blank" class="support-btn"
10461116
aria-label="Sponsor Project">
1047-
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
1117+
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
10481118
<path
10491119
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
10501120
</svg>
@@ -1053,31 +1123,32 @@
10531123

10541124
<div style="width: 1px; height: 24px; background: rgba(255,255,255,0.1);"></div>
10551125
<img src="https://img.shields.io/github/downloads/Bharath-code/git-scope/total?style=flat-square&color=7C3AED&label=Downloads"
1056-
alt="Downloads" height="20" class="nav-badge">
1126+
alt="Downloads" width="90" height="20" class="nav-badge">
10571127
<a href="https://github.com/Bharath-code/git-scope" target="_blank" style="text-decoration: none;"
10581128
id="nav-github-link">
10591129
<img src="https://img.shields.io/github/stars/Bharath-code/git-scope?style=social"
1060-
alt="GitHub Stars" height="20" class="nav-badge">
1130+
alt="GitHub Stars" width="80" height="20" class="nav-badge">
10611131
</a>
10621132
</div>
10631133
</nav>
10641134

10651135
<main>
10661136
<section class="hero">
1067-
<h1>Stop <span class="gradient-text">cd-ing.</span> <br> Start Coding.</h1>
1068-
<p class="subtitle">
1137+
<h1 class="hero-animate">Stop <span class="gradient-text">cd-ing.</span> <br> Start Coding.</h1>
1138+
<p class="subtitle hero-animate delay-1">
10691139
Git-Scope helps busy developers instantly find, filter, and manage their entire git universe so you
10701140
can stay in your
10711141
flow state without endlessly <code>cd</code>-ing through nested directories.
10721142
</p>
10731143

10741144
<!-- Hero CTAs -->
1075-
<div style="display: flex; gap: 1rem; justify-content: center; margin-bottom: 3rem; flex-wrap: wrap;">
1145+
<div style="display: flex; gap: 1rem; justify-content: center; margin-bottom: 3rem; flex-wrap: wrap;"
1146+
class="hero-animate delay-2">
10761147
<a href="https://github.com/Bharath-code/git-scope" target="_blank" class="hero-cta-btn"
10771148
id="hero-cta-star">
10781149
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
10791150
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
1080-
style="margin-right: 0.5rem;">
1151+
style="margin-right: 0.5rem;" aria-hidden="true">
10811152
<polygon
10821153
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
10831154
</polygon>
@@ -1108,7 +1179,7 @@ <h1>Stop <span class="gradient-text">cd-ing.</span> <br> Start Coding.</h1>
11081179
<svg id="copy-icon" width="16" height="16" viewBox="0 0 24 24" fill="none"
11091180
stroke="currentColor" stroke-width="2" stroke-linecap="round"
11101181
stroke-linejoin="round" class="feather feather-copy"
1111-
style="opacity: 0.5; margin-left: auto; min-width: 16px;">
1182+
style="opacity: 0.5; margin-left: auto; min-width: 16px;" aria-hidden="true">
11121183
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
11131184
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
11141185
</svg>
@@ -1131,7 +1202,7 @@ <h1>Stop <span class="gradient-text">cd-ing.</span> <br> Start Coding.</h1>
11311202
<svg id="script-copy-icon" width="16" height="16" viewBox="0 0 24 24" fill="none"
11321203
stroke="currentColor" stroke-width="2" stroke-linecap="round"
11331204
stroke-linejoin="round" class="feather feather-copy"
1134-
style="opacity: 0.5; margin-left: auto; min-width: 16px;">
1205+
style="opacity: 0.5; margin-left: auto; min-width: 16px;" aria-hidden="true">
11351206
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
11361207
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
11371208
</svg>
@@ -1185,11 +1256,11 @@ <h1>Stop <span class="gradient-text">cd-ing.</span> <br> Start Coding.</h1>
11851256
<div
11861257
style="margin-bottom: 2rem; margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; opacity: 0.8;">
11871258
<img src="https://img.shields.io/github/v/release/Bharath-code/git-scope?style=flat-square&color=8B5CF6&label=Latest%20Version"
1188-
alt="Latest Version">
1259+
alt="Latest Version" width="130" height="20">
11891260
<img src="https://img.shields.io/github/last-commit/Bharath-code/git-scope?style=flat-square&color=27272A"
1190-
alt="Last Commit">
1261+
alt="Last Commit" width="140" height="20">
11911262
<img src="https://img.shields.io/github/license/Bharath-code/git-scope?style=flat-square&color=27272A"
1192-
alt="License">
1263+
alt="License" width="80" height="20">
11931264
</div>
11941265

11951266
</section>
@@ -1286,39 +1357,39 @@ <h3><span style="color: var(--primary);">03.</span> Stats & Visuals</h3>
12861357
<h2 style="font-size: 2rem; margin-bottom: 2rem;">Vim-Style Efficiency</h2>
12871358
<div class="kb-cheat-sheet">
12881359
<div class="kb-key-group">
1289-
<span class="kb-key">j</span>
1360+
<kbd class="kb-key">j</kbd>
12901361
<span class="kb-desc">Down</span>
12911362
</div>
12921363
<div class="kb-key-group">
1293-
<span class="kb-key">k</span>
1364+
<kbd class="kb-key">k</kbd>
12941365
<span class="kb-desc">Up</span>
12951366
</div>
12961367
<div class="kb-key-group">
1297-
<span class="kb-key">/</span>
1368+
<kbd class="kb-key">/</kbd>
12981369
<span class="kb-desc">Search</span>
12991370
</div>
13001371
<div class="kb-key-group">
1301-
<span class="kb-key">f</span>
1372+
<kbd class="kb-key">f</kbd>
13021373
<span class="kb-desc">Filter</span>
13031374
</div>
13041375
<div class="kb-key-group">
1305-
<span class="kb-key">s</span>
1376+
<kbd class="kb-key">s</kbd>
13061377
<span class="kb-desc">Sort</span>
13071378
</div>
13081379
<div class="kb-key-group">
1309-
<span class="kb-key">c</span>
1380+
<kbd class="kb-key">c</kbd>
13101381
<span class="kb-desc">Clear</span>
13111382
</div>
13121383
<div class="kb-key-group">
1313-
<span class="kb-key">g</span>
1384+
<kbd class="kb-key">g</kbd>
13141385
<span class="kb-desc">graph</span>
13151386
</div>
13161387
<div class="kb-key-group">
1317-
<span class="kb-key">q</span>
1388+
<kbd class="kb-key">q</kbd>
13181389
<span class="kb-desc">Quit</span>
13191390
</div>
13201391
<div class="kb-key-group">
1321-
<span class="kb-key" style="width: auto; padding: 0 1rem;">Enter</span>
1392+
<kbd class="kb-key" style="width: auto; padding: 0 1rem;">Enter</kbd>
13221393
<span class="kb-desc">Open</span>
13231394
</div>
13241395
</div>
@@ -1376,19 +1447,19 @@ <h3><span class="card-icon">📊</span> Why GoatCounter?</h3>
13761447
<footer id="contact">
13771448
<div class="footer-links">
13781449
<a href="https://github.com/Bharath-code/" aria-label="GitHub Repository" target="_blank">
1379-
<svg height="32" width="32" viewBox="0 0 16 16" fill="currentColor">
1450+
<svg height="32" width="32" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
13801451
<path
13811452
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
13821453
</svg>
13831454
</a>
13841455
<a href="https://x.com/iam_pbk" aria-label="Twitter Profile" target="_blank">
1385-
<svg height="32" width="32" viewBox="0 0 24 24" fill="currentColor">
1456+
<svg height="32" width="32" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
13861457
<path
13871458
d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.84 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
13881459
</svg>
13891460
</a>
13901461
<a href="mailto:[email protected]" aria-label="Email Contact">
1391-
<svg height="32" width="32" viewBox="0 0 24 24" fill="currentColor">
1462+
<svg height="32" width="32" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
13921463
<path
13931464
d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
13941465
</svg>
@@ -1404,7 +1475,7 @@ <h3><span class="card-icon">📊</span> Why GoatCounter?</h3>
14041475
<!-- Back to Top Button -->
14051476
<button id="backToTop" class="back-to-top" aria-label="Back to Top">
14061477
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
1407-
stroke-linecap="round" stroke-linejoin="round">
1478+
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
14081479
<path d="M18 15l-6-6-6 6" />
14091480
</svg>
14101481
</button>

0 commit comments

Comments
 (0)