While researching about using resets as the basis for custom project defaults, I came accross this solution to a problem I was having. > pre, code, kbd, samp The font-family: monospace, monospace hack fixes the inheritance and scaling of font-size for preformatted text. The duplication of monospace is intentional. Source. > > Source: Normalize.css READMEhttps://github.com/necolas/normalize.cssreadme To me, this became evident when using code elements inside a header. If the element that contains the code element is sized using em the different in font size is obvious. However, if you size the element using rem the change doesn't appear to happen...
There are more areas I'm working on as I move from WordPress to Eleventy that, in my opinion, are easier to do with a static site generator. There is still more to work on as I've officially moved the site, I will continue to post in this series as I finish the other pieces of content. Identifying links to the Wayback Machine There are times when the site I link to has been removed, has moved behind a paywall or has become unreachable. Most of the time I will just remove the link but there are situations where the content...
These are more random, miscelaneous, items that I'm working on to make the site look as close as possible to the WordPress version of the site. Implement Archive Pagination The way I want the blog structured, the index page only has the last 10 published posts and a link to the archive. In the first iteration, I want the archive to be paginated on 10-item blocks. yaml --- layout: layouts/home.njk pagination: data: collections.posts size: 10 reverse: true permalink: "{% if pagination.pageNumber > 0 %}page-{{ pagination.pageNumber }}/{% endif %}index.html" --- The content of the post itself doesn't change. It remains the...
People who have been waiting for the Temporal proposal, and for browsers to release their implementations unprefixed, have reason to be happy : IETF has approved draft-ietf-sedate-datetime-extendedhttps://datatracker.ietf.org/doc/draft-ietf-sedate-datetime-extended/, which was the last block before moving Temporal to stage 4 in the TC-39 processhttps://tc39.es/process-document/. Now, short of major implementation issues reported to TC39, this should move to stage 4 once two interoperable implementations ship in browsers. Using the Temporal polyfillhttps://www.npmjs.com/package/temporal-polyfill provides a spec-compliant workaround for the API until browsers implement it natively. I discussed using the polyfill along with examples of how the API works in Revisiting the TC39 Temporal proposal/revisiting-the-tc39-temporal-proposal/
Since I decided to move to a PostCSS workflow from SASS, there are a few other plugins that I want to look at to consider adding them to the workflow. I'm not 100% sure that any of these plugins will make it to the PostCSS process. I'm documenting them here to keep a record of what the thought process was. Management: These plugins will control behavior and results of using PostCSS postcss-nestedhttps://github.com/postcss/postcss-nested will cover nesting until we can be certain that all browsers can handle nesting postcss-sortinghttps://github.com/hudochenkov/postcss-sorting sorts the properties in a rule postcss-easy-importhttps://github.com/TrySound/postcss-easy-import inlines the content of imported files...
Once I got a basic migration working how I want to, I can look at details that go beyond content and deal with styling and layout. Typography And Other CSS Work As much work as I've done in typography to make the Eleventy site look like the WordPress version, there is work still to do. Typography The first thing to do is to create a more apealing typograhical experience. I created a major third typographical scale using Type Scalehttps://typescale.com/. I increased the base font size slightly from 1.125 to 1.25 to make the text easier to read. We first define...
For a while I've been thinking about moving my blog out of WordPress and into a static site. There are a number of reasons why I want to do this but the main one relates to the block editor The block editor makes it harder for me to create custom content the way that I want to do it. Rather than use blocks, I prefer to use HTML and CSS to create layouts. With every new release, WordPress becomes more block-oriented and less acommodating to other design and development patterns. You have to use plugins to re-enable the traditional editor...
Web fonts are awesome but there are times when they are not enough. There may be foundries that don't provide web versions of their fonts or licenses to use their fonts on the web. Chromium browsers now have the choice of using local fonts for your web projects. This will allow users to take full advantage of the fonts they own for their projects without violating licenses or other potential legal issues. Feature detection Since the feature is only supported in Chrome and Edge but not on other Chromium Browser like Opera or Samsung Internet, Firefox or Safari, we need...
The more I play with color.jshttps://colorjs.io, the more I love it. I created two simple tools on top of it to make my life easier. The first one is a color converte. This post will discuss why I created it and how it works. The tools I've built each tool as a separate Vitehttps://vitejs.dev/ project to make sure I got them working. A future iteration of this project will combine them into a single project. The future version will also move to Typescript as I become more comfortable with types and the Typescript extensions to Javascript. Color conversion The first...
CSS lists look nice with the standard list styles but there are cases when we may want to use special characters in the styles, the language that we use may have special, or we may just want to have fun. To modify the appearance of lists we'll look at the list-style-typehttps://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type property and the @counter-stylehttps://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style at-rule. list-style-type list-style-type lets CSS authors select from a list of available list styles to use. THe list of available values for both ordered and unordered lists is in the MDN pagehttps://developer.mozilla.org/en-US/docs/Web/CSS/list-style-typevalues We'll use the values on that list to create custom ordered and unordered...
