-
Notifications
You must be signed in to change notification settings - Fork 0
Global look & feel : improvements & suggestions
Please, find below some ideas to improve the look & feel of Selfoss :
Selfoss mobile has a good looking logo that is not used in the computer version. Here's what could be done :
#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;
}
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
(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);
}
Could we have smaller div & fonts for upper links / tags / sources lists ?
(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;
}
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)
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;
}