fix!: improve grid usage, alignment, and spacing #24
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
null
date timeRather 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.grid-area
for easier layoutThe 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.
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.
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.
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.
break-inside
property from main contentThe
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 abreak-inside
property forgrid
s (https://www.w3.org/TR/css-break-3/#property-index), so we remove it.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.