diff --git a/README.md b/README.md index fa4109c..ce0c522 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,10 @@ # intergrav/dev.css -Extremely simple, small, classless CSS framework in the style of Vercel's Geist. It weighs only **~5kb** and makes any plain HTML file look great. It has a light and dark theme, and the header turns into a sidebar on wider displays so that you get more vertical space. +Extremely simple, small, classless CSS framework in the style of Vercel's Geist. Inspired by [xz/new.css](https://github.com/xz/new.css). + +It weighs only **~5kb** and makes any plain HTML file look great. + +It has a light and dark theme, and the header turns into a sidebar on wider displays so that you get more vertical space. ## Importing @@ -26,3 +30,7 @@ I also recommend adding a font through [intergrav/fonts](https://github.com/inte ```html ``` + +## Themes + +You can also use custom colors and fonts in dev.css through themes. See the `/theme` folder to view some premade ones. You can also copy the `boilerplate.css` and make a theme yourself. Simply apply it after the dev.css stylesheet. diff --git a/dev.css b/dev.css index c6e3c5f..6de18da 100644 --- a/dev.css +++ b/dev.css @@ -20,7 +20,7 @@ --dc-d-tx-2: #a1a1a1; --dc-d-bg-1: #000; --dc-d-bg-2: #ffffff0f; - --dc-d-bg-3: #2e2e2e; + --dc-d-bg-3: #ffffff24; --dc-d-lk-1: #52a8ff; --dc-d-lkb-1: #0072f5; --dc-d-lkb-2: #0062d1; diff --git a/theme/boilerplate.css b/theme/boilerplate.css new file mode 100644 index 0000000..b625c00 --- /dev/null +++ b/theme/boilerplate.css @@ -0,0 +1,19 @@ +/* This theme is a template that you can modify */ + +:root { + /* Fonts */ + --dc-font-sans: sans-serif; /* Sans Serif */ + --dc-font-mono: monospace; /* Monospace */ + /* Colors */ + --dc-tx-1: #000000; /* Primary text */ + --dc-tx-2: #1a1a1a; /* Secondary text */ + --dc-bg-1: #fafafa; /* Main background */ + --dc-bg-2: #fff; /* Secondary background */ + --dc-bg-3: #ebebeb; /* Outlines */ + --dc-lk-1: #0068d6; /* Link text */ + --dc-lkb-1: #0072f5; /* Link button background */ + --dc-lkb-2: #0062d1; /* Link button background (hover) */ + --dc-lkb-tx: #ededed; /* Link button text */ + --dc-ac-1: #8e4ec6; /* Accent color */ + --dc-ac-tx: #ededed; /* Accent color text */ +} diff --git a/theme/night.css b/theme/night.css new file mode 100644 index 0000000..1e14d6c --- /dev/null +++ b/theme/night.css @@ -0,0 +1,16 @@ +/* This theme will make it always dark, regardless of device setting */ + +:root { + /* Colors */ + --dc-tx-1: #ededed; + --dc-tx-2: #a1a1a1; + --dc-bg-1: #000; + --dc-bg-2: #ffffff0f; + --dc-bg-3: #ffffff24; + --dc-lk-1: #52a8ff; + --dc-lkb-1: #0072f5; + --dc-lkb-2: #0062d1; + --dc-lkb-tx: #ededed; + --dc-ac-1: #8e4ec6; + --dc-ac-tx: #ededed; +} diff --git a/theme/terminal.css b/theme/terminal.css new file mode 100644 index 0000000..fe7acd3 --- /dev/null +++ b/theme/terminal.css @@ -0,0 +1,21 @@ +/* This theme has a similar look to a computer terminal */ + +@import url("https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css"); + +:root { + /* Fonts */ + --dc-font-sans: "Geist Mono", monospace; + --dc-font-mono: "Geist Mono", monospace; + /* Colors */ + --dc-tx-1: #ffffff; + --dc-tx-2: #eeeeee; + --dc-bg-1: #000000; + --dc-bg-2: #002700; + --dc-bg-3: #005800; + --dc-lk-1: #00ff00; + --dc-lkb-1: #00ff00; + --dc-lkb-2: #00d400; + --dc-lkb-tx: #000000; + --dc-ac-1: #00ff00; + --dc-ac-tx: #000000; +}