https://github.com/rudraksh88/svelte-retro

A retro-styled user theme for Svelte's website and docs inspired by '90s tech aesthetics
https://github.com/rudraksh88/svelte-retro

css nostalgic retro stylus svelte svelte5 sveltejs sveltekit userstyle userstyles

Last synced: 3 months ago
JSON representation

A retro-styled user theme for Svelte's website and docs inspired by '90s tech aesthetics

• Host: GitHub
• URL: https://github.com/rudraksh88/svelte-retro
• Owner: Rudraksh88
• License: mit
• Created: 2024-12-28T11:44:50.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-12-28T11:47:45.000Z (4 months ago)
• Last Synced: 2024-12-28T12:25:34.700Z (4 months ago)
• Topics: css, nostalgic, retro, stylus, svelte, svelte5, sveltejs, sveltekit, userstyle, userstyles
• Language: CSS
• Homepage:
• Size: 0 Bytes
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SvelteRetro: A '90s Tech Aesthetic Makeover

I noticed Svelte 5's branding attempted a serif-focused design direction, but the chosen typography and color palette didn't quite achieve that vision. I've created an alternative stylesheet that takes a different approach, drawing inspiration from 1990s technology advertising aesthetics to capture that nostalgic feel.

![Bento_Preview](Bento_Preview.png)

## The Cool Stuff

- **That Nostalgic Serif**: [Advercase](https://indieground.net/product/advercase-font/) brings the retro headlines to life

- **Fresh Sans**: [Gabarito](https://fonts.google.com/specimen/Gabarito) keeps things crisp where needed

- **Code with Character**: [JetBrains Mono](https://www.jetbrains.com/lp/mono/) makes your code pop

- **Classic Body Text**: [Libre Caslon Text](https://fonts.google.com/specimen/Libre+Caslon+Text) for that timeless readability

- **Relaxing Colors**: A gruvbox-inspired palette that's easy on the eyes

- **Textured Touch**: Subtle grain on a warm background that feels like vintage paper

- **Logo++**: A fresh take that just feels right

- **Code in Style**: Containers that make your code blocks stand out, complete with a little Svelte flair

- **Retro Racing Stripes**: Strategic color accents that add that perfect '90s tech magazine feel

![Preview](Preview.png)

## Installation

1. Download and install the fonts:

	- [Advercase](https://indieground.net/product/advercase-font/)

	- [Gabarito](https://fonts.google.com/specimen/Gabarito)

	- [JetBrains Mono](https://www.jetbrains.com/lp/mono/)

	- [Libre Caslon Text](https://fonts.google.com/specimen/Libre+Caslon+Text)

2. Install the Stylus browser extension for your browser:

	- [**Chrome**(ium)/**Brave**](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne)

	- [**Firefox**](https://addons.mozilla.org/en-US/firefox/addon/styl-us/)

3. Click [here](https://raw.githubusercontent.com/Rudraksh88/svelte-retro/refs/heads/master/styles.user.css) to install the userstyle

or

Copy the contents of `styles.user.css` and paste it into a new style in the Stylus extension.

## Wait! But in a Friend Way...

Hey there! Before you get too excited – this is my love letter to Svelte.dev, wrapped in a custom stylesheet that gives it that sweet retro makeover you're seeing. Think of it as fan art, but with CSS!

Just to keep things crystal clear: this is totally unofficial and was created purely for fun during my late-night coding sessions. While I absolutely adore Svelte (can you tell?), this project isn't connected to the official team in any way. It's just one developer's nostalgic interpretation of an already awesome framework.

Feel totally free to use it if it sparks joy for you – or scroll on by if it's not your cup of tea. either way, we're cool! 🚀

## Contributing

If you have any suggestions or improvements, feel free to open an issue or PR. I'd love to hear your thoughts!