update readmes, documenation, and expose more colors in colors
This commit is contained in:
parent
6143411d69
commit
c7465706c4
7
base.css
7
base.css
@ -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%;
|
||||||
|
@ -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.
|
||||||
|
@ -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);
|
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
|
30
readme.txt
30
readme.txt
@ -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`.
|
||||||
|
Loading…
Reference in New Issue
Block a user