170 lines
3.0 KiB
CSS
170 lines
3.0 KiB
CSS
:root {
|
|
--shell-color: #272929;
|
|
--button-color: #010105;
|
|
--text-color: #42683e;
|
|
--start-button-color: #597ea7;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'C64 TrueType';
|
|
src: url('fonts/C64_Pro_Mono-STYLE.eot');
|
|
src: url('fonts/C64_Pro_Mono-STYLE.eot') format('embedded-opentype'),
|
|
url('fonts/C64_Pro_Mono-STYLE.woff2') format('woff2'),
|
|
url('fonts/C64_Pro_Mono-STYLE.woff') format('woff'),
|
|
url('fonts/C64_Pro_Mono-STYLE.ttf') format('truetype');
|
|
}
|
|
|
|
body {
|
|
background: var(--shell-color);
|
|
}
|
|
|
|
.controls-wrapper {
|
|
}
|
|
|
|
.dpad-wrapper {
|
|
background-color: darkgray;
|
|
border-radius: 50%;
|
|
height: 180px;
|
|
width: 180px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 20px;
|
|
justify-content: center;
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.dpad-top-bottom {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.dpad-middle {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.dpad-button {
|
|
background-color: #4caf50;
|
|
border: none;
|
|
color: white;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: 4px;
|
|
}
|
|
|
|
.button {
|
|
background-color: var(--button-color);
|
|
border: none;
|
|
color: white;
|
|
padding: 15px 32px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
margin: 4px 2px;
|
|
cursor: pointer;
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
margin: auto;
|
|
}
|
|
|
|
.button-a {
|
|
margin-top: 50%;
|
|
}
|
|
|
|
.button-b {
|
|
margin-bottom: 50%;
|
|
}
|
|
|
|
.buttons-wrapper {
|
|
background-color: var(--shell-color);
|
|
border-radius: 60px;
|
|
height: 200px;
|
|
width: 180px;
|
|
display: flex;
|
|
padding: 10px;
|
|
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
@media only screen and (min-width: 1000px) {
|
|
.dpad-wrapper,
|
|
.buttons-wrapper {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#platformer {
|
|
margin: 1em auto;
|
|
position: relative;
|
|
width: 512px;
|
|
height: 384px;
|
|
}
|
|
#canvas {
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: black;
|
|
}
|
|
#instructions {
|
|
font-style: italic;
|
|
color: #999;
|
|
font-size: 9pt;
|
|
margin-left: 1em;
|
|
margin-top: 0.5em;
|
|
}
|
|
#instructions b {
|
|
color: #ddd;
|
|
}
|
|
@media screen and (min-width: 0px) and (min-height: 0px) {
|
|
#platformer {
|
|
width: 512px;
|
|
height: 384px;
|
|
font-size: 7pt;
|
|
}
|
|
} /* block = 16 */
|
|
|
|
@media screen and (min-width: 840px) and (min-height: 530px) {
|
|
#platformer {
|
|
width: 640px;
|
|
height: 480px;
|
|
font-size: 9pt;
|
|
}
|
|
} /* block = 20 */
|
|
@media screen and (min-width: 968px) and (min-height: 626px) {
|
|
#platformer {
|
|
width: 768px;
|
|
height: 576px;
|
|
font-size: 11pt;
|
|
}
|
|
} /* block = 24 */
|
|
@media screen and (min-width: 1096px) and (min-height: 722px) {
|
|
#platformer {
|
|
width: 896px;
|
|
height: 672px;
|
|
font-size: 13pt;
|
|
}
|
|
} /* block = 28 */
|
|
@media screen and (min-width: 1224px) and (min-height: 818px) {
|
|
#platformer {
|
|
width: 1024px;
|
|
height: 768px;
|
|
font-size: 15pt;
|
|
}
|
|
} /* block = 32 */
|