~sircmpwn/core.sr.ht

874015d2017163c281ebba2bc2baa9d153a66f02 — Drew DeVault 1 year, 8 months ago 286b9ec 0.58.0
Improve accessibility & usability of global design

- Improve contrast on all page elements
- Add underlines to links
- Add hover states over actionable elements (e.g. tabs)
M srht/scss/base.scss => srht/scss/base.scss +79 -112
@@ 1,5 1,7 @@
@import "contrast";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";


@@ 23,8 25,8 @@

@import "icons";
@import "nav";

$base-font-size: 1rem;
@import "events";
@import "highlight";

body {
  font-family: sans-serif;


@@ 43,6 45,26 @@ p {
  margin-bottom: 0.5rem;
}

a {
  text-decoration: underline;

  &:hover {
    text-decoration: none;
  }
}

a.nav-link, a.navbar-brand, a.btn {
  text-decoration: none;
}

h1 a, h2 a, h3 a, h4 a, h5 a {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

label {
  margin-bottom: 0.25rem;
}


@@ 98,7 120,6 @@ h3 {
  padding-bottom: 0.25rem;

  small {
    @extend .text-muted;
    font-size: 1rem;
    margin-left: 1rem;
  }


@@ 110,7 131,6 @@ h4 {
  padding-bottom: 0.25rem;

  small {
    @extend .text-muted;
    font-size: 0.8rem;
    margin-left: 1rem;
  }


@@ 147,8 167,6 @@ h5 {
  }

  .btn-danger.btn-fill {
    background: lighten($danger, 5);

    &:hover {
      background: $danger;
    }


@@ 159,88 177,77 @@ section {
  padding-bottom: 0.5rem;
}

.btn {
  border-radius: 0;
  padding: 0.1rem 0.75rem;
  font-size: 0.9rem;
@mixin btn_type($background, $foreground, $border, $hover) {
  /* FINDME */
  background: $background;
  border: $border 1px solid;
  color: $foreground;

  &.btn-default {
    transition: background 0.1s linear;
    background: $gray-200;
    border: $gray-800 1px solid;
    color: black;
  @at-root a#{&} {
    color: $foreground;

    &:hover {
      background: $gray-100;
      color: color_adjust_contrast_AERT($foreground, $hover);
    }
  }

  &.btn-primary {
    border: darken($primary, 40) 1px solid;
  &:hover {
    background: $hover;
  }
}

  &.btn-success {
    border: darken($success, 30) 1px solid;
  }
.btn {
  border-radius: 0;
  padding: 0.1rem 0.75rem;
  font-size: 0.9rem;
  transition: background 0.1s linear;
}

  &.btn-info {
    border: darken($info, 30) 1px solid;
  }
.btn-default {
  @include btn_type($gray-300, $black, $gray-800, $gray-200);
}

  &.btn-danger {
    border: darken($danger, 30) 1px solid;
  }
.btn-primary {
  @include btn_type(darken($primary, 10), $white,
    darken($primary, 40), $primary);
}

  &.btn-link {
    padding: 0;
    font-size: $base-font-size;
    margin-top: -0.1rem;
  }
.btn-success {
  @include btn_type(darken($success, 12),
    color_adjust_contrast_AERT($white, darken($success, 5)),
    darken($success, 20), darken($success, 10));
}

  &.btn-fill {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    border: none;
    padding: 0;
    line-height: 1.6;
  }
.btn-info {
  @include btn_type(darken($info, 10), $white, darken($info, 40), $info);
}

.navbar-light .navbar-nav {
  .nav-link:hover {
    color: $black;
  }
.btn-danger {
  @include btn_type(darken($danger, 5), $white, darken($danger, 40), $danger);
}

.nav-tabs {
  padding-left: 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 3px #ddd solid;

  .nav-link {
    padding: 0 1rem;
    border-radius: 0;
    border: none;
    color: #777;
    cursor: pointer;

    &.active, &.active:hover {
      color: black;
      background: #ddd;
    }
.btn-link {
  padding: 0;
  font-size: $base-font-size;
  margin-top: -0.1rem;
}

    &[disabled], &[disabled]:hover {
      color: #888;
      cursor: not-allowed;
      background: transparent;
      padding-left: 0;
      padding-right: 0;
    }
.btn-fill {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border: none;
  padding: 0;
  line-height: 1.6;
}

.navbar-light {
  .navbar-brand {
    color: $black;
  }
}



@@ 275,7 282,7 @@ blockquote {
}

pre {
  background: $gray-200;
  background: $pre-background;
  padding: 0.25rem;
}



@@ 284,43 291,3 @@ code {
  background: transparent;
  color: black;
}

.event-list {
  .event {
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0.5rem;
    margin: 0.5rem 0;
    background: #f5f5f5;

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }

    h4 {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      margin-bottom: 0;
      padding: 0;
    }

    blockquote {
      margin-bottom: 0.5rem;

      *:last-child {
        margin-bottom: 0;
      }
    }

    *:last-child {
      margin-bottom: 0;
    }
  }

  margin-bottom: 1rem;
}

A srht/scss/contrast.scss => srht/scss/contrast.scss +133 -0
@@ 0,0 1,133 @@
/*
SCSS Color Methods for Accessibility
================================================================================
Adjust given colors to ensure that those color combination provide sufficient
contrast.
@version 0.1
@link http://eye48.com/go/scsscontrast
@license http://www.gnu.org/licenses/lgpl.html GNU Lesser General Public License (LGPL)
@author Michael Haschke, http://michael.haschke.biz/
Usage
--------------------------------------------------------------------------------
Import contrast.scss first, then use method ``color_adjust_contrast_AERT``.
```(scss)
@import 'libs/contrast';
.my-element {
    background-color: #eee;
    color: color_adjust_contrast_AERT(#ccc, #eee); // get grey with good contrast on #eee
}
```
How it works
--------------------------------------------------------------------------------
It tests for sufficent difference on brightness and color of two values. If it
is not enough contrats regarding test formulas of accessible guidelines then one
color is adjusted on lightness and saturation.
Methods using calculations from:
* "Techniques For Accessibility Evaluation And Repair Tools (AERT)" working draft,
  @see http://www.w3.org/TR/AERT#color-contrast
* TODO: add methods to test with WCAG2 formulas
*/

// -- AERT ----------------------------------------------------------------

@function color_adjust_contrast_AERT(
                            $color_adjust,
                            $color_keep,
                            $lightness_change_value:1,
                            $saturation_change_value:1,
                            $brightness_min: 50,
                            $difference_min: 450)
{

    @if (color_test_contrast_AERT($color_adjust, $color_keep, $brightness_min, $difference_min) == true)
    {
        @return $color_adjust;
    }

    $color_save: $color_adjust;
    $S: saturation($color_adjust);
    $L: lightness($color_adjust);
    
    $foundresult: false;
    @while(($foundresult == false) and ($S > 0 or ($L > 0 and $L < 100)))
    {
        $color_adjust: desaturate($color_adjust, $saturation_change_value);
        
        $S: $S - $saturation_change_value;
        @if (lightness($color_keep) > lightness($color_adjust))
        {
             $color_adjust: darken($color_adjust, $lightness_change_value);
             $L: $L - $lightness_change_value;
        }
        @else
        {
             $color_adjust: lighten($color_adjust, $lightness_change_value);
             $L: $L + $lightness_change_value;
        }
        $foundresult: color_test_contrast_AERT($color_adjust, $color_keep, $brightness_min, $difference_min);
    }
    
    @if ($foundresult == false)
    {
        @debug $color_save + " was adjusted to " + $color_adjust + " but this is not enough contrast to " + $color_keep + " (AERT).";
    }
    
    @return $color_adjust;
}

@function color_test_contrast_AERT($color_1, $color_2, $brightness_min: 75, $difference_min: 500)
{
    $difference_brightness: math_absolute(color_brightness_AERT($color_1) - color_brightness_AERT($color_2));
    $difference_color: color_difference_AERT($color_1, $color_2);
    
    @if (($difference_brightness < $brightness_min) or ($difference_color < $difference_min))
    {
        @return false;
    }
    @else
    {
        @return true;
    }
}

@function color_brightness_AERT($color)
{
    $r: red($color);
    $g: green($color);
    $b: blue($color);
    
    @return (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
}

@function color_difference_AERT($color1, $color2)
{
    $r1: red($color1);
    $g1: green($color1);
    $b1: blue($color1);
    
    $r2: red($color2);
    $g2: green($color2);
    $b2: blue($color2);
    
    @return (math_max($r1, $r2) - math_min($r1, $r2)) + (math_max($g1, $g2) - math_min($g1, $g2)) + (math_max($b1, $b2) - math_min($b1, $b2));
}

// -- math stuff ----------------------------------------------------------

@function math_max($value1, $value2)
{
    @if ($value1 > $value2) { @return $value1; }
    @return $value2;
}

@function math_min($value1, $value2)
{
    @if ($value1 < $value2) { @return $value1; }
    @return $value2;
}

@function math_absolute($value)
{
    @if ($value > 0) { @return $value; }
    @return $value * -1;
}

A srht/scss/events.scss => srht/scss/events.scss +44 -0
@@ 0,0 1,44 @@
.event-list {
  margin-bottom: 1rem;
}

.event {
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0.5rem;
  margin: 0.5rem 0;
  background: $event-background;
  @include anchor_with_contrast($background: $event-background);

  .text-muted {
    color: color_adjust_contrast_AERT($text-muted, $event-background);
  }

  &:first-child {
    margin-top: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }

  h4 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 0;
    padding: 0;
  }

  blockquote {
    margin-bottom: 0.5rem;

    *:last-child {
      margin-bottom: 0;
    }
  }

  *:last-child {
    margin-bottom: 0;
  }
}

A srht/scss/highlight.scss => srht/scss/highlight.scss +8 -0
@@ 0,0 1,8 @@
// Overrides for syntax highlighting (agreed, this is the wrong way to fix it)
.highlight .nl {
  color: darken(#A0A000, 10) !important;
}

.highlight .cp {
  color: darken(#BC7A00, 5) !important;
}

M srht/scss/nav.scss => srht/scss/nav.scss +41 -1
@@ 1,5 1,32 @@
.nav-tabs {
  padding-left: 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 3px $nav-tabs-background solid;

  .nav-link {
    padding: 0 1rem;
    border-radius: 0;
    border: none;
    color: color_adjust_contrast_AERT($gray-600, white);
    cursor: pointer;

    &.active, &.active:hover {
      color: black;
      background: $nav-tabs-background;
    }

    &[disabled], &[disabled]:hover {
      color: $gray-800;
      cursor: not-allowed;
      background: transparent;
      padding-left: 0;
      padding-right: 0;
    }
  }
}

.header-tabbed {
  border-bottom: 3px solid #ddd;
  border-bottom: 3px solid $nav-tabs-background;
  margin-bottom: 1rem;

  .container, .container-fluid {


@@ 33,6 60,13 @@
      align-self: flex-end;
    }

    .nav-item:hover {
      background: $nav-tabs-background;
      a {
        color: black;
      }
    }

    @include media-breakpoint-down(md) {
      flex-direction: column;
      padding-bottom: 1rem;


@@ 63,3 97,9 @@
    }
  }
}

.header-extension {
  margin-top: -1rem;
  margin-bottom: 1rem;
  background: $nav-tabs-background;
}

A srht/scss/variables.scss => srht/scss/variables.scss +22 -0
@@ 0,0 1,22 @@
$base-font-size: 1rem;

$navbar-light-color: color_adjust_contrast_AERT($gray-500, white);
$navbar-light-active-color: color_adjust_contrast_AERT($black, white);

$nav-tabs-background: #ddd;
$link-color: color_adjust_contrast_AERT(#0044ff, white);

$progress-bar-bg: $link-color;
$pre-background: $gray-200;

$event-background: $gray-100;

@mixin anchor_with_contrast($background: $white) {
  a {
    color: color_adjust_contrast_AERT($link-color, $background);
  }

  a:hover {
    color: color_adjust_contrast_AERT($link-hover-color, $background);
  }
}