site/zedshaw.games
1
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Figured out that SVG is hot garbage and got an icon to work for the home icon.

Browse source
This commit is contained in:
Zed A. Shaw 2025-08-18 11:46:19 -04:00
parent 9707e0e5f6
commit 26f61eb68b
4 changed files with 31 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

9
pages/layouts/main.html
View file

@ -14,7 +14,14 @@
</head> </head>
<body data-testid="{{.PageId}}"> <body data-testid="{{.PageId}}">
<header> <header>
<a id="home" href="/">🏡</a> <a id="home" href="/">
<svg xmlns="http://www.w3.org/2000/svg"
width="2rem"
height="2rem"
viewBox="0 0 2rem 2rem">
<use href="/icons/home.svg#home" />
</svg>
</a>
<a id="live" href="/live/">Live</a> <a id="live" href="/live/">Live</a>
<a id="stream" href="/stream/">Streams</a> <a id="stream" href="/stream/">Streams</a>
<a id="game" href="/game/">Games</a> <a id="game" href="/game/">Games</a>

2
static/icons/home.svg
View file

@ -8,7 +8,7 @@
stroke-width="2" stroke-width="2"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
> id="home">
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /> <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<polyline points="9 22 9 12 15 12 15 22" /> <polyline points="9 22 9 12 15 12 15 22" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 316 B

After

Width:  |  Height:  |  Size: 327 B

Before After
Before After

14
static/style.css
View file

@ -419,6 +419,15 @@
.bg-green-400\! { .bg-green-400\! {
background-color: var(--color-green-400) !important; background-color: var(--color-green-400) !important;
} }
.fill-gray-50 {
fill: var(--color-gray-50);
}
.stroke-gray-50 {
stroke: var(--color-gray-50);
}
.stroke-gray-50\! {
stroke: var(--color-gray-50) !important;
}
.p-0 { .p-0 {
padding: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 0);
} }
@ -497,6 +506,11 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: var(--tw-duration, var(--default-transition-duration));
} }
.\*\:stroke-gray-50 {
:is(& > *) {
stroke: var(--color-gray-50);
}
}
.\*\:text-nowrap { .\*\:text-nowrap {
:is(& > *) { :is(& > *) {
text-wrap: nowrap; text-wrap: nowrap;

9
views/layouts/main.html
View file

@ -14,7 +14,14 @@
</head> </head>
<body data-testid="{{.PageId}}"> <body data-testid="{{.PageId}}">
<header> <header>
<a id="home" href="/">🏡</a> <a id="home" href="/">
<svg xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24">
<use href="/icons/home.svg#home"><use>
</svg>
</a>
<a id="live" href="/live/">Live</a> <a id="live" href="/live/">Live</a>
<a id="stream" href="/stream/">Streams</a> <a id="stream" href="/stream/">Streams</a>
<a id="game" href="/game/">Games</a> <a id="game" href="/game/">Games</a>