CSS on yozy//NET

CSS Classes in Pure Markdown

Mon, 27 Apr 2020 08:00:00 +0200

One of Markdowns design choices is to not implement any layout.

Problem

One thing I wish it had would be a way of specifying image positions. E.g.: float on right and have width equal to the third of the column. Just like the example illustration somewhere next to this text.

Markdown does support plain html tags, so a verbatim <img> tag would be a solution. I find this inelegant, however. Various markdown processors support their own way to add classes, or have their own layout engine. As I prefer to keep my markdown as close to the GitHub style as possible, this is not an option for me.

Solution

I have already explored the use of the $= selector for the src attribute in my previous article.

Now let us take this approach a bit further. We declare the CSS like this:

img[src*="+right"] {
  float: right;
  margin-left: 20px;
}
    
img[src*="+third"] {
  width: 30%;
}

This allows us to add classes in markdown inside location hashes.

The following image will be floating on the right.

![illustration]

[illustration]: http://example.com/illustration.png#+right+third

And that is all there is to it.

Pure CSS solution to retina images with a single file

Wed, 03 Jan 2018 10:20:50 +0100

Problem: You have an image and want it to display well in browsers on a high DPI display. There are many ways to do this, some of them more complicated than others.

My requirements were pretty simple:

I want to be able to publish “retina” images with default markdown syntax
I prefer images to be blurry on non-high DPI screens, they are blurry anyway so what’s the harm.
I do not care about wasted bandwidth by sending retina assets to clients with standard definition screens. Not having ads or huge javascript on this site makes up for this.
I do not want to use any javascript or server side hacks

So what’s the solution?

Name @2x assets with @2x in their filename, for example image@2x.png
Add this small snippet into my CSS file (thanks, Internet Explorer!)

img[src*='@2x'] {
  zoom:50%;
}

For an example usage look at my article about Qt Creator

Quickfix for pogdesign checkboxes

Wed, 24 Apr 2013 00:11:17 +0000

I got finally fed up with the Unity-like checkboxes on my favourite TV-show tracking site. Quick roundup: these checkboxes are represented by a box with a grey checkmark when unchecked and a box with green checkmark when checked.

Not only is this horrible for colorblind people, it also drives sane persons nuts.

If you use Stylish extension for firefox, or some alternative for your browser then you can use this snippet to replace them with standard controls:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://www.pogdesign.co.uk/cat") {

 .lists div label, .day .ep label, .today .ep label  {
   /* bright background */
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAsCAYAAACzBUKoAAABJElEQVQ4je2TscqDQBCEZyWPFiFgYymWKXyGvEEsfISAvdilFCEEJEXeIU0KO0vhlttcqpOY8POvRboMHNcMyzAfQ6fTyQVBAP+IaPqJCDM1TeOg0PV6dYExRuOFiCBgZpXZWgv1ZWZeaNbGWGQ2xiw0W2vVMWi/3ztP65XeK1X/VuM4Qo17t9upcOd5/j/uLMscoMC93W7d4/EA8IY7iqJZnDRNnbUWIjK1MZmNMdhsNg4A4jh2zAxmRlmW5M0rH4OZISIIw9AZYyAiqOt6qmOG+3w+k7/GzDgej7PePnB3XUfMjLZt3wr+A/flcvkw+hi0Xq/VuOl+v+vXfbvdVLiHYfite9KX111VlX7dfd/r110UhQr34XD4rXvSl9edJIka9xPBTXfNN90QEQAAAABJRU5ErkJggg==') !important;

   /* dark background */
   /* background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAsCAYAAACzBUKoAAABJ0lEQVQ4je2TsY2FMBAF1+g6oAJSEpqgCEqhAwgogQpogYScyBkRBA6IIETyCuMfLQLj01+Cy86ShVYeW0+Mnui6zgZBALSFEOdXCAG31batBcbq+94GWmsOC8YYCBCRBe/7DuyXEfElzI3xCtZav4T3fWfHEEVRWLJ1tXe1Svtn2zZg687znKW7LMvvupdlsQAM3QQCOLqvB775oZuAKxiGoThhN4YPfMDXA9/80E2AC56wq9sHUgyRpilbt1BK8ds9jiNL97qu/+0+1x+3u2kafrvneea3u6oqlu66rr/rVkrx2j1Nkz2OAwAc3VLKW5xhGKwxBgh+6KYLUkqLiICIEEXR7+2mC9ZaiOPY3+4kSW7/yZ0fuglwwRN2dftAiiGyLGPr/gDD7TWBmCHgngAAAABJRU5ErkJggg==') !important; */

 }
}

If you use a dark background then un-comment the second background-image tag.

Enjoy