Audit and fix types.md

[lmpham1]

Part of #18
Audit and fix type.md

Checklist

• Look for any typos
• Make sure all Markdown is correctly done. The conversion was done automatically by a tool, so there may be more idiomatic ways to do some things
• Check the page in a Desktop browser. Does it look OK? Are there any issues that need to be fixed?
• Check the page in a Mobile browser. Does it look OK? Are there any issues that need to be fixed?
• Try the page in both Light and Dark mode. Are there any issues that need to be fixed?
• Try running the page through Lighthouse: https://developers.google.com/web/tools/lighthouse. Are there any issues that need to be fixed?
• Try running the page through Web Hint: https://webhint.io/. Are there any issues that need to be fixed?
• Tables that are really wide (types.md) could be converted to use SVG or flex/grid. Make wide visual tables fit in the available viewport. Another example is the table in docs/D-Modularity/pointers.md, where we should reduce the vertical padding/margins on tables. The tables are too large, and probably shouldn't be tables at all.
• Prefer Markdown tables vs. raw HTML tags
• Fix colours in tables so it uses global styles vs. inline styles
• Use alt tags for all images. See https://supercooldesign.co.uk/blog/how-to-write-good-alt-text for suggestions
• Avoid blockquote for indentation, and prefer q or blockquote only when actually quoting. Use Admonitions instead. Example: docs/D-Modulatirty/pointers.md: there are places where > Blockquote are being used and Admonitions could replace it. “Note:” Lightbulb info Admonition.
• Make sure images work in dark and light modes. For example, docs/8-Computations/logic.md Flags image is white background, needs to work in dark. Create a “negative” or SVG so we can do Dark Mode? Can we programmatically create this negative?
• Change colours for tables (don’t use Yellow). We should use the default colour theme.
• Avoid using <b> and <i> to do emphasis.
• Use backticks and all code for memory addresses and such in tables that use things like void, int, function names, memory addresses.
• Make sure all code blocks use syntax highlighting
• centre images horizontally (esp. when they are small) so they work well at all responsive sizes
• check sub-script and super-script that they are correctly used in all cases
• consider including inter-site links to other pages that have related info
• all links should have descriptive text for accessibility
• Make sure that sub-headings (right-hand side) for each document are correct.
• Improve readability of code comments (i.e., // and /.../) in dark mode (even light mode might need some work)
• In places where ***...*** was used as a fourth heading level, use #### instead.
• Fix Frontmatter for page to include proper id, title, slug, etc.

[lmpham1]

Tables that are really wide (types.md) could be converted to use SVG or flex/grid. Make wide visual tables fit in the available viewport. Another example is the table in docs/D-Modularity/pointers.md, where we should reduce the vertical padding/margins on tables. The tables are too large, and probably shouldn't be tables at all.

hey @humphd, so I turned one of the tables into SVG and made them scalable, but I think it looks too small on mobile screen. This is not even the widest table in the page

What do you think is the best approach to this? I was thinking maybe we can separate each byte (each 8 columns) into its own row, so that we can make the table more vertical

[lmpham1]

I was thinking maybe we can separate each byte (each 8 columns) into its own row, so that we can make the table more vertical

Like something like this