Color pallete of site to easily compare color values.

12 years ago · f5a54b264f
2 changed files with 92 additions and 4 deletions
--- a/src/styles/color-pallete.html
+++ b/src/styles/color-pallete.html
@ -0,0 +1,90 @@
 <!DOCTYPE html>
 <title>CSS site color pallete</title>
 <style>
   td {
      width: 20em;
   }
   .color-block {
      height: 50px;
   }
   .color-desc {
      height: 25px;
      padding: 5% 10% 0 10%;
      text-align: center;
   }
 </style>
 <table>
   <tr>
      <td class="color-desc">
         $background: #e5e5e5
      </td>
      <td class="color-desc">
         $componentbg: #f5f5f5
      </td>
      <td class="color-desc">
         $componentfg1: #262626
      </td>
   </tr>
   <tr>
      <td class="color-block" style="background-color: #e5e5e5;"></td>
      <td class="color-block" style="background-color: #f5f5f5;"></td>
      <td class="color-block" style="background-color: #262626;"></td>
   </tr>
   <tr>
      <td class="color-desc">
         $componentfg2: rgba(0,0,0,.5)
      </td>
      <td class="color-desc">
         $componentfg3: rgba(0,0,0,.2)
      </td>
      <td class="color-desc">
         $componentfg4: #737373
      </td>
   </tr>
   <tr>
      <td class="color-block" style="background-color: rgba(0,0,0,.5);"></td>
      <td class="color-block" style="background-color: rgba(0,0,0,.2);"></td>
      <td class="color-block" style="background-color: #737373;"></td>
   </tr>
   <tr>
      <td class="color-desc">
         $sidepanebg: white
      </td>
      <td class="color-desc">
         $bordercolor: #ccc
      </td>
      <td class="color-desc">
         $actioncolor1: rgb(132,184,25)
      </td>
   </tr>
   <tr>
      <td class="color-block" style="background-color: white;"></td>
      <td class="color-block" style="background-color: #ccc;"></td>
      <td class="color-block" style="background-color: rgb(132,184,25);"></td>
   </tr>
   <tr>
      <td class="color-desc">
         $actioncolor2: rgb(0,149,52)
      </td>
      <td class="color-desc">
         none: #222
      </td>
      <td class="color-desc">
         none: #db4f39
      </td>
   </tr>
   <tr>
      <td class="color-block" style="background-color: rgb(0,149,52);"></td>
      <td class="color-block" style="background-color: #222;"></td>
      <td class="color-block" style="background-color: #db4f39;"></td>
   </tr>
   <tr>
      <td class="color-desc">
         none: #84b819
      </td>
   </tr>
   <tr>
      <td class="color-block" style="background-color: #84b819;"></td>
   </tr>
 </table>
--- a/src/styles/global/_variables.scss
+++ b/src/styles/global/_variables.scss
@ -22,6 +22,8 @@ $background: #e5e5e5;
 $componentbg: #f5f5f5;
 $componentfg1: #262626;
 $componentfg2: rgba(0,0,0,.5);
 //rgba(0,0,0,.4)
 //rgba(0,0,0,.3)
 $componentfg3: rgba(0,0,0,.2);
 $componentfg4: #737373;
 $sidepanebg: white;
@ -29,10 +31,6 @@ $bordercolor: #ccc;
 $actioncolor1: rgb(132,184,25);
 $actioncolor2: rgb(0,149,52);
 //rgba(0,0,0,.4)
 //rgba(0,0,0,.3)
 //rgba(0,0,0,.2)
 //#ccc
 //#222
 //#db4f39
 //#84b819