Here's a bit about how the project was built.
To start, here is a Minimal HTML Document (https://www.sitepoint.com/a-minimal-html-document-html5-edition/):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<!-- page content -->
</body>
</html>
From here, set the title, remove the unnecessary script tag, and fill in the body. For the body contents, use a navigation tag to contain the menu, which has a top level header for the menu title, and an unordered list of anchor tag links for the buttons. The links have nowhere to point to, so for now, the href attributes can be set to "#" to keep the links valid.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Outpost 2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="menu">
<h1>Main Menu</h1>
<ul>
<li><a href="#">Tutorials</a></li>
<li><a href="#">New Campaign</a></li>
<li><a href="#">Colony Games</a></li>
<li><a href="#">Multiplayer</a></li>
<li><a href="#">Load Game</a></li>
<li><a href="#">Game Preferences</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">About Outpost 2</a></li>
<li><a href="#">Quit</a></li>
</ul>
</nav>
</body>
</html>
That completes the HTML structure. It doesn't look like much yet. A CSS stylesheet still needs to be added to make it look like the final output.
(http://forum.outpost2.net/index.php?action=dlattach;topic=6058.0;attach=1102;image)
A few more details about the project.
To extract the background images from Outpost 2, I used Resource Hacker (http://www.angusj.com/resourcehacker/). It's a Windows program, but luckily for me it can run on Linux under Wine. The images were stored in op2shres.dll. I assume the name stands for "Outpost 2 Shell Resources".
(http://forum.outpost2.net/index.php?action=dlattach;topic=6058.0;attach=1168;image)
(http://forum.outpost2.net/index.php?action=dlattach;topic=6058.0;attach=1170;image)
Using .bmp files is not supported by most browsers, so I converted the images from .bmp to .png using the Image Magick convert command (https://www.imagemagick.org/script/convert.php):
convert screenshot.bmp screenshot.png
The rest was the following CSS:
html, body {
margin: 0px;
padding: 0px;
/*
width: 640px;
height: 480px;
*/
}
body {
background: #000 url(space-station.png) center no-repeat;
height: 100vh;
}
.menu {
border-radius: 5px 5px 0px 0px;
border: 1px solid #a01f10;
border-top-color: #a01f10;
border-bottom-color: #fc0000;
background: #000029;
float: right;
margin: 20px 20px;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
.menu h1 {
font-size: 1.35em;
border-top: 1px solid #fc0000;
border-bottom: 1px solid #ff0000;
color: #0f0;
margin: 0px;
padding: 5px 3px 3px;
}
.menu ul {
border-bottom: 1px solid #a01f10;
background: #000029 url(menu-background.png) center no-repeat;
margin: 0px;
padding: 5px 3px 18px;
}
.menu ul li{
background: #000;
list-style: none;
padding: 3px;
margin: 6px 21px 6px 17px;
}
.menu a {
display: block;
border: 1px solid #a61c14;
padding: 3px 10px;
color: #df2;
text-decoration: none;
}
.menu a::first-letter {
text-decoration: underline;
}
.menu a:focus {
outline: 0;
border-color: #fc0000;
}
.menu a:active {
box-shadow: 0px 0px 10px 2px #a61c14;
}
I was originally planning on breaking down the CSS into groups of changes, with screenshots along the way. Though I've been dragging my feet about it. The screenshots turned out to be a fair bit of work to do manually, and a pain to redo when I messed up or wanted to change something. I figure I should stop dragging my feet trying to writeup a perfect presentation, and just post the code in its final form. If people have questions, or want a more detailed breakdown, I can add that later.
Meanwhile though, the attempt did allow me to develop a script to make automated screenshots of a series of Git commits. I figure that may be worth posting about in it's own right.