WIP: First preview of UI redesign for Yarn.social #437

Not Ready for production!!

Using water.css istead of pico.ss
Rearanging topnav menus, post-menu and post-view on timeline
Add mockup suggestions
Some features/links are hard/hand coded

I'm going to push this to a new branch in this repo new_ui

Q: Are the yellow bits the stuff still to complete?

As mentioned on Yarn:

Let's redesign an new default logo. Will this be an SVG @sorenpeter ?
I'll get the InReplyTo and other TODO(s) implemented on the backend.
@adi You're cleaning up the CSS from the work @sorenpeter did?

@sorenpeter I actually made some changes and cleanup, mostly removing dead code, copies of files, files no longerused, etc in the new_ui branch. Would you mind merging it into your fork and resolving conflicts since you know what you've done 🤗

That way I can merge your fork into the new_ui branch cleanly.

Then we'll see what changes @adi is making in his fork and we can all collaborate on the same branch 🤗

@adi should see this 🤗

Okay, so replying to the email send out from Gitea did not make it to this thread so here are my answers for @adi everyone else:

Yes the yellow parts are mockups without any functionality. So stuff that needs some backend work.

There is also a lot of TODO comments in the html templates and in yarn.css. like I have not worked out how to change water.csd to use darkmode automatically.

Yes I will try to merge with new_ui.

I believe Adi have been doing his own CSS design and I would like to clean up the CSS myself and manually merge the old twtxt.css with my new yarn.css.

How about implement support for the water.css' darkmode and adding our need adjustments to yarn.css?

And yes a new logo can be made as a SVG.
But maybe just stick with the openmoji for now.

Regarding s purple logo: I think we will need to rethink/redo both the light and dark color scheme.

I would suggest we focus on getting a functional design first, and then stating the rebranding and designing a new visual identity.

Yes the yellow parts are mockups without any functionality. So stuff that needs some backend work.

There is also a lot of TODO comments in the html templates and in yarn.css. like I have not worked out how to change water.csd to use darkmode automatically.

I mostly just ignored this for now and working to skinning the current features. We can add those features later on top of the new skin.

Yes I will try to merge with new_ui.

I believe Adi have been doing his own CSS design and I would like to clean up the CSS myself and manually merge the old twtxt.css with my new yarn.css.

Ok, I've been using Sakura ~300 loc and manually copying the changes from @sorenpeter fork, I prefer I keep it with a low loc. water.css is 1689 loc. I'm getting closer to @sorenpeter design. https://prnt.sc/1txt02y

How about implement support for the water.css' darkmode and adding our need adjustments to yarn.css?

You could hack on your prefered branches, for now I'm just looking at the design and implemeting it with my own CSS.

I feel like me an @adi are moving in two oppsite directions... not sure how to resolve this

I feel like me an @adi are moving in two oppsite directions

I just believe it's a better idea to use a lighter CSS framework (if any), the rest stays all the same.

I see your point @adi , but if we are to use sakura.css I would suggest that we add variables for colors similar to how it is done in water.css#theming or base our own style or vanilla.css that allready got some basic variables build in.

Visual comparanson:
https://www.cssbed.com/sakura/
https://www.cssbed.com/vanillacss/
https://www.cssbed.com/water.css-light/

Sure! So which colors? vanilla.css or water.css?

Let's go with vanilla.css as it's also very lightweight.

if we are to make it simple go with vanilla.css and the we add the colors as we need them like --text-muted (from water.css)

Also vanilla.css already got a darkmode buildin :)

It needs some work thou

We could awlays just write our own CSS from scratch? 🤔

Yeah we might end up with our own css, but alway got to get inspirations:)

@sorenpeter This needs rebasing and conflict resolution 👌

Superceded by support for first-class themes via -t/--theme and https://git.mills.io/sorenpeter/darchTheme