mysticsymbolic.github.io/lib/pages/vocabulary-page.css

.checkerboard-bg {
  /* https://codepen.io/pascalvgaal/pen/jPXPNP/ */
  background: #eee
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".1" ><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" /></svg>');
  background-size: 20px 20px;
}
Split up CSS into multiple files and use CSS imports (#206) This splits up our `styles.css` file into multiple CSS files that sit alongside the TSX files that use their classes. All "generic" CSS that isn't used by any one particular component, such as our `thingy` class, is currently being put into `page.css`. The CSS files are imported via `import` statements in their associated TSX files. As such, this fixes #164. This also starts formatting our CSS using Prettier. It also moves some of our `<head>` tags back into `index.html`, reverting a tiny bit of #205, to ensure that some of the metadata can be recognized by browsers, and start loading asynchronously, independently of the page's JavaScript (I see no reason why any of those elements need to change dynamically based on the app's state, so there don't seem to be any downsides to this). 2021-07-11 19:59:37 +00:00			`.checkerboard-bg {`
			`/* https://codepen.io/pascalvgaal/pen/jPXPNP/ */`
			`background: #eee`
			`url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".1" ><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" /></svg>');`
			`background-size: 20px 20px;`
			`}`