Website: Improve website look and feel

[lcn2]

Before the Great Fork Merge we need the generated HTML pages to, as it is said fail to suck.

The obvious place to start is by editing the ioccc.css file. In some cases the original markdown file (such as an entry's README.md file) may need to be improved. The HTML fragments under `inc/*.html' may need to be improved.

There even might be a requirement that the inc/md2html.cfg configuration file or the some of the shell scripts in bin/ may need correcting. Hopefully not, but you never know.

Here are the types of questions ask about a generated HTML web page as viewed in a browser:

• Some formatting that looks obnoxious?
• Information displayed in way that is difficult to read?
• Have too much to too little whitespace that makes the web page awkward to read?

The IOCCC judges are considering hiring a web developer to perform this task.

We are aware that issue #2006 overlaps this issue. However we believe that hiring a professional web developer will be needed eventually AND that prior to the Great Fork Merge (see issue #2239) we will need some basic work performed as noted above.

[lcn2]

We are considering hiring @chris-sab for this issue.

[xexyl]

Ah. Nice. Well if anything I can do please let me know. But in the meantime I know I will be working on the html files and such. Though not more today than what I already did.

How will you fund this though as this is not a for profit contest ?

[lcn2]

Ah. Nice. Well if anything I can do please let me know. But in the meantime I know I will be working on the html files and such. Though not more today than what I already did.

How will you fund this though as this is not a for profit contest ?

See discussion-6447641.

[xexyl]

Ah. Nice. Well if anything I can do please let me know. But in the meantime I know I will be working on the html files and such. Though not more today than what I already did.
How will you fund this though as this is not a for profit contest ?

See discussion-6447641.

Just replied .. including strongly discouraging google ads for a very good reason (and a shameful reason sadly).

[lcn2]

We believe we have addressed all of the current questions that still need answering at this time. If we've missed something or something else needs to be clarified, please ask again.

[lcn2]

A heads up ... an important look and feel change is about to happen .. stay tuned!

[chris-sab]

I have been contracted by the IOCCC to Improve the look and feel to the temp-test-ioccc web site.

[xexyl]

I have been contracted by the IOCCC to Improve the look and feel to the temp-test-ioccc web site.

Welcome mate!

[lcn2]

With commit c584830 the topbar and the look and feel has been improved.

This is an ALPHA TEST of the topbar .. things will continue to improve.

There are a number of TODOs, including:

TODO: Fix the Responsive Web Design to deal with
      the new topbar system.

TODO: Improve the topbar.  What is there now is
      just an alpha version.

TODO: Decide what to do with `png/ioccc.png`.
      Remove it make selective use of the image on certain top level
      pages lower down?

TODO: The changes to `ioccc.css` causes some
      formatting problems with pages such as `location.html` (missing
      blank lines).  Fix formatting problems as needed.

TODO: Fix the "Nu HTML check this web page"
      links on things like the year level _YYYY/index.html_ pages.

TODO: Correct all HTML errors, warnings and perhaps
      informative messages from the Nu HTML check.

TODO: Consider adding color (colour) to the
      web pages in such a way that people with color perception
      challenges can still use the web site.

TODO: For those web browsers that have and allow
      JavaScript, make use of technology such as [Code
      Mirror](https://codemirror.net/) to directly render source
      code (C, shell, Makefile, etc.) with syntax coloring (colouring)
      directly in the browser.  For non-JavaScript browsers, fallback
      to the current use of GitHub source code viewing.

So more changes are in the way.

[lcn2]

FYI: Most of the internal work on this issue is being discussed in a private slack thread. Only the high level updates will be posted here.

[lcn2]

One thing we need to do with the new topbar is to improve the titles of the dropdown menus

• Home
• News
• Bugs
• Judges

Those 4 names as just placeholder words. We need to see if better single words can be used.

[xexyl]

FYI: Most of the internal work on this issue is being discussed in a private slack thread. Only the high level updates will be posted here.

Thanks.

[xexyl]

Question for you Landon before I have to go take care that I feel like .. well you know :-)

How do you want me to coordinate this issue with the html pages issue? I can work on the manifest or something else but it seems like this issue might conflict with the html issue?

Please advise and I'll get back later this week or else next week, after the procedures.

[lcn2]

Question for you Landon before I have to go take care that I feel like .. well you know :-)

How do you want me to coordinate this issue with the html pages issue? I can work on the manifest or something else but it seems like this issue might conflict with the html issue?

The activity from this issue should not conflict the other priorities.

Those working on issues simply need to update and merge changes on a regular basis.

Please advise and I'll get back later this week or else next week, after the procedures.

Best wishes on those procedures.

[xexyl]

Question for you Landon before I have to go take care that I feel like .. well you know :-)
How do you want me to coordinate this issue with the html pages issue? I can work on the manifest or something else but it seems like this issue might conflict with the html issue?

The activity from this issue should not conflict the other priorities.

That's good to know, thanks.

Those working on issues simply need to update and merge changes on a regular basis.

I always do but thanks for the reminder.

Please advise and I'll get back later this week or else next week, after the procedures.

Best wishes on those procedures.

Thanks. Early morning tomorrow but won't have the procedures until the afternoon. Preparation going okay even though unpleasant.

Back in a few days I hope. Have a great night.

[lcn2]

We are aware of problems that the topbar has introduced to mobile devices.

For example, on mobile devices, such as an iPhone or iPad, one has to press and hold for about a second and element in the top bar in order for the drop-down menu to activate.

We released the current topbar as a solution that works for desktops initially. We are now working on a port to mobile devices next.

Sorry (tm Canada 🇨🇦) for any inconvenience this partial release may cause mobile users. We expect a full release in a week or so.

[lcn2]

We are aware of problems that the topbar has introduced to mobile devices.

For example, on mobile devices, such as an iPhone or iPad, one has to press and hold for about a second and element in the top bar in order for the drop-down menu to activate.

We have released a new version of the "topbar" that allows mobile devices (such as cell phones and tablets up to 1024 pixels wide) to work.

The downside is that the mobile device will need to have JavaScript enabled.

For mobile devices where JavaScript is disabled, the web page will show a message asking that JavaScript be enabled.

NOTE: For desktops and screens wider than 1024 pixels, JavaScript is NOT needed.

Here is what it will look like on a mobile device (or any desktop window 1024 pixels or narrower) when JavaScript is disabled:

Mobile devices (or any desktop window 1024 pixels or narrower) when JavaScript is enabled:

Windows wider than 1024 pixels (JavaScript is not required):

When you click on a torbar menu item, a dropdown menu appears:

NOTE: The above change is about to be released with a few hours.

UPDATE 0

The current menu set, menu labels and items in the dropdown menus (or JavaScript menus) are a just a concept and are NOT intended to reflect the final design.

It is our intention to get the topbar working first, and then focus on the details of what is in the menus later.

Please 🙏 don't fret over the contents of the menus ... just yet 🤓

[xexyl]

I don't think having to enable JavaScript is a big deal. Personally it doesn't bother me at all.

I will happily test it on my phones and my iPad. I will also take a look at it on my mum's phone and iPad. Not today but perhaps tomorrow or the next day.

Hope you have a great night.

Edit: if you have a link on GitHub I might be able to have others without an iPhone test it on their phone. One person comes to mind although he is very busy lately. Still I am sure he would be happy to check. He knows about the IOCCC and we have had talks about it before. He does some programming too though nowadays I think it's mostly web design. Please give me a link or links and I will at least send them to him and ask if they look okay.

[lcn2]

Any link from the repo test site will work.

UPDATE 0

https://ioccc-src.github.io/temp-test-ioccc/

UPDATE 1

Things are going to be updated sometime tomorrow.

[xexyl]

Any link from the repo test site will work.

UPDATE 0

https://ioccc-src.github.io/temp-test-ioccc/

Thanks. This is what I needed.

UPDATE 1

Things are going to be updated sometime tomorrow.

Thanks.

[xexyl]

Feedback

• In portrait mode it has 'Click This'. I think it should say 'Menu' or something like that. 'Click This' is much too vague. I'm doing this now as I see it's in inc/. Have to rebuild the html files and then will do a pull request though I have to go afk soon for a bit. Of course if you think of something else or if it conflicts with changes you're working on before I get it in that's okay too. But 'Click This' is I believe not a good option. Or at least I THINK I know how it works. I know it's under inc/ but how to rebuild if it's not make www or related rules I don't know.
• I notice that the menu has a problem in subdomains: it links to ./ rather than ../ for web pages so they're all 404. I'm not sure how to fix this though and I don't have the energy to look into it I'm afraid.

Although I don't have the energy to look into the 404 problem the good news is I do feel better still today and haven't felt any pain for more than 24 hours or very little. Discomfort yes but not pain.

Other feedback must wait I'm afraid though I will say it looks good in iPad (iPad Pro 11-inc 4th generation) and iPhone (8 Plus and 14 Pro Max).

I will later on see about looking at it on my mum's iPhone and iPad. Hopefully the make www works for the menu thing but if not I'll maybe worry about it another time. Going to do other things for the rest of the day.

UPDATE 0

Seems that make www does it so I'll do a pull request in a bit ..

[xexyl]

Feedback

• In portrait mode it has 'Click This'. I think it should say 'Menu' or something like that. 'Click This' is much too vague. I'm doing this now as I see it's in inc/. Have to rebuild the html files and then will do a pull request though I have to go afk soon for a bit. Of course if you think of something else or if it conflicts with changes you're working on before I get it in that's okay too. But 'Click This' is I believe not a good option. Or at least I THINK I know how it works. I know it's under inc/ but how to rebuild if it's not make www or related rules I don't know.
• I notice that the menu has a problem in subdomains: it links to ./ rather than ../ for web pages so they're all 404. I'm not sure how to fix this though and I don't have the energy to look into it I'm afraid.

Although I don't have the energy to look into the 404 problem the good news is I do feel better still today and haven't felt any pain for more than 24 hours or very little. Discomfort yes but not pain.

Other feedback must wait I'm afraid though I will say it looks good in iPad (iPad Pro 11-inc 4th generation) and iPhone (8 Plus and 14 Pro Max).

I will later on see about looking at it on my mum's iPhone and iPad. Hopefully the make www works for the menu thing but if not I'll maybe worry about it another time. Going to do other things for the rest of the day.

UPDATE 0

Seems that make www does it so I'll do a pull request in a bit ..

Another thing I forgot to mention ..

Is it possible to have on mobile devices the top menu have more than one word on a single line? For instance I see (where '^' is the up arrow and 'v' is the down arrow and '->' is the right arrow etc.) for 1984:

No prev
^ top ^
1985 ->
Inventory

Could it not be that some of those are on the same line? I think it would flow better if it can be done well.

[xexyl]

Perhaps also the 'Click This' (or what is becoming 'Menu') can also be a link so that one has to not click the three lines (or can click them too but it makes sense to click the words 'Menu' or something that says 'Click This'). See what I mean?

[lcn2]

Perhaps also the 'Click This' (or what is becoming 'Menu') can also be a link so that one has to not click the three lines (or can click them too but it makes sense to click the words 'Menu' or something that says 'Click This'). See what I mean?

This has been partly resolved in commit e8395a2

This commit has also made some changes to the colours used on the web site.

This commit is part of a work in progress. Stay tuned for more changes ...

[lcn2]

Perhaps also the 'Click This' (or what is becoming 'Menu') can also be a link so that one has to not click the three lines (or can click them too but it makes sense to click the words 'Menu' or something that says 'Click This'). See what I mean?

This has been partly resolved in commit e8395a2

This commit has also made some changes to the colours used on the web site.

This commit is part of a work in progress. Stay tuned for more changes ...

With commit b84f8cb we have resolved the cell phone and tablet device issue (assuming the screen is <= 1024 pixels wide) use of menus when JavaScript is enabled.

Such narrow screens make use of the so-called "hamburger" icon to invoke the menu.

We have improved the colour of the markdown headings (h1 thru h6), plus the text, links and codes.

TODO: We have a plan to detect when JavaScript is disabled and display. Instead of the so-called "hamburger" icon, users with JavaScript disabled will see:

     Please
     Enable
   JavaScript

Clicking on that next will visit the new nojs-menu.html page.

TODO: Fix a problem on wide screens where some of the righthand edge pulldown menus are cutoff.

TODO: Fix the 5 HTML 5 errors introduced by the topbar code.

This commit is part of a work in progress. Stay tuned for more changes ...

[xexyl]

Thanks for all the updates! Please let me know when it's okay for me to work on things and that includes looking at things too. Fortunately (in the sense of timing) I don't feel up to it yet anyway.

[lcn2]

Thanks for all the updates! Please let me know when it's okay for me to work on things and that includes looking at things too. Fortunately (in the sense of timing) I don't feel up to it yet anyway.

See comment 2075527698.

[lcn2]

With commit bd63d57 our work with @chris-sab has been completed.

There may be future work related to use of Code Mirror technology .. that will happen under a different issue.

As of now, this issue has been completed to our satisfaction.

[xexyl]

With commit bd63d57 our work with @chris-sab has been completed.

There may be future work related to use of Code Mirror technology .. that will happen under a different issue.

As of now, this issue has been completed to our satisfaction.

Well done and thank you to you too Chris!