search

pishoyg / coptic

This is a project that aims to make the Coptic language more learnable.
https://remnqymi.com/
GNU General Public License v3.0
10 stars 0 forks source link

[Site] Better the CSS, and Make Display Mobile-Friendly #241

Open pishoyg opened 2 months ago

pishoyg commented 2 months ago
  1. Flashcard pages are far from having mobile-friendly display. Make them look more like they do on Anki.
  2. Revisit the Crum Xooxle page display.
pishoyg commented 1 month ago

Adding the card class might do the trick.

pishoyg commented 1 month ago

TODO:

  1. All images in the Crum notes to be resized by the @media rule.
  2. Fix the Crum note styling (might be automatically fixed if images in the Crum notes are allowed to be resized by the @media rule).
  3. KELLIA search results have a fixed width, and they don't show on mobile!
  4. Can / should you store all images under one <figure> tag?
  5. Do you need to restore the figure img rule's vertical-align: top property?
  6. Eliminate all styling from within the HTML. Restrict styling, including tag attributes such as width, to CSS.
  7. Partially revert dd5ee968f2407a121827786c0c06da26fddb0f6e, using resized logos. The larger logos might be making the page a little slower, and they often end up rendering in their original sizes, e.g. on GitHub Android or on Edge Android! While this is, technically speaking, a browser issue rather than our own issue, it's still nice to address it.
pishoyg commented 1 month ago

Thanks to 90d16eb50b8fa0f276e1c7823154c867afcc0e6d, and the subsequent d46980fb527f071e40fc3d6c3be5370bd11fdfd0, the new search page is much more mobile-friendly. We no longer have tables within tables! Right now, we start losing content in the KELLIA table at 412px.

NOTE: We could perhaps make up for some of that loss by eliminating padding or margins!

pishoyg commented 1 month ago

Status:

DONE:

  1. KELLIA search results have a fixed width, and they don't show on mobile!
  2. Partially revert dd5ee968f2407a121827786c0c06da26fddb0f6e, using resized logos. The larger logos might be making the page a little slower, and they often end up rendering in their original sizes, e.g. on GitHub Android or on Edge Android! While this is, technically speaking, a browser issue rather than our own issue, it's still nice to address it.
  3. Do you need to restore the figure img rule's vertical-align: top property? (Edit: The answer is no, it's irrelevant.)
  4. Can / should you store all images under one <figure> tag? (Edit: No.)

TODO:

  1. All images in the Crum notes to be resized by the @media rule.
  2. Fix the Crum note styling on mobile (might be automatically fixed if images in the Crum notes are allowed to be resized by the @media rule).
  3. Eliminate all styling from within the HTML. Restrict styling, including tag attributes such as width, to CSS.

Low-priority:

  1. KELLIA search results don't work on screens that are less than 412px in width.
pishoyg commented 1 month ago

NOTE: The <style> tag was not interpreted as HTML by GitHub in the README. It's rumored that this is the list of whitelisted tags.