dolsen
/
chordia
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity
Browse Source

optimize layout for minimum 1280x720

main
Derek Olsen 11 months ago
parent
a8ebb3c152
commit
5f284adab6
3 changed files with 77 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 57
      about.html
  2. 19
      index.html
  3. 52
      main.css

57
about.html
View File

@ -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
View File

@ -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
View File

@ -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;

Write Preview
Loading…
Cancel
Save