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

Hugh Sasse hgs at dmu.ac.uk
Wed Nov 15 05:30:36 EST 2006


I submitted this patch 2 months ago.  In case it has been completely
forgotten I'm submitting it in full again.  I'm doing this because
I've seen no changes along these lines on the website.

        HTH
        Hugh

---------- Forwarded message ----------
Date: Fri, 15 Sep 2006 16:59:48 +0100 (WEST)
From: Hugh Sasse <hgs at dmu.ac.uk>
Reply-To: vit-discuss at rubyforge.org
To: vit-discuss at rubyforge.org
Subject: [Vit-discuss] CSS mods: low vision, a first step (patch)

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;
+}
_______________________________________________
vit-discuss mailing list
vit-discuss at rubyforge.org
http://rubyforge.org/mailman/listinfo/vit-discuss


More information about the vit-discuss mailing list