[Bug] Aside Navigation not responsive on screen sizes < 681px

[egbadon-victor]

Description

For all pages that contain an aside navigation, the aside element maintains a padding that on screen sizes < 681px , make the navigation appear pushed to one side. This affects;

• specimen/contexts/default-page.html
  - specimen/contexts/archive-page.html

Reproduction

1. Fork and clone the repository to your local machine
2. Open either the specimen/contexts/default-page.html or specimen/contexts/archive-page.html file on your browser
3. Using the chrome developer tools, reduce the screen width to a size < 681px
4. Observe the padding and apparent shifting of the element.

Expectation

The aside element should have uniform padding on the left and right side, and should not take too much space, so as to prioritize content.

Screenshots

Environment

• Device: iPhone XR; laptop
• OS: iOS 17; windows 11
• Browser: Chrome
• Other info: (eg. display resolution, ease-of-access settings)

Resolution

• I would be interested in resolving this bug.

[possumbilities]

I believe this is actually a result of #276, moving this to 🚧 status: blocked Blocked & therefore, not ready for work and once that's resolved IF it doesn't address this then we can unblock this.

[egbadon-victor]

@possumbilities this is noted.

But an alternative approach would be removing the left padding now, so that when an approach is decided for the content padding for mobile devices, it can be applied directly by any PR that resolves #276 .

Hence I can simply this issue to center around removing the left padding alone.