Our April 1st website

Every year, it seems most of the Internet goes bonkers for April 1st, also known as "April Fools Day." Generally, I don't like to get involved in website "pranks." I recognize that I'm just not clever or funny enough to pull it off.

But this year, I decided to give it a shot anyway.

Rather than invent something fake with an intention of making a cheap joke, I decided to update the FreeDOS website. So for all day on April 1, the FreeDOS website was a "throwback" to the 1980s. If you missed it, this is what it looked like:

I swapped out the web stylesheet with one that used DOS colors, and loaded a VGA font copied from int10h.org.

Our "April 1st" website was very popular, and gave us a boost in website traffic and downloads of the FreeDOS 1.2 distribution. (Of course, some Internet wise guy decided to bot-attack us on the same day, maybe as his own "prank." Ironically, an attempted DOS attack on a website about DOS. But after you account for that in our website hits, we really did get more visitors that day.)

There's not much to this, so I figured I'd share the details and stylesheet in case you want to do this on your own website.

The FreeDOS website is built around HTML Version 5, using a pretty standard template. We structure every page like this:

header logo | search nav

main nav main text (section)

footer nav footer text (section)

There's some extra markup in there to make things look pretty, but that's the basic design of the website. For details, you can view the source of any page on our website.

It was fairly straightforward to create a web stylesheet to redefine the website colors to look like a DOS terminal. Here is the stylesheet we used: (you'll need to download your own copy of the VGA fonts for this to work)

@font-face {
  font-family: 'VGAsquarePx';
  src: url(int10h.org/vga_squarepx.eot);
  src: url(int10h.org/vga_squarepx.eot?#iefix) format('embedded-opentype'),
       url(int10h.org/vga_squarepx.woff2) format('woff2'),
       url(int10h.org/vga_squarepx.woff) format('woff'),
       url(int10h.org/vga_squarepx.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* define a black "stipple" background with DOS font */
body {
  background:
    radial-gradient(black 15%, transparent 16%) 0 0,
    radial-gradient(black 15%, transparent 16%) 8px 8px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
  background-color:#282828;
  background-size:16px 16px;
  color: #aaa;
  font-family: 'VGAsquarePx', serif;
  font-size: 20pt;
  margin: 0;
}
/* links are cyan, hover is bright yellow */
a {
  color: #0aa;
  text-decoration: none;
}
a:hover {
  color: #ff5;
}
/* headings and bold text are bright white */
h1,h2,h3,h4,
b, strong {
  color: #fff;
  font-size: 1em;
  font-style: normal;
  font-weight: normal;
  margin: 0;
}
/* italic text is green */
em, i {
  color: #0a0;
  font-style: normal;
}
/* define content areas */
header, main, footer {
  margin: 0 auto;
  padding: 1em 0;
  max-width: 800px;
}
/* use black on cyan text for header */
header {
  background-color: #0aa;
  color: #000;
}
  /* insert the "April 1st" text */
  header > h1::before {
    content: "Today is April 1, 2017!";
  }
  header > h1 img {
    display: block;
    width: 300px;
  }
  header > form {
  }
    header > form fieldset {
      border: none;
    }
  /* use black on gray for navigation */
  nav {
    background-color: #aaa;
    color: #000;
  }
    nav a {
      color: #000;
    }
    nav img {
      display: none;
    }
    nav span {
    }
    nav > ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      text-align: center;
    }
      nav > ul li {
        display: inline;
        margin: 0 .5em;
      }
/* use white on blue for main text */
main {
  background-color: #00a;
  color: #aaa;
}
  main > nav {
  }
    main > nav li::before {
      content: ">";
    }
  main > section {
  }
  main div.third img {
    display: block;
  }
/* use black on brown text for footer */
footer {
  background-color: #a50;
  color: #000;
}
  footer > nav {
  }
  footer > section {
  }

The April 1st website was only meant for the one day, but I have to admit that I really liked it. And from your responses on social media and via email, I think a lot of other people enjoyed it too! Maybe the "throwback" design will make a reappearance sometime in the future. This seems like something to bring out for special occasions.