Personalized baby girl theme (improved full responsiveness)

[antropolouco]

Hey there!

How are you?

Today, I'm here just to share my slightly modified navbar, which is fully responsive and includes the baby's name and different logo sizes for all screen sizes supported. Now we consider the baby, as well as my Baby Buddy production instance, is leaving its "newborn" state. Note that I've changed all logos and the app's name (including the one shown in "install/add to home" on mobile browsers), so it fits even better for a personalized case.

First, the navbar for lg screen:

First, note that my instance (and its full responsiveness, regarding the lg screen case) is improved for pt-BR. The image shows the min-width for lg, which is 992px. I've decided to (1) add quick timer and the generic quick add to lg screens, and remove the (translated) label for the user (fullname in the default project) from the right of icon, so it fits better my use case and choices (keeping the logo and the girl's name - and its custom font - as bigger as possible).

For lg only, then, the user dropdown has another (and bigger) header (I moved "User" as a translated string here, instead of showing it alongside the icon-user):

Notice I did modify some things in the user dropdown. While the "User" header appears for lg screens only, the rest works for smaller screens just fine (i.e. I moved/placed both user's fullname and username to the top of the dropdown menu and made an "Administration" separator which as you know will [and as everything else here] only appear for the users with the right permissions).

An important note here, I guess:

Baby Buddy default install is not fully responsive, while placing the user's fullname on the navbar right. Even with the default Baby Buddy version, the navbar won't work for the smaller widths within lg screens range, so I do think it should be rethought for the default project. An example (in this case already with the girl's name, but it will fail responsiveness with this similar look for the default project, if the fullname is longer):

Here, md screen:

I've decided to keep it simple, too. This is with min-width for md (768px). Currently, the quick timer and quick add are the same for md and smaller screens, that's why they are a bit smaller than they could and closer to the menu. I will probably separate these later for a md-only version, and also adjust the logo better considering the bottom margin (which is related to the mobile dropdown menu). BTW, I might change the red nuance for the icon-add later, too.

So, finally the navbar for smaller screens, which will work on most smartphones:

Here we have a 360px width example (the min-width I [that everything should?] support), and everything is working fine! For wider screens, the look will be a little more clean, with nav itens working as expected. Here is a 400px width screenshot:

I just kept the default blue for links right now, IDK if will change it later - as it keeps doing its good job, blue is default for links, the tones have a good harmony with the pink from the personalized app/baby's name and so on.

Best regards from Brazil.

Abrazos,
El Loko