Syntax Highlighter in a lightbox – improved

I’ve tidied up my CSS and JavaScript used for my implementation of presenting code on my website. Yes – I know I still need to refactor my CSS classnames to at least throw a nod at the prevailing standards. Update 4th March 2017 Done … at least I’ve got rid of the camel-case class names; it’s a start!

See: Initial post
See: Later post which includes using a font glyph for the magnifying glass

The updated code includes better responsive behaviour using vw units if supported and font-size manual increase/decrease buttons.

It’s a work in progress! Very very rusty at JavaScript & CSS, and WordPress even, so learning/discovering as I go along.

...


@media only screen and (max-width:125em)
{
    .xarta-big-code
    {
        font-size: 0.8em !important;
        font-size: 1.3vw !important;
    }
}

@media only screen and (max-width:100em)
{
    .xarta-big-code
    {
        font-size: 0.6em !important;
        font-size: 1.6vw !important;
    }
}

@media only screen and (max-width:75em)
{
    .xarta-big-code
    {
        font-size: 0.4em !important;
        font-size: 1.8vw !important;
    }
}

@media only screen and (max-width:50em)
{
    .xarta-big-code
    {
        font-size: 0.2em !important;
        font-size: 2vw !important;
    }
}