Add Patreon wordmark to masthead

This commit is contained in:
Meta Vens 2026-04-26 03:58:55 +01:00
commit b079ebacc5
2 changed files with 72 additions and 7 deletions

View file

@ -11,9 +11,11 @@ type Route = {
type ExternalLink = {
label: string
href: string
variant?: "icon" | "wordmark"
icon: {
path: string
viewBox: string
paths?: string[]
}
}
@ -59,6 +61,24 @@ const routes: Route[] = [
]
const externalLinks: ExternalLink[] = [
{
label: "Patreon",
href: "https://www.patreon.com/GameCult",
variant: "wordmark",
icon: {
viewBox: "0 0 2563 357",
paths: [
"M 186.320312 131.96875 C 186.320312 100.511719 165.019531 73.40625 132.113281 73.40625 L 78.398438 73.40625 L 78.398438 190.515625 L 132.113281 190.515625 C 165.019531 190.515625 186.320312 163.429688 186.320312 131.96875 Z M 0 9.527344 L 141.789062 9.527344 C 216.804688 9.527344 265.203125 66.15625 265.203125 131.96875 C 265.203125 197.78125 216.804688 254.394531 141.789062 254.394531 L 78.398438 254.394531 L 78.398438 348.285156 L 0 348.285156 L 0 9.527344",
"M 492.171875 106.3125 L 450.550781 245.695312 L 532.816406 245.695312 Z M 565.25 348.285156 L 552.195312 307.152344 L 431.691406 307.152344 L 418.617188 348.285156 L 334.886719 348.285156 L 455.882812 9.527344 L 527.988281 9.527344 L 650.429688 348.285156 L 565.25 348.285156",
"M 782.054688 77.277344 L 705.609375 77.277344 L 705.609375 9.527344 L 937.402344 9.527344 L 937.402344 77.277344 L 860.453125 77.277344 L 860.453125 348.285156 L 782.054688 348.285156 L 782.054688 77.277344",
"M 1245.679688 131.96875 C 1245.679688 100.511719 1224.378906 73.40625 1191.46875 73.40625 L 1137.75 73.40625 L 1137.75 190.515625 L 1191.46875 190.515625 C 1224.378906 190.515625 1245.679688 163.429688 1245.679688 131.96875 Z M 1059.359375 9.527344 L 1201.648438 9.527344 C 1276.648438 9.527344 1325.050781 66.15625 1325.050781 131.96875 C 1325.050781 179.394531 1299.878906 221.488281 1257.769531 241.339844 L 1325.539062 348.285156 L 1234.558594 348.285156 L 1174.53125 254.394531 L 1137.75 254.394531 L 1137.75 348.285156 L 1059.359375 348.285156 L 1059.359375 9.527344",
"M 1536.539062 72.449219 L 1536.539062 149.382812 L 1664.78125 149.382812 L 1664.78125 210.855469 L 1536.539062 210.855469 L 1536.539062 285.363281 L 1664.78125 285.363281 L 1664.78125 348.285156 L 1458.140625 348.285156 L 1458.140625 9.527344 L 1664.78125 9.527344 L 1664.78125 72.449219 L 1536.539062 72.449219",
"M 2070.820312 178.90625 C 2070.820312 123.253906 2033.058594 71.472656 1971.609375 71.472656 C 1909.660156 71.472656 1872.398438 123.253906 1872.398438 178.90625 C 1872.398438 234.558594 1909.660156 286.34375 1971.609375 286.34375 C 2033.058594 286.34375 2070.820312 234.558594 2070.820312 178.90625 Z M 1792.050781 178.90625 C 1792.050781 85.992188 1858.839844 0.8125 1971.609375 0.8125 C 2083.871094 0.8125 2150.660156 85.992188 2150.660156 178.90625 C 2150.660156 271.824219 2083.871094 357 1971.609375 357 C 1858.839844 357 1792.050781 271.824219 1792.050781 178.90625",
"M 2485.078125 230.203125 L 2485.078125 9.527344 L 2562.988281 9.527344 L 2562.988281 348.285156 L 2481.210938 348.285156 L 2359.238281 130.507812 L 2359.238281 348.285156 L 2280.839844 348.285156 L 2280.839844 9.527344 L 2362.621094 9.527344 L 2485.078125 230.203125",
],
path: "",
},
},
{
label: "GitHub",
href: "https://github.com/GameCult",
@ -116,14 +136,16 @@ export default (() => {
{externalLinks.map((link) => (
<a
href={link.href}
class="gamecult-nav-icon"
class={link.variant === "wordmark" ? "gamecult-nav-wordmark" : "gamecult-nav-icon"}
target="_blank"
rel="noreferrer noopener"
aria-label={link.label}
title={link.label}
>
<svg viewBox={link.icon.viewBox} aria-hidden="true">
<path d={link.icon.path} />
{(link.icon.paths ?? [link.icon.path]).map((path) => (
<path d={path} />
))}
</svg>
</a>
))}

View file

@ -195,36 +195,58 @@ body {
.gamecult-titlebar-community {
display: flex;
align-items: flex-start;
gap: 1.25rem;
gap: 1rem;
margin-left: auto;
flex: 0 0 auto;
padding-top: 0.1rem;
}
.gamecult-nav-wordmark,
.gamecult-nav-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4.7rem;
height: 4.7rem;
padding: 0;
line-height: 0;
color: rgba(236, 242, 250, 0.96);
flex: 0 0 auto;
}
.gamecult-nav-icon {
width: 4.7rem;
height: 4.7rem;
}
.gamecult-nav-wordmark {
min-width: 11.4rem;
height: 4.7rem;
}
.gamecult-nav-wordmark svg,
.gamecult-nav-icon svg {
display: block;
width: 3.5rem;
height: 3.5rem;
fill: currentColor;
filter: drop-shadow(0 0 0.7rem rgba(89, 183, 255, 0.32));
}
.gamecult-nav-icon svg {
width: 3.5rem;
height: 3.5rem;
}
.gamecult-nav-wordmark svg {
width: 10.2rem;
height: auto;
max-height: 1.45rem;
}
.gamecult-nav-wordmark:hover,
.gamecult-nav-icon:hover {
color: #fff3e8;
}
.gamecult-nav-wordmark:hover svg,
.gamecult-nav-wordmark:focus-visible svg,
.gamecult-nav-icon:hover svg,
.gamecult-nav-icon:focus-visible svg {
filter: drop-shadow(0 0 0.35rem rgba(255, 138, 42, 0.28));
@ -538,6 +560,27 @@ a:hover,
justify-content: flex-start;
margin-left: 0;
padding-top: 0;
gap: 0.7rem;
}
.gamecult-nav-wordmark {
min-width: 9.8rem;
height: 3.9rem;
}
.gamecult-nav-wordmark svg {
width: 8.9rem;
max-height: 1.2rem;
}
.gamecult-nav-icon {
width: 3.9rem;
height: 3.9rem;
}
.gamecult-nav-icon svg {
width: 2.9rem;
height: 2.9rem;
}
.page > #quartz-body .center > article {