todds-bistro

Styles for the recipe cards used from here.

The storage location for our images.

Gravit is a browser based alternative to Inkscape.

This is likely the font for our front page.

The inspiration for the style of our front page.

Notes on CSS positioning here.

The best way to figure out box shadows in CSS is to play with them.

This styling may prove useful for multiple columns when we need it.

Vue Router.

...and here's the link to the Vue guide itself.

Upgrading node with nvm is simple (note it's nvm not npm) - nvm install stable

Then upgrade npm - npm install npm@latest -g

Vue seems to be a bit heavy handed, but I don't want code duplication, so I'm going to try Google's Firebase.

When logging in, use firebase login --no-localhost

While researching firebase, I came across more information on static site generators. I'm trying my hand at gitlab pages, specifically the jekyll set up.

sudo apt-get update

sudo apt-get install ruby This is an old version of ruby, so we need to do some more work.

sudo apt-get install gnupg2

Follow these instructions and these hints.

sudo usermod -a -G rvm cabox

rvm list known

rvm install 2.4.1

rvm use 2.4.1 --default

sudo gem install jekyll bundler

More information on using jekyll.

Information on jekyll collections.

There are other filters that are available, that aren't mentioned in the jekyll documentation.

What the hell is a clearfix hack?

This site assisted me with layout inheritance.

This can be used for responsive testing.

We use this for scanning and manipulating the drawings.

margin: 0 auto explained.

This page gives @media queries for various breakpoint sizes.

We'll likely use this for cooking classes. It's from the same site we used for the recipe css.

Not that it's necessary, but here are alternatives to image storage

From the scss file (re imports) - The @import rule must be at the top of the document (but after any @charset declaration).

From the scss file (re gradients) - This indicates that from 0 - 24px on the gradient, transition from yellow to yellow (so, no transition). From 24 - 25px transition from yellow to blue (essentially creating thin blue lines).

[YAML cheat sheet | https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/]