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

Curt Hibbs curt.hibbs at gmail.com
Fri Sep 15 13:23:56 EDT 2006


Thanks Hugh... I'm cross posting this to the vit-core mailing list.

Curt

On 9/15/06, Hugh Sasse <hgs at dmu.ac.uk> wrote:
>
> 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
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://rubyforge.org/pipermail/vit-discuss/attachments/20060915/b400f4d0/attachment-0001.html 


More information about the vit-discuss mailing list