ch-cha-ch-cha.css

Using reference book indices as inspiration, the goal here was to take an existing image (mine was Ferdinand Hodler’s “Auszug der deutschen Studenten in den Freiheitskrieg von 1813,” shown below) and create an index of it.

My thought process was basically, “Indexes…words…reference points…programming…yes!” I actually giggled as I typed the whole thing. It went over quite well, and I got multiple suggestions to create a series of programming-as-art. I may just do that, and I’ll update this space if that concept comes to light.

The final CSS—as it were—is a blend of real code, real-looking code, and obviously fake code. In creating this, I imagined the image as a website, and the different parts as elements to be styled.

Yes, the window screenshot is the final piece. Originally, the 1.0 version was made in Windows 7 at a fairly low resolution. The spacing was a bit cramped, and the legibility wasn’t quite there. The 2.0 version, made on December 20, 2018, utilized Windows 10 at a high resolution to avoid stitching screenshots together. The spacing was improved, as was the legibility. Finally, the 3.0 version, made on November 16, 2022, utilizes Sublime Text 3 on Manjaro to both modernize the look as well as reflect my current preference for Linux. As an added bonus, the CSS theming allows the fake code to stand out from the real code!

Ferdinand Hodler’s “Auszug der deutschen Studenten in den Freiheitskrieg von 1813,” painted in 1908–1909.

/*
    Author: Sierra Randolph
    Version: 3.0
    License: Creative Commons Attribution-NonCommercial-ShareAlike 3.0
*/

body {
    background-image: url('hodler.jpg');
}

h1 {
    soldier-repeat: repeat-x rtl;
    soldier-spacing: soldier;
    soldier-decoration: accent-acute-rifle;
    soldier-shadow: soldier(3) 25% parallax-center;
}

h2 {
    soldier-repeat: no-repeat;
    soldier-spacing: horse;
    soldier-decoration: none;
    soldier-shadow: none;
}

h2.soldier:1 {
    align: horse-left(white1);
    direction: ltr dtu;
    define: facehidden climb;
}

h2.soldier:2 {
    align: horse-rear(brown1);
    direction: rtl;
    define: backup-dancer;
}

h2.soldier:3 {
    align: horse-right(white2);
    direction: btf;
    define: late-to-party good-morning;
}

h2.soldier:4 {
    align: horse-right(brown2);
    direction: ltr ftb;
    define: fabulous;
}

/*
    Copyright Sierra Randolph 2013
*/

The raw code for the piece. Figuring out which snippets to use and which snippets to abuse was quite fun.