Skip to content

Commit

Permalink
Holistic style refactor and content update (#3)
Browse files Browse the repository at this point in the history
  • Loading branch information
@CarsonBurke
CarsonBurke authored Apr 19, 2024
1 parent 640dfb6 commit 262a93c
Show file tree
Hide file tree
Showing 8 changed files with 261 additions and 62 deletions.
26 changes: 16 additions & 10 deletions games.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,18 @@
<meta charset="utf-8">
<meta name="viewport" content="width=1024" />
<meta name="description" content="Open Source Pixelart Sci-Fi Real Time Strategy Game" />
<meta name="keywords" content="OpenHV, RTS, real-time strategy, Online, LAN, multiplayer" />
<meta name="keywords" content="OpenHV, RTS, real-time strategy, Online, LAN, multiplayer, OpenHV Games, games" />
<title>OpenHV | Games</title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="style.css" rel="stylesheet"> <!-- /styles.css -->
<script type="text/javascript" src="games.js"></script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<link rel="icon" type="image/png" href="images/web/icon.png">
</head>

<body>
Expand Down Expand Up @@ -68,7 +75,8 @@ <h3 class="h2">OpenHV</h3>
<div class="column gapSmall">
<h4 class="h4">Navigate</h4>
<a class="link" href="/index">Home</a>
<a class="link" href="/games">Server Browser</a>
<a class="link" href="/games">Servers</a>
<a class="link" href="https://github.com/OpenHV/OpenHV/wiki/">Wiki</a>
</div>
<div class="column gapSmall">
<h4 class="h4">Download</h4>
Expand All @@ -81,19 +89,17 @@ <h4 class="h4">Download</h4>
<h4 class="h4">Community</h4>
<a class="link" href="https://discord.gg/X3VUtPtBTu">Discord</a>
<a class="link" href="https://matrix.to/#/+openhv:matrix.org">Matrix</a>
<a class="link" href="/games">Server Browser</a>
</div>
<div class="column gapSmall">
<h4 class="h4">Donate</h4>
<a class="link" href="https://opencollective.com/openhv">Open Collective</a>
<a class="link" href="https://freegamedev.net/irc/#openhv">IRC</a>
<a class="link" href="https://github.com/OpenHV/OpenHV/discussions">GitHub</a>
</div>
<div class="column gapSmall">
<h4 class="h4">Project</h4>
<a class="link" href="https://github.com/OpenHV/OpenHV">Source code</a>
<a class="link" href="https://www.openhub.net/p/OpenHV">Openhub</a>
<a class="link" href="https://github.com/OpenHV/OpenHV">GitHub</a>
<a class="link" href="https://www.openhub.net/p/OpenHV">Open Hub</a>
<a class="link" href="https://www.moddb.com/mods/openhv">ModDB</a>
<a class="link" href="https://openhv.readthedocs.io/">Documentation</a>
<a class="link" href="https://openhv.readthedocs.io/">Read the Docs</a>
<a class="link" href="https://openhv.hyperping.app/">Hyperping</a>
<a class="link" href="https://opencollective.com/openhv">Open Collective</a>
</div>
</div>
</footer>
Expand Down
Binary file added images/web/base.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/web/base2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/web/icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/web/map.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
112 changes: 66 additions & 46 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,88 +8,107 @@
<meta name="keywords"
content="OpenHV, Open Hard Vacuum, Open source RTS, Hard Vacuum, RTS, real-time strategy, Online, LAN, multiplayer" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenHV | Home</title>
<title>OpenHV | RTS</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="parallaxify.js"></script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<link rel="icon" type="image/png" href="images/web/icon.png">
</head>

<body>
<main>
<section class="heroParent">
<div class="heroChild gapMedium floatUp">
<header class="row gapSmall heroHeader floatUp">
<img src="images/web/logo.png" alt="logo" class="heroIcon">
<h1 class="heroTitle">OpenHV</h1>
</header>
<h3 class="heroDescription wrap floatUp p1">
<p>A <b>classic</b> real-time strategy game,</p>
<p>with a few <b>modern</b> twists.</p>
<br/>
<p>Completely free and <b>open source</b></p>
<p>from code to pixels and sound.</p>
</h3>
<section class="heroContainer parallaxifyBg">
<div class="heroParent">
<div class="heroChild gapMedium floatUp">
<header class="row gapSmall heroHeader floatUp">
<img src="images/web/logo.png" alt="logo" class="heroIcon">
<h1 class="heroTitle">OpenHV</h1>
</header>
<h3 class="heroDescription wrap floatUp p1">
<p>A <b>classic</b> real-time strategy game,</p>
<p>with a few <b>modern</b> twists.</p>
<br />
<p>Completely free and <b>open source</b></p>
<p>from code to pixels and sound.</p>
</h3>

<div class="row gapMedium wrap floatUp">
<a href="#download" class="buttonPrimary"><span class="material-symbols-outlined">
download
</span>Download</a>
<a href="#community" class="buttonPrimary"><span class="material-symbols-outlined">
arrow_forward
</span>More</a>
<div class="row gapMedium wrap floatUp">
<a href="#download" class="buttonPrimary"><span class="material-symbols-outlined">
download
</span>Download</a>
<a href="#community" class="buttonPrimary"><span class="material-symbols-outlined">
arrow_forward
</span>More</a>
</div>
</div>
</div>
<div class="wrap imageToSolid">

</div>
</section>
<section class="section">
<div class="showcaseContainer gapMedium rowCollapsible">
<div class="showcaseParent gapMedium">
<section class="wrap section background2To1">
<h2 class="h2 textCenter">An old vision brought to life</h2>
<h3 class="h3 headerSoft textCenter">with a <a class="link" target="_blank" href="https://www.openra.net/">modern engine</a> and features</h3>
</section>
<div class="overviewContainer">
<div class="solidToImage"></div>
<section class="overviewParent overviewLeft gapMedium">

<div class="showcaseChild overviewContent gapMedium">
<div class="gapSmall centerColumn column">
<h3 class="h2">Classic RTS</h3>
<p class="p2 showcaseDescription">
Journey back to the golden age of real-time strategy in a modern engine with todays convience and features.
Journey back to the golden age of real-time strategy in a modern engine with todays
convience and features.
</p>
</div>
</div>
<div class="showcaseParent">
<img src="images/web/gameplay_1.png" class="showcaseImage" />
</div>
</div>
</section>
<section class="section background2">
<div class="showcaseContainer gapMedium rowCollapsibleInverse">
<div class="showcaseParent">
<img src="images/web/gameplay_1.png" class="showcaseImage" />
</div>
<div class="showcaseParent gapMedium">

<img src="images/web/base.png" class="overviewImage" />

</section>
<section class="overviewParent overviewRight gapMedium overviewInverse">

<img src="images/web/base2.png" class="overviewImage" />

<div class="showcaseChild overviewContent gapMedium">
<div class="gapSmall centerColumn column">
<h3 class="h2">Community built</h3>
<p class="p2 showcaseDescription">
A free game without lootboxes or pay to win. Created by enthusiasts who enjoy crafting games that are fun and enjoyable.
A free game without lootboxes or pay to win. Created by enthusiasts who enjoy crafting
games that are fun and enjoyable.
</p>
</div>

<a target="_blank" class="buttonPrimary"
href="https://openhv.itch.io/openhv">Source code<span class="material-symbols-outlined">open_in_new</span></a>
</div>
</div>
</section>

</section>
<div class="imageToSolid"></div>
</div>
<section class="section background1" id="download">
<div class="showcaseContainer gapMedium rowCollapsible">
<div class="showcaseParent gapMedium">
<div class="showcaseChild gapMedium">
<div class="gapSmall centerColumn column">
<h3 class="h2">Download</h3>
<p class="p2 showcaseDescription">
OpenHV is entirely free to download and play across every supported platform.
You can <a class="link" href="https://opencollective.com/openhv">donate</a> to help keep the servers running.
You can <a class="link" href="https://opencollective.com/openhv">donate</a> to help keep the
servers running.
</p>
</div>
<iframe frameborder="0"
src="https://itch.io/embed/689669?linkback=true&amp;bg_color=303436&amp;fg_color=FFFFFF&amp;link_color=384896&amp;border_color=6a6a6a"
width="552" height="167" class="iframe"><a target="_blank"
href="https://openhv.itch.io/openhv">OpenHV</a></iframe>
</div>
<div class="showcaseParent">
<div class="showcaseChild">
<div class="column centerColumn gapMedium container background2 paddingMedium">
<h4 class="h4">All download options</h4>
<div class="gapSmall column centerColumn">
Expand All @@ -108,19 +127,20 @@ <h4 class="h4">All download options</h4>
</section>
<section class="section background2" id="community">
<div class="showcaseContainer gapMedium rowCollapsibleInverse">
<div class="showcaseParent">
<div class="showcaseChild">
<div class="column centerColumn gapMedium container background3 paddingMedium">
<h4 class="h4">Lobbies and Games</h4>
<div class="gapSmall column centerColumn">
<a target="_blank" class="buttonPrimary width100" href="/games">Server Browser</a>
</div>
</div>
</div>
<div class="showcaseParent gapMedium">
<div class="showcaseChild gapMedium">
<div class="gapSmall centerColumn column">
<h3 class="h2">Community</h3>
<p class="p2 showcaseDescription">
Discord, Matrix and IRC are the community's official communication platforms. All options have
Discord, Matrix and IRC are the community's official communication platforms. All options
have
bridges from the other, allowing users to communicate no matter the chosen protocol.
</p>
</div>
Expand Down
49 changes: 49 additions & 0 deletions parallaxify.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
// Licensed under MIT by Carson Burke @MarvinTMB

// Not exactly the most efficient parallax implementation, but it should work fine enough
// Use (css) classes parallaxify for <img /> tags, and parallaxifyBg for background images

window.addEventListener("load", parallax)
window.addEventListener("scroll", parallax)

function parallax() {

function getPosition(item) {

let top = (item.getBoundingClientRect().top / window.innerHeight * 100).toFixed(2)

return top
}

let itemsToParallax = document.getElementsByClassName("parallaxify")

for (let item of itemsToParallax) {

if (!item.dataset.speedMultiplier) {

item.dataset.speedMultiplier = "0.7"
}

item.style.transform = "translate3d(0, " + getPosition(item) * item.dataset.speedMultiplier + "px, 0)"
}

let imagesToParallax = document.getElementsByClassName("parallaxifyBg")

for (let item of imagesToParallax) {

function getPosition(item) {

let top = (item.getBoundingClientRect().top / window.innerHeight * 100).toFixed(2)

return top
}

if (!item.dataset.speedMultiplier) {

item.dataset.speedMultiplier = "3"
}

item.style.backgroundAttachment = "fixed"
item.style.backgroundPositionY = getPosition(item) * item.dataset.speedMultiplier + "px"
}
}
Loading

0 comments on commit 262a93c

Please sign in to comment.