LibreGaming
/
frontend-styles
Archived
14
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity
LibreGaming Frontend Styles contains the stylesheets and code used on the LibreGaming Website. Frontend Styles offers responsive design and modularity. https://libregaming.org
This repository has been archived on 2022-02-28. You can view files and clone it, but cannot push or open issues or pull requests.
40 Commits 3 Branches 0 Tags 263 KiB
SCSS 37.1%
HTML 32.1%
CSS 22.8%
JavaScript 8%
Go to file
nx a02f04cb0b white blended theme is default 
Dark was previously chosen as the default theme color, this meant light text on dark backgrounds. Now we move over to white. Browser extensions and system dark settings can do the heavy lifting for us. Support for a light theme is our aim.

settings/_colors.scss

Colors saw additional navbar color variables to bring cohesion to the table. For instance, $nav-bg-color.

components/_toolbar.scss

We shifted the practise of hard boiling hexidecimal values and opted for linking the variables from the color settings. Any changes to settings will be easily reflected across the toolbar with less effort.
 		2022-02-04 01:41:41 +00:00
public previously known app.js 2022-02-02 01:15:02 +00:00
src white blended theme is default 2022-02-04 01:41:41 +00:00
.gitignore Initial commit 2022-01-23 18:48:18 +00:00
LICENSE Initial commit 2022-01-23 18:48:18 +00:00
README.md first description and details of project 2022-01-23 19:12:53 +00:00
package.json version minor bump 0.1.1 2022-02-02 01:18:53 +00:00
webpack.config.js uncompressed sass in devel 2022-02-01 23:05:47 +00:00

README.md

🚀 LibreGaming Design System!

This project contains code and styles useful for those wanting to copy the look and feel of LibreGaming. This serves to bring consistency to across LibreGaming service and avoid repeating work.

Run locally

Web files are provided in public folder, you can view them via a Web Browser. The files are ready, no need to setup a build environment.

For those looking to copy beautiful layout and styles, include style.css inside your html files. Extra functionality, such as dropdown menus, is enabled by also including 'app.js' inside your html files.

Once done, you can begin using the style definitions within HTML elements. For example, text-lightblue renders text with LibreGaming's blue branding colours.

Assets

Assets such as logos are available inside src/assets.

Development

You will need Node.js installed if you want to develop the project's code.

npm run build

to bundle your application