Browse Source

mobile size tests

main
Derek Olsen 11 months ago
parent
commit
8baf25033e
  1. 5
      index.html
  2. 39
      main.css

5
index.html

@ -10,6 +10,7 @@
<body>
<div id="topBar" class="hBar">
top bar things go here
</div>
<div id="centerRow">
@ -28,15 +29,13 @@
<button>$</button>
<button>%</button>
</div>
</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">About</a>
<a href="index.html" class="currentPage">Chordia</a>
</div>
</div>
</body>
<script src="game.js"></script>

39
main.css

@ -1,5 +1,9 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
@ -7,32 +11,20 @@ body {
background-color: black;
font-family: 'Roboto Mono', monospace;
color: white;
height: 100%;
}
a {
color: white;
}
div#centerRow {
position: absolute;
top: 60px;
width: 100%;
display: flex;
justify-content: center;
flex-flow: row;
height: ;
}
div.hBar {
}
div.vBar {
display: block;
position: relative;
height: 600px;
border-style: solid;
border-width: 1px;
border-color: aqua;
@ -41,7 +33,7 @@ div.vBar {
div#topBar {
top: 0px;
height: 60px;
height: 5%;
}
div#leftBar {
@ -61,12 +53,13 @@ div#rightBar {
div#botBar {
display: flex;
flex-flow: row-reverse;
position: absolute;
position: relative;
border-style: solid;
border-color: aqua;
border-width: 0px;
top: 600px;
width: 1280px;
top: 90%;
height: 5%;
width: 100%;
vertical-align: middle;
}
@ -76,7 +69,7 @@ div#botBar a {
border-width: 1px;
text-decoration: none;
padding-left: 8px;
padding-right: 8px;
padding-right: 8px;70
padding-top: 4px;
padding-bottom: 4px;
}
@ -99,6 +92,16 @@ p > b {
color: black;
}
div#centerRow {
position: absolute;
top: 5%;
width: 100%;
display: flex;
justify-content: center;
flex-flow: row;
height: 70%;
}
gamewindow {
position: relative;
display: inline;

Loading…
Cancel
Save