Permalink
Browse files

Color contrast

* Increasing contrast via darker colors, and for links stronger underlines
* Created a new $neutral_color var (#555: +20%=#888, -20%=#222)
* Changed color variables to be $x_color (matching $x_font)
  • Loading branch information...
oli committed Feb 22, 2011
1 parent b87b6b5 commit b63608b86ef34268c564282a9e212fc9170e181a
Showing with 49 additions and 33 deletions.
  1. +3 −2 sass/_global_variables.scss
  2. +1 −1 sass/_typography.scss
  3. +33 −26 sass/all.scss
  4. +2 −2 sass/desktop.scss
  5. +10 −2 styleguide.html
@@ -3,5 +3,6 @@ $title_font: "M+2pheavy", "Helvetica Neue", Arial, Helvetica, sans-serif;
$clean_font: "Helvetica Neue", Arial, Helvetica, sans-serif;
$code_font: "DejaVu Sans Mono", Inconsolata, Consolas, "Lucida Console", monospace;
-$color_base: #CC211B;
-$link_base: #055799; /* triad blue */
+$base_color: #CC211B;
+$link_color: #055799; /* triad blue */
+$neutral_color: #555;
View
@@ -19,4 +19,4 @@ h4, h5 { font-size: 120%; }
h6 { font-size: 100%; }
h5, h6 { font-family: $clean_font; }
h4, h6 { font-weight: bold; }
-h4, h5, h6 { color: darken($color_base, 30%); }
+h4, h5, h6 { color: darken($base_color, 30%); }
View
@@ -7,34 +7,40 @@
@import "global_variables";
-a:link { color: lighten($link_base, 10%); text-decoration: none; border-bottom: 1px solid #b8b8b8; }
-a:visited { color: darken($link_base, 10%); border-bottom: 1px solid #e8e8e8; }
-a:hover { color: darken($link_base, 20%); border-bottom: 1px solid darken($link_base, 20%); }
-a:active { color: $color_base; border-bottom: none; }
+.test1 {color: lighten($link_color, 20%);}
+.test2 {color: lighten($link_color, 10%);}
+.test3 {color: darken($link_color, 10%);}
+.test4 {color: darken($link_color, 20%);}
+
+body {color: #222;}
+a:link { color: lighten($link_color, 10%); text-decoration: none; border-bottom: 1px solid #aaa; }
+a:visited { color: darken($link_color, 10%); border-bottom: 1px solid #ccc; }
+a:hover { color: #000; border-bottom: 1px solid #000; }
+a:active { color: $base_color; border-bottom: none; }
p.pubdate { display: none; }
header.head {
div.logo {
@include border-radius(0.3em);
- font-size: 10px; background-color: $color_base; color: #fff; padding: 2.5em 0.7em 0.25em; font-family: $clean_font; text-align: center; letter-spacing: 0.1em;
+ font-size: 10px; background-color: $base_color; color: #fff; padding: 2.5em 0.7em 0.25em; font-family: $clean_font; text-align: center; letter-spacing: 0.1em;
}
h1 { line-height: 1em; font-family: $title_font; font-weight: bold; color: black; }
h1 a { color: black; }
h1 a:link, h1 a:visited {border-bottom: 0;}
h1 a:hover { text-shadow: 0 0 5px rgba(0,0,0,.6); }
- h2 { font-size: 12px; margin-bottom: 0.5em; font-family: $body_font; font-style: italic; font-weight: normal; color: #666; }
+ h2 { font-size: 12px; margin-bottom: 0.5em; font-family: $body_font; font-style: italic; font-weight: normal; color: $neutral_color; }
div#search {
ol:empty { border: 0; }
ol {
li { text-align: left; list-style: none; }
- li a { display: block; color: #666; padding: 0.2em 0.4em; }
- li a span { color: lighten(#666, 20%); display: block; font-style: italic; font-size: 0.7em; }
+ li a { display: block; color: darken($neutral_color, 20%); padding: 0.2em 0.4em; }
+ li a span { color: $neutral_color; display: block; font-style: italic; font-size: 0.7em; }
li a:focus, li a.selected {
- color: white; background-color: $color_base;
- span { color: rgba(255, 255, 255, 0.6); }
+ color: white; background-color: $base_color;
+ span { color: rgba(255, 255, 255, 0.7); }
}
li:first-child a.selected { @include border-radius(0.2em 0.2em 0 0); }
li:last-of-type a.selected { @include border-radius(0 0 0.2em 0.2em); }
@@ -54,7 +60,7 @@ section[role="main"] > h2 {
a.secno, h3 .secno, h4 .secno, h5 .secno, h6 .secno { display: none; } /* Only top level section numbering */
h3, h4, h5, h6 { margin: 3em 0 1em 0; }
-h4, h5, h6 { color: darken($color_base, 30%); }
+h4, h5, h6 { color: darken($base_color, 30%); }
section#credits {
margin-top: 3em;
@@ -66,7 +72,7 @@ p { margin-bottom: 1em; }
ul, ol, dl { margin-bottom: 1em; }
ul li { list-style: none; /*margin-bottom: 0.25em;*/ }
-ul li:before { content: '\22c5'; font-size: 2em; color: #CCC; margin-left: -0.65em; font-family: $clean_font; font-weight: bold; }
+ul li:before { content: '\22c5'; font-size: 2em; vertical-align: middle; color: $neutral_color; margin-left: -0.65em; font-family: $clean_font; font-weight: bold; } /* todo: why not middot? */
ul li ul { margin: 0em; }
li li { margin-left: 1.2em; }
@@ -91,26 +97,27 @@ pre {
pre::-webkit-scrollbar { height: 1.2ex; }
pre::-webkit-scrollbar-thumb:horizontal { background: rgba(0, 0, 0, 0.15); -webkit-border-radius:1ex; }
pre::-webkit-scrollbar-thumb:horizontal:hover{ background: rgba(0, 0, 0, 0.2); cursor:pointer; }
-pre::-webkit-scrollbar-thumb:horizontal:active{ background: lighten($color_base, 20%); }
+pre::-webkit-scrollbar-thumb:horizontal:active{ background: lighten($base_color, 20%); }
pre.idl { display: none; } /* Browser implementors, only, I reckon */
section[role="main"] > dl { margin: 2em 0; }
dt { font-weight: bold; }
dd { margin-bottom: 0.5em; }
table { border: 0; }
-table th, table td { border: 0; border-bottom: 1px solid #acc; padding: 4px; vertical-align: top; }
+table th, table td { border: 0; border-bottom: 1px solid #acc; padding: 4px; vertical-align: top; } /* todo */
table th li, table td li { margin: 0 0 0 1.5em; }
-table caption, table th { text-align: left; color: darken($color_base, 30%); }
+table caption, table th { text-align: left; color: darken($base_color, 30%); }
table th { font-weight: bold; }
table td { vertical-align: top; padding: 0.25em 1.25em 0.25em 0em; }
table tr, table tbody { border: 0px; }
hr { display: none; }
.toc {
- a:link { border-bottom: 1px solid #eee; }
- a:visited { border-bottom: 1px solid #fff; }
- .secno { color: #999; }
+ a:link { border-bottom: 1px solid #bbb; }
+ a:visited { border-bottom: 1px solid #eee; }
+ a:hover { color: #000; border-bottom: 1px solid #000; }
+ .secno { color: lighten($neutral_color, 20%); }
}
/* Only found on the index page */
@@ -128,24 +135,24 @@ strong.rfc2119 { font-size: 0.8em; letter-spacing: 0.1; text-transform: uppercas
(http://developers.whatwg.org/introduction.html#typographic-conventions)
*/
.note { padding: 3px; background-color: #eee; }
-.example { color: #666; font-style: italic; }
-.XXX { background-color: lighten($color_base, 50%); padding: 0.5em; } /* An open issue */
-.warning { background-color: lighten($color_base, 40%); border: 1px solid $color_base; padding: 0.5em; }
+.example { color: $neutral_color; font-style: italic; }
+.XXX { background-color: lighten($base_color, 50%); padding: 0.5em; } /* An open issue */
+.warning { background-color: lighten($base_color, 40%); border: 1px solid $base_color; padding: 0.5em; }
.css {
- &:before { content: "CSS:"; color: #999; font-size: 1em; display: block; background: transparent; }
+ &:before { content: "CSS:"; color: lighten($neutral_color, 20%); font-size: 1em; display: block; background: transparent; }
}
/* Up next */
div#up-next {
@include box-shadow(2px, 2px, 3px, rgba(0, 0, 0, 0.4));
- margin-top: 3em; padding: 0.7em 1em; background-color: darken($color_base, 30%);
+ margin-top: 3em; padding: 0.7em 1em; background-color: darken($base_color, 30%);
p { font-style: italic; font-size: 0.7em; margin: 0; color: white; }
h1 { font-weight: bold; font-size: 16px; margin: 0; color: white; }
h1:after{ content: ""; }
&:hover {
- background: $color_base;
+ background: $base_color;
@include box-shadow(3px, 3px, 6px, rgba(0, 0, 0, 0.7));
h1 { color: white; }
p { color: white; }
@@ -154,8 +161,8 @@ div#up-next {
/* Footer (all pages) */
body .wrapper > footer {
- margin-top: 3em; border-top: 1px solid #ccc; padding: 1em 0 0 0; clear: right;
- p { color: #666; font-size: 1em; margin: 0; }
+ margin-top: 3em; border-top: 1px solid #ccc; padding: 1em 0 0 0; clear: right;
+ p { color: $neutral_color; font-size: 1em; margin: 0; }
}
/* Offline */
View
@@ -25,7 +25,7 @@ header.head {
ol {
@include border-radius(0.2em);
@include box-shadow(0, 0, 1em, rgba(0, 0, 0, 0.75));
- position: absolute; right: 0; width: 25em; background-color: #eeeeee; z-index: 1;
+ position: absolute; right: 0; width: 25em; background-color: #eee; z-index: 1;
}
}
}
@@ -48,7 +48,7 @@ div.reference-wrapper {
@include clearfix;
p, dt { @include column(9); }
- aside.reference { @include column(3); word-wrap: break-word; font-size: 11px; color: #777; font-style: italic; margin: 0 0 1em 0; }
+ aside.reference { @include column(3); word-wrap: break-word; font-size: 11px; color: lighten($neutral_color, 10%); font-style: italic; margin: 0 0 1em 0; }
a[href*="#refs"] { display: none; } /* Hide reference style links */
}
View
@@ -34,6 +34,14 @@ <h2 class="no-num no-toc">A technical specification for Web developers</h2>
<h2><span class="secno">1 </span> Style Guide</h2>
+<h3>Todo</h3>
+
+<ul>
+<li><code>.secno</code></li>
+<li><code>.brief</code></li>
+<li><code>.domtree</code> + associated</li>
+</ul>
+
<section id="headings">
<h3>Headings</h3>
@@ -1653,9 +1661,9 @@ <h3>Styles from the specification</h3>
<p class="example">This is a block <code>.example</code></p>
<p>This is an <span class="XXX">inline open issue (<code>.XXX</code>)</span></p>
-<p class="XXX">This is a block open issue (because open issues are sex-ay!)</span></p>
+<p class="XXX">This is a block open issue (open issues are sex-ay!)</span></p>
-<p>This is an <span class="warning">warning <code>.warning</code></span></p>
+<p>This is an <span class="warning">inline <code>.warning</code></span></p>
<p class="warning">This is a block <code>.warning</code></p>
<pre>This is code in <code>&lt;pre&gt;</code></pre>

0 comments on commit b63608b

Please sign in to comment.