{"id":13700306,"url":"https://github.com/LunarLogic/auroral","last_synced_at":"2025-05-04T18:34:53.132Z","repository":{"id":66543022,"uuid":"64225432","full_name":"LunarLogic/auroral","owner":"LunarLogic","description":"Animated background gradients with pure CSS","archived":false,"fork":false,"pushed_at":"2018-01-10T15:00:18.000Z","size":40,"stargazers_count":279,"open_issues_count":0,"forks_count":20,"subscribers_count":20,"default_branch":"master","last_synced_at":"2024-06-11T20:37:33.015Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LunarLogic.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-07-26T13:56:01.000Z","updated_at":"2024-06-08T05:15:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"2942c0af-fff6-400e-9e78-a509b484c06d","html_url":"https://github.com/LunarLogic/auroral","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/LunarLogic%2Fauroral","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LunarLogic%2Fauroral/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LunarLogic%2Fauroral/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LunarLogic%2Fauroral/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LunarLogic","download_url":"https://codeload.github.com/LunarLogic/auroral/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252383151,"owners_count":21739282,"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":"2024-08-02T20:00:53.987Z","updated_at":"2025-05-04T18:34:48.070Z","avatar_url":"https://github.com/LunarLogic.png","language":"CSS","funding_links":[],"categories":["Uncategorized","CSS"],"sub_categories":["Uncategorized"],"readme":"# Auroral - Animated background gradients\n\nAuroral is a collection of animated background gradients, that can be used almost anywhere. They are built with pure CSS. To learn how it works, [read the article](http://blog.lunarlogic.io/2016/let-your-website-cast-the-northern-lights-auroral/).\n\n# Demo\n\nYou can test all effects on the [Auroral demo page](https://lunarlogic.github.io/auroral/).\n\n#How to use\n\n1. Include a container for a background inside a wanted element. It needs to have [one of the auroral classes](#backgrounds).\n\n    ```html\n    \u003csection class=\"your-container\"\u003e\n      \u003cdiv class=\"auroral-northern\"\u003e\u003c/div\u003e\n    \u003c/section\u003e\n    ```\n\n2. In the head of your html file, add [auroral stylesheet](https://github.com/LunarLogic/auroral/blob/master/css/auroral.css). Of course, you can add [minified version](https://github.com/LunarLogic/auroral/blob/master/min/style.css.min) instead.\n\n    ```html\n    \u003chead\u003e\n      \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"css/auroral.css\"/\u003e\n    \u003c/head\u003e\n    ```\n\n    Or:\n\n    ```html\n    \u003chead\u003e\n      \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"css/auroral.min.css\"/\u003e\n    \u003c/head\u003e\n    ```\n\n3. Make sure, that your container (the one in which you put the auroral container) has these rules in CSS:\n\n    ```css\n    .your-container {\n      display: block; // if it is not a block element\n      position: relative;\n      overflow: hidden;\n    }\n    ```\n\n# Stars!\n\nWhat is a night sky without the stars? Add them by appending an element with the ***auroral-stars*** class right after the auroral container:\n\n```html\n  \u003csection class=\"your-container\"\u003e\n    \u003cdiv class=\"auroral-northern\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"auroral-stars\"\u003e\u003c/div\u003e\n  \u003c/section\u003e\n```\n\nIf you know how to use [Sass](http://sass-lang.com/) you can play with the ***$star-number*** variable, to make sure there is a right amount of them! It sits in [_stars.scss partial](https://github.com/LunarLogic/auroral/blob/master/scss/_stars.scss).\n\n\n#Backgrounds\n\nCurrently available backgrounds (class names to be used in your container):\n\n  - auroral-northern (Northern Lights style),\n  - auroral-northern-intense ([Intense Northern Lights](http://mynorthwest.com/wp-content/uploads/cms/15/1540/154044.jpg)),\n  - auroral-northern-dimmed ([Delicate Northern Lights](http://www.seattletimes.com/nation-world/photos-of-the-day-march-7-2016/)),\n  - auroral-northern-dusk (Delicate Northern Lights spin-off),\n  - auroral-northern-warm ([Warm Northern Lights](http://cdn.images.express.co.uk/img/dynamic/151/590x/Northern-Lights-586620.jpg)),\n  - auroral-agrabah (Inspired by the colors of the night sky in [Aladdin](http://www.imdb.com/title/tt0103639/) :D).\n\n## License\n\nThe library is [licensed](https://github.com/LunarLogic/starability/blob/master/LICENSE) under [The MIT License (MIT)](http://choosealicense.com/licenses/mit/).\n\nGo to [Lunar Logic website](http://www.lunarlogic.io/) to learn more [about us](http://www.lunarlogic.io/company) and [our work](http://www.lunarlogic.io/portfolio).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLunarLogic%2Fauroral","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLunarLogic%2Fauroral","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLunarLogic%2Fauroral/lists"}