[Vit-discuss] CSS mods: low vision, a first step (patch)

Hugh Sasse hgs at dmu.ac.uk
Fri Sep 15 11:59:48 EDT 2006


In the following patch I have tried to address some of the issues
I have had viewing the Ruby site.  In particular
  * Add alternate stylesheet (avoids pollution of well-loved style)
  * Improve visibility of search box
  * Bump up a few font sizes
  * increase contrast on menu links, and on who-submitted-what info.

Issues that remain unaddressed:

  * flipping the body colourscheme to light on dark. 
  * fine-grained layout improvements
  * reduction of the number of images (which make colour selection more
    difficult.)
  * make columns wider to accommodate larger text

However, it is a start, and I'm pretty sure it doesn't break anything.
The patch is below.  (There is probably a way to tell patch to derive
a new stylesheet from an old one, but I don't have a clue what that is,
so I've just done it by touch'ing the non-existant version of the old
file and doing the diff against that.)

        HTH
        Hugh

--- ./en/index.html.orig	2006-09-12 18:53:55.357928000 +0100
+++ ./en/index.html	2006-09-15 15:06:15.769223000 +0100
@@ -4,7 +4,8 @@
   <head>
     <title>Ruby Programming Language</title>
     <link rel="stylesheet" type="text/css" href="/stylesheets/low.css" />
-    <link rel="stylesheet" type="text/css" href="/stylesheets/screen.css" media="screen" />
+    <link rel="stylesheet" type="text/css" title="standard" href="/stylesheets/screen.css" media="screen" />
+    <link rel="alternate stylesheet" type="text/css" title="low vision" href="/stylesheets/screen_lo_vis.css" media="screen" />
     <link rel="stylesheet" type="text/css" href="/stylesheets/print.css" media="print" />
     <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
     <link href="/en/feeds/news.rss" rel="alternate" title="RSS" type="application/rss+xml" />
--- ./stylesheets/screen_lo_vis.css.orig	1980-01-01 00:00:00.000000000 +0000
+++ ./stylesheets/screen_lo_vis.css	2006-09-15 15:32:03.614018000 +0100
@@ -0,0 +1,6 @@
+/*
+	screen_lo_vis.css - styles for the screen for visually impaired people
+*/
+
+ at import url(/stylesheets/high_lo_vis.css);
+ at import url(/stylesheets/shared_lo_vis.css);
--- ./stylesheets/high_lo_vis.css.orig	1980-01-01 00:00:00.000000000 +0000
+++ ./stylesheets/high_lo_vis.css	2006-09-15 16:43:23.090433000 +0100
@@ -0,0 +1,510 @@
+/*
+  high.css - styles for modern browsers, but for people with low vision.
+*/
+
+body {
+  background-color: #213449;
+  color: white;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+.site-links {
+  background-image: url(/images/site-links-background.gif);
+  background-position: bottom;
+  background-repeat: repeat-x;
+}
+.site-links a, .site-links a:visited, .site-links strong {
+  color: white;
+  text-decoration: none;
+  display: block;
+  padding: 8px;
+  padding-left: 6px;
+  padding-right: 6px;
+  margin-left: 4px;
+  float: left;
+}
+.site-links a:hover {
+  color: white;
+  text-decoration: underline;
+}
+.site-links strong a, .site-links strong a:visited {
+  padding: 0;
+  margin: 0;
+  display: inline;
+}
+#page {
+  background-image: url(/images/shadow.jpg);
+  background-position: center;
+  background-repeat: repeat-y;
+}
+#logo {
+  background-image: url(/images/logo-background.jpg);
+  background-position: top left;
+  background-repeat: no-repeat;
+  padding-top: 14px;
+}
+#logo img {
+  position: relative;
+  z-index: 1;
+}
+#header, #main-wrapper {
+  background: white;
+  text-align: left;
+  margin-left: auto;
+  margin-right: auto;
+  width: 766px;
+}
+#header {
+  background-image: url(/images/header-background.jpg);
+  background-position: right;
+  background-repeat: repeat-y;
+}
+#header .site-links {
+  float: left;
+  width: 100%;
+}
+#main {
+  color: black;
+  background-color: white;
+  background-image: url(/images/columns.jpg);
+  background-position: right;
+  background-repeat: repeat-y;
+  float: left;
+}
+#main .site-links {
+  width: 766px;
+  float: left;
+  clear: both;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+#content-wrapper {
+  float: left;
+  width: 766px;
+  margin-right: -400px;
+}
+#head-wrapper-1 {
+  background-color: #346090;
+  background-image: url(/images/blue-columns.jpg);
+  background-repeat: repeat-y;
+  background-position: center;
+  margin-left: 0px;
+  margin-bottom: 24px;
+  color: white;
+  float: left;
+  width: 100%;
+}
+#head-wrapper-2 {
+  float: left;
+  width: 100%;
+}
+#head {
+  float: left;
+  padding-top: 24px;
+  padding-bottom: 24px;
+  width: 100%;
+}
+#head h1 {
+  font-size: 240%;
+  padding-left: 32px;
+  margin: 0;
+  margin-top: 18px;
+  margin-right: 269px;
+}
+#head a { color: white; }
+#intro, #code {
+  display: inline;
+  float: left;
+}
+#intro {
+  color: #d3dce6;
+  font-size: 95%;
+  padding-left: 32px;
+  padding-right: 23px;
+  padding-bottom: 10px;
+  width: 202px;
+}
+#intro h1 {
+  background-image: url(/images/dotted-underline.gif);
+  background-position: bottom;
+  background-repeat: repeat-x;
+  color: white;
+  font-size: 240%;
+  margin: 0;
+  margin-bottom: .5em;
+  padding: 0;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+#intro p {
+  line-height: 150%;
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+#code {
+  color: white;
+  display: block;
+  font-size: 95%;
+  line-height: 110%;
+  padding-top: 24px;
+  width: 244px;
+}
+#code div {
+  display: block;
+  font-family: "Lucida Console", Monaco, monospace;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+#code .keyword {
+  color: #f9bb00;
+}
+#code .comment {
+  color: #428bdd;
+}
+#code .string {
+  color: #00cc00;
+}
+#code .blank-line {
+  line-height: 70%;
+}
+#head .multi-page {
+  float: right;
+  font-weight: normal;
+  margin-top: 18px;
+  margin-right: 269px;
+  padding-top: 1em;
+}
+#head .multi-page .separator {
+  display: none;
+}
+#head .multi-page a,
+#head .multi-page strong {
+  padding: 3px;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+#head .multi-page strong {
+  border: 2px solid #b0c5dd;
+}
+#content {
+  margin-right: 239px;
+  padding: 32px;
+  padding-top: 1px;
+  line-height: 160%;
+}
+#content h3 {
+  background-image: url(/images/dotted-underline.gif);
+  background-position: bottom;
+  background-repeat: repeat-x;
+  padding-bottom: 8px;
+}
+#content h3 a {
+  color: #c61a1a;
+  text-decoration: none;
+}
+#content h3 a:hover, #content h3 a:visited:hover {
+  color: #e85353;
+}
+#content #news ul {
+  float: left;
+  list-style: none;
+  margin: 0;
+  margin-right: 10px;
+  line-height: 120%;
+  padding: 0;
+  width: 220px;
+}
+#content #news ul li {
+  background-image: url(/images/bullet.gif);
+  background-position: left top;
+  background-repeat: no-repeat;
+  display: block;
+  list-style: none;
+  margin: 0;
+  margin-top: .25em;
+  margin-bottom: .75em;
+  padding: 0;
+  padding-left: 12px;
+}
+#content #news ul a {
+  color: #1111ee;
+  display: block;
+  /* font-family: Georgia, Palatino, "Times New Roman", Times, serif; */
+  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
+  font-size: 125%;
+  line-height: 110%;
+  text-decoration: none;
+}
+#content #news ul a:hover,
+#content #news ul a:visited:hover {
+  text-decoration: underline;
+}
+#content #news .more {
+  clear: both;
+  margin-top: 1em;
+}
+#content pre.code {
+  background-color: #213449;
+  background-image: url(/images/code-box-top-left.gif);
+  background-position: top left;
+  background-repeat: no-repeat;
+  color: white;
+  display: block;
+  overflow: auto;
+  width: 100%;
+}
+#content pre.code code {
+  background-image: url(/images/code-box-bottom-right.gif);
+  background-position: bottom right;
+  background-repeat: no-repeat;
+  display: block;
+  font-family: "Lucida Console", Monaco, monospace;
+  font-size: 115%;
+  line-height: 135%;
+  padding: 15px;
+}
+#content pre.code .comment {
+  color: #428bdd;
+}
+#content pre.code .keyword {
+  color: #f9bb00;
+}
+#content pre.code .method {
+  color: #fff;
+}
+#content pre.code .class {
+  color: #fff;
+}
+#content pre.code .module {
+  color: #050;
+}
+#content pre.code .punct {
+  color: #8aa6c1;
+}
+#content pre.code .symbol {
+  color: #b53b3c;
+}
+#content pre.code .string {
+  color: #00cc00;
+}
+#content pre.code .char {
+  color: #f07;
+}
+#content pre.code .ident {
+  color: #fff;
+}
+#content pre.code .constant {
+  color: #8aa6c1;
+}
+#content pre.code .regex {
+  color: #ca4344;
+}
+#content pre.code .number {
+  color: #eddd3d;
+}
+#content pre.code .global {
+  color: #fff;
+}
+#content pre.code .expr {
+  color: #fff;
+}
+#content pre.code .escape {
+  color: #eddd3d;
+}
+#content pre.code .attribute {  
+  color: #8aa6c1;
+}
+#content pre.code.xml-code .string {
+  color: #fff;
+}
+#content dl dt {
+  /* font-family: Georgia, Palatino, "Times New Roman", Times, serif; */
+  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  font-size: 120%;
+  margin-top: 1em;
+}
+#content dl dd {
+  margin-left: 1.5em;
+}
+#content .error {
+  color: red;
+}
+#content .fieldset {
+  border-top: 3px solid #39618b;
+  background: #e2ebf6;
+  background: #e2eff6;
+  width: 100%;
+}
+#subscriptions-form .fieldset td {
+  background-image: url(/images/dark-dotted-underline.gif);
+  background-position: bottom;
+  background-repeat: repeat-x;
+  padding: 5px;
+  padding-left: 15px;
+}
+#content .fieldset td.label {
+  text-align: right;
+}
+#content .buttons {
+  margin-top: 1.5em;
+}
+#content .buttons input[type=submit] {
+  font-size: 130%;
+}
+#sidebar-wrapper {
+  float: right;
+  width: 237px;
+}
+#sidebar {
+  font-size: 90%;
+  margin-top: 26px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+#sidebar h3 {
+  /* background-image: url(/images/dotted-underline.gif); */
+  background-position: bottom;
+  background-repeat: repeat-x;
+  color: #333333;
+  font-size: 130%;
+  margin-top: 2.5em;
+  margin-bottom: .5em;
+  padding-bottom: 4px;
+}
+#sidebar ul, #sidebar ul li {
+  margin-left: .75em;
+  margin-top: 0;
+  padding-left: 0;
+}
+#sidebar ul li {
+  margin-bottom: .25em;
+}
+#sidebar .navigation {
+  margin-bottom: 22px;
+}
+#sidebar .navigation h3,
+#sidebar .navigation ul li,
+#sidebar .navigation .more {
+  margin: 0;
+  padding: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+#sidebar .navigation h3 {
+  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
+  font-size: 100%;
+  font-weight: normal;
+  background: #1a4676;
+  color: white;
+  margin: 0;
+  padding-bottom: 5px;
+}
+#sidebar .navigation h3 strong {
+  font-family: Georgia, Palatino, "Times New Roman", Times, serif;
+  font-size: 130%;
+}
+#sidebar .navigation ul,
+#sidebar .navigation ul li {
+  list-style: none;
+  margin: 0;
+}
+#sidebar .navigation ul li {
+  background-color: #dbeff6;
+  /* background-image: url(/images/dark-dotted-underline.gif); */
+  background-position: bottom;
+  background-repeat: repeat-x;
+  padding-bottom: 8px;
+}
+#sidebar .navigation .more {
+  padding-bottom: 8px;
+}
+#sidebar .navigation .menu a,
+#sidebar .navigation .more a {
+  color: #1111ee;
+  text-decoration: none;
+}
+#sidebar .navigation a {
+  color: #1111ee;
+  text-decoration: none;
+}
+#sidebar .navigation .menu a:hover,
+#sidebar .navigation .menu a:visited:hover,
+#sidebar .navigation .more a:hover,
+#sidebar .navigation .more a:visited:hover {
+  text-decoration: underline;
+}
+#search-box {
+  clear: both;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: left;
+  width: 738px;
+}
+#search-form {
+  position: absolute;
+  top: 57px;
+  width: 738px;
+}
+#search-box .fieldset {
+  float: right;
+}
+#search-form .field {
+  width: 214px;
+  height: 20px;
+}
+#search-form .button {
+  width: 148px;
+  height: 48px;
+}
+#foot { clear: both; }
+#footer p {
+  color: #8D959F;
+  font-size: 85%;
+  margin: auto;
+  margin-top: 0;
+  margin-bottom: .75em;
+  padding: 14px;
+  padding-top: 0;
+  padding-bottom: 0;
+  text-align: left;
+  width: 738px;
+}
+#footer a, #footer a:visited {
+  color: #B6BCC2;
+}
+#footer a:hover, #footer a:visited:hover {
+  color: white;
+}
+#footer .fine-print {
+  background-color: #213449;
+  background-image: url(/images/footer-background.jpg);
+  background-position: top;
+  background-repeat: no-repeat;
+  clear: both;
+  line-height: 140%;
+  padding-top: 10px;
+}
+
+/* layouts */
+
+#home-page-layout #head-wrapper-1 {
+  background-image: url(/images/blue-columns-home-page.jpg);
+  margin-bottom: -5px;
+}
+#home-page-layout #head-wrapper-1:first-child {
+  margin-bottom: 24px;
+}
+#home-page-layout #head-wrapper-2 {
+  background-image: url(/images/blue-columns-top-home-page.jpg);
+  background-repeat: no-repeat;
+  background-position: top;
+}
+#home-page-layout #head {
+  background-image: url(/images/blue-columns-bottom-home-page.jpg);
+  background-repeat: no-repeat;
+  background-position: bottom;
+}
--- ./stylesheets/shared_lo_vis.css.orig	1980-01-01 00:00:00.000000000 +0000
+++ ./stylesheets/shared_lo_vis.css	2006-09-15 16:02:02.753375000 +0100
@@ -0,0 +1,73 @@
+/*
+  shared.css - styles shared between print and high
+*/
+body {
+  font-size: 90%;
+}
+.hidden-modern {
+  position: absolute;
+  left: -20000px;
+  top: -20000px;
+}
+.site-links .separator { display: none; }
+.site-links {
+  background-color: #7d0000;
+}
+#content h2 {
+  font-size: 180%;
+  margin-top: 1.5em;
+}
+#content h3 {
+  color: #b60a0a;
+  font-weight: normal;
+  font-size: 180%;
+  line-height: 120%;
+  /*margin-top: 1.5em;*/
+  margin-bottom: .75em;
+}
+#content .post {
+  margin-bottom: 2em;
+}
+#content h4 {
+  font-weight: normal;
+  font-size: 170%;
+  line-height: 120%;
+  margin-top: 2em;
+  margin-bottom: 1em;
+}
+#content h5 {
+  font-weight: bold;
+  font-size: 120%;
+  line-height: 120%;
+  margin-top: 2em;
+  margin-bottom: 1em;
+}
+#content p {
+  margin-top: 0;
+}
+#content .post-info {
+  color: #706f59;
+  font-size: 100%;
+}
+#search-form .field {
+  border: 4px solid #a3a39f;
+}
+#search-form .button {
+  border: 4px solid #a3a39f;
+  background-color: #f6f6e7;
+  color: #9b9b95;
+  font-family: Georgia, Palatino, "Times New Roman", Times, serif;
+  font-size: 24px;
+  font-weight: bold;
+}
+#footer {
+  clear: both;
+}
+
+
+/* layouts */
+
+#home-page-layout h3 {
+  margin-top: 1.5em;
+  margin-bottom: .5em;
+}


More information about the vit-discuss mailing list