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) |
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.
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 {
}