Skip to content

Global look & feel : improvements & suggestions

GLLM edited this page Apr 26, 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)

Tablet Version

Smartphone version

Clone this wiki locally