From c7465706c4a357006796c7a11e5904ce45d1a5df Mon Sep 17 00:00:00 2001 From: Alvie Rahman Date: Wed, 13 Apr 2022 17:55:16 +0100 Subject: [PATCH] update readmes, documenation, and expose more colors in colors --- base.css | 7 +++---- colors.txt | 10 +++++----- colors/base16-default.css | 5 +++-- colors/gruvbox.css | 3 +++ modules/readmes/buttonlist.txt | 36 +++++++++++++++++----------------- modules/readmes/darkmode.txt | 2 +- modules/readmes/search.txt | 16 +++++++-------- readme.txt | 30 ++++++++++++++++++++++------ 8 files changed, 65 insertions(+), 44 deletions(-) diff --git a/base.css b/base.css index 62553e5..1958264 100644 --- a/base.css +++ b/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%; diff --git a/colors.txt b/colors.txt index 67d429a..ba0d864 100644 --- a/colors.txt +++ b/colors.txt @@ -1,6 +1,6 @@ in the css -@import url("https://styles.alv.cx/colors/.css"); + @import url("https://styles.alv.cx/colors/.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. diff --git a/colors/base16-default.css b/colors/base16-default.css index 5627dfa..e91afe0 100644 --- a/colors/base16-default.css +++ b/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); } diff --git a/colors/gruvbox.css b/colors/gruvbox.css index 64caffe..1c7ab77 100644 --- a/colors/gruvbox.css +++ b/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); diff --git a/modules/readmes/buttonlist.txt b/modules/readmes/buttonlist.txt index ef50696..5be27f5 100644 --- a/modules/readmes/buttonlist.txt +++ b/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: - + diff --git a/modules/readmes/darkmode.txt b/modules/readmes/darkmode.txt index 0b1281d..4633243 100644 --- a/modules/readmes/darkmode.txt +++ b/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"); diff --git a/modules/readmes/search.txt b/modules/readmes/search.txt index 4407930..ab21c4f 100644 --- a/modules/readmes/search.txt +++ b/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: -
- -
-

- Press (Shift+)Enter to open first result (in new tab) -

-
+
+ +
+

+ Press (Shift+)Enter to open first result (in new tab) +

+
diff --git a/readme.txt b/readme.txt index 0953cf8..1711dea 100644 --- a/readme.txt +++ b/readme.txt @@ -12,13 +12,31 @@ to style a site: @import url("https://styles.alv.cx/base.css"); replacing 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`.