diff --git a/site/build.sh b/site/build.sh index b13c3e7..b79013f 100755 --- a/site/build.sh +++ b/site/build.sh @@ -1,10 +1,12 @@ #!/bin/sh -# ipxreader.app: the page, its stylesheet and font, and the logo and icon from web/, into +# ipxreader.app: the page and its stylesheet, and the typeface, logo and icon from web/, into # site/dist, which Cloudflare Pages serves. set -e here=$(dirname "$0") rm -rf "$here/dist" mkdir -p "$here/dist/fonts" cp "$here/index.html" "$here/site.css" "$here/_headers" "$here/dist/" -cp "$here/fonts/archivo.woff2" "$here/dist/fonts/" +# The reader's own typeface, the same file ipx-web serves. +cp "$here/../web/InterVariable.woff2" "$here/dist/fonts/inter.woff2" cp "$here/../web/logo.svg" "$here/../web/favicon.png" "$here/dist/" +cp -r "$here/shots" "$here/dist/" diff --git a/site/fonts/archivo.woff2 b/site/fonts/archivo.woff2 deleted file mode 100644 index e2448d0..0000000 Binary files a/site/fonts/archivo.woff2 and /dev/null differ diff --git a/site/index.html b/site/index.html index 449ecdd..9c8f761 100644 --- a/site/index.html +++ b/site/index.html @@ -7,7 +7,7 @@ - + @@ -15,7 +15,6 @@ iPX @@ -25,8 +24,7 @@

A podcatcher for the whole household, running on your own server.

It checks your feeds, downloads new episodes, and gives everyone at home a list of their own to listen from in the browser, all sharing one copy of each file.

- Run it on your server - Browse the directory + Browse the directory

@@ -56,6 +54,16 @@
Some of what people listen to and read on iPX servers today.
+
+

In the browser, and on your phone

+
+ iPX in a desktop browser: the feed list down the side, 99% Invisible's episodes in a table, the newest one's notes below it, and the player along the bottom. + iPX on a phone: Ologies with Alie Ward and its latest episodes. +
+
+

What it does

@@ -78,22 +86,6 @@
-
-

Run it

-

You need a machine that stays on and Docker. These three steps start iPX with everything kept beside it in SQLite.

-
    -
  1. Get the source.

    -
    git clone https://git.sdf1.net/rays/ipx.git
    -cd ipx
  2. -
  3. Build iPX and its web page.

    -
    docker build -t ipx .
    -docker build -f Dockerfile.web -t ipx-web .
  4. -
  5. Start them, then open port 8099 on that machine and sign in as admin with the password ipodderx. Change it in Settings straight away.

    -
    docker compose up -d
  6. -
-

The README covers Postgres, signing in through Cloudflare Access or Authentik, and every setting.

-
-

Since 2004

iPodderX was one of the first podcatchers, a Mac app by Ray Slakinski and August Trometer, from the year podcasts got their name. iPX is its engine rewritten in Rust for a server, with a page modelled on the original window: the feed list down the side, the episodes in a table, the player along the bottom.

@@ -101,7 +93,7 @@ docker build -f Dockerfile.web -t ipx-web . diff --git a/site/shots/desktop.webp b/site/shots/desktop.webp new file mode 100644 index 0000000..e3058c5 Binary files /dev/null and b/site/shots/desktop.webp differ diff --git a/site/shots/phone.webp b/site/shots/phone.webp new file mode 100644 index 0000000..878d888 Binary files /dev/null and b/site/shots/phone.webp differ diff --git a/site/site.css b/site/site.css index e238b1a..79ceee6 100644 --- a/site/site.css +++ b/site/site.css @@ -1,7 +1,7 @@ /* ipxreader.app. The palette is the iPodderX logo's: the radio's navy body, the sky of its - screen, the blue of its tuning scale, and the orange needle, which is the needle alone. One - typeface, Archivo, its width doing the work: expanded for the name, condensed on the dial. */ -@font-face{font-family:Archivo;src:url(/fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap} + screen, the blue of its tuning scale, and the orange needle, which is the needle alone. The + typeface is the reader's own, Inter, the same file (web/InterVariable.woff2). */ +@font-face{font-family:Inter;src:url(/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap} :root{ --navy:#0c2238; /* the radio */ --ink:#16304a; /* body text, a step off the navy */ @@ -15,20 +15,20 @@ } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} -body{margin:0;background:var(--page);color:var(--ink);font:400 1.0625rem/1.6 Archivo,system-ui,sans-serif;font-stretch:100%} +body{margin:0;background:var(--page);color:var(--ink);font:400 1.0625rem/1.6 Inter,system-ui,sans-serif} a{color:var(--scale);text-underline-offset:.18em} a:focus-visible,.btn:focus-visible{outline:3px solid var(--scale);outline-offset:3px;border-radius:6px} main,.bar,footer{max-width:72rem;margin:0 auto;padding-inline:1.5rem} .bar{display:flex;align-items:center;justify-content:space-between;padding-block:1.25rem} -.home{display:flex;align-items:center;gap:.6rem;color:var(--navy);text-decoration:none;font-weight:800;font-stretch:112%;font-size:1.25rem} +.home{display:flex;align-items:center;gap:.6rem;color:var(--navy);text-decoration:none;font-weight:800;font-size:1.25rem} .home img{border-radius:9px;display:block} .bar nav{display:flex;gap:1.5rem} .bar nav a{color:var(--navy);text-decoration:none;font-weight:600} .bar nav a:hover{text-decoration:underline} .hero{padding-block:3rem 2.5rem;max-width:46rem} -h1{margin:0;color:var(--navy);font-weight:850;font-stretch:125%;font-size:clamp(6.5rem,24vw,15rem);line-height:.82;letter-spacing:-.045em} +h1{margin:0;color:var(--navy);font-weight:900;font-size:clamp(6.5rem,24vw,15rem);line-height:.82;letter-spacing:-.065em} .lede{margin:1.75rem 0 0;color:var(--navy);font-weight:650;font-size:clamp(1.45rem,3.4vw,2rem);line-height:1.2;letter-spacing:-.01em} .intro{margin:1rem 0 0;max-width:38rem;color:var(--muted);font-size:1.125rem} .acts{display:flex;flex-wrap:wrap;gap:.75rem;margin:2rem 0 0} @@ -43,7 +43,7 @@ h1{margin:0;color:var(--navy);font-weight:850;font-stretch:125%;font-size:clamp( .dial{margin:1rem 0 0} .scale{background:var(--navy);border-radius:1.25rem;overflow:hidden} .track{position:relative;--at:45.8%} -.freq{position:relative;list-style:none;margin:0;padding:1.1rem 4% 0;display:flex;justify-content:space-between;color:var(--tick);font-stretch:70%;font-weight:600;font-size:.95rem;font-variant-numeric:tabular-nums} +.freq{position:relative;list-style:none;margin:0;padding:1.1rem 4% 0;display:flex;justify-content:space-between;color:var(--tick);font-weight:600;font-size:.95rem;font-variant-numeric:tabular-nums} .freq li{width:0;display:flex;justify-content:center} /* each number centred on its tick */ .freq::after{content:"";position:absolute;left:4%;right:4%;top:2.6rem;height:1.6rem; background: @@ -51,7 +51,7 @@ h1{margin:0;color:var(--navy);font-weight:850;font-stretch:125%;font-size:clamp( repeating-linear-gradient(90deg,rgba(143,194,234,.55) 0 1px,transparent 1px 2%) 0 100%/100% 45%; background-repeat:no-repeat} .stations{list-style:none;margin:2.6rem 0 0;padding:0 1% 1.6rem;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start; - color:#cfe3f4;font-stretch:65%;font-weight:550;font-size:.92rem;line-height:1.15;text-align:center} + color:#cfe3f4;font-weight:550;font-size:.84rem;line-height:1.2;letter-spacing:-.01em;text-align:center} .stations li{padding-inline:.15rem} .stations li:nth-child(even){margin-top:1.7rem} .needle{position:absolute;top:2.35rem;height:2.7rem;left:var(--at);width:3px;margin-left:-1.5px;background:var(--needle);border-radius:2px; @@ -62,18 +62,19 @@ h1{margin:0;color:var(--navy);font-weight:850;font-stretch:125%;font-size:clamp( @media (prefers-reduced-motion:reduce){.needle,.stations .tuned{animation-duration:0s;animation-delay:0s}} figcaption{margin:.7rem 0 0;color:var(--muted);font-size:.9rem} -h2{margin:0 0 1.5rem;color:var(--navy);font-weight:800;font-stretch:112%;font-size:clamp(1.75rem,4vw,2.4rem);line-height:1.1;letter-spacing:-.02em} -.does,.run,.then{padding-block:4rem 0} +/* The app as it looks: the desktop window, and the phone over its corner. */ +.shots{padding-block:4.5rem 0} +.screens{position:relative;margin:0 0 3rem;padding-right:clamp(0px,12%,9rem)} +.screens img{display:block;height:auto} +.desk{width:100%;border-radius:.9rem;border:1px solid var(--rule);box-shadow:0 1.5rem 3rem -1.5rem rgba(12,34,56,.45)} +.phone{position:absolute;right:0;bottom:-3rem;width:24%;max-width:15rem;border-radius:1.6rem;border:.4rem solid var(--navy);box-shadow:0 1.5rem 3rem -1rem rgba(12,34,56,.5)} + +h2{margin:0 0 1.5rem;color:var(--navy);font-weight:800;font-size:clamp(1.75rem,4vw,2.4rem);line-height:1.1;letter-spacing:-.02em} +.does,.then{padding-block:4rem 0} .does dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 3.5rem} .does dt{color:var(--navy);font-weight:750;font-size:1.2rem;line-height:1.25} .does dd{margin:.45rem 0 0;max-width:34rem} -.run>p{max-width:40rem} -.run ol{list-style:none;counter-reset:step;margin:2rem 0;padding:0;display:grid;gap:1.75rem;max-width:44rem} -.run li{counter-increment:step;display:grid;grid-template-columns:3rem minmax(0,1fr);column-gap:1rem} -.run li::before{content:counter(step);grid-row:span 2;color:var(--scale);font-weight:800;font-stretch:125%;font-size:2.4rem;line-height:1} -.run li p{margin:0 0 .6rem} -pre{margin:0;padding:1rem 1.15rem;background:var(--navy);color:var(--sky);border-radius:.75rem;overflow-x:auto;font:500 .92rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .then p{max-width:40rem} footer{margin-top:5rem;padding-block:1.75rem 3rem;border-top:1px solid var(--rule);color:var(--muted);font-size:.95rem} @@ -84,8 +85,8 @@ footer p{margin:0} .bar nav{gap:1rem} .hero{padding-block:1.5rem 2rem} .does dl{grid-template-columns:minmax(0,1fr);gap:1.75rem} - .run li{grid-template-columns:2.25rem minmax(0,1fr)} - .run li::before{font-size:1.9rem} + .screens{padding-right:0;margin-bottom:0} + .phone{position:static;width:62%;margin:1.5rem auto 0} .dial{margin-inline:-1rem} .scale{border-radius:0} figcaption{padding-inline:1rem} @@ -95,5 +96,4 @@ footer p{margin:0} .stations li:nth-child(-n+3),.stations li:nth-child(n+10){display:none} .stations li:nth-child(even){margin-top:0} .stations li:nth-child(odd){margin-top:1.7rem} - pre{white-space:pre-wrap;overflow-wrap:anywhere} }