[Pharo-project] SqueakSource is unusable

April 10, 2010

      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;
}

jaayer

StÃ©phane Ducasse

Michael Haupt

Bert Freudenberg

Lukas Renggli

jaayer

tags

participants (5)