69 lines
2.6 KiB
HTML
69 lines
2.6 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
body {
|
|
margin: 2rem;
|
|
font-family: sans-serif;
|
|
}
|
|
body > div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 1em;
|
|
}
|
|
body > div > div {
|
|
width: 5rem;
|
|
height: 5rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
#base00 { background-color: #1e1e2e; color: #cdd6f4; }
|
|
#base01 { background-color: #181825; color: #cdd6f4; }
|
|
#base02 { background-color: #313244; color: #cdd6f4; }
|
|
#base03 { background-color: #45475a; color: #1e1e2e; }
|
|
#base04 { background-color: #585b70; color: #1e1e2e; }
|
|
#base05 { background-color: #cdd6f4; color: #1e1e2e; }
|
|
#base06 { background-color: #f5e0dc; color: #1e1e2e; }
|
|
#base07 { background-color: #b4befe; color: #1e1e2e; }
|
|
#base08 { background-color: #f38ba8; color: #1e1e2e; }
|
|
#base09 { background-color: #fab387; color: #1e1e2e; }
|
|
#base0A { background-color: #f9e2af; color: #1e1e2e; }
|
|
#base0B { background-color: #a6e3a1; color: #1e1e2e; }
|
|
#base0C { background-color: #94e2d5; color: #1e1e2e; }
|
|
#base0D { background-color: #89b4fa; color: #1e1e2e; }
|
|
#base0E { background-color: #cba6f7; color: #1e1e2e; }
|
|
#base0F { background-color: #f2cdcd; color: #1e1e2e; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>Primary colors</h2>
|
|
<div>
|
|
<div id="base00">00</div>
|
|
<div id="base01">01</div>
|
|
<div id="base02">02</div>
|
|
<div id="base03">03</div>
|
|
<div id="base04">04</div>
|
|
<div id="base05">05</div>
|
|
<div id="base06">06</div>
|
|
<div id="base07">07</div>
|
|
</div>
|
|
|
|
<h2>Accents</h2>
|
|
<div>
|
|
<div id="base08">08</div>
|
|
<div id="base09">09</div>
|
|
<div id="base0A">0A</div>
|
|
<div id="base0B">0B</div>
|
|
<div id="base0C">0C</div>
|
|
<div id="base0D">0D</div>
|
|
<div id="base0E">0E</div>
|
|
<div id="base0F">0F</div>
|
|
</div>
|
|
|
|
<h2>Documentation</h2>
|
|
<p>Each color should be used as described in <a href="https://github.com/chriskempson/base16/blob/main/styling.md#styling-guidelines"> this table</a>.</p>
|
|
<p>See the <a href="https://nix-community.github.io/stylix">Stylix documentation</a> for how to apply these colors on NixOS.</p>
|
|
</body>
|
|
</html>
|