-
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
James Brundage
committed
Apr 22, 2024
1 parent
2e666a9
commit 4be2a3b
Showing
1 changed file
with
29 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,58 @@ | ||
| * Either ANSI`$Number` or `ColorName` work (for the sake of sanity) | ||
| * Every color comes with a `-fill` and `-stroke` class (for SVGs and Canvases) | ||
| * Every color comes with a `-background` class (for brighter backgrounds) | ||
| * Background and foreground should be set automatically | ||
| ### CDN | ||
|
|
||
| > https://cdn.jsdelivr.net/gh/2bitdesigns/4bitcss@latest/css/<span class='ColorSchemeFileName' /> | ||
| * Background and foreground should be set automatically | ||
| * Most HTML elements should match! | ||
|
|
||
| ### HTML | ||
|
|
||
| * Either ANSI`$Number` or `ColorName` work (for the sake of sanity) | ||
| * Every color comes with a `-background` class (for brighter backgrounds) | ||
|
|
||
| --- | ||
|
|
||
| ~~~html | ||
| <div style='text-align:center'> | ||
| <span class='black white-background'>Black/White</span> | ||
| <span class='ANSI9 ANSI0-background'>BrightRed on Black</span> | ||
| <br/> | ||
| <span class='black white-background'>Black on White</span> | ||
| </div> | ||
| ~~~ | ||
|
|
||
| --- | ||
|
|
||
| <div style='text-align:center'> | ||
| <span class='black white-background'>Black/White</span> | ||
| <span class='ANSI9 ANSI0-background'>BrightRed on Black</span> | ||
| <br/> | ||
| <span class='black white-background'>Black on White</span> | ||
| </div> | ||
|
|
||
| --- | ||
|
|
||
| ### SVG | ||
|
|
||
| * Use `-fill` classes to fill a shape | ||
| * Use `-stroke` classes to color lines and borders | ||
|
|
||
| --- | ||
|
|
||
| ~~~svg | ||
| <svg viewBox="0 0 100 100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="15%" width="15%" > | ||
| <line x1="0%" x2="100%" y1="25%" y2="25%" class="purple-stroke" /> | ||
| <rect width="25%" height="25%" x="75%" y="50%" class="blue-fill" /> | ||
| <rect width="50%" height="50%" x="25%" y="25%" class="blue-fill" /> | ||
| <circle r="25%" cx="50%" cy="50%" class="red-stroke green-fill" /> | ||
| <line x1="0%" x2="100%" y1="50%" y2="50%" class="purple-stroke" /> | ||
| </svg> | ||
| ~~~ | ||
|
|
||
| --- | ||
|
|
||
| <div style='text-align:center'> | ||
| <svg viewBox="0 0 100 100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="15%" width="15%" > | ||
| <line x1="0%" x2="100%" y1="25%" y2="25%" class="purple-stroke" /> | ||
| <rect width="25%" height="25%" x="75%" y="50%" class="blue-fill" /> | ||
| <svg viewBox="0 0 100 100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="15%" width="15%" > | ||
| <rect width="50%" height="50%" x="25%" y="25%" class="blue-fill" /> | ||
| <circle r="25%" cx="50%" cy="50%" class="red-stroke green-fill" /> | ||
| <line x1="0%" x2="100%" y1="50%" y2="50%" class="purple-stroke" /> | ||
| </svg> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| --- |