Make the website actually look good

[ifaoji]

Currently the Website does not really look that good. We should change that.

To-Do:

• Login page
  • Create a card to mimic traditional login prompts
  • "Sign in with 42"
• Home
  • Really necessary? Would link directly to Open Issues, show some stats or maybe announcements from the council, or list possible actions for the user (kind of a sitemap)
• Footer
  • Is invisible unless you unintentionally scroll down. I like sticky footers but they're hard to see if they are outside of the viewport
• Issues
  • Remove outer card as it's the main content of the page, no other elements to distinguish it from (refactor: remove issue card #151)
  • Maybe move the total votes to the left of the title, more similar to Reddit or HN. Currently you have to follow with the eye all the way to the middle of the page making it harder to scan quickly (improve: move votes column to the left #157)
  • Open/Archived state is not saved during navigation: opening an issue under Archived and going back, navigates to Open Issues #158
  • Move Open/Archived under page Title+Description (refactor: remove issue card #151)
  • Button text to "Open an issue" (refactor: make issue list buttons look better on mobile #164)
• Issue #N
  • Main title should be Issue title, with issue number as additional information i.e. here on GitHub (refactor: overhaul the issue page design #166)
  • Make text size consistent between issue description and comments (refactor: overhaul the issue page design #166)
  • "Go back" button with less important color and aligned on the left
  • Put likes value outside of button or reduce the text inside. Currently the value is hard to scan
  • Reduce page width to around 90ch (setting max-width: 90ch already works great, actually could be a good measure for other pages as well)
  • Maybe hide detailed description about how you save the likes under a details, with a simple summary like "Upvotes are not anonymous"
  • Comments
    • Style dates consistently with /issues, remove "on"
    • Align date bottom right
    • Lighter background color for each card (refactor: overhaul the issue page design #166)
  • Mark archived issues as such (just a simple badge)
  • Link to Student Council answer close to initial Issue description
  • textarea should resize automatically to fit all text, avoiding scrollbars i.e. what GitHub and most other modern websites do. Scrollbars are generally not great, especially on mobile, as they conceal text outside of the viewport... (feat: instant feedback for reaching max character limit in input fields #169)
• Other pages
  • Usually the hr after the h1 feels unnecessary and repetitive as there's another line with exactly the same style just above it (refactor: remove unnecessary title separators #165)

[leeoocca]

Some vague ideas:

• Login page
  • Create a card to mimic traditional login prompts
  • "Sign in with 42"
• Home
  • Really necessary? Would link directly to Open Issues, show some stats or maybe announcements from the council, or list possible actions for the user (kind of a sitemap)
• Footer
  • Is invisible unless you unintentionally scroll down. I like sticky footers but they're hard to see if they are outside of the viewport
• Issues
  • Remove outer card as it's the main content of the page, no other elements to distinguish it from
  • Maybe move the total votes to the left of the title, more similar to Reddit or HN. Currently you have to follow with the eye all the way to the middle of the page making it harder to scan quickly
  • Open/Archived state is not saved during navigation: opening an issue under Archived and going back, navigates to Open Issues
  • Move Open/Archived under page Title+Description
  • Button text to "Open an issue"
• Issue #N
  • Main title should be Issue title, with issue number as additional information i.e. here on GitHub
  • Make text size consistent between issue description and comments
  • "Go back" button with less important color and aligned on the left
  • Put likes value outside of button or reduce the text inside. Currently the value is hard to scan
  • Reduce page width to around 90ch (setting max-width: 90ch already works great, actually could be a good measure for other pages as well)
  • Maybe hide detailed description about how you save the likes under a details, with a simple summary like "Upvotes are not anonymous"
  • Comments
    • Style dates consistently with /issues, remove "on"
    • Align date bottom right
    • Lighter background color for each card
  • Mark archived issues as such (just a simple badge)
  • Link to Student Council answer close to initial Issue description
• Other pages
  • Usually the hr after the h1 feels unnecessary and repetitive as there's another line with exactly the same style just above it

Enough for now 😅

[ifaoji]

Thank you for the many ideas Leo 👏
I will add them as a To-Do list to the Issue 🫡

[leeoocca]

Another idea regarding opening issues and possibly adding comments:

• textarea should resize automatically to fit all text, avoiding scrollbars i.e. what GitHub and most other modern websites do. Scrollbars are generally not great, especially on mobile, as they conceal text outside of the viewport...