Commit graph

22 commits

Author SHA1 Message Date
efae2acdea Simplify figure styles and markup
Remove the .figure__container element. According to Tess, putting a <figcaption>
inside a child of a <figure> "doesn't obey the content model" or some shit.
Fiiiiine.

Getting small figures to lay out the way I want them to without the container
was a bit of a trick. Instead of letting the figure span the entire width of the
grid column, let it fit the size of its contents, and then set margin-inline to
auto so it centers.

Doing this also allowed me to remove the .figure--image, etc styles because the
styles and markup are a lot more similar among figures containing different
kinds of elements. Nice!
2024-11-25 15:48:04 -08:00
502aa408d9 Refactor all the figures
There are two main sizes of figures: fullwidth and small. Full width figures take
the full content width. Usually they spread into the "wide" content area too.
Main size figures are also full width figures, but they stop at the edges of the
main content area. Small figures shrink to fit and are generally 480pts wide.

Break all these different types of figures down into separate templates for each
variant.

Add the ability for resources to specify a "source" with a link and title.
2024-11-25 09:51:32 -08:00
25eaca442c Style plain text code blocks
For quotes of poetry, etc, style pre-formatted blocks of plain text.
2024-11-06 09:03:36 -08:00
340029a01c Fix vertical spacing of a handful of elements 2024-10-13 23:14:28 -07:00
4c689f0f5c Reduce the depth of the DOM and simplify the CSS a bit
Remove the main intermediate container. It wasn't acutally serving a purpose.
Remove some of the BEM-style classes that also weren't really doing anything.
2024-10-13 23:13:16 -07:00
49f5a90813 Add the .content class to the content <div> in list templates 2024-10-10 23:04:41 -07:00
5eb9c2c826 Remove the article specifier from these selectors
The .content element is no longer an article. It's a <main>.
2024-10-08 22:24:39 -07:00
5b1eeee5e9 Structure: Increase the content width to 45rem 2024-08-02 15:47:45 -07:00
2683a148d5 Structure: Make the gutters smaller on screens <= 480px 2024-07-25 13:12:45 -07:00
737ec20e3c Meta: Remove all the block comments at the top of CSS assets 2024-07-25 13:11:40 -07:00
1ffbee8850 Structure: Collapse the outer grid columns (margins and gutters) on small screens
Let the border of the site header and footer touch the edges of the screen too.
2024-07-25 09:55:51 -07:00
bccadced1b Misc structure styles 2024-07-23 09:13:03 -07:00
1925a0109f Do not give <img> max-width of 100% by default 2024-07-23 09:12:10 -07:00
d1154de459 Add a page navigation breadcrumb
This thing looks like a path. It lists the hierarchy of pages from the home page.
2024-07-23 08:53:34 -07:00
3cbce149ba Build the page scaffolding with CSS grid
Grid columns are symmetrical. From the outside in, they are:

- outer margin
- inner margin
- wide gutter
- inner gutter
- main content
2024-07-06 11:07:52 -07:00
11295e1eb2 Move page navigation CSS to its own stylesheet 2024-07-06 10:19:51 -07:00
c878427e2e Structure: Limit <img> elements to 100% of their container
Set max-width to 100%.
2024-07-03 07:43:34 -07:00
199731551e Structure: Express content width in terms of rems 2024-07-03 07:41:23 -07:00
b50f4c6a92 Move styles for content elements to 099_content.css 2024-07-03 07:41:23 -07:00
d6537af00c Move the site-header styles to site_header.css 2024-06-29 14:14:52 -07:00
a8fd6e550f Implement a clever margin trick
This trick centers content and ensures a minimum margin of spacing size S.

https://stackoverflow.com/questions/70323075/how-i-can-use-min-and-max-css-functions-to-work-with-auto
2024-06-29 10:31:21 -07:00
4bc1390b3c CSS Checkpoint
- Add the system_css template
- Name the CSS files in the css directory with a numeric prefix so they sort by
  priority.
2024-06-28 09:03:28 -07:00