zhdk/madek

<section class="sg-body">
  <div class="sg-intro">
    <h2 class="sg-intro-title">Contrast Variations</h2>
    <p>Madek comes with an extra, high-contrast variation accessible on-demand via user menu.</p>
    <h3>Default vs. Contrasted Variation.</h3>
    <p>There are 2 <code>application</code> stylesheets in the <code>/app/assets/stylesheets/</code> folder. The first one, <code>application.sass</code>, is the primary one which is being loaded by default. The other, <code>application-contrasted.sass</code>, replaces the primary one only if user has toggled high contrast mode via the user menu.</p>
    <p><code>application.sass</code> uses <code>_colors.sass</code> to define default UI color palette whereas <code>appliaction-contrasted.sass</code> makes use of <code>_colors-contrasted.sass</code> where high contrast color variables are defined. When expanding color schemes in the future (for example to add another color to replace default green Madek instance), make sure to add new color variables to both <code>color</code> files located in <code>/app/assets/stylesheets/</code> folder.</p>
  </div>
  <div class="sg-intro">
    <h2 class="sg-intro-title">Color Variations</h2>
    <p>Madek comes with 4 default color schemes:</p>
    <ul>
      <li>Green</li>
      <li>Blue</li>
      <li>Red</li>
      <li>Monochrome</li>
    </ul>
    <p>Swithing between color schemes is as simple as altering scheme variables in the <code>_config</code> stylesheet located in the <code>/app/assets/stylesheets</code> folder: 'true' to any other <code>$scheme-%</code> variable and disable the currently set one by changing its value to <code>false</code>.</p>
    <p>Color schemes are defined in both <code>_colors-all</code> and <code>_colors-projection</code> placed in the <code>/app/assets/stylesheets/</code> folder. The first one defines the default color palette whereas the latter defines the contrasted variation accessible via the user menu (documented above).</p>
  </div>
</section>