ui-experiments

This is a repo where I put ideas for UI components for the eleventy-plugin-repoviewer default template. I'm using the buildSteps feature of repoviewer to put the resulting HTML pages on the web.

So far, those are:

• index.html
  • rough draft of the default template for repoviewer. I posted a link to this mockup for feedback here: https://feddit.online/post/1159392
• index-slim.html
  • A more compact version of that rough draft, from when I thought I might want the header on every page
• index2.html
  • A slightly different color scheme
• design-board.html
  • Different idea for the default template's look, which eventually became what I went with
• new-commits-page.html
  • some ideas for how commits should look on the commits list page

Building this:

Right now the only thing that needs to run is sass. The .html files expect a CSS file to be in css/design-board.css. The npm run sass script does this. So, run:

• npm install to make sure sass is installed
• npm run sass

Then you'll be able to just open any of the .html files here in a browser.

Note: If you installed your browser using a flatpak, it won't be able to see the local CSS files because of how they restrict accesst to your local files. While this is very cool, it can be kind of inconvenient for local HTML/CSS development.

possible expanded color palette: https://coolors.co/556df0-852cdf-ff549b-8ec323-f8e276-f49530-edabb8-e273fa-7388fa-80f8d4

/* CSS HEX */
--electric-sapphire: #556df0ff;
--blue-violet: #852cdfff;
--wild-strawberry: #ff549bff;
--yellow-green: #8ec323ff;
--jasmine: #f8e276ff;
--carrot-orange: #f49530ff;
--cherry-blossom: #edabb8ff;
--mauve-magic: #e273faff;
--cornflower-blue: #7388faff;
--aquamarine: #80f8d4ff;