Skip to content

Commit 15cf24d

Browse files
Bharath-codeBharath-code
committed
feat: Add responsive hero media layout with mobile reordering, a sticky footer with email form, and nav badge styling.
1 parent d841ec0 commit 15cf24d

File tree

1 file changed

+253
-65
lines changed

1 file changed

+253
-65
lines changed

‎docs/index.html‎

Lines changed: 253 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,13 @@
256256
}
257257
}
258258

259+
/* Nav Badges - Enforce size override global img settings */
260+
.nav-badge {
261+
height: 20px !important;
262+
width: auto;
263+
vertical-align: middle;
264+
}
265+
259266
/* Hero */
260267
.hero {
261268
padding: 6rem 0 4rem;
@@ -632,11 +639,55 @@
632639
color: var(--primary);
633640
}
634641

642+
/* Hero Media Layout & Reordering */
643+
.hero-media-layout {
644+
display: flex;
645+
flex-direction: column;
646+
gap: 3rem;
647+
max-width: 1000px;
648+
margin: 0 auto;
649+
}
650+
651+
.install-section {
652+
order: 1;
653+
/* Default: Install first */
654+
}
655+
656+
.demo-section {
657+
order: 2;
658+
/* Default: Demo second */
659+
margin: 0 !important;
660+
/* Reset existing margins */
661+
}
662+
635663
@media (max-width: 768px) {
636664
.container {
637665
padding: 0 1rem;
638666
}
639667

668+
.hero-media-layout {
669+
gap: 2rem;
670+
}
671+
672+
.install-section {
673+
order: 2;
674+
/* Mobile: Install second (containing only email form) */
675+
}
676+
677+
.demo-section {
678+
order: 1;
679+
/* Mobile: Demo first */
680+
}
681+
682+
/* Hide Install Grid on Mobile */
683+
.install-grid {
684+
display: none;
685+
}
686+
687+
#hero-install-options {
688+
display: none;
689+
}
690+
640691
nav {
641692
padding: 1rem;
642693
margin-top: 10px;
@@ -869,6 +920,112 @@
869920
font-size: 1.5rem;
870921
}
871922
}
923+
924+
925+
926+
/* Mobile Sticky Footer */
927+
.mobile-sticky-footer {
928+
display: none;
929+
position: fixed;
930+
bottom: 0;
931+
left: 0;
932+
width: 100%;
933+
background: rgba(14, 14, 18, 0.95);
934+
border-top: 1px solid var(--border);
935+
padding: 1rem;
936+
z-index: 1000;
937+
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
938+
backdrop-filter: blur(12px);
939+
-webkit-backdrop-filter: blur(12px);
940+
}
941+
942+
.mobile-footer-btn {
943+
display: flex;
944+
align-items: center;
945+
justify-content: center;
946+
width: 100%;
947+
background: #2ea44f;
948+
/* GitHub Green */
949+
color: white;
950+
font-weight: 600;
951+
padding: 0.8rem;
952+
border-radius: 8px;
953+
text-decoration: none;
954+
gap: 0.5rem;
955+
font-size: 1rem;
956+
box-shadow: 0 4px 12px rgba(46, 164, 79, 0.4);
957+
transition: transform 0.2s;
958+
}
959+
960+
.mobile-footer-btn:active {
961+
transform: scale(0.98);
962+
}
963+
964+
/* Mobile Email Reminder */
965+
.mobile-email-form {
966+
display: none;
967+
margin-top: 2rem;
968+
text-align: center;
969+
}
970+
971+
.email-form-container {
972+
display: flex;
973+
gap: 0.5rem;
974+
max-width: 100%;
975+
}
976+
977+
.email-input {
978+
flex: 1;
979+
background: var(--surface);
980+
border: 1px solid var(--border);
981+
color: var(--text-main);
982+
padding: 0.8rem;
983+
border-radius: 8px;
984+
font-family: 'Inter', sans-serif;
985+
font-size: 0.9rem;
986+
}
987+
988+
.email-input:focus {
989+
outline: none;
990+
border-color: var(--primary);
991+
}
992+
993+
.email-submit-btn {
994+
background: var(--surface-hover);
995+
border: 1px solid var(--border);
996+
color: var(--text-main);
997+
padding: 0.8rem 1.2rem;
998+
border-radius: 8px;
999+
cursor: pointer;
1000+
font-weight: 600;
1001+
transition: all 0.2s;
1002+
}
1003+
1004+
.email-submit-btn:hover {
1005+
border-color: var(--primary);
1006+
color: var(--primary);
1007+
}
1008+
1009+
@media (max-width: 768px) {
1010+
.mobile-sticky-footer {
1011+
display: block;
1012+
padding-bottom: max(1rem, env(safe-area-inset-bottom));
1013+
}
1014+
1015+
/* Add some padding to body so content isn't hidden behind footer */
1016+
body {
1017+
padding-bottom: 80px;
1018+
}
1019+
1020+
.mobile-email-form {
1021+
display: block;
1022+
}
1023+
1024+
/* Raise back to top button above footer */
1025+
.back-to-top {
1026+
bottom: 90px;
1027+
}
1028+
}
8721029
</style>
8731030
</head>
8741031

@@ -896,11 +1053,11 @@
8961053

8971054
<div style="width: 1px; height: 24px; background: rgba(255,255,255,0.1);"></div>
8981055
<img src="https://img.shields.io/github/downloads/Bharath-code/git-scope/total?style=flat-square&color=7C3AED&label=Downloads"
899-
alt="Downloads" height="20">
1056+
alt="Downloads" height="20" class="nav-badge">
9001057
<a href="https://github.com/Bharath-code/git-scope" target="_blank" style="text-decoration: none;"
9011058
id="nav-github-link">
9021059
<img src="https://img.shields.io/github/stars/Bharath-code/git-scope?style=social"
903-
alt="GitHub Stars" height="20">
1060+
alt="GitHub Stars" height="20" class="nav-badge">
9041061
</a>
9051062
</div>
9061063
</nav>
@@ -932,81 +1089,101 @@ <h1>Stop <span class="gradient-text">cd-ing.</span> <br> Start Coding.</h1>
9321089
</a>
9331090
</div>
9341091

935-
<!-- Simplified Install -->
936-
<div class="install-section" style="margin-bottom: 2rem;">
937-
938-
<div class="install-grid">
939-
<!-- Option 1: Homebrew -->
940-
<div class="install-option">
941-
<div class="install-heading">Homebrew</div>
942-
<div class="install-box" onclick="copyInstallCommand()"
943-
style="padding: 1rem; text-align: center; height: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
944-
<span class="prompt">$</span>
945-
<span class="cmd" style="font-size: 0.95rem; font-weight: 600;">brew tap
946-
Bharath-code/tap &&
947-
brew install git-scope</span>
948-
<svg id="copy-icon" width="16" height="16" viewBox="0 0 24 24" fill="none"
949-
stroke="currentColor" stroke-width="2" stroke-linecap="round"
950-
stroke-linejoin="round" class="feather feather-copy"
951-
style="opacity: 0.5; margin-left: auto; min-width: 16px;">
952-
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
953-
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
954-
</svg>
1092+
<!-- Hero Media Layout Wrapper -->
1093+
<div class="hero-media-layout">
1094+
1095+
<!-- Simplified Install -->
1096+
<div class="install-section">
1097+
1098+
<div class="install-grid">
1099+
<!-- Option 1: Homebrew -->
1100+
<div class="install-option">
1101+
<div class="install-heading">Homebrew</div>
1102+
<div class="install-box" onclick="copyInstallCommand()"
1103+
style="padding: 1rem; text-align: center; height: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
1104+
<span class="prompt">$</span>
1105+
<span class="cmd" style="font-size: 0.95rem; font-weight: 600;">brew tap
1106+
Bharath-code/tap &&
1107+
brew install git-scope</span>
1108+
<svg id="copy-icon" width="16" height="16" viewBox="0 0 24 24" fill="none"
1109+
stroke="currentColor" stroke-width="2" stroke-linecap="round"
1110+
stroke-linejoin="round" class="feather feather-copy"
1111+
style="opacity: 0.5; margin-left: auto; min-width: 16px;">
1112+
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
1113+
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
1114+
</svg>
1115+
</div>
9551116
</div>
956-
</div>
9571117

958-
<!-- Option 2: Script -->
959-
<div class="install-option">
960-
<div class="install-heading">Universal Installer</div>
961-
<div class="install-box" onclick="copyScriptCommand()"
962-
style="padding: 1rem; text-align: center; height: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
963-
<span class="prompt">$</span>
964-
<span class="cmd" style="font-size: 0.95rem; font-weight: 600; word-break: break-all;">
965-
<span class="desktop-only">curl -sSL
966-
https://raw.githubusercontent.com/Bharath-code/git-scope/main/scripts/install.sh
967-
| sh</span>
968-
<span class="mobile-only">curl -sSL .../scripts/install.sh | sh</span>
969-
</span>
970-
<svg id="script-copy-icon" width="16" height="16" viewBox="0 0 24 24" fill="none"
971-
stroke="currentColor" stroke-width="2" stroke-linecap="round"
972-
stroke-linejoin="round" class="feather feather-copy"
973-
style="opacity: 0.5; margin-left: auto; min-width: 16px;">
974-
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
975-
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
976-
</svg>
977-
<div id="script-copy-feedback"
978-
style="font-size: 0.75rem; color: #27C93F; opacity: 0; transition: opacity 0.2s; position: absolute; bottom: 4px; right: 10px;">
1118+
<!-- Option 2: Script -->
1119+
<div class="install-option">
1120+
<div class="install-heading">Universal Installer</div>
1121+
<div class="install-box" onclick="copyScriptCommand()"
1122+
style="padding: 1rem; text-align: center; height: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
1123+
<span class="prompt">$</span>
1124+
<span class="cmd"
1125+
style="font-size: 0.95rem; font-weight: 600; word-break: break-all;">
1126+
<span class="desktop-only">curl -sSL
1127+
https://raw.githubusercontent.com/Bharath-code/git-scope/main/scripts/install.sh
1128+
| sh</span>
1129+
<span class="mobile-only">curl -sSL .../scripts/install.sh | sh</span>
1130+
</span>
1131+
<svg id="script-copy-icon" width="16" height="16" viewBox="0 0 24 24" fill="none"
1132+
stroke="currentColor" stroke-width="2" stroke-linecap="round"
1133+
stroke-linejoin="round" class="feather feather-copy"
1134+
style="opacity: 0.5; margin-left: auto; min-width: 16px;">
1135+
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
1136+
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
1137+
</svg>
1138+
<div id="script-copy-feedback"
1139+
style="font-size: 0.75rem; color: #27C93F; opacity: 0; transition: opacity 0.2s; position: absolute; bottom: 4px; right: 10px;">
1140+
</div>
9791141
</div>
9801142
</div>
9811143
</div>
982-
</div>
9831144

984-
<div style="margin-top: 1rem;">
985-
<a href="https://github.com/Bharath-code/git-scope/releases" target="_blank"
986-
style="color: var(--text-muted); font-size: 0.9rem; text-decoration: underline;"
987-
id="hero-install-options">View Windows & Go Install</a>
988-
</div>
989-
</div>
1145+
<!-- Mobile Email Reminder -->
1146+
<div class="mobile-email-form">
1147+
<p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">
1148+
Save for later? Email yourself the link.
1149+
</p>
1150+
<form action="https://formspree.io/f/mpwvgrvg" method="POST" class="email-form-container">
1151+
<input type="email" name="email" class="email-input" placeholder="your@email.com"
1152+
required>
1153+
<button type="submit" class="email-submit-btn">Send</button>
1154+
</form>
1155+
</div>
9901156

991-
<!-- Hero Demo (Moved Up) -->
992-
<section class="demo-section" style="margin-top: 3rem; margin-bottom: 4rem;">
993-
<div class="window-frame">
994-
<div class="window-header">
995-
<div class="dot red"></div>
996-
<div class="dot yellow"></div>
997-
<div class="dot green"></div>
1157+
<div style="margin-top: 1rem;">
1158+
<a href="https://github.com/Bharath-code/git-scope/releases" target="_blank"
1159+
style="color: var(--text-muted); font-size: 0.9rem; text-decoration: underline;"
1160+
id="hero-install-options">View Windows & Go Install</a>
9981161
</div>
999-
<picture>
1000-
<source media="(max-width: 768px)" srcset="git-scope-demo-mobile-1.webp" type="image/webp">
1001-
<img src="git-scope-demo-1.webp" alt="Git Scope Demo" loading="eager" width="1200"
1002-
height="800" style="width: 100%; height: auto; display: block;" decoding="async">
1003-
</picture>
10041162
</div>
1005-
</section>
1163+
1164+
<!-- Hero Demo (Moved Up) -->
1165+
<section class="demo-section">
1166+
<div class="window-frame">
1167+
<div class="window-header">
1168+
<div class="dot red"></div>
1169+
<div class="dot yellow"></div>
1170+
<div class="dot green"></div>
1171+
</div>
1172+
<picture>
1173+
<source media="(max-width: 768px)" srcset="git-scope-demo-mobile-1.webp"
1174+
type="image/webp">
1175+
<img src="git-scope-demo-1.webp" alt="Git Scope Demo" loading="eager" width="1200"
1176+
height="800" style="width: 100%; height: auto; display: block;" decoding="async">
1177+
</picture>
1178+
</div>
1179+
</section>
1180+
1181+
</div>
1182+
<!-- End Hero Media Layout -->
10061183

10071184
<!-- Social Proof Badges -->
10081185
<div
1009-
style="margin-bottom: 4rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; opacity: 0.8;">
1186+
style="margin-bottom: 2rem; margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; opacity: 0.8;">
10101187
<img src="https://img.shields.io/github/v/release/Bharath-code/git-scope?style=flat-square&color=8B5CF6&label=Latest%20Version"
10111188
alt="Latest Version">
10121189
<img src="https://img.shields.io/github/last-commit/Bharath-code/git-scope?style=flat-square&color=27272A"
@@ -1255,6 +1432,17 @@ <h3><span class="card-icon">📊</span> Why GoatCounter?</h3>
12551432

12561433
<script src="main.js" defer></script>
12571434

1435+
<!-- Mobile Sticky Footer -->
1436+
<div class="mobile-sticky-footer">
1437+
<a href="https://github.com/Bharath-code/git-scope" target="_blank" class="mobile-footer-btn">
1438+
<svg height="20" width="20" viewBox="0 0 16 16" fill="currentColor">
1439+
<path
1440+
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" />
1441+
</svg>
1442+
Star on GitHub to try on Desktop
1443+
</a>
1444+
</div>
1445+
12581446

12591447

12601448
</body>

0 commit comments

Comments
 (0)