Skip to content

Commit 22f1085

Browse files
feat: Update to use consistent font-family (#208)
Co-authored-by: Jonah Lawrence <jonah@freshidea.com>
1 parent 97f8d5f commit 22f1085

File tree

6 files changed

+33
-40
lines changed

6 files changed

+33
-40
lines changed

src/card.php

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,6 @@ function generateCard(array $stats, array $params = null): string
126126

127127
return "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='isolation:isolate' viewBox='0 0 495 195' width='495px' height='195px'>
128128
<style>
129-
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
130129
@keyframes currstreak {
131130
0% { font-size: 3px; opacity: 0.2; }
132131
80% { font-size: 34px; opacity: 1; }
@@ -155,23 +154,23 @@ function generateCard(array $stats, array $params = null): string
155154
<!-- Total Contributions Big Number -->
156155
<g transform='translate(1,48)'>
157156
<rect width='163' height='50' stroke='none' fill='none'></rect>
158-
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Open Sans, Roboto, system-ui, sans-serif;font-weight:700;font-size:28px;font-style:normal;fill:{$theme["sideNums"]};stroke:none; opacity: 0; animation: fadein 0.5s linear forwards 0.6s;'>
157+
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:700;font-size:28px;font-style:normal;fill:{$theme["sideNums"]};stroke:none; opacity: 0; animation: fadein 0.5s linear forwards 0.6s;'>
159158
{$totalContributions}
160159
</text>
161160
</g>
162161
163162
<!-- Total Contributions Label -->
164163
<g transform='translate(1,84)'>
165164
<rect width='163' height='50' stroke='none' fill='none'></rect>
166-
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Open Sans, Roboto, system-ui, sans-serif;font-weight:400;font-size:14px;font-style:normal;fill:{$theme["sideLabels"]};stroke:none; opacity: 0; animation: fadein 0.5s linear forwards 0.7s;'>
165+
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:400;font-size:14px;font-style:normal;fill:{$theme["sideLabels"]};stroke:none; opacity: 0; animation: fadein 0.5s linear forwards 0.7s;'>
167166
Total Contributions
168167
</text>
169168
</g>
170169
171170
<!-- total contributions range -->
172171
<g transform='translate(1,114)'>
173172
<rect width='163' height='50' stroke='none' fill='none'></rect>
174-
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Open Sans, Roboto, system-ui, sans-serif;font-weight:400;font-size:12px;font-style:normal;fill:{$theme["dates"]};stroke:none; opacity: 0; animation: fadein 0.5s linear forwards 0.8s;'>
173+
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:400;font-size:12px;font-style:normal;fill:{$theme["dates"]};stroke:none; opacity: 0; animation: fadein 0.5s linear forwards 0.8s;'>
175174
{$totalContributionsRange}
176175
</text>
177176
</g>
@@ -180,23 +179,23 @@ function generateCard(array $stats, array $params = null): string
180179
<!-- Current Streak Big Number -->
181180
<g transform='translate(166,48)'>
182181
<rect width='163' height='50' stroke='none' fill='none'></rect>
183-
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Open Sans, Roboto, system-ui, sans-serif;font-weight:700;font-size:28px;font-style:normal;fill:{$theme["currStreakNum"]};stroke:none;animation: currstreak 0.6s linear forwards;'>
182+
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:700;font-size:28px;font-style:normal;fill:{$theme["currStreakNum"]};stroke:none;animation: currstreak 0.6s linear forwards;'>
184183
{$currentStreak}
185184
</text>
186185
</g>
187186
188187
<!-- Current Streak Label -->
189188
<g transform='translate(166,108)'>
190189
<rect width='163' height='50' stroke='none' fill='none'></rect>
191-
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Open Sans, Roboto, system-ui, sans-serif;font-weight:700;font-size:14px;font-style:normal;fill:{$theme["currStreakLabel"]};stroke:none;opacity: 0; animation: fadein 0.5s linear forwards 0.9s;'>
190+
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:700;font-size:14px;font-style:normal;fill:{$theme["currStreakLabel"]};stroke:none;opacity: 0; animation: fadein 0.5s linear forwards 0.9s;'>
192191
Current Streak
193192
</text>
194193
</g>
195194
196195
<!-- Current Streak Range -->
197196
<g transform='translate(166,145)'>
198197
<rect width='163' height='26' stroke='none' fill='none'></rect>
199-
<text x='81.5' y='21' stroke-width='0' text-anchor='middle' style='font-family:Open Sans, Roboto, system-ui, sans-serif;font-weight:400;font-size:12px;font-style:normal;fill:{$theme["dates"]};stroke:none;opacity: 0; animation: fadein 0.5s linear forwards 0.9s;'>
198+
<text x='81.5' y='21' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:400;font-size:12px;font-style:normal;fill:{$theme["dates"]};stroke:none;opacity: 0; animation: fadein 0.5s linear forwards 0.9s;'>
200199
{$currentStreakRange}
201200
</text>
202201
</g>
@@ -215,23 +214,23 @@ function generateCard(array $stats, array $params = null): string
215214
<!-- Longest Streak Big Number -->
216215
<g transform='translate(331,48)'>
217216
<rect width='163' height='50' stroke='none' fill='none'></rect>
218-
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Open Sans, Roboto, system-ui, sans-serif;font-weight:700;font-size:28px;font-style:normal;fill:{$theme["sideNums"]};stroke:none; opacity: 0; animation: fadein 0.5s linear forwards 1.2s;'>
217+
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:700;font-size:28px;font-style:normal;fill:{$theme["sideNums"]};stroke:none; opacity: 0; animation: fadein 0.5s linear forwards 1.2s;'>
219218
{$longestStreak}
220219
</text>
221220
</g>
222221
223222
<!-- Longest Streak Label -->
224223
<g transform='translate(331,84)'>
225224
<rect width='163' height='50' stroke='none' fill='none'></rect>
226-
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Open Sans, Roboto, system-ui, sans-serif;font-weight:400;font-size:14px;font-style:normal;fill:{$theme["sideLabels"]};stroke:none;opacity: 0; animation: fadein 0.5s linear forwards 1.3s;'>
225+
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:400;font-size:14px;font-style:normal;fill:{$theme["sideLabels"]};stroke:none;opacity: 0; animation: fadein 0.5s linear forwards 1.3s;'>
227226
Longest Streak
228227
</text>
229228
</g>
230229
231230
<!-- Longest Streak Range -->
232231
<g transform='translate(331,114)'>
233232
<rect width='163' height='50' stroke='none' fill='none'></rect>
234-
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Open Sans, Roboto, system-ui, sans-serif;font-weight:400;font-size:12px;font-style:normal;fill:{$theme["dates"]};stroke:none;opacity: 0; animation: fadein 0.5s linear forwards 1.4s;'>
233+
<text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:400;font-size:12px;font-style:normal;fill:{$theme["dates"]};stroke:none;opacity: 0; animation: fadein 0.5s linear forwards 1.4s;'>
235234
{$longestStreakRange}
236235
</text>
237236
</g>
@@ -256,7 +255,6 @@ function generateErrorCard(string $message, array $params = null): string
256255

257256
return "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='isolation:isolate' viewBox='0 0 495 195' width='495px' height='195px'>
258257
<style>
259-
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
260258
a {
261259
fill: {$theme["dates"]};
262260
}
@@ -275,7 +273,7 @@ function generateErrorCard(string $message, array $params = null): string
275273
<!-- Error Label -->
276274
<g transform='translate(166,108)'>
277275
<rect width='163' height='50' stroke='none' fill='none'></rect>
278-
<text x='81.5' y='50' dy='0.25em' stroke-width='0' text-anchor='middle' style='font-family:Open Sans, Roboto, system-ui, sans-serif;font-weight:400;font-size:14px;font-style:normal;fill:{$theme["sideLabels"]};stroke:none;'>
276+
<text x='81.5' y='50' dy='0.25em' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:400;font-size:14px;font-style:normal;fill:{$theme["sideLabels"]};stroke:none;'>
279277
{$message}
280278
</text>
281279
</g>
@@ -304,7 +302,7 @@ function generateErrorCard(string $message, array $params = null): string
304302
* Converts an SVG card to a PNG image
305303
*
306304
* @param string $svg The SVG for the card as a string
307-
*
305+
*
308306
* @return string The generated PNG data
309307
*
310308
* @throws ImagickException

src/demo/css/style.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ html {
4444

4545
body {
4646
background: var(--background);
47-
font-family: "Open Sans", Roboto, Arial, sans-serif;
47+
font-family: Segoe UI, Ubuntu, sans-serif;
4848
padding-top: 10px;
4949
color: var(--text);
5050
}
@@ -300,4 +300,4 @@ textarea#exportedPhp {
300300
width: 100%;
301301
resize: vertical;
302302
height: 100px;
303-
}
303+
}

src/demo/index.php

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,6 @@ function gtag() {
1919
gtag('config', 'G-48CYVH0XEF');
2020
</script>
2121
<title>GitHub Readme Streak Stats Demo</title>
22-
<link rel="preconnect" href="https://fonts.gstatic.com">
23-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap">
2422
<link href="https://css.gg/css?=|moon|sun" rel="stylesheet">
2523
<link rel="stylesheet" href="./css/style.css">
2624
<link rel="stylesheet" href="./css/toggle-dark.css">
@@ -124,4 +122,4 @@ function gtag() {
124122
</a>
125123
</body>
126124

127-
</html>
125+
</html>

tests/expected/test_card.svg

Lines changed: 9 additions & 10 deletions
Loading

0 commit comments

Comments
 (0)