Skip to content

Fix safari issues #1038

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
IRHM merged 4 commits into from
Mar 19, 2026
Merged

Fix safari issues #1038

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a1f0647
fix safari: Shrikhand font
IRHM Mar 19, 2026
1ca5af8
Icon: Fix status icons not having width and height properties not set
IRHM Mar 19, 2026
9eb48e2
Status: Fix button sizes now that icons have a width/height set
IRHM Mar 19, 2026
828de6f
Nav: Fix logo link being clickable through whole left side of nav
IRHM Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 38 additions & 9 deletions src/lib/Icon.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,25 +27,44 @@
/>
</svg>
{:else if i === "clock"}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
width={wh}
height={wh}
>
<path
d="M256 48C141.13 48 48 141.13 48 256c0 114.69 93.32 208 208 208 114.86 0 208-93.14 208-208 0-114.69-93.31-208-208-208zm108 240H244a4 4 0 01-4-4V116a4 4 0 014-4h24a4 4 0 014 4v140h92a4 4 0 014 4v24a4 4 0 01-4 4z"
/>
</svg>
{:else if i === "play"}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
><path
d="M133 440a35.37 35.37 0 01-17.5-4.67c-12-6.8-19.46-20-19.46-34.33V111c0-14.37 7.46-27.53 19.46-34.33a35.13 35.13 0 0135.77.45l247.85 148.36a36 36 0 010 61l-247.89 148.4A35.5 35.5 0 01133 440z"
/></svg
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
width={wh}
height={wh}
>
<path
d="M133 440a35.37 35.37 0 01-17.5-4.67c-12-6.8-19.46-20-19.46-34.33V111c0-14.37 7.46-27.53 19.46-34.33a35.13 35.13 0 0135.77.45l247.85 148.36a36 36 0 010 61l-247.89 148.4A35.5 35.5 0 01133 440z"
/>
</svg>
{:else if i === "calendar"}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
width={wh}
height={wh}
>
<path
d="M32 456a24 24 0 0024 24h400a24 24 0 0024-24V176H32zm80-238.86a9.14 9.14 0 019.14-9.14h109.72a9.14 9.14 0 019.14 9.14v109.72a9.14 9.14 0 01-9.14 9.14H121.14a9.14 9.14 0 01-9.14-9.14zM456 64h-55.92V32h-48v32H159.92V32h-48v32H56a23.8 23.8 0 00-24 23.77V144h448V87.77A23.8 23.8 0 00456 64z"
/>
</svg>
{:else if i === "thumb-down"}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
width={wh}
height={wh}
><path
d="M39.94 178l144.16 6.12c4.61.36 23.9 1.22 23.9 25.88 0 23.8-19.16 25.33-24.14 25.88L39.94 242C27.27 241.87 16 227.56 16 210s11.27-31.87 23.94-32zm141.45 131.66L74.65 318C62 318 48 301.31 48 284.12v-.33c0-16.33 11.14-29.63 24.88-29.79l108.45 1.72C208 259 208 275.16 208 282.12c0 22.88-21.8 27.14-26.61 27.54zM90.15 32l89.37 8.93C204 41.86 208 58.18 208 68.4c0 18.39-13.41 24.6-26.67 24.6l-91 3C75.78 95.78 64 81.51 64 64s11.68-31.66 26.15-32zm-34.36 71.5l126.4 6.22c9.39.63 25.81 3 25.81 26.36 0 12-4.35 25.62-25 27.53L55.79 167.5C42.65 167.35 32 154 32 136.08s10.65-32.43 23.79-32.58z"
/><path
Expand All @@ -58,7 +77,12 @@
/></svg
>
{:else if i === "thumb-up"}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
width={wh}
height={wh}
>
<path
d="M472.06 334l-144.16-6.13c-4.61-.36-23.9-1.21-23.9-25.87 0-23.81 19.16-25.33 24.14-25.88L472.06 270c12.67.13 23.94 14.43 23.94 32s-11.27 31.87-23.94 32zM330.61 202.33L437.35 194C450 194 464 210.68 464 227.88v.33c0 16.32-11.14 29.62-24.88 29.79l-108.45-1.73C304 253 304 236.83 304 229.88c0-22.88 21.8-27.15 26.61-27.55zM421.85 480l-89.37-8.93C308 470.14 304 453.82 304 443.59c0-18.38 13.41-24.6 26.67-24.6l91-3c14.54.23 26.32 14.5 26.32 32s-11.67 31.67-26.14 32.01zm34.36-71.5l-126.4-6.21c-9.39-.63-25.81-3-25.81-26.37 0-12 4.35-25.61 25-27.53l127.19-3.88c13.16.14 23.81 13.49 23.81 31.4s-10.65 32.43-23.79 32.58z"
/>
Expand All @@ -73,7 +97,12 @@
/>
</svg>
{:else if i === "pause"}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
width={wh}
height={wh}
>
<path
d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm-32 272a16 16 0 01-32 0V192a16 16 0 0132 0zm96 0a16 16 0 01-32 0V192a16 16 0 0132 0z"
/>
Expand Down
11 changes: 11 additions & 0 deletions src/lib/Status.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,21 @@
gap: 10px;
width: 100%;
height: 100%;
container-type: inline-size;

button {
font-size: 10px;
padding: 5px 10px;
height: 58px;
}

/* 380px is how big the this container is usually,
but when it starts to shrink we want to button height
to be unset so that buttons become responsive. */
@container (width < 380px) {
button {
height: unset;
}
}
}
</style>
77 changes: 41 additions & 36 deletions src/routes/(app)/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,10 +229,12 @@

<nav bind:this={navEl}>
<div class="wrapper">
<a href="/">
<span class="large">Watcharr</span>
<span class="small">W</span>
</a>
<div class="left-side">
<a href="/">
<span class="large">Watcharr</span>
<span class="small">W</span>
</a>
</div>
<div class="search">
<input
bind:this={mainSearchEl}
Expand Down Expand Up @@ -403,7 +405,7 @@
justify-content: space-between;
align-items: center;

a,
.left-side,
.btns {
/* This makes the logo on left and icons on right the same
width, ensuring the main search bar can stay truly centered
Expand Down Expand Up @@ -435,42 +437,45 @@
}
}

a {
text-decoration: none;
font-family:
"Shrikhand",
system-ui,
-apple-system,
BlinkMacSystemFont;
font-size: 35px;
transition:
-webkit-text-stroke 150ms ease,
color 150ms ease,
font-weight 150ms ease;

&:hover,
&:focus-visible {
color: $bg-color;
-webkit-text-stroke: 3px $text-color;
font-weight: bold;
}

span.large {
display: block;
width: 185.2px;
}
.left-side {
a {
display: inline-flex;
text-decoration: none;
font-family:
"Shrikhand",
system-ui,
-apple-system,
BlinkMacSystemFont;
font-size: 35px;
transition:
-webkit-text-stroke 150ms ease,
color 150ms ease,
font-weight 150ms ease;

span.small {
display: none;
width: 40px;
}
&:hover,
&:focus-visible {
color: $bg-color;
-webkit-text-stroke: 3px $text-color;
font-weight: bold;
}

@media screen and (max-width: 620px) {
span.large {
display: none;
display: block;
width: 185.2px;
}

span.small {
display: block;
display: none;
width: 40px;
}

@media screen and (max-width: 620px) {
span.large {
display: none;
}
span.small {
display: block;
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/styles/norm.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
local("Shrikhand-Regular"),
url("/Shrikhand-Regular.woff2") format("woff2");
font-weight: normal;
font-style: italic;
font-style: normal;
font-display: swap;
}

Expand Down
Loading