💄 Cosmetic rework for "What are the eight values?" section of index.html

[ConOLeary]

I did a cosmetic rework of the "What are the eight values?" section of index.html so as to be more alluring to the eye, and to compliment the style of the values.svg image at the top of the page.

The only non-cosmetic change I made to the section was changing two references to a "State" axis to the "Civil" axis we know and love

[Genora51]

This looks great, but ideally should be responsive for mobile devices.

[ConOLeary]

This looks great, but ideally should be responsive for mobile devices.

Glad you like it. I'll see if I can make it responsive

[Genora51]

I'm still getting this ugly wrapping whitespace on mobile screen sizes

[ConOLeary]

That's odd .. the wrapping effect is not occurring for me on any of the default mobile device emulators listed in Google Chrome (see image below). Would you be able to email me to tell me what phone and browser you are using so I can try and create the error for myself ? (conolaoghaire@gmail.com)

[Genora51]

So I'm getting that on Firefox, Ubuntu 20.04. I'm pretty sure using a flexbox would solve that problem really cleanly though.

[ConOLeary]

I managed to recreate the wrapping around bug you encountered. Now the webpage won't wrap around when Firefox's phone emulator is in 'responsive' mode, although it still does not look good. However, I think this issue may be to do with Firefox's emulator, as it does not occur on Firefox if a specific phone emulator (e.g. iPhone 8) is selected, rather than 'responsive' being selected, and also does not occur for the same aspect ratios in Chrome's 'responsive' mode;
e.g. the bug, or subsequent fix, we are referring to will not occur if Firefox's emulator is set to iPhone 8, but it will occur if the emulator is set to 'responsive', even if the aspect ratio set through the responsive mode is that of the iPhone 8.

[ConOLeary]

👋 Hey, could my branch be pulled?
My last commit solved the issue with the branch

[ConOLeary]