{"id":24118390,"url":"https://github.com/fantasyui-com/synthwave","last_synced_at":"2025-02-28T15:43:36.478Z","repository":{"id":57145317,"uuid":"135733667","full_name":"fantasyui-com/synthwave","owner":"fantasyui-com","description":"Simple and beautiful synthwave background collection. [Art, CSS, Backgrounds, CSS Gradients]","archived":false,"fork":false,"pushed_at":"2023-03-19T18:16:16.000Z","size":943,"stargazers_count":18,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-12T07:19:02.112Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://fantasyui-com.github.io/synthwave/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fantasyui-com.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-01T15:21:49.000Z","updated_at":"2025-01-26T00:34:14.000Z","dependencies_parsed_at":"2023-02-01T00:02:07.190Z","dependency_job_id":null,"html_url":"https://github.com/fantasyui-com/synthwave","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fantasyui-com%2Fsynthwave","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fantasyui-com%2Fsynthwave/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fantasyui-com%2Fsynthwave/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fantasyui-com%2Fsynthwave/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fantasyui-com","download_url":"https://codeload.github.com/fantasyui-com/synthwave/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241176614,"owners_count":19922732,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-11T08:19:31.555Z","updated_at":"2025-02-28T15:43:36.461Z","avatar_url":"https://github.com/fantasyui-com.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# synthwave\nSimple and beautiful synthwave background collection.\n\n![](icon.png)\n\n## Why?\n\n  Because there is no time to mess with gradient editors.\n\n## Demo \u0026 Example\n\n- [demo preview of all styles](https://rawgit.com/fantasyui-com/synthwave/master/demo.html)\n- [usage example with UI components](https://rawgit.com/fantasyui-com/synthwave/master/index.html)\n\n## Installation\n\n### NPM\n\nInstall Node.js and run ```npm i synthwave```.\n```html\n\n\u003clink rel='stylesheet' href='node_modules/synthwave/style.css' /\u003e\n\n```\n\n### ZIP\n\ndownload the zip: https://github.com/fantasyui-com/synthwave/archive/master.zip unpack and put the style.css next to your HTML and simply include the file in your HTML document.\n\n```html\n\n\u003clink rel='stylesheet' href='style.css' /\u003e\n```\n\n### RAW GIT\nUse raw git for development purposes:\n\n```html\n\n\u003clink rel='stylesheet' href='https://rawgit.com/fantasyui-com/synthwave/master/style.css' /\u003e\n\n```\n\n### CDN\n\nYou can use the raw git CDN for a more permanent 3rd party hosting solution:\n\n```html\n\n\u003clink rel='stylesheet' href='https://cdn.rawgit.com/fantasyui-com/synthwave/master/style.css' /\u003e\n\n```\n\n### COPY \u0026 PASTE\n\ngrab the code from here https://github.com/fantasyui-com/synthwave/blob/master/style.css via copy and paste and put it into a ```\u003cstyle\u003e\u003c/style\u003e``` tag of your web page. Which pattern do you like? is it for example synthwave-m? If so then just put this in your ```\u003chead\u003e``` tag:\n\n```CSS\n\n\u003cstyle\u003e\n  .synthwave-m {\n    background: linear-gradient(172deg, #C115D7 0%, #B510D6 4%, #540101 5%, #FCA10F 18%, #FFD82D 21%, #FCA10F 24%, #05253D 25%, #0E5BCE 35%, #3C8FCA 43%, #79BFE0 45%, #090D6D 46%, #000002 56%, #3B3FA9 60%, #2DBCFF 61%, #318AD3 73%, #13A7F7 74%, #352313 75%, #F29C5A 91%, #FC411C 92%, #F29C5A 100%);\n  }\n\u003c/style\u003e\n\n```\n\n## API Usage\n\n```JavaScript\n\nconst synthwave = require('synthwave');\n\n// Select x CSS\nsynthwave.css('x')\n\n// Select a,b,c,d CSS\nsynthwave.css(/[a-d]/)\n\n// Select raw a,b,c objects\nsynthwave.raw(/[a-c]/)\n\n// Render raw\nlet allRaw = synthwave.raw(/[cwmfjordbankglyphsvextquiz]/);\nlet allCss = synthwave.render(allRaw) // -\u003e CSS\n\n```\n\n## HTML Usage\n\nUse synthwave-```a-z``` class in a html node, for example:\n\n```html\n\n\u003cdiv class=\"synthwave-b\"\u003e\n  \u003cspan class=\"badge badge-dark\"\u003eHello World\u003c/span\u003e\n\u003c/div\u003e\n\n\n```\n\nAdd this to your HTML if you want to apply synthwave to HTML body.\n```css\n\nhtml, body { height: 100%;}\nbody { background-attachment: fixed !important; }\n\n```\n\n![](screenshot.jpg)\n\n## Developer Notes\n\ngit/.config remote origin holds to ease gh-pages publication\n\n    push = +refs/heads/master:refs/heads/gh-pages\n    push = +refs/heads/master:refs/heads/master\n\n\nindex.src.html is compiled to index.html via PostHTML\n\nnpm run watch\nparcel watch index.html.src.js --out-dir . --out-file index.html.js\n\n### Terminal Setup\n\n1. hs -c-1 .\n2. node dev-watch.js\n3. parcel watch index.html.src.js --out-dir . --out-file index.html.js\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffantasyui-com%2Fsynthwave","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffantasyui-com%2Fsynthwave","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffantasyui-com%2Fsynthwave/lists"}