Forward!

March 27, 2023

Today, the site's responsive "mobile first" design goes live with the home page. As yet, the whole site is not responsive, and may never be. Nonetheless, key pages have been reworked and more will gradually be updated. The steps below recap the stages of the conversion accomplished so far.

March 25, 2023

It looks as if I have done most of the reconciliation between style files. Fixing missed bits will happen as each page undergoes the needed updates to make them responsive.

Taking the conversion page-by-page.

Puzzle pages updated today.

• Embroidery
• WordChop
• Wicked Wonderful Wordies

I had earlier restructured puzzle page tables so that they worked on a vertical phone screen. The process is not a simple as flicking a switch on the wall, as always.

March 23, 2023

I have made the 2023 clipart page a live test of the responsive menu and associated style-details css file. There is still significant reconciliation between it and the older simple2016.css, so that the general style file which results can handle all that it needs to do.

Nonetheless, I think this is a milestone day.

March 21, 2023

After doing a limited poll comparing a simple, one-layer menu with an expanding two-layer menu, I have chosen the two-layer menu. It is live above. It is in production, but because of style issues which are not yet resolved, most of the site's pages are not responsive, in spite of using the same menu.

It is good that the menu, drawn from a JavaScript file is functional for all the pages which use the menu. It is now a matter of working on a unified style file which will continue handle the needs of older pages and serve effectively for the new "mobile first", responsive ones. The UX menu design phase is "complete".

March 17, 2023

The current live menu of the main site is not particularly "mobile first/responsive". I'm working to fix that.

This page uses a responsive menu, but is it the right one?

Compare two menu styles.

Asking for your opinion. Three easiest methods to reach me are: the email address at the bottom of this page, posting to my Fediverse/Mastodon account or as a comment on my blog.

March 16, 2023

Ah, the sweet smell of (mostly) success. The major steps were to alter the basic style menu by adding a dmenu class and making several adjustments to the mobile first menu and adding adjusted dmenu class attributes to the wide screen menu style.

The basic structure of the responsive <ul> style did not change. Adding references to the dmenu class instead of he "menu" class used for the unordered list was important, but no changes were needed for the menu.js file itself.

The spacing of elements was the most complex issue since spacing has been defined in more than one style component. More and About still need to be separated, somehow, in the mobile block menu.

• New: Working Details Version
• uses current menu.js which is a details menu.
• uses style-details.css
• TO DO:
• try to space sub-summary links less.
• try to let "About" be on its own line for phone screens.
• ...
• figure out how to mix simple2016.css bits into style-details.css and name new merged file.
• major site rework to switch css file to "something"

March 8, 2023

• version: index230308.html
• No real progress.
• went down a probable sidetrack, by learning how to add a node to an element.
• Technique explained domtest5.html

These kinds of sidetracks seem to happen during the learning process when I attempt to jump from an idea to an implementation. I had tried several times to figure out how the button input function call worked, and spent most of today working on the technique. It wasn't until the fifth version that I got it. Then there was the effort to explain it and then to add a modified function to test myself within an unordered list.

March 7, 2023

Substituted the page-specific menu to one called as script.

• version: index230307a.html
• menu-ul.js - temporary(?) name.
• document.write pattern works even with switch between linear menu and hamburger menu.
• Tried experiment with nested UL elements...Not happy.

March 6, 2023

Reorganized folders and made this the primary index file.

• style.css file shares this same folder level
• adjusted the margin of menu for all widths of screen
• made this page live on the server.

March 4, 2023

I'm starting down the "mobile first" path. It's a path that isn't going to be entirely smooth, I'm sure.

This web page is a first step. The code for it is slightly modified from the code copied from an article at Logrocket

• Fixed position header and footer.
• Page should scroll between them, no matter how much text is on it.
• Color choices are modified to be "mine".
• Logo is mine, too.
• The associated style.css file is linked only in this folder (during development).
• Making routine unordered lists requires extra coding:
  < style="list-style: disc; margin-left: 2rem; margin-top: 1rem;">
  because this menu co-opts the unordered element.
• I am not sure I want the footer to be a fixed component, not scrolling.

Part of the road ahead is to try to rework the menu to use the details element instead of the un-ordered list. I'd also like to see if I can get the menu to be done with JavaScript in order to make it portable, the way I have it now on the live site.