update readmes, documenation, and expose more colors in colors

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 { color: var(--blue); }
-a:visited { color: var(--a-visited); }
+a:visited { color: var(--purple); }
 
 .tableWrapper {
 	max-width: 100%;

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
+	--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.

colors/base16-default.css

@@ -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);
 }

colors/gruvbox.css

@@ -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);

modules/readmes/buttonlist.txt

@@ -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">
+	<ul class="buttonlist">
-<li>
+	<li>
-	<a href="link to whatever">
+		<a href="link to whatever">
-		<p>text</p>
+			<p>text</p>
-	</a>
+		</a>
-</li>
+	</li>
-<li>
+	<li>
-	<a href="link to whatever2">
+		<a href="link to whatever2">
-		<p>text2</p>
+			<p>text2</p>
-	</a>
+		</a>
-</li>
+	</li>
-<li>
+	<li>
-	<a href="link to whatever3">
+		<a href="link to whatever3">
-		<p>text3</p>
+			<p>text3</p>
-	</a>
+		</a>
-</li>
+	</li>
-</ul>
+	</ul>

modules/readmes/darkmode.txt

@@ -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");

modules/readmes/search.txt

@@ -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">
+	<div id="searchWrapper">
-<input id="search" placeholder="Search">
+	<input id="search" placeholder="Search">
-</div>
+	</div>
-<p class="smallText" style="margin-top: 0; text-align: center">
+	<p class="smallText" style="margin-top: 0; text-align: center">
-        Press (<kbd>Shift</kbd>+)<kbd>Enter</kbd> to open first result (in new tab)
+		Press (<kbd>Shift</kbd>+)<kbd>Enter</kbd> to open first result (in new tab)
-</p>
+	</p>
-<div id="results"> </div>
+	<div id="results"> </div>

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
+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`.