Replace text-only images with CSS versions (maintenance, 404, deleted posts, etc.)

Question

During today's morning emergency maintenance period, I noticed the six "Stack Overflow" images on the page were just that, images. I decided to have a little fun and put together HTML+CSS only versions of these images. While they don't add any new "feature" to the site and would be completely transparent to pretty much everyone, perhaps it is something that would be considered to replace the current images.

Why did I do this?

• To help remove the number of unneeded images around the site.
• To help reduce the number of HTTP requests.
• To help decrease page weight (especially on the maintenance page, when many people are hitting them).
• It was something fun to do. ;)

What images are I talking about?

Offline Images (six in total, with different color schemes)

404/Deleted Question

What are the benefits?

I'm going to focus simply on the maintenance page here.

• Six (6) fewer HTTP requests.
• All six images add up to a total of 82.7 KB.
  Note: These images aren't fully optimized. If they were, they would still be 77.7 KB.
• Replacing all 6 images with HTML+CSS only costs 5.35 KB (compacted), a savings of 77.4 KB!
• If only 5,000 people hit that maintenance page, it would be a total of 378 MB of bandwidth saved. ^{(Actual facts on how many people hit it would be helpful.)}

What did I come up with?

I tried to recreate each image as closely as possible. However, matching the font (on my own) was a little out of my reach. I, instead, looked at the fonts StackOverflow are already using, and then used those. Alternatively, a font-face could be brought in to match a little bit better.

Examples on CodePen: http://codepen.io/anon/pen/Kghjf

Maintenance Page - Same code used for each color variation

<div class="ide-4">
    <p><span>^@^C^A</span>&gt;<span>^D^A^@^P^@^C^A</span>L<span>^D^A^@^T^A^C^A</span><sup>o</sup></p>
    <p>- <span class="so">stack overflow</span><span>^M</span></p>
    <p><span>^@^C^@</span>R6003<span>^M</span></p>
    <p>- integer divide by 0<span>^M</span></p>
    <p><span>^@      ^@</span>R6009<span>^M</span></p>
    <p>- not enough space for enviroment<span>^M</span></p>
    <p><span>^@^R^@</span>R6018<span>^M</span></p>
    <p>- unexpected heap error<span>^M</span></p>
    <p><span>^@</span>&uuml;<span>^@^M</span></p>
    <p><span>^@</span>&yuml;<span>^@</span>run-time error <span>^@^B^@</span>R6002<span>^M</span></p>
    <p>- floating-point support not loaded<span>^M</span></p>
    <p><span class="cursor"></span></p>
</div>

404

<div class="error-404">
    <p># define v putchar</p>
    <p>#   define print(x)<span>&crarr;</span><br/>main(){v(4_v(v(52)-4));return 0;}/*</p>
    <p>#&gt;+++++++4+[&gt;++++++&lt;-]&lt;<span>&crarr;</span><br/>++++.----.++++.*/</p>
    <p>print(202*2);exit();</p>
    <p>#define/*&gt;.@*/exit()</p>
</div>

LESS for the Above Two Examples

div {
    font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
    font-size: 130%;
    font-weight: 400;
    display: table;
    padding: 0 1px 3px 5px;
    p {
        margin: 0;
        white-space: pre;
    }
}
sup {
    text-decoration: underline;
}
.cursor {
    display: inline-block;
    background-color: #000;
    width: 10px;
    height: 20px;
}
.ide-4 {
    background-color: #fefefe;
    color: #1a1a1a;
    counter-reset: section 16;
    p:before {
        counter-increment: section;
        content: counter(section) " ";
        color: #06989a;
    }
    span {
        color: #cc0101;
    }
    .so {
        background-color: #cc0101;
        color: #ededeb;
    }
    .cursor {
        background-color: #1a1a1a;
    }
}
.error-404 {
    background-color: #eee;
    counter-reset: section;
    p {
        padding-left: 20px;
    }
    p:before {
        counter-increment: section;
        content: counter(section);
        color: #f00;
        margin-right: -15px;
        position: relative;
        left: -20px;
    }
    span {
        color: #f00;
    }
}

I know, this is something small, silly, and trivial, but I had fun putting it together. If it helps, it helps. If not, oh well!