Hi folks,
I've got some unsolicited feedback for you.
First, I really like lotide. I've been plugging away at it for a little while now, and in a lot of ways it's the program I've been looking for in terms of an alternative to the big link aggregators. I'd like to see likes better integrated, but I have a feeling that's coming (Is there a place I can contribute to a bounty for a feature?).
What I'd like to talk about is purely visual.
The first thing I noticed is that lotide really isn't mobile friendly. The website loads on a mobile web browser, but it's not really very friendly. You won't be reading lotide in bed at night.
The other thing I noticed is that the whitespace really makes it tough on the eyes.
I spent a lot of time working on my own instance, and in the process of doing so came up with a css stylesheet that I think corrects these issues. I went back and ported the work backwards to match the theme of the original site.
You guys can make use of this or not, but I think it might be helpful. I made some compromises because I didn't want to fundamentally change the way the website looks on desktop, so basically the website looks the same at 1920x1080, but at lower resolutions it increases the text size considerably, and all the font sizing is relative now.
@media (max-width: 65em) {
html {
font-size: 4.25vw;
}
.communitySidebar {
display: none; /* TODO still show this somewhere */
}
}
@media (min-width:65em) {
html {
font-size: 1vw;
}
}
body {
-webkit-font-smoothing: antialiased;
font-size:1.5rem
}
.mainHeader {
margin: -1rem -1rem 0 -1rem;
padding: 0.5rem;
border-bottom: 1px solid rgba(0,0,0,.24);
box-shadow: 0 1px 3px rgb(0 0 0 / 24%);
background-color: #81D4FA;
}
.mainHeader:after {
content: "";
clear: both;
display: block;
}
.mainHeader > .left {
float: left;
padding: 0.25rem;
font-size: 1rem;
}
.mainHeader > .right {
float: right;
}
.mainHeader a {
text-decoration: none;
color: black;
}
.mainHeader a:hover {
text-decoration: underline;
}
.mainHeader .actionList.left > * {
margin-right: 1rem;
}
.actionList > * {
margin-right: .5rem;
}
.siteName {
font-weight: bold;
font-size: 1.2rem;
margin-right: 1rem;
}
.errorBox, .infoBox {
padding: .5rem;
display: inline-block;
margin-top: .5rem;
margin-bottom: .5rem;
}
.errorBox {
background-color: #FF6D00;
}
.infoBox {
background-color: #80D8FF;
}
.communitySidebar {
float: right;
width: 300px;
float: right;
width: 15rem;
margin: 1rem;
padding: 1rem;
text-align: justify;
}
.communitySidebar > h2 {
margin-bottom: 0;
}
.notification-itrem.unread {
border-left: 0.25rem solid #FDD835;
padding-left: 0.25rem;
}
.sortOptions {
margin-top: 1rem;
}
.sortOptions > * {
margin-right: .5rem;
}
.preview {
margin-top: 1rem;
border: 1px dashed black;
}
.icon {
height: 2rem;
display: inline;
vertical-align: text-bottom;
}
.iconbutton {
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.votebox {
float: left;
margin-right: .5rem;
}
.comment > .content {
overflow-x: auto;
}
.commentList {
margin-top: .5rem;
list-style-type: none;
}
.commentList.topLevel {
padding-left: 0;
}
.titleLine {
display: flex;
padding-right: .25rem;
}
.titleLine > a {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
padding-left:0.25rem
}
form.inline {
display: inline-block;
}
textarea {
width: 90%;
height: 10rem;
border: none;
box-shadow: inset 0 1px 0 0 rgb(0 0 0 / 20%), inset 0 -1px 0 0 hsl(0deg 0% 100% / 20%), inset 0 0 2px 0 #000;
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: -internal-light-dark(black, white);
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0rem;
text-shadow: none;
display: inline-block;
text-align: start;
appearance: auto;
background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
-webkit-rtl-ordering: logical;
flex-direction: column;
cursor: text;
white-space: pre-wrap;
overflow-wrap: break-word;
column-count: initial !important;
margin: 0rem;
font: 2rem arial;
border-width: 1px;
border-style: solid;
border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
border-image: initial;
padding: 2rem;
background-color:Black; color:white;
}
h1 {
display: block;
font-size: 2.5rem;
font-weight: bold;
}
code {
color: darkgreen;
font-size: 1.2rem;
}
button {
padding: 2rem;
}
ul li {
display: flex;
flex-direction: column;
flex-wrap: wrap;
line-height: 1.2;
font-size: 1rem;
margin: 0.5rem;
}
realcaseyrollins 2 years ago
I checked out your interface, what you have is absolutely gorgeous! I hope it becomes the default interface.
sj_zero@lotide.fbxl.net 2 years ago
Thanks! Much of the credit goes to vpzom for building something that's extremely straightforward to modify.