Discussion:
CSS mods: low vision, a first step (patch)
Hugh Sasse
2006-09-15 15:59:48 UTC
Permalink
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
+*/
+
+@import url(/stylesheets/high_lo_vis.css);
+@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;
+}
Curt Hibbs
2006-09-15 17:23:56 UTC
Permalink
Thanks Hugh... I'm cross posting this to the vit-core mailing list.

Curt
Post by Hugh Sasse
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.
* 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" />
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
+*/
+
--- ./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;
+}
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
http://rubyforge.org/mailman/listinfo/vit-discuss
Hugh Sasse
2006-09-15 17:36:27 UTC
Permalink
Post by Curt Hibbs
Thanks Hugh... I'm cross posting this to the vit-core mailing list.
Is that archived somewhere? I could really do without joining another
list just now :-) but I'd like to see how it goes down.
Post by Curt Hibbs
Curt
Thank you,
Hugh
Post by Curt Hibbs
Post by Hugh Sasse
In the following patch I have tried to address some of the issues
I have had viewing the Ruby site. In particular
John W. Long
2006-09-17 00:44:43 UTC
Permalink
Post by Hugh Sasse
Post by Curt Hibbs
Thanks Hugh... I'm cross posting this to the vit-core mailing list.
Is that archived somewhere? I could really do without joining another
list just now :-) but I'd like to see how it goes down.
It is archived, but only members can access it. We will let you know
what is decided.

--
John Long
http://wiseheartdesign.com
Hugh Sasse
2006-10-27 12:50:47 UTC
Permalink
It's over a month since I submitted this patch, and as far as I
can see the site's CSS remains unchanged. Could someone update me
please?
Thank you,
Hugh
Post by Curt Hibbs
Thanks Hugh... I'm cross posting this to the vit-core mailing list.
Curt
Post by Hugh Sasse
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.
* 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
[617 lines trimmed]

Loading...