Skip to content

Add GitHub star count to the site #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
offyotto merged 2 commits into from
Aug 7, 2026
+81 −8
Merged

Add GitHub star count to the site #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
814a8f0
Style the star button and balance headings
offyotto Aug 7, 2026
79c7b53
Put the star count in the header and the closing CTA
offyotto Aug 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<!-- Everything this page needs is served from this origin, so the policy can
stay strict. If you ever add a webfont, analytics or an embed, widen the
matching directive below or the browser will silently block it. -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; media-src 'self'; script-src 'self'; style-src 'self'; font-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'none'; form-action 'none'; upgrade-insecure-requests">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; media-src 'self'; script-src 'self'; style-src 'self'; font-src 'self'; connect-src 'self' https://api.github.com; object-src 'none'; base-uri 'none'; form-action 'none'; upgrade-insecure-requests">
<title>Core-Monitor | Apple Silicon System Monitor and Fan Control for macOS</title>
<meta name="description" content="Core-Monitor is a free, open-source system monitor for Apple Silicon Macs. It reads CPU load, temperature, power draw, memory, battery and fan speed, and can hand you the fans when you want them. Nothing leaves the Mac.">
<meta name="application-name" content="Core-Monitor">
Expand Down Expand Up @@ -41,10 +41,10 @@
fetched at the same priority as the stylesheet rather than waiting for
the parser to reach the <img>. -->
<link rel="preload" as="image" href="images/ui/overview-v16.png?v=16" fetchpriority="high">
<link rel="stylesheet" href="styles.css?v=17">
<link rel="stylesheet" href="styles.css?v=18">
<!-- Type is set in the system UI font (SF Pro on macOS), so there are no
webfont requests and nothing about a visitor reaches a third party. -->
<script src="script.js?v=7" defer></script>
<script src="script.js?v=8" defer></script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
Expand Down Expand Up @@ -179,11 +179,14 @@
<a href="#faq">FAQ</a>
</nav>
<div class="header-actions">
<a class="icon-link" href="https://github.com/offyotto/Core-Monitor" aria-label="Core-Monitor on GitHub" title="Core-Monitor on GitHub">
<a class="star-btn" href="https://github.com/offyotto/Core-Monitor">
<picture>
<source media="(prefers-color-scheme: light)" srcset="images/site/github-mark.png">
<img src="images/site/github-mark-light.png" alt="" width="24" height="24">
<img src="images/site/github-mark-light.png" alt="" width="16" height="16">
</picture>
<span class="star-btn-label">Star</span>
<span class="star-btn-count" data-star-count>27</span>
<span class="visually-hidden">stars on GitHub</span>
</a>
<a class="btn btn-solid btn-sm" href="https://github.com/offyotto/Core-Monitor/releases/latest/download/Core-Monitor.dmg">Get the app</a>
</div>
Expand Down Expand Up @@ -274,7 +277,7 @@ <h2>Read only, until you decide otherwise</h2>
</ul>
</div>
<figure class="frame">
<img src="images/ui/cooling-v16.png?v=16" alt="Cooling screen showing two fans near 2,900 rpm, a custom curve mode, and a button that hands cooling back to macOS." loading="lazy" decoding="async">
<img src="images/ui/cooling-v16.png?v=16" alt="Cooling screen showing two fans near 2,900 rpm, a custom curve mode, and a button that hands cooling back to macOS." width="1192" height="884" loading="lazy" decoding="async">
</figure>
</div>
</section>
Expand Down Expand Up @@ -338,7 +341,7 @@ <h2 id="compare-title">How it stacks up</h2>
</div>
<div class="compare-wrap" tabindex="0" role="region" aria-labelledby="compare-title">
<table class="compare">
<caption>Written by me. Check each app&rsquo;s own site for its current feature list.</caption>
<caption>Written by the Core-Monitor developer. Check each app&rsquo;s own site for its current feature list.</caption>
<thead>
<tr>
<th scope="col">App</th>
Expand Down Expand Up @@ -446,7 +449,7 @@ <h2>Questions before you install</h2>
<h2>The sensors are already in your Mac. Go look at them.</h2>
<div class="cta-actions btn-group">
<a class="btn btn-solid" href="https://github.com/offyotto/Core-Monitor/releases/latest/download/Core-Monitor.dmg">Download for macOS</a>
<a class="btn btn-outline" href="https://github.com/offyotto/Core-Monitor">Star it on GitHub</a>
<a class="btn btn-outline" href="https://github.com/offyotto/Core-Monitor">Star it on GitHub<span class="btn-count" data-star-count>27</span></a>
</div>
</div>
</section>
Expand Down
70 changes: 70 additions & 0 deletions docs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,12 @@ img, video { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Headings are short enough that balancing them is cheap and stops a lone
word stranding on the last line. Body copy gets the looser "pretty" pass,
which only adjusts the final few lines. */
h1, h2, h3 { text-wrap: balance; }
.hero-text, .section-head p, .card p, .route > p { text-wrap: pretty; }

.wrap {
width: min(var(--max), calc(100% - 3rem));
margin: 0 auto;
Expand Down Expand Up @@ -307,6 +313,60 @@ p:last-child { margin-bottom: 0; }
.icon-link:hover { color: var(--text); background: var(--panel); }
.icon-link img { width: 24px; height: 24px; }

/* ---------- github star button ----------
An ordinary link to the repository that happens to carry the star count.
The number ships in the markup, so it is present with JavaScript blocked
and the button never changes width after load; script.js only refreshes
it. */

.star-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 40px;
padding: 0.35rem 0.45rem 0.35rem 0.7rem;
border: 1px solid var(--stroke);
border-radius: var(--radius-sm);
color: var(--text-dim);
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
.star-btn:hover {
color: var(--text);
border-color: var(--text-faint);
background: var(--panel);
text-decoration: none;
}
.star-btn img { width: 16px; height: 16px; }

.star-btn-count {
padding: 0.05rem 0.4rem;
border-radius: 5px;
background: var(--panel-raised);
color: var(--text);
font-variant-numeric: tabular-nums;
}

/* Same treatment for the count sitting inside the closing call to action. */
.btn-count {
margin-left: 0.1rem;
padding: 0.05rem 0.4rem;
border-radius: 5px;
background: var(--panel-raised);
font-size: 0.85em;
font-variant-numeric: tabular-nums;
}

@media (pointer: coarse) {
.star-btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
.star-btn { transition: none; }
}

/* ---------- hero ---------- */

.hero {
Expand Down Expand Up @@ -935,10 +995,20 @@ p:last-child { margin-bottom: 0; }
.hero { padding-bottom: 2.5rem; }
.header-actions { gap: 0.5rem; }
.header-actions .icon-link { display: none; }
.star-btn-label { display: none; }
.star-btn { padding-inline: 0.45rem; gap: 0.4rem; }
.btn-group .btn { flex: 1 1 auto; }
.lightbox { width: calc(100vw - 1.25rem); }
}

/* Narrower than this the star button starts shoving the download button off
the screen, and the download button is the one that matters here. The
count is still on the page: the closing call to action carries it. */

@media (max-width: 560px) {
.star-btn { display: none; }
}

/* ---------- print ---------- */

@media print {
Expand Down