Skip to content

Commit 7a24deb

Browse files
jgujerryjgujerry
committed
Update the nav buttons
1 parent 7acc39a commit 7a24deb

1 file changed

Lines changed: 185 additions & 29 deletions

File tree

‎index.html‎

Lines changed: 185 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
position: relative;
8181
padding: 0.125rem 0.25rem;
8282
transition: color 0.25s, transform 0.15s;
83-
}
83+
}
8484

8585
ul.cloud a:hover,
8686
ul.cloud a:focus {
@@ -107,41 +107,171 @@
107107
width: 100%;
108108
}
109109

110-
ul.cloud a:after {
111-
content: "🔗";
112-
font-size: 0.4em;
110+
ul.cloud a:after {
111+
content: "🔗";
112+
font-size: 0.4em;
113+
position: relative;
114+
top: -0.5em;
115+
margin-left: 2px;
116+
opacity: 0.5;
117+
}
118+
119+
/* Top navigation custom buttons */
120+
.navbar-nav .nav-link.btn {
121+
padding: 0.5rem 1rem;
122+
border-radius: 0.35rem;
123+
transition: transform 0.1s ease, box-shadow 0.1s ease;
124+
border: 2px solid;
125+
}
126+
127+
.navbar-nav .nav-link.btn-outline-success {
128+
border-color: #198754;
129+
color: #198754;
130+
}
131+
132+
.navbar-nav .nav-link.btn-outline-success:hover {
133+
background-color: #198754;
134+
color: #fff;
135+
transform: translateY(-1px);
136+
box-shadow: 0 2px 8px rgba(25, 135, 84, 0.3);
137+
}
138+
139+
.navbar-nav .nav-link.btn-outline-secondary {
140+
border-color: #6c757d;
141+
color: #6c757d;
142+
}
143+
144+
.navbar-nav .nav-link.btn-outline-secondary:hover {
145+
background-color: #6c757d;
146+
color: #fff;
147+
transform: translateY(-1px);
148+
box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
149+
}
150+
151+
.navbar-nav .nav-link.btn:hover {
152+
transform: translateY(-1px);
153+
}
154+
155+
/* Tag Cloud Styling */
156+
ul.cloud {
157+
gap: 0.8rem;
158+
}
159+
160+
ul.cloud li {
161+
margin: 0.4rem 0.2rem;
162+
}
163+
164+
ul.cloud a {
165+
display: inline-flex;
166+
align-items: center;
167+
justify-content: center;
168+
gap: 0.15rem;
169+
padding: 0.2rem 0.45rem;
170+
background-color: #fff;
171+
border: 2px solid #7cae8c; /* lighter green outline */
172+
border-radius: 8px;
173+
transition: all 0.25s ease;
174+
font-weight: 400;
175+
font-size: 0.65rem;
176+
text-decoration: none;
113177
position: relative;
114-
top: -0.5em;
115-
margin-left: 2px;
116-
opacity: 0.5;
117-
}
178+
color: #105028;
179+
}
118180

119-
ul.cloud a:hover:after {
120-
opacity: 1;
181+
ul.cloud a:hover,
182+
ul.cloud a:focus {
183+
background-color: #105028;
184+
color: #ffffff !important;
185+
border-color: #105028;
186+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
187+
}
188+
189+
ul.cloud a:hover .badge,
190+
ul.cloud a:focus .badge {
191+
background: rgba(255, 255, 255, 0.3);
192+
border-color: rgba(255, 255, 255, 0.6);
193+
color: #fff;
194+
}
195+
196+
ul.cloud a::before {
197+
content: "";
198+
display: none;
199+
}
200+
201+
ul.cloud a::after {
202+
content: "";
203+
display: none;
204+
}
205+
206+
ul.cloud a .badge {
207+
display: inline-block;
208+
background: linear-gradient(135deg, rgba(96, 120, 96, 0.85), rgba(112, 160, 112, 0.85)); /* darker green */
209+
color: #fff;
210+
padding: 0.1rem 0.3rem;
211+
border-radius: 6px;
212+
font-size: 0.6em;
213+
font-weight: 600;
214+
margin-left: 0.15rem;
215+
min-width: 1.2em;
216+
text-align: center;
217+
line-height: 1;
218+
vertical-align: middle;
219+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
121220
}
122221

123-
/* Reduce motion for users with preferences */
124222
@media (prefers-reduced-motion) {
125223
ul.cloud * {
126224
transition: none !important;
127225
}
128226
}
129227

228+
/* Responsive navbar brand text */
229+
.navbar-brand-text {
230+
color: #105028;
231+
font-weight: 300;
232+
margin-bottom: 0;
233+
font-size: 2.5rem; /* display-5 size */
234+
line-height: 1.2;
235+
}
236+
237+
@media (max-width: 991px) {
238+
.navbar-brand-text {
239+
font-size: 1.55rem; /* h3 size on tablet */
240+
}
241+
}
242+
243+
@media (max-width: 576px) {
244+
.navbar-brand-text {
245+
font-size: 1.25rem; /* h5 size on mobile */
246+
}
247+
}
248+
130249
</style>
131250
</head>
132251

133252
<body style="font-family:-apple-system,BlinkMacSystemFont,Roboto,Roboto Slab,Droid Serif,Segoe UI,system-ui,Arial,sans-serif;">
134-
<div id="PythonFrameworks" class="container">
135-
<h1 class="mt-5 mb-2 display-4">
136-
<img src="static/image/logo.png" style="height:60px;width:60px">
137-
<a href="/" style="color:#105028"><b>Python Frameworks</b></a>
138-
</h1>
139-
<div class="row mt-4">
140-
<div class="col-12">
141-
<a class="github-button" href="https://github.com/jgujerry/pythonframeworks" data-color-scheme="no-preference: light; light: light; dark: light;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star jgujerry/pythonframeworks on GitHub">Star</a>
142-
<a class="github-button" href="https://github.com/jgujerry/pythonframeworks/fork" data-color-scheme="no-preference: light; light: light; dark: light;" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork jgujerry/pythonframeworks on GitHub">Fork</a>
253+
<!-- top navigation bar -->
254+
<nav class="navbar navbar-expand navbar-light bg-white my-5" aria-label="Main navigation">
255+
<div class="container">
256+
<a class="navbar-brand d-flex align-items-center" href="/">
257+
<img src="static/image/logo.png" alt="Logo" height="60" class="me-2">
258+
<span class="navbar-brand-text">Python Frameworks</span>
259+
</a>
260+
<button class="navbar-toggler d-none" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
261+
<span class="navbar-toggler-icon"></span>
262+
</button>
263+
<div class="navbar-collapse show" id="navbarNav">
264+
<ul class="navbar-nav ms-auto align-items-center">
265+
<li class="nav-item me-2">
266+
<a id="star-btn" class="btn btn-outline-success nav-link" href="https://github.com/jgujerry/pythonframeworks" target="_blank" rel="noopener" aria-label="Star on GitHub">Star ★</a>
267+
</li>
268+
<li class="nav-item">
269+
<a id="fork-btn" class="btn btn-outline-secondary nav-link" href="https://github.com/jgujerry/pythonframeworks/fork" target="_blank" rel="noopener" aria-label="Fork on GitHub">Fork ⑂</a>
270+
</li>
271+
</ul>
272+
</div>
143273
</div>
144-
</div>
274+
</nav>
145275
</div>
146276

147277
<!-- Content -->
@@ -4105,17 +4235,17 @@ <h3><a href="https://github.com/frappe/erpnext" target="_blank">ERPNext</a></h3>
41054235

41064236
tagCloudContainer.innerHTML = '';
41074237

4108-
const minFontSize = 0.7;
4238+
const minFontSize = 0.6;
41094239
const maxFontSize = 0.9;
41104240
const maxCount = Math.max(...Object.values(categoryCounts));
41114241
const minCount = Math.min(...Object.values(categoryCounts));
41124242

41134243
const getColor = (count) => {
4114-
if (count >= maxCount * 0.8) return '#2c5282'; // Dark blue for highest counts
4115-
if (count >= maxCount * 0.6) return '#38a169'; // Green for high counts
4116-
if (count >= maxCount * 0.4) return '#805ad5'; // Purple for medium counts
4117-
if (count >= maxCount * 0.2) return '#d53f8c'; // Pink for low counts
4118-
return '#718096'; // Gray for lowest counts
4244+
if (count >= maxCount * 0.8) return '#105028'; // Dark green for highest counts
4245+
if (count >= maxCount * 0.6) return '#156741'; // Medium green for high counts
4246+
if (count >= maxCount * 0.4) return '#1d7d3a'; // Medium-light green for medium counts
4247+
if (count >= maxCount * 0.2) return '#2b8a4d'; // Light green for low counts
4248+
return '#3d9156'; // Lighter green for lowest counts
41194249
};
41204250

41214251
Object.entries(categoryCounts).forEach(([category, count]) => {
@@ -4125,11 +4255,21 @@ <h3><a href="https://github.com/frappe/erpnext" target="_blank">ERPNext</a></h3>
41254255
const listItem = document.createElement('li');
41264256
const link = document.createElement('a');
41274257
link.href = `#${category}`;
4128-
link.textContent = category;
4258+
4259+
// Create category name with count badge
4260+
const categoryText = document.createElement('span');
4261+
categoryText.textContent = category;
4262+
link.appendChild(categoryText);
4263+
4264+
const badge = document.createElement('span');
4265+
badge.className = 'badge';
4266+
badge.textContent = count;
4267+
link.appendChild(badge);
4268+
41294269
link.style.fontSize = `${weight}rem`;
4130-
// link.style.color = `#105028`;
41314270
link.style.color = getColor(count);
41324271
link.setAttribute('data-weight', count);
4272+
link.setAttribute('title', `${count} framework(s) in ${category}`);
41334273

41344274
listItem.appendChild(link);
41354275
tagCloudContainer.appendChild(listItem);
@@ -4140,6 +4280,22 @@ <h3><a href="https://github.com/frappe/erpnext" target="_blank">ERPNext</a></h3>
41404280
document.addEventListener('DOMContentLoaded', createTagCloud);
41414281

41424282
</script>
4283+
<script>
4284+
// update star/fork counts using GitHub API
4285+
fetch('https://api.github.com/repos/jgujerry/pythonframeworks')
4286+
.then(res => res.json())
4287+
.then(data => {
4288+
const star = document.getElementById('star-btn');
4289+
const fork = document.getElementById('fork-btn');
4290+
if (star && data.stargazers_count !== undefined) {
4291+
star.textContent = `Star ★ ${data.stargazers_count}`;
4292+
}
4293+
if (fork && data.forks_count !== undefined) {
4294+
fork.textContent = `Fork ⑂ ${data.forks_count}`;
4295+
}
4296+
})
4297+
.catch(err => console.error('GitHub API error', err));
4298+
</script>
41434299
<!-- Footer End -->
41444300
</body>
41454301

0 commit comments

Comments
 (0)