Browse Source

optimize layout for minimum 1280x720

main
Derek Olsen 11 months ago
parent
commit
5f284adab6
  1. 57
      about.html
  2. 19
      index.html
  3. 52
      main.css

57
about.html

@ -3,7 +3,7 @@
<html>
<head>
<meta charset="UTF-8">
<title>About Chordia</title>
<title>Chordia</title>
<link rel="stylesheet" href="main.css">
</head>
@ -12,30 +12,39 @@
<div id="topBar" class="hBar">
</div>
<div id="botBar" class="hBar">
<a href="https://github.com/orpheusui" target="_blank" style="border-right: none;">© 2021 orpheusui</a>
<a href="https://itch.io/jam/top-jam-1" target="_blank">TOP Jam-1</a>
<a href="about.html" class="currentPage">About</a>
<a href="index.html">Chordia</a>
<div id="centerRow">
<div id="leftBar" class="vBar">
</div>
<gamewindow style="text-align: center;">
<h1 style="color: aqua;">chordia.io</h1>
<p style="color: aqua;">------------------------------------------------</p>
<p><b>Programming:</b></p>
<p>Derek Olsen (orpheusui)</p>
<p>Ben Zah (ZahBenjamin)</p>
<p>Alex Swanson (EyYoTony)</p>
<p><b>Storyboarding:</b></p>
<p>Brandon Weed</p>
<p style="color: aqua;">------------------------------------------------</p>
<p>COPYRIGHT © 2021 Team Chordia</p>
<p>All rights reserved.</p>
</gamewindow>
<div id="rightBar" class="vBar">
</div>
<div id="botBar" class="hBar">
<a href="https://git.andrewzah.com/dolsen/chordia/" target="_blank">© 2021 chordia.io</a>
<a href="https://itch.io/jam/top-jam-1" target="_blank">TOP Jam-1</a>
<a href="about.html" class="currentPage">About</a>
<a href="index.html" style="border-left: aqua;">Chordia</a>
</div>
</div>
<div id="leftBar" class="vBar"></div>
<div id="rightBar" class="vBar"></div>
<gamewindow style="text-align: center;">
<h1 style="color: aqua;">Chordia</h1>
<p style="color: aqua;">------------------------------------------------</p>
<p><b>Programming:</b></p>
<p>Derek Olsen (orpheusui), Ben Zah (ZahBenjamin), and Alex Swanson (EyYoTony)</p>
<p><b>Storyboarding:</b></p>
<p>Brandon Weed</p>
<p style="color: aqua;">------------------------------------------------</p>
<p>COPYRIGHT © 2021 The Chordia Team</p>
<p>All rights reserved.</p>
</gamewindow>
</body>
</html>
</html>

19
index.html

@ -14,6 +14,9 @@
<div id="centerRow">
<div id="leftBar" class="vBar">
<button>@</button>
<button>&</button>
<button>!</button>
</div>
<gamewindow id="test-target">
@ -21,16 +24,20 @@
</gamewindow>
<div id="rightBar" class="vBar">
<button>#</button>
<button>$</button>
<button>%</button>
</div>
</div>
<div id="botBar" class="hBar">
<a href="https://github.com/orpheusui" target="_blank" style="border-right: none;">© 2021 orpheusui</a>
<a href="https://itch.io/jam/top-jam-1" target="_blank">TOP Jam-1</a>
<a href="about.html">About</a>
<a href="index.html" class="currentPage">Chordia</a>
<div id="botBar" class="hBar">
<a href="https://git.andrewzah.com/dolsen/chordia/" target="_blank">© 2021 chordia.io</a>
<a href="https://itch.io/jam/top-jam-1" target="_blank">TOP Jam-1</a>
<a href="about.html">About</a>
<a href="index.html" class="currentPage">Chordia</a>
</div>
</div>
</body>
<script src="game.js"></script>

52
main.css

@ -1,10 +1,12 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
body {
margin: 0;
padding: 0;
border: hidden;
background-color: black;
font-family: 'Courier New', Courier, monospace;
font-family: 'Roboto Mono', monospace;
color: white;
}
@ -14,53 +16,60 @@ a {
}
div.hBar {
display: flex;
flex-flow: row-reverse;
position: fixed;
left: 128px;
right: 128px;
height: 36px;
}
div.vBar {
display: block;
position: relative;
height: 600px;
border-style: solid;
border-width: 1px;
border-color: aqua;
top: 36px;
bottom: 36px;
width: 40px;
}
div#topBar {
top: 0px;
height: 60px;
}
div#leftBar {
left: 0;
display: flex;
flex-direction: column;
border-right-width: 0;
}
div#rightBar {
right: 0;
display: flex;
flex-direction: column;
border-left-width: 0;
}
div#botBar {
bottom: 0;
display: flex;
flex-flow: row-reverse;
position: absolute;
border-style: solid;
border-color: aqua;
border-width: 1px;
top: 601px;
width: 1282px;
vertical-align: middle;
}
div#botBar a {
border-style: solid;
border-left-style: solid;
border-color: aqua;
border-width: 1px;
border-top: none;
border-left: none;
border-bottom: none;
padding: 8px;
text-decoration: none;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
padding-bottom: 4px;
}
div#botBar :hover {
@ -83,19 +92,20 @@ p > b {
div#centerRow {
position: absolute;
top: 36px;
bottom: 36px;
top: 60px;
width: 100%;
height: min-content;
display: flex;
flex-direction: column;
justify-content: center;
flex-flow: row;
}
gamewindow {
position: relative;
display: table-cell;
display: inline;
width: 1200px;
height: 700px;
height: 600px;
border-style: solid;
border-width: 1px;
border-color: aqua;

Loading…
Cancel
Save