The narrow menu

Meta: Variable width style

As part of the updates to my website I dediced to add some variable width CSS styles. This allows the width of the main container to change in a fluid manner as the user changes the window size. This meant making two major changes.

First the menu had to change in size and content to respond to the changing window size. This now supports window widths down to 610 px. I may add support for window sizes down to 320 px, although to be honest most of the content on this website is not designed to be viewed on such a small device and supporting such antiquated devices seems counterproductive.

The second major change was changing the size of the canvas elements dynamically. This proved to be a bit tricky, since I wanted to keep the dimensions of the canvas the same, while changing the size on screen. It turns out the way to do this is to allow the canvas containter to change, and set the width of the canvas in terms of %. This has the added advantage of allowing the developer to use a higher resolution for the canvas, leading to superior graphics (at the expense of some more CPU time and RAM.)

Screenshots

The wide menu
The wide menu
The narrow menu
The narrow menu

Leave a Reply

Your email address will not be published. Required fields are marked *