initial commit

2026-04-24 11:24:04 +02:00
commit acf80258ae
138 changed files with 5209 additions and 0 deletions
@@ -0,0 +1,169 @@
+: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 */