highperfocused/grimoire
1
0
Fork 0
mirror of https://github.com/purrgrammer/grimoire.git synced 2026-04-08 22:47:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix logo SVG centering and regenerate icons (#218)

Browse Source 
The SVG path extended slightly beyond the viewBox (bezier control points
reached x=121.464 while viewBox ended at x=121), while the left edge was
flush at x=0. This caused uneven spacing.

Changed viewBox from "0 0 121 160" to "-0.5 0 122 160" to add equal
0.5px margins on both sides, properly centering the logo content.

https://claude.ai/code/session_019PGCQHRovoNE81udohhU3R

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Alejandro
2026-01-27 11:07:43 +01:00
committed by GitHub
parent a28ffc1ec3
commit 34bad20ce9
9 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/apple-touch-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
public/favicon-16x16.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 422 B

After

Width:  |  Height:  |  Size: 423 B

BIN
public/favicon-192x192-maskable.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
public/favicon-192x192.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
public/favicon-512x512.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

4
public/logo.svg
View File

@@ -1,5 +1,7 @@
<svg width="121" height="160" viewBox="0 0 121 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="122" height="160" viewBox="0 0 122 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0.5, 0)">
<path d="M99.9028 38.8215C100.25 39.0958 100.453 39.5134 100.453 39.9553V62.7095C100.453 63.5082 99.8036 64.1556 99.0027 64.1556H81.8124C81.0115 64.1556 80.3622 63.5082 80.3622 62.7095V49.645C80.3622 49.2031 80.1596 48.7854 79.8122 48.5111L51.1258 25.8633C50.5984 25.4469 49.853 25.4469 49.3256 25.8633L20.6406 48.5111C20.2932 48.7854 20.0906 49.2031 20.0906 49.645V110.352C20.0906 110.794 20.2932 111.212 20.6406 111.486L49.3256 134.134C49.853 134.55 50.5984 134.55 51.1258 134.134L72.9219 116.925C73.6317 116.364 73.6587 115.299 72.9782 114.704L60.3109 103.619C59.3516 102.78 59.869 101.203 61.1403 101.091L80.3924 99.4036C80.9294 99.3566 81.3958 99.0163 81.6036 98.5203L89.0687 80.6918C89.565 79.5066 91.2487 79.5066 91.7449 80.6918L99.2101 98.5203C99.4178 99.0163 99.8843 99.3566 100.421 99.4036L119.675 101.091C120.946 101.203 121.464 102.78 120.504 103.619L105.912 116.389C105.511 116.74 105.336 117.281 105.455 117.799L109.8 136.764C110.086 138.012 108.726 138.987 107.631 138.32L91.8717 128.724C91.3531 128.408 90.6922 128.448 90.2159 128.824L51.1258 159.688C50.5984 160.104 49.853 160.104 49.3256 159.688L0.550024 121.179C0.202601 120.904 0 120.487 0 120.045V39.9553C0 39.5134 0.202601 39.0957 0.550024 38.8215L49.3256 0.312306C49.853 -0.104099 50.5984 -0.104102 51.1258 0.312296L99.9028 38.8215Z" fill="url(#paint0_radial_11084_22058)"/>
</g>
<defs>
<radialGradient id="paint0_radial_11084_22058" cx="0" cy="0" r="1" gradientTransform="matrix(201.667 256.092 -193.67 266.667 -8.78247e-06 -0.459781)" gradientUnits="userSpaceOnUse">
<stop stop-color="#F9913E"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

8
scripts/generate-pwa-icons.mjs
View File

@@ -46,8 +46,8 @@ async function generateStandardIcon(size, outputName) {
const padding = Math.round(size * 0.1);
const logoSize = size - padding * 2;
// Calculate logo dimensions maintaining aspect ratio (121:160)
const aspectRatio = 121 / 160;
// Calculate logo dimensions maintaining aspect ratio (122:160)
const aspectRatio = 122 / 160;
const logoHeight = logoSize;
const logoWidth = Math.round(logoHeight * aspectRatio);
@@ -86,8 +86,8 @@ async function generateMaskableIcon(size, outputName) {
const padding = Math.round(size * 0.2);
const logoSize = size - padding * 2;
// Calculate logo dimensions maintaining aspect ratio (121:160)
const aspectRatio = 121 / 160;
// Calculate logo dimensions maintaining aspect ratio (122:160)
const aspectRatio = 122 / 160;
const logoHeight = logoSize;
const logoWidth = Math.round(logoHeight * aspectRatio);

16
src/components/ui/grimoire-logo.tsx
View File

@@ -21,8 +21,8 @@ export function GrimoireLogo({
size = 160,
gradient = "original",
}: GrimoireLogoProps) {
// Maintain original aspect ratio (121:160)
const width = (size * 121) / 160;
// Maintain original aspect ratio (122:160)
const width = (size * 122) / 160;
const height = size;
// Use unique ID to avoid conflicts when multiple logos are on the page
@@ -32,16 +32,18 @@ export function GrimoireLogo({
<svg
width={width}
height={height}
viewBox="0 0 121 160"
viewBox="0 0 122 160"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={cn(className)}
aria-label="Grimoire logo"
>
<path
d="M99.9028 38.8215C100.25 39.0958 100.453 39.5134 100.453 39.9553V62.7095C100.453 63.5082 99.8036 64.1556 99.0027 64.1556H81.8124C81.0115 64.1556 80.3622 63.5082 80.3622 62.7095V49.645C80.3622 49.2031 80.1596 48.7854 79.8122 48.5111L51.1258 25.8633C50.5984 25.4469 49.853 25.4469 49.3256 25.8633L20.6406 48.5111C20.2932 48.7854 20.0906 49.2031 20.0906 49.645V110.352C20.0906 110.794 20.2932 111.212 20.6406 111.486L49.3256 134.134C49.853 134.55 50.5984 134.55 51.1258 134.134L72.9219 116.925C73.6317 116.364 73.6587 115.299 72.9782 114.704L60.3109 103.619C59.3516 102.78 59.869 101.203 61.1403 101.091L80.3924 99.4036C80.9294 99.3566 81.3958 99.0163 81.6036 98.5203L89.0687 80.6918C89.565 79.5066 91.2487 79.5066 91.7449 80.6918L99.2101 98.5203C99.4178 99.0163 99.8843 99.3566 100.421 99.4036L119.675 101.091C120.946 101.203 121.464 102.78 120.504 103.619L105.912 116.389C105.511 116.74 105.336 117.281 105.455 117.799L109.8 136.764C110.086 138.012 108.726 138.987 107.631 138.32L91.8717 128.724C91.3531 128.408 90.6922 128.448 90.2159 128.824L51.1258 159.688C50.5984 160.104 49.853 160.104 49.3256 159.688L0.550024 121.179C0.202601 120.904 0 120.487 0 120.045V39.9553C0 39.5134 0.202601 39.0957 0.550024 38.8215L49.3256 0.312306C49.853 -0.104099 50.5984 -0.104102 51.1258 0.312296L99.9028 38.8215Z"
fill={`url(#${gradientId})`}
/>
<g transform="translate(0.5, 0)">
<path
d="M99.9028 38.8215C100.25 39.0958 100.453 39.5134 100.453 39.9553V62.7095C100.453 63.5082 99.8036 64.1556 99.0027 64.1556H81.8124C81.0115 64.1556 80.3622 63.5082 80.3622 62.7095V49.645C80.3622 49.2031 80.1596 48.7854 79.8122 48.5111L51.1258 25.8633C50.5984 25.4469 49.853 25.4469 49.3256 25.8633L20.6406 48.5111C20.2932 48.7854 20.0906 49.2031 20.0906 49.645V110.352C20.0906 110.794 20.2932 111.212 20.6406 111.486L49.3256 134.134C49.853 134.55 50.5984 134.55 51.1258 134.134L72.9219 116.925C73.6317 116.364 73.6587 115.299 72.9782 114.704L60.3109 103.619C59.3516 102.78 59.869 101.203 61.1403 101.091L80.3924 99.4036C80.9294 99.3566 81.3958 99.0163 81.6036 98.5203L89.0687 80.6918C89.565 79.5066 91.2487 79.5066 91.7449 80.6918L99.2101 98.5203C99.4178 99.0163 99.8843 99.3566 100.421 99.4036L119.675 101.091C120.946 101.203 121.464 102.78 120.504 103.619L105.912 116.389C105.511 116.74 105.336 117.281 105.455 117.799L109.8 136.764C110.086 138.012 108.726 138.987 107.631 138.32L91.8717 128.724C91.3531 128.408 90.6922 128.448 90.2159 128.824L51.1258 159.688C50.5984 160.104 49.853 160.104 49.3256 159.688L0.550024 121.179C0.202601 120.904 0 120.487 0 120.045V39.9553C0 39.5134 0.202601 39.0957 0.550024 38.8215L49.3256 0.312306C49.853 -0.104099 50.5984 -0.104102 51.1258 0.312296L99.9028 38.8215Z"
fill={`url(#${gradientId})`}
/>
</g>
<defs>
{gradient === "original" ? (
<radialGradient