Jekyll2026-08-14T11:49:57+00:00/feed.xml🚀 DUMMY! A RV Test SiteA demo site to test Rocket Validator site-wide checker. This site is intentionally full of HTML and accessibility errors, to serve as examples of our site validation tools.Responsive issues2022-06-24T15:01:00+00:002022-06-24T15:01:00+00:00/responsive/2022/06/24/responsive-issues .mobile_only { display: none; } .large_only { display: none; } .low_contrast_text { background-color: #ddd; color: #fff; } .picture { width: 240px; margin: 10px; border-radius: 10px; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); } @media screen and (max-width: 640px) { .mobile_only { display: inline } } @media screen and (min-width: 1024px) { .large_only { display: inline } }

This paragraph will always be displayed in all widths, but the next paragraphs appear on specific screen sizes.

This paragraph will only appear on narrow screens, and it contains an accessibility error because some text is hard to read as it has low contrast.

Another paragrap that appears on mobile with low contrast text.

This paragraph with low contrast text will only appear on wide screens.

]]>CSS resolution media query2022-06-24T15:01:00+00:002022-06-24T15:01:00+00:00/css/resolution/media-queries/2022/06/24/css-resolution-media-query #example { font-size: 1.2em; text-align: center; margin: 0.2em 0; padding: 2em 0; border: 2px solid indigo; border-radius: 10pt } @media (max-resolution: 150dpi) { #example { background: yellow; } }

An example taken from https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution

This box will have a yellow background if the resolution is less than 150 DPI.

]]>Device Pixel Ratio2022-06-24T15:01:00+00:002022-06-24T15:01:00+00:00/device-pixel-ratio/media-queries/2022/06/24/device-pixel-ratio .pixel-ratio { font-size: 3em; text-align: center; margin: 0.2em 0; padding: 2em 0; border: 2px solid indigo; border-radius: 10pt }

This example demonstrates the effect of zooming the page in and out (or moving it to a screen with a different scaling factor) on the value of the property Window.devicePixelRatio.

Example taken from MDN: Window.devicePixelRatio

]]>Welcome to Jekyll!2022-06-23T15:58:17+00:002022-06-23T15:58:17+00:00/jekyll/update/2022/06/23/welcome-to-jekyllYou’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.

Jekyll requires blog post files to be named according to the following format:

YEAR-MONTH-DAY-title.MARKUP

Where YEAR is a four-digit number, MONTH and DAY are both two-digit numbers, and MARKUP is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll also offers powerful support for code snippets:

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk.

]]>