Improve change mark in guidelines and rules

Browse Source

Rather than have a literal vertical bar (|) for lines that indicate a
change from the last contest, it is now a CSS class which has a solid
black left border of 4 pixels. This not only makes it easier to see but
it fixes some formatting issues too (see below for tests).

This means that if a change mark is needed one can do:

    <p class="leftbar">
    ...
    </p>

A tip for vim users: in the .vimrc file add the following line
(temporarily or otherwise):

    abbr leftbar <p class="leftbar">

Then you only need to type:

    leftbar

and it will automatically add the proper block.

As for testing how this looks I have checked it with Safari with:

- an iPhone 14 Pro Max
- an iPhone 8 Plus
- a MacBook Pro 16 inch (both at full width and smallest width)
- an iPad Pro 11 inch 4th generation in both portrait and landscape
orientations

An important point that one needs to remember when using this CSS class
in lists is that one cannot do:

    <p class="leftbar">
    * foo
    </p>
    <p class="leftbar">
    * bar
    </p>

but rather do:

    * <p class="leftbar">foo</p>
    * <p class="leftbar">bar</p>

...

This commit is contained in:

Cody Boone Ferguson committed 2024-07-08 09:05:38 -07:00

1 parent c8ec2b0423

commit 02a4ed232e

5 files changed

+1922 -838

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

next/guidelines.html

+634 -294

File diff suppressed because it is too large. Load diff