Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix!: improve grid usage, alignment, and spacing #24

Merged
merged 1 commit into from
Oct 31, 2023

Conversation

cjshearer
Copy link
Owner

This commit is largely a refactor to make better use of grids by using grid-areas, but it also improves spacing between and alignment of elements by incorporating them into the grid. It also includes several fixes.

  • fix!: remove support for null date time

Rather than providing an end date time with a value of null to signify that a position or experience is ongoing, the end property should now be omitted from a date.

  • refactor: use named grid-area for easier layout

The header, main content, and footer are now part of the grid rows and have consistent spacing applied between them. Column and row spans have also been replaced with named column and row starts/ends.

  • fix: remove margin and padding from drawer

The drawer is no longer contained within the wrapper with the margin/padding applied around the edges of the page. While the drawer would previously get pushed around by margin when scrolling to the bottom of page, the drawer now stays in place when scrolling.

  • fix: lock footer to the bottom of page

The footer will now stay at the bottom of the page, regardless of the amount of content in the resume. This includes adding margin to the bottom of the page to prevent the footer from getting to close to the bottom.

  • fix: main content sizing and alignment

When the document has less than a full page of content, it will no longer be centered and spread outward to fill the space. Now, content is always aligned to the top and minimized to fit the content.

  • fix: remove invalid break-inside property from main content

The break-inside: avoid-print property has been removed from within the main content sections. While this would be desireable and does have some effect on the print layout of the document in Chrome, it is often buggy and causes rows to overlap. This is unsurprising, as the W3C's CSS Fragmentation Module does not define a break-inside property for grids (https://www.w3.org/TR/css-break-3/#property-index), so we remove it.

  • fix: sections without date take full-width of main section

A section without a date will now consume the width that would have otherwise been used by the date. This could be useful for an introductory (e.g. "about me") section, which would no date and could precede the rest of the document.

This commit is largely a refactor to make better use of grids by using
grid-areas, but it also improves spacing between and alignment of
elements by incorporating them into the grid. It also includes several
fixes.

* fix!: remove support for `null` date time

Rather than providing an end date time with a value of `null` to signify
that a position or experience is ongoing, the end property should now be
omitted from a date.

* refactor: use named `grid-area` for easier layout

The header, main content, and footer are now part of the grid rows and
have consistent spacing applied between them. Column and row spans have
also been replaced with named column and row starts/ends.

* fix: remove margin and padding from drawer

The drawer is no longer contained within the wrapper with the
margin/padding applied around the edges of the page. While the drawer
would previously get pushed around by margin when scrolling to the
bottom of page, the drawer now stays in place when scrolling.

* fix: lock footer to the bottom of page

The footer will now stay at the bottom of the page, regardless of the
amount of content in the resume. This includes adding margin to the
bottom of the page to prevent the footer from getting to close to the
bottom.

* fix: main content sizing and alignment

When the document has less than a full page of content, it will no
longer be centered and spread outward to fill the space. Now, content is
always aligned to the top and minimized to fit the content.

* fix: remove invalid `break-inside` property from main content

The `break-inside: avoid-print` property has been removed from within
the main content sections. While this would be desireable and does have
some effect on the print layout of the document in Chrome, it is often
buggy and causes rows to overlap. This is unsurprising, as the W3C's CSS
Fragmentation Module does not define a `break-inside` property for
`grid`s (https://www.w3.org/TR/css-break-3/#property-index), so we
remove it.

* fix: sections without date take full-width of main section

A section without a date will now consume the width that would have
otherwise been used by the date. This could be useful for an
introductory (e.g. "about me") section, which would no date and could
precede the rest of the document.
@cjshearer cjshearer merged commit 65464b7 into main Oct 31, 2023
2 checks passed
@cjshearer cjshearer deleted the fix/grid-usage-alignment-and-spacing branch October 31, 2023 14:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant