Allow choosing stylesheets per page

sc0ttj commented 5 years ago

Split assets/css/main.css into

`assets/css/core.css`

Contains base CSS - resets, simple, minimalist, bland styles, to be overridden by a CSS theme.

`assets/css/_style-<name>.css`

Overrides the defaults set in core.css

Implementation

Split files in assets/css/ as above..
Add support for new vars: $site_style (defaults to main) and $page_style
At build time:

Default style (main):

get core.css, style_main.css, and google fonts .. output style_main.min.css
every page with $page_style of main will get style_main.min.css, cached if possible.

Custom style (foo):

get core.css, style_foo.css, and google fonts .. output style_foo.min.css
every page with $page_style of foo will get style_foo.min.css, cached if possible.

...

Essentially, ***.min.css should contain the following CSS, minified:

# add core css - resets, etc
${core_css}
# add fonts
${google_fonts}
# add page style, or fallback to site style
${page_style:-$site_style}

You will still be able to add page-specific CSS by putting .css files in the following folder: assets/css/<page-slug>/some-file.css

sc0ttj commented 4 years ago

Nearly done... Everything except separating stuff out to _core.css has been done in this commit: https://github.com/sc0ttj/mdsh/commit/4ef6fb00c49c97e52636f5b62a1fe15bd07ad24c

sc0ttj commented 4 years ago

done in https://github.com/sc0ttj/mdsh/commit/9a9548ba0b3f1c7b8c2b52811f3a62f086613e51 and https://github.com/sc0ttj/mdsh/commit/2fadd83a717039c3a88ccd2080771194b5bb3324:

File `assets/css/__core.css` is a new file, containing CSS fixes
and normalisations to make your site look the same across all
modern browsers, plus some extra classes to make life easier.

It will be included by default at the top of your minified CSS files,
along with any Google fonts you have chosen in `assets/data/site.yml`.

Here are some of the classes available in `__core.css`:

- `.off-screen` - hide content off the visible screen, but keep
                  it available to screen readers

- nicer looking, more accessible default colours, as classes:

  - Blue:  `.blue`,  `.bg-blue`,  `.border--blue`,  `.fill-blue`,  `stroke-blue`
  - Green: `.green`, `.bg-green`, `.border--green`, `.fill-green`, `stroke-green`
  - ...etc

Other changes:

- renamed `.footer` to `.site-footer` in the relevant templates and stylesheets
- removed some stuff from stylesheets that is now in `__core.css`

sc0ttj / mdsh