or if not that, then nearly so.
The biggest problem is the overall smallness of each page. The site is far too
narrow and apparently was designed for monitors with 800x600 screen
resolutions. This was unacceptable five years ago and is even more unacceptable
now. Further, the fonts are tiny, and worse, they and almost every other sized
property are specified using hard-coded pixel widths. For scalable,
cross-platform design, percentages and em-widths should be preferred. Links
should display some sort of text-decoration when moused-over so it is always
clear which link will be selected when the user clicks, even when two or more
links are especially close together. SqueakSource is, after the primary home
pages, the public face of the Squeak and Pharo projects. It is crucial then
that it look--if not great--at least decent. Enclosed is prettified CSS that
fixes some of these defects. (Note that Image url() references need to be
filled in, and it still probably needs some tweaking.)
body {
border:0;
background:gray;
text-align:center;
margin:0;
padding:10px;
font-size:0.9em;
}
body,div,table,tr,td,th,form input,form submit {
font-family:Geneva, Arial, Helvetica, sans-serif;
}
table,tr,td,th,form {
border:0;
margin:0;
padding:0;
}
th {
text-align:left;
}
a,a:visited {
color:#360484;
text-decoration:none;
}
a:hover,a:active {
text-decoration:underline;
}
#container {
width:90%;
background:white url(/inserturl) repeat-y 4%;
border:1px solid black;
border-top:5px solid black;
border-bottom:5px solid black;
text-align:left;
margin:auto;
}
#top {
width:100%;
height:50px;
background:url(/inserturl) no-repeat;
border-bottom:1px solid black;
font-size:0.7em;
text-align:right;
}
#sstoolbar {
height:2em;
border-bottom:1px solid black;
background:white;
}
#sstoolbar a {
display:block;
float:left;
margin-left:-1px;
border-left:1px solid black;
border-right:1px solid black;
line-height:2em;
height:2em;
letter-spacing:1px;
text-decoration:none;
padding:0px 10px;
}
#sstoolbar a:hover,#sstoolbar a:active {
background-color:#360484;
color:white;
text-decoration: none;
}
#page {
padding:0;
}
#page td,#page th {
padding-right:5px;
vertical-align:top;
}
#navigation {
float:left;
width:12%;
padding:0 10px 10px 10px;
}
#navigation .title {
margin-top:11px;
font-weight:bold;
}
#contents {
width:70%;
height:auto;
text-align:justify;
margin:0 0 0 16%;
padding:5px 10px 10px;
}
#contents h1 {
margin-top:0;
font-size:20px;
}
#contents h2 {
margin-bottom:5px;
font-size:15px;
}
#contents h3 {
margin-bottom:5px;
font-size:13px;
}
#contents hr {
border:none;
border-bottom:1px dotted black;
}
#contents p {
width:90%;
}
#bottom {
padding-left:5px;
padding-right:5px;
clear:both;
border-top:1px solid black;
background:white;
margin:0;
}
.TabSelected {
background-color:#360484;
color:white;
width:95px;
text-align:center;
}
.TabUnselected {
background-color:#D0C4E2;
width:95px;
text-align:center;
}
.TabSpacer {
width:5px;
}
.TabLine {
background-color:#360484;
}
#batch {
text-align:center;
margin-top:8px;
}
.evenRow {
background-color:#E7E1F0;
}
.largeLabel {
width:120px;
}
.mediumLabel {
width:100px;
}
.smallLabel {
width:80px;
}
.activityTable {
margin-left:auto;
margin-right:auto;
}
#window-titlebar {
background-color:#D0C4E2;
margin-bottom:10px;
width:100%;
}
#window-title {
text-align:right;
width:66%;
}
#window-close {
text-align:right;
}
.column-choice select {
min-width:15em;
}
_______________________________________________
Pharo-project mailing list
[email protected]
http://lists.gforge.inria.fr/cgi-bin/mailman/listinfo/pharo-project
