Add Patreon wordmark to masthead
This commit is contained in:
parent
9b91eee9a6
commit
b079ebacc5
2 changed files with 72 additions and 7 deletions
|
|
@ -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>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue