update readmes, documenation, and expose more colors in colors

This commit is contained in:
Akbar Rahman 2022-04-13 17:55:16 +01:00
parent 6143411d69
commit c7465706c4
Signed by: alvierahman90
GPG Key ID: 20609519444A1269
8 changed files with 65 additions and 44 deletions

View File

@ -1,10 +1,9 @@
:root { :root {
--light: #fefefe; --light: #fefefe;
--dark: var(--colorscheme-dark);
--fg: var(--dark); --fg: var(--dark);
--bg: var(--light); --bg: var(--light);
--a: var(--blue);
--a-visited: var(--purple);
} }
body { body {
@ -19,8 +18,8 @@ body {
background-color: var(--bg); background-color: var(--bg);
} }
a { color: var(--a); } a { color: var(--blue); }
a:visited { color: var(--a-visited); } a:visited { color: var(--purple); }
.tableWrapper { .tableWrapper {
max-width: 100%; max-width: 100%;

View File

@ -15,8 +15,8 @@ switching between colorschemes easily)
--blue --blue
--purple --purple
--light --colorscheme-light
--dark --colorscheme-dark
prefer to use `--fg` and `--bg` and be careful with using `--light` and `--dark` colorschemes also have their own custom colors inside, which can be used if
as it may make light/dark mode switching a pain switching themes is not a concern.

View File

@ -29,12 +29,13 @@
--base16-purple: var(--base16-base0E); --base16-purple: var(--base16-base0E);
--base16-brown: var(--base16-base0F); --base16-brown: var(--base16-base0F);
--colorscheme-light: var(--base16-fg);
--colorscheme-dark: var(--base16-bg);
--orange: var(--base16-orange); --orange: var(--base16-orange);
--red: var(--base16-red); --red: var(--base16-red);
--green: var(--base16-green); --green: var(--base16-green);
--yellow: var(--base16-yellow); --yellow: var(--base16-yellow);
--blue: var(--base16-blue); --blue: var(--base16-blue);
--purple: var(--base16-purple); --purple: var(--base16-purple);
--light: var(--base16-fg);
--dark: var(--base16-bg);
} }

View File

@ -33,6 +33,9 @@
--gruvbox-fg4: #a89984; --gruvbox-fg4: #a89984;
--gruvbox-gray: #928374; --gruvbox-gray: #928374;
--colorscheme-light: var(--gruvbox-fg);
--colorscheme-dark: var(--gruvbox-bg);
--orange: var(--gruvbox-orange); --orange: var(--gruvbox-orange);
--red: var(--gruvbox-red); --red: var(--gruvbox-red);
--green: var(--gruvbox-green); --green: var(--gruvbox-green);

View File

@ -12,13 +12,31 @@ to style a site:
@import url("https://styles.alv.cx/base.css"); @import url("https://styles.alv.cx/base.css");
replacing <colorscheme> with one of the options available at replacing <colorscheme> with one of the options available at
readme/ `https://styles.alv.cx/colors`
2. add any of the optional modules you want. 2. add any of the optional modules you want.
3. a list of actively hosted modules can be seen in this repo in the modules folder and at 3. a list of actively hosted modules can be seen in this repo in the modules folder
https://styles.alv.cx/modules/ and at `https://styles.alv.cx/modules/`
there are some variables you may want to use to keep your site's styling consistent and you can variables and colors available
view them in the `:root` section of `base.css` and any module you use. ------------------------------
more colors are available at https://styles.alv.cx/colors.txt
there are some variables you may want to use to keep your site's styling
consistent and you can view them in the `:root` section of `base.css` and any
module you use.
the variables defined in `base.css` are:
--fg
--bg
--light
--dark
you should prefer to use `--fg` and `--bg` over `--light` and `--dark` as that
will take of dark mode switching for you.
every colorscheme will have a standard set of variables, which can be viewed at
`https://styles.alv.cx/colors.txt` .
some modules may have variables which can be adjusted also, such as `rainbow.css`.