Sidetrack
A maximalist podcast site.
Sidetrack is a website for a talk podcast, in the Maximalism style: five flat colours that clash on purpose (hot pink, acid lime, tangerine, sky and cream) on a warm espresso-black studio ground with a dot pattern, giant heavy type set word by word in different colours and tilts, an italic serif for asides, a monospace for timestamps, thick ink outlines, hard offset shadows, scalloped stickers and starbursts. The sample show, Tangent, its two hosts, every episode, date, venue and line of chat are invented sample content.
- For
- Podcast
- Built with
- HTML, CSS, ES modules, Motion 14.6.0 (no build step)
- Pages
- 3 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
Screens from the template
Every page is laid out for a 390 pixel phone as well as for tablet and desktop.
More pages
The 3D moment
The route map: press play and the episode runs at sixty times speed, a coloured line draws itself from topic sticker to topic sticker while a speech bubble shows what was said at each turn; scrub, click a sticker or a chapter to jump.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): the hero headline stacked in three colours beside the microphone in a scalloped lime sticker, with starburst and round stickers and a now-playing ticket that starts the latest episode; a tilted topic marquee; the route map for the newest episode with its player, scrubber, chapters and speech bubble; the back catalogue as a packed wall of drawn covers in mixed sizes with tag filters and an empty state; the hosts drawn as their mugs; live shows as tilted ticket stubs over a lime-graded crowd photo (on sale, few seats, sold out); a "write in" form with validation, sending and sent states; a copy-the-feed box; a giant wordmark footer. - Episode (
episode.html?ep=88): cover, date, length and tag, the route map (when the episode has one), every line said at each turn as speech-bubble cards, more episodes with the same tag, previous and next. Episodes with no route show a designed empty state; an unknown number shows a "no episode" state. - 404 (
404.html): a route that wanders off the page. - Night (default) and day themes, from phone to desktop. Night is the default on purpose: a podcast studio at night.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Episode
- 404
Stack
- HTML
- CSS
- ES modules
- Motion 14.6.0 (no build step)
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
