<r​edsh4de:matrix.org> Thoughts on this layout for the blog index page - desktop shows everything, but mobile does not render the thumbnail and rearranges some UI items

<r​edsh4de:matrix.org> Desktop:

<r​edsh4de:matrix.org> matrix.monero.social/_matrix/media/…matrix.org/TUpAERrpOyjCaKxHeFrbCWlW

<r​edsh4de:matrix.org> Mobile:

<r​edsh4de:matrix.org> matrix.monero.social/_matrix/media/…matrix.org/QdDXUfZPaZjmEqKVXpKYnssB

<r​edsh4de:matrix.org> Diego Salazar:

if anyone has time and about 510MB spare to run a Dockerfile pls let me know monero-project/monero-site #2454 D:

monero-project/monero-site #2572 needs approvals , flathub key

<d​iego:cypherstack.com> I like it

and retoswap listing feedback monero-project/monero-site #2550

my stance on retoswap being fucking illegal has now changed, getmonero has specific disclaimers covering this in the footer reg listings not being official endorsements and such

.merge+ 2550

Added

.merges

.merge+ 2563

...

<b​asses:matrix.org> why tags are capitalized?

<r​edsh4de:matrix.org> design choice: figma.com/design/y53fDBe55sM1GvhxXX…gn-2024--Copy-?node-id=140-1398&p=f

<b​asses:matrix.org> Diego Salazar I don't necessary agree.

<b​asses:matrix.org> see web.dev/blog

<b​asses:matrix.org> however, I dont mind

<b​asses:matrix.org> are these tags clickable from the page view?

<r​edsh4de:matrix.org> indeed they are

<b​asses:matrix.org> because I feel some might accidently press them and go to tags page instead of the blog

<b​asses:matrix.org> because I feel some might accidently press them and go to tags page instead of the blog post

<b​asses:matrix.org> should be disabled in this view

<r​edsh4de:matrix.org> solved by smaller font size? at least on mobile

<r​edsh4de:matrix.org> or not clickable at all better

<b​asses:matrix.org> hmmm, I looked at blog.cloudflare.com and they placed tags below title so it is less liekly for users to accidently press.

<b​asses:matrix.org> the problem here is tags placements and looking like a button

<b​asses:matrix.org> hmmm, I looked at cloudflare blog and they placed tags below title so it is less liekly for users to accidently press.

<r​edsh4de:matrix.org> they are at the very bottom though in this view

<r​edsh4de:matrix.org> i do think they could be smaller for mobile

<b​asses:matrix.org> clipboard.png

<b​asses:matrix.org> clipboard.png

<b​asses:matrix.org> placement is similar to this "standard"

<b​asses:matrix.org> *looks like a* "Read more" button

<b​asses:matrix.org> we could place tags like this

<b​asses:matrix.org> and add read more button like this too?

<b​asses:matrix.org> Diego Salazar

<d​iego:cypherstack.com> We can, but I don't think a Read More is necessary

<r​edsh4de:matrix.org> I think it is redundant if the title and thumbnail link to the blog

<d​iego:cypherstack.com> ah, that is an interesting consideration

<d​iego:cypherstack.com> sorry woke up not long ago and don't have design brain on right now other than "vibes"

<r​edsh4de:matrix.org> What about this option - on mobile, clicking on either text in the card links to the blog?

<d​iego:cypherstack.com> honestly for mobile just make the whole div clickable?

<d​iego:cypherstack.com> nah that might be too annoying if someone is trying to scroll and fat fingers

<r​edsh4de:matrix.org> Yepp was my concern with that

<d​iego:cypherstack.com> again, just waking up so my ideas are probably bad

<b​asses:matrix.org> take your time

<b​asses:matrix.org> matrix.monero.social/_matrix/media/…matrix.org/emHMeHFaTcORliXwlLIyWfSb

<b​asses:matrix.org> sketched something quick without readme button

<r​edsh4de:matrix.org> oo okay, i see

<r​edsh4de:matrix.org> sec

<b​asses:matrix.org> compared to current design on figma

<b​asses:matrix.org> matrix.monero.social/_matrix/media/…matrix.org/PcwCApCFpCrOZVNZUYETsBXy

<b​asses:matrix.org> sketched something quick without "read more" button

<b​asses:matrix.org> with tags at top, lemme all know which one is fav

<b​asses:matrix.org> matrix.monero.social/_matrix/media/…matrix.org/rrgRhlJWpaqqKGNiAwLYxDcf

<b​asses:matrix.org> with tags at top, lemme all know which one is fav

Could -site have an early gift for the holidays and get the new bridge please DataHoarder :D

when do we upgrade the rest of the rooms? :D

I do need time to work on the bridge again

patch a few of small things and add per-room settings (and dynamic moderation tweaks)

Matrix version upgrade - draupnir mod tool Room is using v9 still for reasons - maybe compatibility , so not sure yet (ideally we have knocking for emergencies) which is v10 , in progress still

I mean, upgrading the bridge on other rooms

<r​edsh4de:matrix.org> image.png

<r​edsh4de:matrix.org> this works i think

<r​ottenwheel:unredacted.org> Looks great! :🌟

<r​edsh4de:matrix.org> Changes live: beta.monerodevs.org/blog

<r​edsh4de:matrix.org> Click through stuff, lmk how things look

<r​edsh4de:matrix.org> going to be working on adding pagination next

<b​asses:matrix.org> looks good, but I after taking a further look when amount of tags increase and especially on smaller phones it might get messy and further scroll might be needed to get to the post below

<b​asses:matrix.org> matrix.monero.social/_matrix/media/…matrix.org/JERrLqTYMKfcXetGxoWKWcHw

<b​asses:matrix.org> I like how figma.com/blog looks

<b​asses:matrix.org> 3 dots when tags are more than 3 tags

<r​edsh4de:matrix.org> i think i can implement something like that without javascript...

<r​edsh4de:matrix.org> lets see

<b​asses:matrix.org> can we also put tags below?

<b​asses:matrix.org> same like figma:

<b​asses:matrix.org> Title

<b​asses:matrix.org> date

<b​asses:matrix.org> author

<b​asses:matrix.org> description

<b​asses:matrix.org> tags

<r​edsh4de:matrix.org> I mean thats how it was before

<r​edsh4de:matrix.org> changed to avoid that "read more" effect

<b​asses:matrix.org> date and author was below too

<b​asses:matrix.org> yeah but it will break some reading flows

Our tags could probably use some work, like "crypto" is probably redundant?

<b​asses:matrix.org> unless you can prevent the 3rd tag from getting to a new line

<b​asses:matrix.org> p​lowsof, I think tags are custom, you dont have to type it down

<b​asses:matrix.org> if you dont want to

<r​edsh4de:matrix.org> yes all tags are generated from the blog posts

<r​edsh4de:matrix.org> possible but will look messy at the 4th or so tag, i'll just move the tag container to the bottom

<b​asses:matrix.org> thank you, it was helpful taking a look at live concept to see how it might not be a good fit.

<b​asses:matrix.org> hopefully diego is happy too

You are granted max 3 tags to describe your post by the tag genie

<b​asses:matrix.org> matrix.monero.social/_matrix/media/…matrix.org/uLsMtyUhHvzatCrlbPczvklM

<b​asses:matrix.org> beta.monerodevs.org/blog/2025-11-14-monero-gui-01844-released

<r​edsh4de:matrix.org> Artifacts from the old Jekyll site - will have to sed all of that out later

<b​asses:matrix.org> blog post format is not finale, right?

<r​edsh4de:matrix.org> wym by format? the frontmatter or the styles?

<b​asses:matrix.org> how long can "Recent Posts" get to?

<r​edsh4de:matrix.org> Thats not final for now - but planning up to two posts

<r​edsh4de:matrix.org> pushed the visual patches for the cards & cleaned up the jekyll artifacts

<system> file clipboard.png too big to download (1416420 > allowed size: 1000000)

<b​asses:matrix.org> clipboard.png

<b​asses:matrix.org> I moved the blog-container towards the right to keep the standard blog format, idk why in your design it was at far left.. Diego Salazar

<b​asses:matrix.org> I find the way I sent much more readable

<b​asses:matrix.org> I find the way I sent (pic above) much more readable

<system> file clipboard.png too big to download (1308791 > allowed size: 1000000)

<b​asses:matrix.org> clipboard.png

<b​asses:matrix.org> how it looks currently..

<b​asses:matrix.org> this is literally how any blog I have read in my entire life looks like.

<r​edsh4de:matrix.org> matrix.monero.social/_matrix/media/…matrix.org/OzbLeGNguxUPYXKfBedZofiV

<r​edsh4de:matrix.org> does look nicer

<b​asses:matrix.org> yep

<b​asses:matrix.org> thats like the standard for decades for a reason 😄

<b​asses:matrix.org> your eyes spends less effort when reading in middle than from the left to middle

<b​asses:matrix.org> very pleasing when reading text-heavy content like blog/articles

<b​asses:matrix.org> very pleasing/comfortable when reading text-heavy content like blog/articles

<r​edsh4de:matrix.org> Experimenting with scaling of the center column

<r​edsh4de:matrix.org> It is possible to either have it be a ratio of the available width (might look wonky on ultrawides), or have the blog content be limited to a character count like 65-70

<r​edsh4de:matrix.org> per line

<b​asses:matrix.org> whatever you think is better, you will probably figure it out like nav accessbility 😁, unless someone here has more experience can share.

<r​edsh4de:matrix.org> Limiting width by character count makes more sense for text content imo, some online sources i looked at pretty much confirm the same

<r​edsh4de:matrix.org> uxpin.com/studio/blog/optimal-line-length-for-readability

<r​edsh4de:matrix.org> baymard.com/blog/line-length-readability

<r​edsh4de:matrix.org> So can do something like `1fr 75ch 1fr` in the grid, force `<main>` to render in the character-limited column, and place the sidebar in the 3rd column - first one acting like a centering padding

<b​asses:matrix.org> yeah, I did some quick searches too and came to the same conclusion.

<r​edsh4de:matrix.org> pushed the changes: beta.monerodevs.org/blog/2025-11-14-monero-gui-01844-released

<r​edsh4de:matrix.org> Do Ctrl+Shift+R if the new stylesheet didn't apply

<b​asses:matrix.org> matrix.monero.social/_matrix/media/…matrix.org/diXsoutRkxmdQgwWiUJKbMra

<b​asses:matrix.org> these can be localized, just the text, not the tag itself

<b​asses:matrix.org> ?

<r​edsh4de:matrix.org> yep, easily

<r​edsh4de:matrix.org> at this point nearly any text item on the page can be localize

<r​edsh4de:matrix.org> at this point nearly any text item on the page can be localized

<r​edsh4de:matrix.org> at this point nearly any text item on the page can be localized, that doesnt come from a markdown file

<b​asses:matrix.org> also clicking on them redirects you to main version of website in english instead of your currently set locale

<r​edsh4de:matrix.org> must've forgotten to apply my localizeHref function there

<b​asses:matrix.org> as long as it doesn't mess up with core tag functionality and doesn't change url (text encoding in url annoying when shared online)

<b​asses:matrix.org> as long as it doesn't mess up with core tag functionality and doesn't change tags url (text encoding in url annoying when shared online)

<r​edsh4de:matrix.org> yeaa nah, tag url will never be localized, that is a huge bear trap - labels only

<o​frnxmr:xmr.mx> Meeting logs aren't put on website anymore

<r​edsh4de:matrix.org> discarding that one then

<o​frnxmr:xmr.mx> theyre on github @ /meta

<o​frnxmr:xmr.mx> Old logs were on website

<o​frnxmr:xmr.mx> Idk how best to handle that .. just that current and future logs arent put up

new bridge here, plowsof

thank you very much DataHoaarder 🙏 now we can see these beautiful designs

<redsh4de:matrix.org> mrelay.p2pool.observer/m/matrix.org/ThzRInFhaIVMadYoNMonBudT.png (image.png)

<redsh4de:matrix.org> made a change for dark mode, blog text will use a slightly muted gray instead of white

<redsh4de:matrix.org> better for eye strain

<redsh4de:matrix.org> vs

<redsh4de:matrix.org> mrelay.p2pool.observer/m/matrix.org/oKiEjFENYgtpMnWnvsFCFxag.png (image.png)

<basses:matrix.org> thanks DH

<basses:matrix.org> can you apply same contrast as privsec.dev/posts/android/android-tips for title, content etc > <@redsh4de:matrix.org> mrelay.p2pool.observer/m/matrix.org/ThzRInFhaIVMadYoNMonBudT.png (image.png)

<redsh4de:matrix.org> like so?

<redsh4de:matrix.org> mrelay.p2pool.observer/m/matrix.org/DlGoBDZvkCyPocaqkakLnIch.png (image.png)

<basses:matrix.org> yeah a bit better

<basses:matrix.org> but here's the thing, shouldn't the whole website also have the same contrast?

<basses:matrix.org> like nicklewis.dev

<basses:matrix.org> this is the only website I found with decent contrast and consistent over all the website

<basses:matrix.org> I don't know why big web-dev centered websites like web.dev and mdn use greyish color instead of white...

<redsh4de:matrix.org> for dark mode mostly is - white is reserved for titles and heading content > <@basses:matrix.org> but here's the thing, shouldn't the whole website also have the same contrast?

<basses:matrix.org> @basses:matrix.org: ...

<basses:matrix.org> I agree with you but I don't understand why none follow this advice..

<basses:matrix.org> @redsh4de:matrix.org: do you have any references?

<redsh4de:matrix.org> sec, was part of one of the old figmas that had the dark mode design

<redsh4de:matrix.org> trying to find it

<redsh4de:matrix.org> figma.com/design/OuY892nD4zD1CEQDvC…ode-id=0-1&p=f&t=5MdkpqXYDDu1ijsE-0

<redsh4de:matrix.org> tailwind docs also uses #fff for headings: tailwindcss.com/docs/installation/using-vite

<basses:matrix.org> follow m3.material.io/blog/m3-expressive-motion-theming ?

<basses:matrix.org> check rest of website, homepage etc

<basses:matrix.org> @redsh4de:matrix.org: ui.shadcn.com/docs

<redsh4de:matrix.org> I guess if we dont want #fff - it has to be brighter than #c6c6d0 (the primary text color), but darker than just pure white

<redsh4de:matrix.org> i'll look at the brightness differences between the headings/primary in the other site to find a appropriate option

<diego:cypherstack.com> Doing thanksgiving things. Will check in tomorrow.

<redsh4de:matrix.org> happy thanksgiving!

<redsh4de:matrix.org> @redsh4de:matrix.org: #f0f0f0 is a good option imo

<redsh4de:matrix.org> mrelay.p2pool.observer/m/matrix.org/SnaPOxUVhlwgSnDwigKfZJJk.png (image.png)

<redsh4de:matrix.org> @basses:matrix.org:

<basses:matrix.org> yeah, looks great

<basses:matrix.org> I had a draft message saying: some users might find it confusing as title is white and content very muted gray and might think there some issue with website

<ofrnxmr:xmr.mx> Can you keep track of the colors used for me?

<basses:matrix.org> guess now it is not a problem

<321bob321> Primary colours

<321bob321> Probably for docs site

<basses:matrix.org> oh, ok.

<basses:matrix.org> mrelay.p2pool.observer/m/matrix.org/AoovtZeWRpoitBNCjmQOICan.png (clipboard.png)

<basses:matrix.org> I don't think the cursor needs to be a pointer in this empty area when hovered over

<redsh4de:matrix.org> @ofrnxmr:xmr.mx: github.com/redsh4de/monero-site/blob/main/src/styles/global.css

<redsh4de:matrix.org> All colors defined here

<redsh4de:matrix.org> @basses:matrix.org: If you click on the space the dropdown will stay pinned until you click on a item or click away

<ofrnxmr:xmr.mx> @redsh4de:matrix.org: Thanks