Check out Grant Acedrex, our featured variant for April, 2024.

Enter Your Reply

The Comment You're Replying To
🕸Fergus Duniho wrote on Thu, Mar 2, 2023 10:29 PM UTC in reply to H. G. Muller from 08:13 AM:

It is not clear that the photographs or program logos can be clicket to navigate somewhere; the fact that the page is full of recognizable links creates the impression that navigation should occur through those.

I created new buttonized images of each logo.

The photograph for Shatranj / Chaturanga is awful.

I replaced it with a Chess photo.

and the board looks like it has disintegrated into individual squares for no obvious reason.

Since I don't have a Chaturanga board, I made it by laying out individual board tiles. Since these were hand-made, they did not all align up evenly.

The alignment of the images is messy: the images are not of equal size, so that upper-left alignment of the smaller xiangqi images is all wrong.

I took the width and height values off the Xiangqi image, then replaced it with a Janggi image, because its more square shape is less portrait, and that fits better with the other images being more landscape than portrait.

Although there now is a photograph for the 'featured variant', it is not obvious at all what its significance is. The word 'featured' (or better: 'variant of the month') does not appear with it. There is also no link in the accompanying text (like there is for Shatranj/Chaturanga and Xiangqi/Janggi/Shogi), nor a suggestion that the image can be clicked.

I added a line about that with a link in it below the image.

The program logos are all of different size;

I made new ones that are all the same size today, but the uniformity made none of them stand out as much. By being different sizes, they all stood out better. So, I reverted to the ones with different sizes.

  • Later on, I used a mix of resized logos and old ones to make each line the same length when there are four lines, but without making each logo the same width. This gave them a staggered but justified look.
  • After increasing the width of your idiagram logo, I recolored the white part to better show the beveled edges.

Depending on the display/window width, the four topics with an image either display as 4x1, 2x2 or 3+1. In the first two cases the program logos are tiled to approximately the sam size as one of the other images (which is OK), but in the latter case they are displayed side by side, and because that doesn't fit, displayed as rows of 6 + 2 (messy).

I tried using flexboxes to get the one alternative I would consider better, but I couldn't get it to work. I wanted to evenly split them on two lines with the logos spread out across the width of the page, but all I could do is split them into 4+4 all on the left side. So, I reverted it back. For now, the logos are grouped into pairs that must be on the same line. That's why you'll get 6+2 instead of 7+1.

  • However, I did adjust the flex-basis of the DIVs and got some screen sizes where all eight logos appear on a single line.
  • I later added some synchronized media queries to keep the logos on a single line for the 3+1 pattern by allowing them to resize. On both Firefox and Edge, this seems to work correctly without the logos stacking into a block when three images are above them.

Edit Form

Comment on the page Home page of The Chess Variant Pages

Conduct Guidelines
This is a Chess variants website, not a general forum.
Please limit your comments to Chess variants or the operation of this site.
Keep this website a safe space for Chess variant hobbyists of all stripes.
Because we want people to feel comfortable here no matter what their political or religious beliefs might be, we ask you to avoid discussing politics, religion, or other controversial subjects here. No matter how passionately you feel about any of these subjects, just take it someplace else.
Quick Markdown Guide

By default, new comments may be entered as Markdown, simple markup syntax designed to be readable and not look like markup. Comments stored as Markdown will be converted to HTML by Parsedown before displaying them. This follows the Github Flavored Markdown Spec with support for Markdown Extra. For a good overview of Markdown in general, check out the Markdown Guide. Here is a quick comparison of some commonly used Markdown with the rendered result:

Top level header: <H1>

Block quote

Second paragraph in block quote

First Paragraph of response. Italics, bold, and bold italics.

Second Paragraph after blank line. Here is some HTML code mixed in with the Markdown, and here is the same <U>HTML code</U> enclosed by backticks.

Secondary Header: <H2>

  • Unordered list item
  • Second unordered list item
  • New unordered list
    • Nested list item

Third Level header <H3>

  1. An ordered list item.
  2. A second ordered list item with the same number.
  3. A third ordered list item.
Here is some preformatted text.
  This line begins with some indentation.
    This begins with even more indentation.
And this line has no indentation.

Alt text for a graphic image

A definition list
A list of terms, each with one or more definitions following it.
An HTML construct using the tags <DL>, <DT> and <DD>.
A term
Its definition after a colon.
A second definition.
A third definition.
Another term following a blank line
The definition of that term.