Makes the website look better on mobile.

This commit is contained in:
Stian Grenborgen 2022-05-04 21:21:23 +02:00 committed by Calebrw
parent 69ec58b69e
commit f67ecfd8bd
10 changed files with 760 additions and 2196 deletions

View File

@ -24,7 +24,7 @@
</div>
<div class="clr"></div>
<div id="top-bottom">
<a href="index.html"><img src="/templates/freecol/images/logo.png" border="0" width="600" height="89" alt="logo" /></a>
<a href="index.html"><img src="/templates/freecol/images/logo.png" border="0" width="600" height="89" alt="logo" id="freecol-logo" /></a>
</div>
</header>
<div id="outer-800" >

View File

@ -6,94 +6,41 @@
path: /art.html
name: Art
---
<table class="contentpaneopen">
<tr>
<td valign="top" colspan="2">
<table align="center" class="cBody" width="100%" border="0" cellpadding="6" cellspacing="0">
<tr class="cBody"><td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr><td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle"><td class="cTitle" align="center">
<a href="images/art/colony0150.png" class="cTitleLink">Colony size 1 to 3</a>
</td></tr>
</table>
</td></tr>
</table>
</td><td class="cBody" width="25%" align="center">
<img src="images/art/colony0112.png" border="0">
</td><td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr><td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle"><td class="cTitle" align="center">
<a href="images/art/colony0250.png" class="cTitleLink">Colony size 4 to 7</a>
</td></tr>
</table>
</td></tr>
</table>
</td><td class="cBody" width="25%" align="center">
<img src="images/art/colony0212.png" border="0">
</td></tr>
</table>
</td></tr>
<tr class="cBody"><td class="cBody">
<table align="center" class="cBody" width="100%" border="0" cellpadding="6" cellspacing="0">
<tr class="cBody"><td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr><td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle"><td class="cTitle" align="center">
<a href="images/art/colony0350.png" class="cTitleLink">Colony size 8+</a>
</td></tr>
</table>
</td></tr>
</table>
</td><td class="cBody" width="25%" align="center">
<img src="images/art/colony0312.png" border="0">
</td><td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr><td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle"><td class="cTitle" align="center">
<a href="images/art/colony01f50.png" class="cTitleLink">Colony with Stockade</a>
</td></tr>
</table>
</td></tr>
</table>
</td><td class="cBody" width="25%" align="center">
<img src="images/art/colony01f12.png" border="0">
</td></tr>
</table>
</td></tr>
<tr class="cBody"><td class="cBody">
<table align="center" class="cBody" width="100%" border="0" cellpadding="6" cellspacing="0">
<tr class="cBody"><td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr><td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle"><td class="cTitle" align="center">
<a href="images/art/colony02f50.png" class="cTitleLink">Colony with Fort</a>
</td></tr>
</table>
</td></tr>
</table>
</td><td class="cBody" width="25%" align="center">
<img src="images/art/colony02f12.png" border="0">
</td><td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr><td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle"><td class="cTitle" align="center">
<a href="images/art/colony03f50.png" class="cTitleLink">Colony with Fortress</a>
</td></tr>
</table>
</td></tr>
</table>
</td><td class="cBody" width="25%" align="center">
<img src="images/art/colony03f12.png" border="0">
</td></tr>
</table>
</td>
</tr>
</table>
<div class="group-image-with-title">
<div class="image-with-title">
<a href="images/art/colony0150.png" class="cTitleLink">
<img src="images/art/colony0112.png" border="0">
<br />Colony size 1 to 3
</a>
</div>
<div class="image-with-title">
<a href="images/art/colony0250.png" class="cTitleLink">
<img src="images/art/colony0212.png" border="0">
<br />Colony size 4 to 7
</a>
</div>
<div class="image-with-title">
<a href="images/art/colony0350.png" class="cTitleLink">
<img src="images/art/colony0312.png" border="0">
<br />Colony size 8+
</a>
</div>
<div class="image-with-title">
<a href="images/art/colony01f50.png" class="cTitleLink">
<img src="images/art/colony01f12.png" border="0">
<br />Colony with Stockade
</a>
</div>
<div class="image-with-title">
<a href="images/art/colony02f50.png" class="cTitleLink">
<img src="images/art/colony02f12.png" border="0">
<br />Colony with Fort
</a>
</div>
<div class="image-with-title">
<a href="images/art/colony03f50.png" class="cTitleLink">
<img src="images/art/colony03f12.png" border="0">
<br />Colony with Fortress
</a>
</div>
</div>

View File

@ -6,371 +6,92 @@
path: /art.html
name: Art
---
<table class="contentpaneopen">
<tr>
<td valign="top" colspan="2">
<table align="center" class="cBody" width="100%" border="0" cellpadding="6" cellspacing="0">
<tr class="cBody"><td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr>
<td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle">
<td class="cTitle" align="center">
<a href="images/art/goods0_l.png" class="cTitleLink">Food</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cBody" width="25%" align="center">
<img src="images/art/goods0.png" border="0">
</td>
<td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr>
<td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle"><td class="cTitle" align="center">
<a href="images/art/goods1_l.png" class="cTitleLink">Sugar</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cBody" width="25%" align="center">
<img src="images/art/goods1.png" border="0">
</td>
</tr>
</table>
</td>
</tr>
<tr class="cBody">
<td class="cBody">
<table align="center" class="cBody" width="100%" border="0" cellpadding="6" cellspacing="0">
<tr class="cBody">
<td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr>
<td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle"><td class="cTitle" align="center">
<a href="images/art/goods2_l.png" class="cTitleLink">Tobacco</a>
</td></tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cBody" width="25%" align="center">
<img src="images/art/goods2.png" border="0">
</td>
<td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr>
<td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle"><td class="cTitle" align="center">
<a href="images/art/goods3_l.png" class="cTitleLink">Cotton</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cBody" width="25%" align="center">
<img src="images/art/goods3.png" border="0">
</td>
</tr>
</table>
</td>
</tr>
<tr class="cBody">
<td class="cBody">
<table align="center" class="cBody" width="100%" border="0" cellpadding="6" cellspacing="0">
<tr class="cBody">
<td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr>
<td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle"><td class="cTitle" align="center">
<a href="images/art/goods4_l.png" class="cTitleLink">Fur</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cBody" width="25%" align="center">
<img src="images/art/goods4.png" border="0">
</td>
<td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr>
<td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle"><td class="cTitle" align="center">
<a href="images/art/goods5_l.png" class="cTitleLink">Lumber</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cBody" width="25%" align="center">
<img src="images/art/goods5.png" border="0">
</td>
</tr>
</table>
</td>
</tr>
<tr class="cBody">
<td class="cBody">
<table align="center" class="cBody" width="100%" border="0" cellpadding="6" cellspacing="0">
<tr class="cBody"><td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr>
<td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle">
<td class="cTitle" align="center">
<a href="images/art/goods6_l.png" class="cTitleLink">Ore</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cBody" width="25%" align="center">
<img src="images/art/goods6.png" border="0">
</td>
<td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr>
<td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle">
<td class="cTitle" align="center">
<a href="images/art/goods7_l.png" class="cTitleLink">Silver</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cBody" width="25%" align="center">
<img src="images/art/goods7.png" border="0">
</td>
</tr>
</table>
</td>
</tr>
<tr class="cBody">
<td class="cBody">
<table align="center" class="cBody" width="100%" border="0" cellpadding="6" cellspacing="0">
<tr class="cBody"><td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr>
<td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle">
<td class="cTitle" align="center">
<a href="images/art/goods8.png" class="cTitleLink">Horses</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cBody" width="25%" align="center">
<img src="images/art/goods8.png" border="0">
</td>
<td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr>
<td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle">
<td class="cTitle" align="center">
<a href="images/art/goods9_l.png" class="cTitleLink">Rum</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cBody" width="25%" align="center">
<img src="images/art/goods9.png" border="0">
</td>
</tr>
</table>
</td>
</tr>
<tr class="cBody">
<td class="cBody">
<table align="center" class="cBody" width="100%" border="0" cellpadding="6" cellspacing="0">
<tr class="cBody">
<td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr>
<td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle">
<td class="cTitle" align="center">
<a href="images/art/goods10_l.png" class="cTitleLink">Cigars</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cBody" width="25%" align="center">
<img src="images/art/goods10.png" border="0">
</td>
<td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr>
<td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle"><td class="cTitle" align="center">
<a href="images/art/goods11_l.png" class="cTitleLink">Cloth</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cBody" width="25%" align="center">
<img src="images/art/goods11.png" border="0">
</td>
</tr>
</table>
</td>
</tr>
<tr class="cBody">
<td class="cBody">
<table align="center" class="cBody" width="100%" border="0" cellpadding="6" cellspacing="0">
<tr class="cBody"><td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr>
<td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle">
<td class="cTitle" align="center">
<a href="images/art/goods12_l.png" class="cTitleLink">Coats</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cBody" width="25%" align="center">
<img src="images/art/goods12.png" border="0">
</td>
<td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr>
<td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle"><td class="cTitle" align="center">
<a href="images/art/goods13.png" class="cTitleLink">Trade goods</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cBody" width="25%" align="center">
<img src="images/art/goods13.png" border="0">
</td>
</tr>
</table>
</td>
</tr>
<tr class="cBody">
<td class="cBody">
<table align="center" class="cBody" width="100%" border="0" cellpadding="6" cellspacing="0">
<tr class="cBody"><td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr>
<td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle"><td class="cTitle" align="center">
<a href="images/art/goods14_l.png" class="cTitleLink">Tools</a>
</td
></tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cBody" width="25%" align="center">
<img src="images/art/goods14.png" border="0">
</td>
<td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr>
<td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle">
<td class="cTitle" align="center">
<a href="images/art/goods15_l.png" class="cTitleLink">Muskets</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cBody" width="25%" align="center">
<img src="images/art/goods15.png" border="0">
</td>
</tr>
</table>
</td>
</tr>
<tr class="cBody">
<td class="cBody">
<table align="center" class="cBody" width="100%" border="0" cellpadding="6" cellspacing="0">
<tr class="cBody"><td class="cBody" width="25%">
<table align="center" bgcolor="#000000" width="152" border="0" cellpadding="1" cellspacing="0">
<tr>
<td>
<table align="center" bgcolor="#ffffff" width="150" border="0" cellpadding="3" cellspacing="0">
<tr class="cTitle"><td class="cTitle" align="center">
<a href="images/art/goods16_l.png" class="cTitleLink">Fish</a>
</td></tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cBody" width="25%" align="center">
<img src="images/art/goods16.png" border="0">
</td>
<td class="cBody" width="25%">
</td>
<td class="cBody" width="25%">
</td>
</tr>
</table>
</td>
</tr>
</table>
<p>
<div class="group-image-with-title">
<div class="image-with-title">
<a href="images/art/goods0_l.png">
<img src="images/art/goods0.png" border="0">
<br />Food</a>
</div>
<div class="image-with-title">
<a href="images/art/goods1_l.png">
<img src="images/art/goods1.png" border="0">
<br />Sugar</a>
</div>
<div class="image-with-title">
<a href="images/art/goods2_l.png">
<img src="images/art/goods2.png" border="0">
<br />Tobacco</a>
</div>
<div class="image-with-title">
<a href="images/art/goods3_l.png">
<img src="images/art/goods3.png" border="0">
<br />Cotton</a>
</div>
<div class="image-with-title">
<a href="images/art/goods4_l.png">
<img src="images/art/goods4.png" border="0">
<br />Fur</a>
</div>
<div class="image-with-title">
<a href="images/art/goods5_l.png">
<img src="images/art/goods5.png" border="0">
<br />Lumber</a>
</div>
<div class="image-with-title">
<a href="images/art/goods6_l.png">
<img src="images/art/goods6.png" border="0">
<br />Ore</a>
</div>
<div class="image-with-title">
<a href="images/art/goods7_l.png">
<img src="images/art/goods7.png" border="0">
<br />Silver</a>
</div>
<div class="image-with-title">
<a href="images/art/goods8.png">
<img src="images/art/goods8.png" border="0">
<br />Horses</a>
</div>
<div class="image-with-title">
<a href="images/art/goods9_l.png">
<img src="images/art/goods9.png" border="0">
<br />Rum</a>
</div>
<div class="image-with-title">
<a href="images/art/goods10_l.png">
<img src="images/art/goods10.png" border="0">
<br />Cigars</a>
</div>
<div class="image-with-title">
<a href="images/art/goods11_l.png">
<img src="images/art/goods11.png" border="0">
<br />Cloth</a>
</div>
<div class="image-with-title">
<a href="images/art/goods12_l.png">
<img src="images/art/goods12.png" border="0">
<br />Coats</a>
</div>
<div class="image-with-title">
<a href="images/art/goods13.png">
<img src="images/art/goods13.png" border="0">
<br />Trade goods</a>
</div>
<div class="image-with-title">
<a href="images/art/goods14_l.png">
<img src="images/art/goods14.png" border="0">
<br />Tools</a>
</div>
<div class="image-with-title">
<a href="images/art/goods15_l.png">
<img src="images/art/goods15.png" border="0">
<br />Muskets</a>
</div>
<div class="image-with-title">
<a href="images/art/goods16_l.png">
<img src="images/art/goods16.png" border="0">
<br />Fish</a>
</div>
</div>
</p>

File diff suppressed because it is too large Load Diff

View File

@ -9,7 +9,7 @@
<h4>The latest test pre-release of the next version of FreeCol:</h4>
<br />
<div class="graded_block">
<table border="0" cellspacing="0" cellpadding="5" style="position: relative; top: 20%; margin-top: -25px;">
<table border="0" cellspacing="0" cellpadding="5">
<tbody>
<tr class="cBody">
<td class="cBody">

View File

@ -4,28 +4,22 @@
---
<section>
<article>
<a href="screenshots.html" class="screenshot-welcome"><img src="images/welcome2.jpg" alt="screenshots" border="0" align="right" width="230" height="195" /></a>
<p>
FreeCol is a turn-based strategy game based on the old game <a href="about.html#original">Colonization</a>, and similar to Civilization. The objective of the game is to create an independent nation.
</p>
<p>
You start with only a few colonists defying the stormy seas in their search for new land. Will you guide them on the <em>Colonization of a New World</em>?
</p>
<table border="0">
<tr>
<td valign="top">
FreeCol is a turn-based strategy game based on the old game <a href="about.html#original">Colonization</a>, and similar to Civilization. The objective of the game is to create an independent nation.<br />
&nbsp;&nbsp;&nbsp;You start with only a few colonists defying the stormy seas in their search for new land. Will you guide them on the <em>Colonization of a New World</em>?
<td>
<a href="download.html"><img src="images/download2.png" border="0" alt="" /></a>
</td>
<td rowspan="2" width="233">
<a href="screenshots.html"><img src="images/welcome2.jpg" alt="screenshots" border="0" align="right" width="230" height="195" /></a>
</td>
</tr>
<tr>
<td valign="bottom">
<table border="0">
<tr>
<td>
<a href="download.html"><img src="images/download2.png" border="0" alt="" /></a>
</td>
<td>
<strong><em><a href="download.html">Download latest version of FreeCol</a></em></strong>
</td>
</tr>
</table>
<td>
<strong><em><a href="download.html">Download latest version of FreeCol</a></em></strong>
</td>
</tr>
</table>
@ -55,3 +49,6 @@
</div>
</nav>
</section>
<section>
<a href="screenshots.html" class="screenshot-welcome-bottom"><img src="images/screen-0.8.0-large.jpg" alt="screenshots" border="0" /></a>
</section>

View File

@ -6,234 +6,112 @@
path: /screenshots.html
name: Screenshots
---
<table width="100%" cellspacing="0" cellpadding="7" border="0" bgcolor="#ffffff"
align="center">
<tbody>
<tr align="center">
<td width="100%"><h4>FreeCol 0.7.0</h4></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="6" border="0"
align="center">
<tbody>
<tr>
<td width="50%" align="center"><a
href="images/java-shot15.jpg"> <img width="229"
height="167"
border="0"
src="images/java-shot15_s.jpg"
alt=""> <br/>
Colony Advisor</a></td>
<td width="50%" align="center"><a
href="images/java-shot16.jpg"> <img width="229"
height="167"
border="0"
src="images/java-shot16_s.jpg"
alt=""> <br/>
Colopedia </a></td>
</tr>
</tbody>
</table>
<table width="100%" cellspacing="0" cellpadding="6" border="0"
align="center">
<tbody>
<tr>
<td width="50%" align="center"><a
href="images/java-shot17.jpg"> <img width="229"
height="167"
border="0"
src="images/java-shot17_s.jpg"
alt=""> <br/>
Foreign Affairs</a></td>
<td width="50%" align="center"><a
href="images/java-shot18.jpg"> <img width="229"
height="167"
border="0"
src="images/java-shot18_s.jpg"
alt=""> <br/>
Map Editor</a></td>
</tr>
</tbody>
</table>
<h4 class="center">FreeCol 0.7.0</h4></td>
<div class="group-image-with-title">
<div class="image-with-title">
<a href="images/java-shot15.jpg">
<img width="229" height="167" border="0" src="images/java-shot15_s.jpg" alt="">
<br/>Colony Advisor
</a>
</div>
<div class="image-with-title">
<a href="images/java-shot16.jpg">
<img width="229" height="167" border="0" src="images/java-shot16_s.jpg" alt="">
<br/>Colopedia
</a>
</div>
<div class="image-with-title">
<a href="images/java-shot17.jpg">
<img width="229" height="167" border="0" src="images/java-shot17_s.jpg" alt="">
<br/>Foreign Affairs</a>
</a>
</div>
<div class="image-with-title">
<a href="images/java-shot18.jpg">
<img width="229" height="167" border="0" src="images/java-shot18_s.jpg" alt="">
<br/>Map Editor
</a>
</div>
</div>
<h4 class="center">FreeCol 0.5.2</h4>
<div class="group-image-with-title">
<div class="image-with-title">
<a href="images/java-shot13.jpg">
<img width="228" height="167" border="0" src="images/java-shot13_s.jpg" alt="">
<br/>Mapboard 1
</a>
</div>
<div class="image-with-title">
<a href="images/java-shot14.jpg">
<img width="228" height="167" border="0" src="images/java-shot14_s.jpg" alt="">
<br/>Mapboard 2
</a>
</div>
</div>
<h4 class="center">FreeCol 0.4.0</h4>
<div class="group-image-with-title">
<div class="image-with-title">
<a href="images/java-shot11.jpg">
<img width="241" height="167" border="0" src="images/java-shot11_s.jpg" alt="">
<br/>Mapboard
</a>
</div>
<div class="image-with-title">
<a href="images/java-shot12.jpg">
<img width="241" height="167" border="0" src="images/java-shot12_s.jpg" alt="">
<br/>Labour Report
</a>
</div>
</div>
<h4 class="center">FreeCol 0.3.0</h4>
<div class="group-image-with-title">
<div class="image-with-title">
<a href="images/java-shot7.jpg">
<img width="241" height="167" border="0" src="images/java-shot7_s.jpg" alt="">
<br/>Founding fathers</a>
</td>
</tr>
</tbody>
</table>
<table width="100%" cellspacing="0" cellpadding="7" border="0" bgcolor="#ffffff"
align="center">
<tbody>
<tr align="center">
<td width="100%"><h4>FreeCol 0.5.2</h4></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="6" border="0"
align="center">
<tbody>
<tr>
<td width="50%" align="center"><a
href="images/java-shot13.jpg"> <img width="228"
height="167"
border="0"
src="images/java-shot13_s.jpg"
alt=""> Mapboard 1</a>
</td>
<td width="50%" align="center"><a
href="images/java-shot14.jpg"> <img width="228"
height="167"
border="0"
src="images/java-shot14_s.jpg"
alt=""> Mapboard 2</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table width="100%" cellspacing="0" cellpadding="7" border="0" bgcolor="#ffffff"
align="center">
<tbody>
<tr align="center">
<td width="100%"><h4>FreeCol 0.4.0</h4></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="6" border="0"
align="center">
<tbody>
<tr>
<td width="50%" align="center"><a
href="images/java-shot11.jpg"> <img width="241"
height="167"
border="0"
src="images/java-shot11_s.jpg"
alt=""> <br/>
Mapboard</a></td>
<td width="50%" align="center"><a
href="images/java-shot12.jpg"> <img width="241"
height="167"
border="0"
src="images/java-shot12_s.jpg"
alt=""> <br/>
Labour Report</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table width="100%" cellspacing="0" cellpadding="7" border="0" bgcolor="#ffffff"
align="center">
<tbody>
<tr align="center">
<td width="100%"><h4>FreeCol 0.3.0</h4></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="6" border="0"
align="center">
<tbody>
<tr>
<td width="50%" align="center"><a href="images/java-shot7.jpg">
<img width="241" height="167" border="0"
src="images/java-shot7_s.jpg" alt=""> <br/>
Founding fathers</a></td>
<td width="50%" align="center"><a href="images/java-shot9.jpg">
<img width="241" height="167" border="0"
src="images/java-shot9_s.jpg" alt=""> <br/>
The colony screen</a></td>
</tr>
</tbody>
</table>
<table width="100%" cellspacing="0" cellpadding="6" border="0"
align="center">
<tbody>
<tr>
<td width="50%" align="center"><a href="images/java-shot8.jpg">
<img width="241" height="167" border="0"
src="images/java-shot8_s.jpg" alt=""> <br/>
First landing</a></td>
<td width="50%" align="center"><a
href="images/java-shot10.jpg"> <img width="241"
height="167"
border="0"
src="images/java-shot10_s.jpg"
alt=""> <br/>
Ship arrived</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table width="100%" cellspacing="0" cellpadding="7" border="0" bgcolor="#ffffff"
align="center">
<tbody>
<tr align="center">
<td width="100%"><h4>FreeCol 0.3.0 development version</h4></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="6" border="0"
align="center">
<tbody>
<tr>
<td width="50%" align="center">
<table width="152" cellspacing="0" cellpadding="1"
border="0" bgcolor="#000000" align="center">
<tbody>
<tr>
<td>
<table width="150" cellspacing="0"
cellpadding="3" border="0"
bgcolor="#ffffff" align="center">
<tbody>
<tr class="cTitle">
<td align="center" class="cTitle"><a
href="images/java-shot5.jpg">Building
a colony</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td width="50%" align="center">
<table width="152" cellspacing="0" cellpadding="1"
border="0" bgcolor="#000000" align="center">
<tbody>
<tr>
<td>
<table width="150" cellspacing="0"
cellpadding="3" border="0"
bgcolor="#ffffff" align="center">
<tbody>
<tr class="cTitle">
<td align="center" class="cTitle"><a
href="images/java-shot6.jpg">The
colony screen</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="image-with-title">
<a href="images/java-shot9.jpg">
<img width="241" height="167" border="0" src="images/java-shot9_s.jpg" alt="">
<br/>The colony screen
</a>
</div>
<div class="image-with-title">
<a href="images/java-shot8.jpg">
<img width="241" height="167" border="0" src="images/java-shot8_s.jpg" alt="">
<br/>First landing
</a>
</div>
<div class="image-with-title">
<a href="images/java-shot10.jpg">
<img width="241" height="167" border="0" src="images/java-shot10_s.jpg" alt="">
<br/>Ship arrived
</a>
</div>
</div>
<h4 class="center">FreeCol 0.3.0 development version</h4>
<div class="group-image-with-title">
<div class="image-with-title">
<a href="images/java-shot5.jpg">
<img width="241" height="167" border="0" src="images/java-shot5.jpg" alt="">
<br/>Building a colony
</a>
</div>
<div class="image-with-title">
<a href="images/java-shot6.jpg">
<img width="241" height="167" border="0" src="images/java-shot6.jpg" alt="">
<br>The colony screen
</a>
</div>
</div>
<table width="100%" cellspacing="0" cellpadding="7" border="0" bgcolor="#ffffff"
align="center">
<tbody>

View File

@ -8,31 +8,14 @@
---
<p align="center">
<a href="images/screen-0.8.0-large.jpg">
<img src="images/screen-0.8.0-small.jpg" alt="" border="0" width="230"
height="195"/>
<img src="images/screen-0.8.0-small.jpg" alt="" border="0" width="230" height="195"/>
</a>
<a href="images/java-shot15.jpg">
<img width="229" height="167" border="0" src="images/java-shot15_s.jpg" alt=""/>
</a>
<a href="images/java-shot16.jpg">
<img width="229" height="167" border="0" src="images/java-shot16_s.jpg" alt=""/></a>
</p>
<table width="100%" cellspacing="0" cellpadding="7" border="0" bgcolor="#ffffff"
align="center">
<tbody>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="6" border="0" align="center">
<tbody>
<tr>
<td width="50%" align="center"><a href="images/java-shot15.jpg"> <img
width="229" height="167" border="0"
src="images/java-shot15_s.jpg" alt=""/></a></td>
<td width="50%" align="center"><a href="images/java-shot16.jpg"> <img
width="229" height="167" border="0"
src="images/java-shot16_s.jpg" alt=""/></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p align="center">
<em>You can also view <a href="more-screenshots.html">more screenshots</a></em>

View File

@ -9,14 +9,6 @@ background: #FFF url(../images/top-bg.jpg) repeat-x top;
background: #FFF url(../images/top-bg.jpg) repeat-x top;
}
#outer-800 {
background: transparent url(../images/content-top.gif) no-repeat top;
}
#outer-1024 {
background: transparent url(../images/content-top1024.gif) no-repeat top;
}
#banner {
/* background: url(../images/banner_back.jpg) no-repeat; */
}
@ -111,15 +103,6 @@ img {
border: 0;
}
.graded_block {
width: 489px;
height: 64px;
background: transparent url(../images/graded_block.png);
margin-top: 20px;
margin-bottom: 20px;
}
table.contentpane ul li{
background: url(../images/readon2.gif) no-repeat left top;
}

View File

@ -34,15 +34,6 @@ a:hover {
display: none;
}
#pagewidth-800 {
width: 770px;
text-align: left;
margin-left: auto;
margin-right: auto;
background: transparent url(../images/back_all.gif) repeat-y 0 140px;
margin-bottom: 20px;
}
#pagewidth-1024 {
width: 970px;
text-align: left;
@ -52,6 +43,438 @@ a:hover {
margin-bottom: 20px;
}
#leftcol div.module div div div div.submenu {
padding: 0 0 0 4px;
}
.image-with-title {
display: inline-block;
text-align: center;
/*flex: 1 1 0px;*/
min-width: 10rem;
}
.center {
text-align: center;
}
.group-image-with-title {
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
justify-content: center;
column-gap: 1rem;
row-gap: 1rem;
align-content: flex-start;
align-items: flex-end;
flex-wrap: wrap;
}
@media only screen and (min-width: 770px) {
#pagewidth-800 {
width: 770px;
text-align: left;
margin-left: auto;
margin-right: auto;
background: transparent url(../images/back_all.gif) repeat-y 0 140px;
margin-bottom: 20px;
}
#outer-800 {
width: 770px;
padding-top: 6px;
background: transparent url(../images/content-top.gif) no-repeat top;
}
#footer-800 {
height: 28px;
width: 100%;
background: transparent url(../images/footer.jpg) bottom left no-repeat;
font-size: 12px;
}
#pathway {
width: 740px;
height: 19px;
padding-left: 20px;
padding-top: 5px;
}
#maincol-normal-800 {
float: left;
margin-left: -5px;
width: 446px;
}
#maincol-broad-800 {
float: left;
margin-left: -5px;
width: 417px;
}
#maincol-wide-800 {
float: left;
width: 595px;
margin-left: -5px;
padding-top: 0;
}
div#sflogo {
text-align: right;
position: relative;
right: 1px;
top: -27px;
height: 10px;
}
.graded_block {
width: 489px;
height: 64px;
background: transparent url(../images/graded_block.png);
margin-top: 20px;
margin-bottom: 20px;
}
.graded_block > table {
position: relative;
top: 20%;
margin-top: -25px;
}
.screenshot-welcome-bottom {
display: none;
}
#leftcol {
width: 152px;
float: left;
position: relative;
margin-right: 5px;
}
#leftcol div.module, #rightcol-normal div.module {
width: 152px;
background: transparent url(../images/module_middle.jpg) left repeat-y;
margin-bottom: 10px;
margin-top: 3px;
}
#leftcol div.module div, #rightcol-normal div.module div {
width: 152px;
background: transparent url(../images/module_top.jpg) top left no-repeat;
}
#leftcol div.module div div, #rightcol-normal div.module div div {
width: 152px;
background: transparent url(../images/module_bottom.jpg) bottom left no-repeat;
}
#leftcol div.module div div div, #rightcol-normal div.module div div div {
width: 137px;
background: transparent;
padding: 10px 10px 10px 5px;
font-size: 12px;
}
#leftcol div.module div div div div.mainmenu {
padding: 0;
}
/* Main Menu(s) */
a.mainlevel {
font-size: 12px;
padding-left: 4px;
width: 143px;
display: block;
line-height: 26px;
margin-bottom: 2px;
text-decoration: none;
font-weight: normal;
border-right: 4px solid #CACACA;
}
html > body a.mainlevel {
width: 135px;
}
/* Opera5-Fix-fix ;-) */
a.mainlevel:hover, a.mainlevel#active_menu {
background: #F1F1F1;
text-decoration: none;
}
a.sublevel {
font-size: 12px;
padding: 0 0 0 12px;
width: 139px;
display: block;
line-height: 20px;
margin: 0 0 2px;
text-decoration: none;
font-weight: normal;
border-right: 4px solid #CACACA;
}
html > body a.sublevel {
width: 123px;
}
/* Opera5-Fix-fix ;-) */
a.sublevel:hover, a.sublevel#active_menu {
text-decoration: none;
width: 123px;
}
html > body a.sublevel:hover, a.sublevel#active_menu {
width: 123px;
}
}
@media only screen and (max-width: 769.9px) {
#header {
display: none;
}
#pagewidth-800 {
width: 100%;
text-align: left;
background: white;
}
#outer-800 {
width: 100%;
bottom: 0rem;
background: white;
padding-top: 6px;
}
#footer-800 {
position: relative;
height: 28px;
width: 100%;
background: white;
font-size: 12px;
}
#pathway {
width: calc(100% - 1rem);
height: 19px;
padding-left: 1rem;
padding-top: 5px;
}
#maincol-normal-800 {
float: left;
margin-left: -5px;
width: calc(100% - 2rem);
padding-left: 1rem;
padding-right: 1rem;
}
#maincol-broad-800 {
float: left;
margin-left: -5px;
width: calc(100% - 2rem);
padding-left: 1rem;
padding-right: 1rem;
}
#maincol-wide-800 {
float: left;
width: calc(100% - 2rem);
margin-left: -5px;
padding-top: 0;
padding-left: 1rem;
padding-right: 1rem;
}
div#sflogo {
text-align: right;
position: relative;
right: 1rem;
top: -27px;
height: 10px;
}
.graded_block {
width: 100%;
height: 64px;
background: #dddddd;
border: 1px solid black;
margin-top: 20px;
margin-bottom: 20px;
}
.graded_block > table {
position: relative;
height: 100%;
}
#leftcol h3 {
/* main menu title */
display: none;
}
.pathway-right {
padding-right: 1rem;
}
.screenshot-welcome {
display: none;
}
.screenshot-welcome-bottom {
display: block;
padding-top: 1rem;
padding-bottom: 2rem;
}
.screenshot-welcome-bottom img {
width: 100%;
}
#leftcol {
width: 100%;
float: left;
position: relative;
}
#leftcol div.module, #rightcol-normal div.module {
width: 100%;
background: white;
margin-bottom: 10px;
margin-top: 3px;
}
#leftcol div.module div, #rightcol-normal div.module div {
width: 100%;
background: white;
}
#leftcol div.module div div, #rightcol-normal div.module div div {
width: 100%;
background: white;
}
#leftcol div.module div div div, #rightcol-normal div.module div div div {
width: calc(100% - 2rem);
padding-left: 1rem;
background: transparent;
font-size: 12px;
}
#leftcol div.module div div div div.mainmenu {
display: inline-block;
width: 8rem;
padding: 0;
}
/* Main Menu(s) */
a.mainlevel {
font-size: 12px;
/* padding-left: 4px; */
width: 143px;
display: block;
line-height: 26px;
margin-bottom: 2px;
text-decoration: none;
font-weight: normal;
border-right: 4px solid #CACACA;
}
html > body a.mainlevel {
width: 100%;
}
/* Opera5-Fix-fix ;-) */
a.mainlevel:hover, a.mainlevel#active_menu {
background: #F1F1F1;
text-decoration: none;
}
a.sublevel {
font-size: 12px;
padding: 0 0 0 12px;
width: 139px;
display: block;
line-height: 20px;
margin: 0 0 2px;
text-decoration: none;
font-weight: normal;
border-right: 4px solid #CACACA;
}
html > body a.sublevel {
width: 100%;
}
/* Opera5-Fix-fix ;-) */
a.sublevel:hover, a.sublevel#active_menu {
text-decoration: none;
width: 100%;
}
html > body a.sublevel:hover, a.sublevel#active_menu {
width: 100%;
}
#leftcol > .module > div > div > div {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
justify-content: space-between;
column-gap: 1rem;
align-content: flex-start;
flex-wrap: wrap;
}
#leftcol .mainmenu {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
#leftcol .submenu {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
}
#outer-1024 {
background: transparent url(../images/content-top1024.gif) no-repeat top;
}
#header {
height: 119px;
width: 100%;
@ -70,20 +493,6 @@ a:hover {
float: left;
}
#pathway {
width: 740px;
height: 19px;
padding-left: 20px;
padding-top: 5px;
}
#leftcol {
width: 152px;
float: left;
position: relative;
margin-right: 5px;
}
#rightcol-normal {
width: 155px;
float: right;
@ -102,22 +511,21 @@ a:hover {
margin-top: -12px;
}
#outer-800 {
width: 770px;
padding-top: 6px;
/*margin-top: 2px;*/
}
#outer-1024 {
width: 970px;
padding-top: 6px;
}
#footer-800 {
height: 28px;
width: 100%;
background: transparent url(../images/footer.jpg) bottom left no-repeat;
font-size: 12px;
#rightcol-broad-top {
width: 170px;
padding-left: 5px;
background: transparent url(../images/horizontal-line.jpg) bottom repeat-x;
}
#rightcol-broad-bottom {
width: 170px;
padding-left: 5px;
background: transparent url(../images/horizontal-line.jpg) top repeat-x;
}
#footer-1024 {
@ -127,25 +535,6 @@ a:hover {
font-size: 12px;
}
#maincol-normal-800 {
float: left;
margin-left: -5px;
width: 446px;
}
#maincol-broad-800 {
float: left;
margin-left: -5px;
width: 417px;
}
#maincol-wide-800 {
float: left;
width: 595px;
margin-left: -5px;
padding-top: 0;
}
#maincol-normal-1024 {
float: left;
width: 650px;
@ -191,38 +580,6 @@ iframe.wrapper {
/* Modules */
#leftcol div.module, #rightcol-normal div.module {
width: 152px;
background: transparent url(../images/module_middle.jpg) left repeat-y;
margin-bottom: 10px;
margin-top: 3px;
}
#leftcol div.module div, #rightcol-normal div.module div {
width: 152px;
background: transparent url(../images/module_top.jpg) top left no-repeat;
}
#leftcol div.module div div, #rightcol-normal div.module div div {
width: 152px;
background: transparent url(../images/module_bottom.jpg) bottom left no-repeat;
}
#leftcol div.module div div div, #rightcol-normal div.module div div div {
width: 137px;
background: transparent;
padding: 10px 10px 10px 5px;
font-size: 12px;
}
#leftcol div.module div div div div.mainmenu {
padding: 0;
}
#leftcol div.module div div div div.submenu {
padding: 0 0 0 4px;
}
.footer-copyright {
position: relative;
top: 5px;
@ -235,17 +592,6 @@ iframe.wrapper {
padding-bottom: 10px;
}
#rightcol-broad-top {
width: 170px;
padding-left: 5px;
background: transparent url(../images/horizontal-line.jpg) bottom repeat-x;
}
#rightcol-broad-bottom {
width: 170px;
padding-left: 5px;
background: transparent url(../images/horizontal-line.jpg) top repeat-x;
}
#rightcol-broad div.module div {
width: 180px;
@ -329,58 +675,6 @@ ul#mainlevel-nav li a {
white-space: nowrap;
}
/* Main Menu(s) */
a.mainlevel {
font-size: 12px;
padding-left: 4px;
width: 143px;
display: block;
line-height: 26px;
margin-bottom: 2px;
text-decoration: none;
font-weight: normal;
border-right: 4px solid #CACACA;
}
html > body a.mainlevel {
width: 135px;
}
/* Opera5-Fix-fix ;-) */
a.mainlevel:hover, a.mainlevel#active_menu {
background: #F1F1F1;
text-decoration: none;
}
a.sublevel {
font-size: 12px;
padding: 0 0 0 12px;
width: 139px;
display: block;
line-height: 20px;
margin: 0 0 2px;
text-decoration: none;
font-weight: normal;
border-right: 4px solid #CACACA;
}
html > body a.sublevel {
width: 123px;
}
/* Opera5-Fix-fix ;-) */
a.sublevel:hover, a.sublevel#active_menu {
text-decoration: none;
width: 123px;
}
html > body a.sublevel:hover, a.sublevel#active_menu {
width: 123px;
}
/* Module specific */
#leftcol div.module div div div div.syndicate {
@ -506,7 +800,7 @@ a.readon:hover {
.contentheading {
font-weight: bold;
font-size: 18px;
height: 23px;
padding-bottom: 5px;
line-height: 20px;
font-family: 'Trebuchet MS', verdana, sans-serif;
border-bottom: 1px solid #002E61;
@ -632,11 +926,3 @@ tr.trLine .leftcell {
.content table.contentpane {
margin-bottom: 2em;
}
div#sflogo {
text-align: right;
position: relative;
right: 1px;
top: -27px;
height: 10px;
}