New gohugo.io theme bugs

[TechXavAL]

I want to share what I understand as some incorrect styling which I've experienced over an iOS smartphone (not shown in Firefox dev tools responsive view):

1. «menu clock»: this is how the website is shown by default, and you can quickly realize something is odd:

• the menu items are straight away cut off, without any hint there are more elements in the menu or how you can access them: yes, you can swipe the menu, but you must first realize that the inverted «L» is in fact half a «T», and then think that there should be something else hidden to the right... Too much thinking...
• the search button is almost invisible in daylight, because of its size, color, and background
• the «clock» is just a small circle with a point inside when seen on a smartphone screen: you will not know what it is unless you touch it, and it's way too small to bother about what it is or what it does
• same problem when dark colors scheme is shown, but at least the moon icon is distinguisable

 

2. «menu light»: now we can see a big orange circle with something pretty small in the middle, but what about the menu? Where has it gone?

 

 

3. «menu background light»:

• when you scroll down the page, the menu background fades out and anything positioned behind the menu is almost unreadable because it's blended with menu text, or hidden by the «light» icon, so why showing it?
• the Hugo logo has vanished

 

4. «menu background dark»:

• the Hugo logo is back, but the search icon and the dark icon are lost
• the info box background has vanished

 

5. «footer dark»: the seach icon still can't be seen, but everything else seems fine

 

 

6. «footer light»: almost everything is gone

 

 

7. «search light»: the search field aside has the same background as the page, so it's a bit confusing knowing what is what, but you can still figure it out after the initial shock. Even more, if you have scrolled down and there's no text to the left of the aside, you won't ever know where to touch to close the search aside

 

 

8. «seach dark»: now the aside background is gone, so you're left with a search field floating around the menu elements

• try to change the color scheme (because you can see the icon): nope!
• try to close the aside: unless you previously knew where to touch (same as in the light scheme), you can't
• and you even have to touch inside the search field to start typing: it's not automatically selected. So to search something you have to click twice

 

Now over a desktop browser:

• color schemes are a bit better solved, but there's yet too much transparency on the menu background, and the dark scheme info boxes doesn't stand out enough, indeed (that is, other than having an extra blue icon, they just seem another code box)
• the search function is somehow misleading: you can see a standard search field in the middle of the menu bar, but all you get when you click it is an aside appearing on the right, with the same background problems as in a smartphone, and not standing out at all. So if you haven't realized about the new aside, you will keep wondering why on earth you can't write on the field you have just clicked... Well, if it has to be a button, then it has to look like a button, and if it doesn't open a field on the same place as where the button was (as it happens in many many other websites), at least the aside should appear on top of the button, effectively hidding it (same as it behaves in a smartphone)

 

Hope this helps