gram_header #7

pombo commented 2026年05月08日 22:23:02 +02:00

Added the animated header to the readme file and in the website

I wasn't sure if you wanted me to replace the other frog with the header and just show it in the home, example below

image

or like this

image

• Organized the css by structure (I tried to keep at a mimimum otherwise it would be impossible to review)
  I basically just moved the html tags styles to the top and sort them by:

1. Inline Content
   [a, span, sup, sub, strong, em, q, kbd]
   -Inline Emphasis (subset of inline content)

2. Block Content
   [p, ul, ol, li, headings, blockquote, pre, code]

3. Basic Structure/Sections
   [main, header, footer, article, section, div]

4. Tables
   [table, td, th, tr, tbody, thead, tfooter, col, colgroup, caption]

5. Custom
   Ideally just css classes but it would be nice to review this one later to check how they can be splitted better.

Added a new style for the code blocks

image

Preview of the animated header

https://youtu.be/U0hi23TXiZs

## Added the animated header to the readme file and in the website > I wasn't sure if you wanted me to replace the other frog with the header and just show it in the home, example below  or like this  - Organized the css by structure (I tried to keep at a mimimum otherwise it would be impossible to review) I basically just moved the html tags styles to the top and sort them by: 1) Inline Content [a, span, sup, sub, strong, em, q, kbd] -Inline Emphasis (subset of inline content) 2) Block Content [p, ul, ol, li, headings, blockquote, pre, code] 3) Basic Structure/Sections [main, header, footer, article, section, div] 4) Tables [table, td, th, tr, tbody, thead, tfooter, col, colgroup, caption] 5) Custom Ideally just css classes but it would be nice to review this one later to check how they can be splitted better. ## Added a new style for the code blocks  ## Preview of the animated header https://youtu.be/U0hi23TXiZs

krig commented 2026年05月09日 08:11:12 +02:00

Hi! The image links don’t seem to be working unfortunately so I am not sure what you are asking :)

Hi! The image links don’t seem to be working unfortunately so I am not sure what you are asking :)

pombo commented 2026年05月09日 14:15:33 +02:00

@krig wrote in #7 (comment):

Hi! The image links don’t seem to be working unfortunately so I am not sure what you are asking :)

:O

not even here is showing?

image

@krig wrote in https://codeberg.org/GramEditor/website/pulls/7#issuecomment-14525934: > Hi! The image links don’t seem to be working unfortunately so I am not sure what you are asking :) :O not even here is showing? 

krig commented 2026年05月09日 16:09:34 +02:00

Now it works!

I really like the second variant with the toad at the top :)

Now it works! I really like the second variant with the toad at the top :)

pombo commented 2026年05月09日 17:19:01 +02:00

@krig wrote in #7 (comment):

Now it works!

I really like the second variant with the toad at the top :)

Awesome, that's the one I set here

I also added the new code styles that looks like this

image

and that should be all for now

@krig wrote in https://codeberg.org/GramEditor/website/pulls/7#issuecomment-14555487: > Now it works! > > I really like the second variant with the toad at the top :) Awesome, that's the one I set here I also added the new code styles that looks like this  and that should be all for now

krig commented 2026年05月09日 18:58:07 +02:00

It's looking really nice!

There should probably be a max width, on my wide monitor it starts looking a bit strange with a very wide window.

I am wondering if I want to try to sync it with a release of Gram itself, so might not want to merge immediately... I also think I will try to update the styling in general and remove the other toad. I will make a wallpaper out of that one, I think.

Also, make sure to add yourself to the footer credits!

It's looking really nice! There should probably be a max width, on my wide monitor it starts looking a bit strange with a very wide window. I am wondering if I want to try to sync it with a release of Gram itself, so might not want to merge immediately... I also think I will try to update the styling in general and remove the other toad. I will make a wallpaper out of that one, I think. Also, make sure to add yourself to the footer credits!

pombo commented 2026年05月09日 19:11:02 +02:00

@krig wrote in #7 (comment):

It's looking really nice!

There should probably be a max width, on my wide monitor it starts looking a bit strange with a very wide window.

I am wondering if I want to try to sync it with a release of Gram itself, so might not want to merge immediately... I also think I will try to update the styling in general and remove the other toad. I will make a wallpaper out of that one, I think.

Also, make sure to add yourself to the footer credits!

yeah, with responsiveness there is always a breaking point, but let me try an extra wide version of the header to see if it helps,

also, should we bring the icons from the app to the website? I feel that it would make more sense to keep the icons consistent among projects

image

@krig wrote in https://codeberg.org/GramEditor/website/pulls/7#issuecomment-14561142: > It's looking really nice! > > There should probably be a max width, on my wide monitor it starts looking a bit strange with a very wide window. > > I am wondering if I want to try to sync it with a release of Gram itself, so might not want to merge immediately... I also think I will try to update the styling in general and remove the other toad. I will make a wallpaper out of that one, I think. > > Also, make sure to add yourself to the footer credits! yeah, with responsiveness there is always a breaking point, but let me try an extra wide version of the header to see if it helps, also, should we bring the icons from the app to the website? I feel that it would make more sense to keep the icons consistent among projects 

krig commented 2026年05月09日 19:36:46 +02:00

yeah, with responsiveness there is always a breaking point, but let me try an extra wide version of the header to see if it helps,

Sounds good

also, should we bring the icons from the app to the website? I feel that it would make more sense to keep the icons consistent among projects

Yeah that would be great too, I have just used a basic unicode emoji -> favicon tool there..

> yeah, with responsiveness there is always a breaking point, but let me try an extra wide version of the header to see if it helps, Sounds good > also, should we bring the icons from the app to the website? I feel that it would make more sense to keep the icons consistent among projects Yeah that would be great too, I have just used a basic unicode emoji -> favicon tool there..

pombo commented 2026年05月09日 20:30:49 +02:00

@krig wrote in #7 (comment):

yeah, with responsiveness there is always a breaking point, but let me try an extra wide version of the header to see if it helps,

Sounds good

also, should we bring the icons from the app to the website? I feel that it would make more sense to keep the icons consistent among projects

Yeah that would be great too, I have just used a basic unicode emoji -> favicon tool there..

• I added a bunch of sizes for the icon but I'm still unsured how to wire the rest (32x32 for example) I look for:

favicon
icon
.icon
.png

and found nothing, its working tho since I replaced the previous ones with the one from the editor

• I added the wide version of the header let me know if this one looks better (I'm assuming you are testing in a ultrawide monitor?)

@krig wrote in https://codeberg.org/GramEditor/website/pulls/7#issuecomment-14562219: > > yeah, with responsiveness there is always a breaking point, but let me try an extra wide version of the header to see if it helps, > > Sounds good > > > also, should we bring the icons from the app to the website? I feel that it would make more sense to keep the icons consistent among projects > > Yeah that would be great too, I have just used a basic unicode emoji -> favicon tool there.. - I added a bunch of sizes for the icon but I'm still unsured how to wire the rest (32x32 for example) I look for: ``` favicon icon .icon .png ``` and found nothing, its working tho since I replaced the previous ones with the one from the editor - I added the wide version of the header let me know if this one looks better (I'm assuming you are testing in a ultrawide monitor?)

krig commented 2026年05月09日 20:51:52 +02:00

I'm assuming you are testing in a ultrawide monitor?

Yeah, I have an ultrawide :)

> I'm assuming you are testing in a ultrawide monitor? Yeah, I have an ultrawide :)

krig commented 2026年05月09日 20:54:45 +02:00

Yeah, this works much better now!

Yeah, this works much better now!

pombo commented 2026年05月10日 00:39:20 +02:00

I changed my operating system font just to notice this.

look at the screenshot attached

not a bad look so I figured I would ask if you would like this

even codeberg looks like this now xD

I changed my operating system font just to notice this. ```look at the screenshot attached``` not a bad look so I figured I would ask if you would like this *even codeberg looks like this now* xD

krig commented 2026年05月10日 01:05:46 +02:00

Really nice font yeah! I like it :)

Really nice font yeah! I like it :)

andyg commented 2026年05月10日 12:03:58 +02:00

I love this header, super cute, but I have a small nitpick: I wonder if you could make a version where the raindrops are somehow less intense (it's not so much the volume as the speed/rhytm)? It's fun, but such intrusive animation becomes annoying after a few seconds. Ideally it should be calming and barely noticeable, like the Mako header you've shown. @krig WDYT?

I love this header, super cute, but I have a small nitpick: I wonder if you could make a version where the raindrops are somehow less intense (it's not so much the volume as the speed/rhytm)? It's fun, but such intrusive animation becomes annoying after a few seconds. Ideally it should be calming and barely noticeable, like the Mako header you've shown. @krig WDYT?

krig commented 2026年05月10日 14:58:03 +02:00

@andyg @pombo Yeah, good point. I think that would probably be a good idea.

Not that I expect people to look at the gram front page for a super long time, but I wouldn't want to stress anyone out.

I would also love it if the toad would blink once in a while, is that doable?

@andyg @pombo Yeah, good point. I think that would probably be a good idea. Not that I expect people to look at the gram front page for a super long time, but I wouldn't want to stress anyone out. I would also love it if the toad would blink once in a while, is that doable?

pombo commented 2026年05月10日 20:37:41 +02:00

#krig #andyg

this version have the blinking and a softer rain

#krig #andyg this version have the blinking and a softer rain

krig commented 2026年05月10日 21:22:15 +02:00

@pombo wrote in #7 (comment):

#krig #andyg

this version have the blinking and a softer rain

Looking really good, I'd say this is ready to merge :) Thank you!

Just one issue: Please add yourself to the footer, or let me know if you prefer not to appear there.

@pombo wrote in https://codeberg.org/GramEditor/website/pulls/7#issuecomment-14618919: > #krig #andyg > > this version have the blinking and a softer rain Looking really good, I'd say this is ready to merge :) Thank you! Just one issue: Please add yourself to the footer, or let me know if you prefer not to appear there.

krig commented 2026年05月10日 21:24:32 +02:00

Oh actually, I just noticed that the GRAM h1 and the tagline are not using the new font. I kind of liked the look with the font in the header as well. What do you think?

Oh actually, I just noticed that the GRAM h1 and the tagline are not using the new font. I kind of liked the look with the font in the header as well. What do you think?

pombo commented 2026年05月10日 21:25:37 +02:00

@krig wrote in #7 (comment):

Oh actually, I just noticed that the GRAM h1 and the tagline are not using the new font. I kind of liked the look with the font in the header as well. What do you think?

I actually can't tell everything is now lookig like jersey25 here xD

image

@krig wrote in https://codeberg.org/GramEditor/website/pulls/7#issuecomment-14620503: > Oh actually, I just noticed that the GRAM h1 and the tagline are not using the new font. I kind of liked the look with the font in the header as well. What do you think? I actually can't tell everything is now lookig like jersey25 here xD 

pombo commented 2026年05月10日 21:28:36 +02:00

@krig wrote in #7 (comment):

@pombo wrote in #7 (comment):

#krig #andyg
this version have the blinking and a softer rain

Looking really good, I'd say this is ready to merge :) Thank you!

Just one issue: Please add yourself to the footer, or let me know if you prefer not to appear there.

I was just wondering if the footer should look like this:

image

with a smaller heading and avatars for sure

@krig wrote in https://codeberg.org/GramEditor/website/pulls/7#issuecomment-14620464: > @pombo wrote in #7 (comment): > > > #krig #andyg > > this version have the blinking and a softer rain > > Looking really good, I'd say this is ready to merge :) Thank you! > > Just one issue: Please add yourself to the footer, or let me know if you prefer not to appear there. I was just wondering if the footer should look like this:  with a smaller heading and avatars for sure

krig commented 2026年05月10日 21:56:27 +02:00

I was just wondering if the footer should look like this:

Yeah something along those lines would be great, although I don't know if I have avatars for everyone.

> I was just wondering if the footer should look like this: Yeah something along those lines would be great, although I don't know if I have avatars for everyone.

pombo commented 2026年05月10日 22:01:54 +02:00

@krig wrote in #7 (comment):

I was just wondering if the footer should look like this:

Yeah something along those lines would be great, although I don't know if I have avatars for everyone.

sounds good.

I added my name like a inline-link for now but for the next pr when we have more data from more people interacting with the website we should go for something similar (we can even add a non-avatar/default illustration)

@krig wrote in https://codeberg.org/GramEditor/website/pulls/7#issuecomment-14622876: > > I was just wondering if the footer should look like this: > > Yeah something along those lines would be great, although I don't know if I have avatars for everyone. sounds good. I added my name like a inline-link for now but for the next pr when we have more data from more people interacting with the website we should go for something similar (we can even add a non-avatar/default illustration)

andyg commented 2026年05月10日 22:11:59 +02:00

this version have the blinking and a softer rain

To be honest, I think the previous one was a bit better, for some reason this feels more obtrusive (might be because it's too slow, almost ceased to be rain-like, more like a flashing neon sign)... Maybe somewhere between the two? :)

The toad blinking is great though!

> this version have the blinking and a softer rain To be honest, I think the previous one was a bit better, for some reason this feels more obtrusive (might be because it's _too_ slow, almost ceased to be rain-like, more like a flashing neon sign)... Maybe somewhere between the two? :) The toad blinking is great though!

andyg commented 2026年05月10日 22:55:36 +02:00

@pombo Yeah, this third one is the best so far, thanks for the tweaks :) Could be even a tad bit faster or denser if you think, but it's fine.

@pombo Yeah, this third one is the best so far, thanks for the tweaks :) Could be even a tad bit faster or denser if you think, but it's fine.

krig commented 2026年05月10日 23:04:53 +02:00

Yeah, I think it looks good now. If @pombo is happy I am good to merge.

Yeah, I think it looks good now. If @pombo is happy I am good to merge.

pombo commented 2026年05月10日 23:08:09 +02:00

@krig wrote in #7 (comment):

Yeah, I think it looks good now. If @pombo is happy I am good to merge.

I'm happy

image

@krig wrote in https://codeberg.org/GramEditor/website/pulls/7#issuecomment-14625213: > Yeah, I think it looks good now. If @pombo is happy I am good to merge. I'm happy 

krig commented 2026年05月11日 00:14:01 +02:00

Awesome, thank you!

Awesome, thank you!

ItsHarper commented 2026年05月11日 00:26:34 +02:00

Love it!

Love it!