feat: improve challenge pages ui and format html content

[100gle]

• Using Pico CSS presets which supports light and dark theme.
• Provide dark mode switcher.
• Improve some custom styles.
• Refactor template directory structure based on Jinja inheritance system.

Desktop layout(light/dark):

Mobile layout(light/dark):

[laike9m]

Thank you so much, looks awesome! There are some conflicts you might want to resolve.

Some feedbacks:

• Can we keep results on the right side? I tried the new UI locally, and the first time I don't even know where the results are, since it's out of the screen and I need to scroll to it
• Can we make the blanks smaller?
  
• Even though I'd expect most people to use it on their desktop, we still want to make mobile experience as good as we can. This PR has some issues on mobile (left side is the new UI)
  

Also a question & concerns:

• How does dark mode work, do users still have control over it?
• It seems pico.css is not actively maintained anymore. The latest change is 4/21, with open PRs and issues not taken care of. I don't know how big of a concern this is, you might know this better than me so I'd like to hear your thoughts
  

[100gle]

@laike9m

• 在现有布局下右侧的结果显示区域其实有很大一部分空间被浪费了，考虑到人眼的比较偏向于纵向浏览的习惯，所以我把主体部分的布局调整成了纵向排列

  

  然后目前 Result 区域可以再调整，我觉得可以借鉴成 Leetcode 的那种形式，与 Test Case 直接合并到一块，用 Tab 来呈现 Test Case 和 Result 我觉得会是一个更好的选择？
  

• 移动端的响应式布局我可以再调整调整 🤣

• Pico CSS 可以设置深色和浅色模式，默认会根据用户浏览器的 prefers-color-scheme 来自动设置，可以加个逻辑和按钮来切换（Maybe new PR？👀）

• 实际上像 Pico CSS 这样的 Minimal CSS 框架或库可能不太会像 Tailwind CSS 或其他热门的 UI 框架那样更新特别频繁，大多数都处于维护状态（很多 JS 库也是如此，因为功能都比较稳定了）；它们面向的不是那种复杂的且需要高度定制化的场景，而是偏向于简单、轻量的场景，所以目前应该是能满足本项目需要了的。搜索了并对比了几个 Minimal CSS 替代品之后我觉得 Pico CSS 在样式上相对美观，并且支持样式覆盖，所以我选择了它。或者你有其他的想法吗？

[laike9m]

Personally, 我希望用户能一眼纵览所有信息：代码，test case，结果（尤其是考虑到页面完全足够容纳它们）。所以结果放在下面和 tab 里我觉得不 ok

我同意你说的一开始右侧空间没东西的问题。你觉得把 test case 放右边如何？然后结果放 test case 下面。这么改两个需求都兼顾了

[100gle]

Personally, 我希望用户能一眼纵览所有信息：代码，test case，结果（尤其是考虑到页面完全足够容纳它们）。所以结果放在下面和 tab 里我觉得不 ok

我同意你说的一开始右侧空间没东西的问题。你觉得把 test case 放右边如何？然后结果放 test case 下面。这么改两个需求都兼顾了

可以的，我用 Figma 简单撸了个原型。

桌面端就左右布局：

移动端就还是纵向布局：

你觉得怎么样？ @laike9m

[laike9m]

大佬太强了！Looks great！我们就按这个来吧

[100gle]

@laike9m 已重新调整，有空可以再看看

[laike9m]

辛苦，明天看

[laike9m]

LGTM! 非常感谢！

[laike9m]

@100gle 想问一下你用的是哪个 formatter？我这边 HTML auto format 不会把 block 里面的内容 indent，所以想看一下你用的什么

[100gle]

@100gle 想问一下你用的是哪个 formatter？我这边 HTML auto format 不会把 block 里面的内容 indent，所以想看一下你用的什么

@laike9m 😂 实际上是我手动 Format 的，不过搜了一下这个项目 https://github.com/Riverside-Healthcare/djlint 好像可以提供 formatter 的方式，晚点有空我研究看看

[laike9m]

好的，之前我也看了 djlint，感觉是最好的。那就顺便统一一下 formatter 好了，它能用 pyproject.toml 配置也挺方便的