Styling questions, feedback and possible improvements.

[MarkoSagadin]

Hello!

first of all: this is really a cool project :heart:

I am amazed at how well-documented it is, how well the code is structured and how much you have tried (and I think succeeded) to make this project useful for non-programming/technical people. Really, great job!

Full disclosure: I deal mostly with embedded systems so I know C, Python, and GitHub Actions quite well, however, I do not know much JS, CSS, Sass and HTML. I know the general purpose of technologies in this project (due to your docs), but not the specifics.

Questions/items:

1. I noticed that there is some issue when switching between light and dark mode in the Card Type preview screen in Anki. I played around and figured out what is the problem. I opened a PR where I fixed that: #14
2. Is it possible to make tabs functionality optional? I did not have a use case where I needed them and would prefer if they could be disabled.
3. Better mobile interface: I feel that with the current styling/formatting the cards on the mobile feel very cramped.

Below is a default example, as rendered on an iPhone 12/13 Pro screen (I used Firefox's Responsive Design mode for this).

I understand that some code snippets will always wrap as they are too long to fit on a narrow screen (line numbers help with visibility in that case), however, I think that we could improve readability with a generally smaller font on mobile devices, and some modifications in the margins/paddings.

4. Support for tags: I would like to specify one or more tags in the markdown and have this information attached and visible on the cards. One project that does this well is this one: https://github.com/pranavdeshai/anki-prettify

5. One instruction in the theme builder is insufficient, specifically this one: https://github.com/Mochitto/Markdown2Anki/tree/main/theme_builder#adding-the-theme-to-anki. For example, if you just create a custom theme from the template files and try to copy the contents of the CSS to Anki's card styling, not everything will work as you would be missing some styling that is provided by the base.sass, layout.sass and others. So you would need to build the themes with npm to get that.

6. This project could do well with some release automation and development tooling. I am quite familiar with this as I have this implemented on the Python project that I work on: https://github.com/IRNAS/irnas-east-software, check docs/development_guide.md

Support:

I can help to implement all items from 2. to 6. I am comfortable with Python, however, I would require some assistance with frontend-related stuff. Specifically:

• I am not sure that you can make tabs optional with the current frontend, probably some adjustments are needed.
• And also, I would require some input regarding the better mobile interface.