css-system-colors

[ACTIVE] a grid of css system colors
git clone git://git.figbert.com/css-system-colors.git
Log | Files | Refs | LICENSE

index.html (2838B)

      1 <!DOCTYPE html>
      2 <html lang="en">
      3   <head>
      4     <meta charset="UTF-8">
      5     <meta name="viewport" content="width=device-width, initial-scale=1">
      6     <title>CSS System Colors Dashboard</title>
      7     <meta name="description" content="A visual grid of CSS system colors, by figbert.">
      8     <style>
      9       :root {
     10         color-scheme: light dark;
     11         font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
     12       }
     13 
     14       header {
     15         text-align: center;
     16       }
     17 
     18       h1 {
     19         margin-block-end: 0;
     20       }
     21 
     22       h2 {
     23         margin-block-start: 0;
     24       }
     25 
     26       main {
     27         width: 75%;
     28         margin-inline: auto;
     29       }
     30 
     31       .colors {
     32         display: flex;
     33         flex-wrap: wrap;
     34         justify-content: space-around;
     35       }
     36 
     37       figure {
     38         margin-inline: 0;
     39       }
     40 
     41       section {
     42         width: 6em;
     43         height: 6em;
     44         margin-inline: 1em;
     45         margin-block: 1em;
     46         box-shadow: 0.25em 0.25em 0.25em 0.25em rgb(0 0 0 / 20%);
     47         border: solid;
     48         border-radius: 1em;
     49       }
     50 
     51       #about {
     52         max-width: 50ch;
     53         border: solid;
     54         box-shadow: 0.25em 0.25em 0.5em 0.25em rgb(0 0 0 / 20%);
     55         padding: 2em;
     56         margin-inline: auto;
     57         margin-block: 5em;
     58         border-radius: 1em;
     59       }
     60 
     61       footer {
     62         text-align: center;
     63       }
     64     </style>
     65   </head>
     66   <body>
     67     <header>
     68       <h1>CSS System Colors Dashboard</h1>
     69       <h2>by <a href="https://figbert.com">figbert</a></h2>
     70     </header>
     71     <main>
     72       <h3>Colors</h3>
     73       <div class="colors">
     74         {% for color in crate::COLORS %}
     75         <figure>
     76           <section style="background-color: {{ color }};"></section>
     77           <figcaption style="text-align: center;">{{ color }}</figcaption>
     78         </figure>
     79         {% endfor %}
     80       </div>
     81       <h3>Deprecated</h3>
     82       <p>These values have been deprecated for use on public web pages.
     83       You may or may not see a color.</p>
     84       <div class="colors">
     85         {% for color in crate::DEPRECATED %}
     86         <figure>
     87           <section style="background-color: {{ color }};"></section>
     88           <figcaption style="text-align: center;">{{ color }}</figcaption>
     89         </figure>
     90         {% endfor %}
     91       </div>
     92       <div id="about">
     93         <h3>About</h3>
     94         <p>Jim Nielsen's <a
     95           href="https://blog.jim-nielsen.com/2021/css-system-colors/">CSS
     96           System Colors</a> introduced me to the concept of native colors
     97         in CSS. Now I use them all the time! MDN has <a
     98           href="https://developer.mozilla.org/en-US/docs/Web/CSS/system-color">a
     99           great list</a>. But it's not visual.</p>
    100         <p>So: a grid.</p>
    101       </div>
    102     </main>
    103     <footer>✡︎</footer>
    104   </body>
    105 </html>