Skip to content

Global look & feel : improvements & suggestions

sijnak edited this page Jul 9, 2013 · 11 revisions

Please, find below some ideas to improve the look & feel of Selfoss :

Computer Version

Logo : need of the good looking one

Selfoss mobile has a good looking logo that is not used in the computer version. Here's what could be done :

Logo

#nav-logo{
    position:absolute;
    left:40px;
    top:8px;
    background:url(images/nav-mobile-logo.png) no-repeat;
    width:96px;
    height:40px;
    background-size:96px 40px;
}

Articles list : waste of space

Globally, I believe almost all font-size should/can be diminished of at least 0.1em. I have done so on mine, it looks much better.

Article in list are way to big in font & div height : reducing font & padding+margin

Downsizing article list

(Coloring removed from the code snippet)

.entry,.source
{
	margin:1px 50px 1px 5px;
	padding:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-khtml-border-radius:4px;
	border-radius:2px;
	position:relative;
	font-weight:normal;
	font-size:0.8em;
	border:1px solid rgba(255, 255, 255, 0);
}

Tags & sources left panel : waste of space

Could we have smaller div & fonts for upper links / tags / sources lists ?

left panel downsizing

(Coloring removed from the code snippet)

#nav-sources li
{
	position:relative;
	cursor:pointer;
	padding-left:25px;
	padding-right:30px;
	font-weight:lighter;
	font-size:0.7em;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
}
#nav-tags li
{
	position:relative;
	cursor:pointer;
	padding:2px;
	padding-left:25px;
	padding-right:30px;
	font-weight:lighter;
	font-size:0.7em;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
}

Colors :

I believe the color theme could be much improved to match a bit more some good looking sites such as feedly, or even more Google Currents Android App. (not talking of space use, only color & sizing)

Typesetting : justification

I believe that justified text is better looking and easier to read if the columns are large enough (or the font size small enough, as suggested above).

.entry-content {
    display:none;
    -moz-column-count: 3;
    -moz-column-gap: 2em;
    -moz-column-rule: 1px solid rgba(204, 204, 204, 0.4);
    -webkit-column-count: 3;
    -webkit-column-gap: 2em;
    -webkit-column-rule: 1px solid rgba(204, 204, 204, 0.4);
    column-count: 3;
    column-gap: 2em;
    column-rule: 1px solid rgba(204, 204, 204, 0.4);
    font-size:0.95em;
    margin-top:20px;
    line-height: 1.7em;
    text-align: justify;
}

Tablet Version

Smartphone version