💻 Refactor media breakpoints

Purpose

Closes #171.

Approach

Previously, many files had their own const strings for mobile, tablet, and laptop. They also had their own smallerThan() and largerThan() functions.

Also, the main file that was supposed to regulate breakpoints, styles/device.ts, was not organized well. It exported a device object that was supposed to give templates for different breakpoints, but did not cover all possible use cases and was extremely inconsistent. E.g. laptop would be max-width and desktop would be min-width for whatever reason. Apparently people got sick of this and just started using their own breakpoints, which is detrimental to code quality.

The solution I chose was to export the original width object in styles/device.ts that had the original const strings for all device sizes. Then, I also made smallerThan() and largerThan() functions that were exported too. This covers all possible use-cases for breakpoints (both min-width and max-width for eight different breakpoints in width.)

Then I refactored all references to media queries in the client to refer to this file.

Testing

Visual inspection shows that the website functions just like before.

Miscellaneous

You may notice that there are still some media queries (namely in navbar) that are not properly implemented yet. This will be handled in the navbar PR (https://github.com/loolabs/waterpark/pull/173) in the near future.

loolabs / waterpark