update readmes, documenation, and expose more colors in colors
This commit is contained in:
parent
6143411d69
commit
c7465706c4
GPG Key ID:
20609519444A1269
7
base.css
7
base.css
|
|
@ -1,10 +1,9 @@
|
|||
:root {
|
||||
--light: #fefefe;
|
||||
--dark: var(--colorscheme-dark);
|
||||
|
||||
--fg: var(--dark);
|
||||
--bg: var(--light);
|
||||
--a: var(--blue);
|
||||
--a-visited: var(--purple);
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -19,8 +18,8 @@ body {
|
|||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
a { color: var(--a); }
|
||||
a:visited { color: var(--a-visited); }
|
||||
a { color: var(--blue); }
|
||||
a:visited { color: var(--purple); }
|
||||
|
||||
.tableWrapper {
|
||||
max-width: 100%;
|
||||
|
|
|
|||
10
colors.txt
10
colors.txt
|
|
@ -1,6 +1,6 @@
|
|||
in the css
|
||||
|
||||
@import url("https://styles.alv.cx/colors/<colorscheme>.css");
|
||||
@import url("https://styles.alv.cx/colors/<colorscheme>.css");
|
||||
|
||||
and use the variables created in the file
|
||||
|
||||
|
|
@ -15,8 +15,8 @@ switching between colorschemes easily)
|
|||
--blue
|
||||
--purple
|
||||
|
||||
--light
|
||||
--dark
|
||||
--colorscheme-light
|
||||
--colorscheme-dark
|
||||
|
||||
prefer to use `--fg` and `--bg` and be careful with using `--light` and `--dark`
|
||||
as it may make light/dark mode switching a pain
|
||||
colorschemes also have their own custom colors inside, which can be used if
|
||||
switching themes is not a concern.
|
||||
|
|
|
|||
|
|
@ -29,12 +29,13 @@
|
|||
--base16-purple: var(--base16-base0E);
|
||||
--base16-brown: var(--base16-base0F);
|
||||
|
||||
--colorscheme-light: var(--base16-fg);
|
||||
--colorscheme-dark: var(--base16-bg);
|
||||
|
||||
--orange: var(--base16-orange);
|
||||
--red: var(--base16-red);
|
||||
--green: var(--base16-green);
|
||||
--yellow: var(--base16-yellow);
|
||||
--blue: var(--base16-blue);
|
||||
--purple: var(--base16-purple);
|
||||
--light: var(--base16-fg);
|
||||
--dark: var(--base16-bg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,6 +33,9 @@
|
|||
--gruvbox-fg4: #a89984;
|
||||
--gruvbox-gray: #928374;
|
||||
|
||||
--colorscheme-light: var(--gruvbox-fg);
|
||||
--colorscheme-dark: var(--gruvbox-bg);
|
||||
|
||||
--orange: var(--gruvbox-orange);
|
||||
--red: var(--gruvbox-red);
|
||||
--green: var(--gruvbox-green);
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
in the css
|
||||
|
||||
@import url("https://styles.alv.cx/modules/darkmode.css");
|
||||
@import url("https://styles.alv.cx/modules/darkmode.css");
|
||||
|
||||
example:
|
||||
|
||||
<ul class="buttonlist">
|
||||
<li>
|
||||
<a href="link to whatever">
|
||||
<p>text</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="link to whatever2">
|
||||
<p>text2</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="link to whatever3">
|
||||
<p>text3</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="buttonlist">
|
||||
<li>
|
||||
<a href="link to whatever">
|
||||
<p>text</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="link to whatever2">
|
||||
<p>text2</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="link to whatever3">
|
||||
<p>text3</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
in the css
|
||||
|
||||
@import url("https://styles.alv.cx/modules/darkmode.css");
|
||||
@import url("https://styles.alv.cx/modules/darkmode.css");
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
in the css
|
||||
|
||||
@import url("https://styles.alv.cx/modules/darkmode.css");
|
||||
@import url("https://styles.alv.cx/modules/darkmode.css");
|
||||
|
||||
example:
|
||||
|
||||
<div id="searchWrapper">
|
||||
<input id="search" placeholder="Search">
|
||||
</div>
|
||||
<p class="smallText" style="margin-top: 0; text-align: center">
|
||||
Press (<kbd>Shift</kbd>+)<kbd>Enter</kbd> to open first result (in new tab)
|
||||
</p>
|
||||
<div id="results"> </div>
|
||||
<div id="searchWrapper">
|
||||
<input id="search" placeholder="Search">
|
||||
</div>
|
||||
<p class="smallText" style="margin-top: 0; text-align: center">
|
||||
Press (<kbd>Shift</kbd>+)<kbd>Enter</kbd> to open first result (in new tab)
|
||||
</p>
|
||||
<div id="results"> </div>
|
||||
|
|
|
|||
30
readme.txt
30
readme.txt
|
|
@ -12,13 +12,31 @@ to style a site:
|
|||
@import url("https://styles.alv.cx/base.css");
|
||||
|
||||
replacing <colorscheme> with one of the options available at
|
||||
readme/
|
||||
`https://styles.alv.cx/colors`
|
||||
|
||||
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
|
||||
https://styles.alv.cx/modules/
|
||||
3. a list of actively hosted modules can be seen in this repo in the modules folder
|
||||
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
|
||||
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
|
||||
variables and colors available
|
||||
------------------------------
|
||||
|
||||
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