aboutsummaryrefslogtreecommitdiffstats
path: root/src/style.css
diff options
context:
space:
mode:
authorMaksymilian Jopek <maks@jopek.eu>2023-02-27 22:35:28 +0100
committerMaksymilian Jopek <maks@jopek.eu>2023-02-27 22:35:28 +0100
commit4db4b5791cd1359519933871ab65412acafb71d7 (patch)
tree24c9b78757e23793384481691745c8d3ff0db621 /src/style.css
parent9f7331ca8b60cd91ee2493fa1872410c5755d1bd (diff)
download1942-4db4b5791cd1359519933871ab65412acafb71d7.tar.gz
1942-4db4b5791cd1359519933871ab65412acafb71d7.tar.zst
1942-4db4b5791cd1359519933871ab65412acafb71d7.zip
v1.1.0
Refactor of loading screen Faster loading time by concurently awaiting all promises Minor bug fix Added litle help menu at the start of the game
Diffstat (limited to 'src/style.css')
-rw-r--r--src/style.css61
1 files changed, 61 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css
index 026f6a1..9ebb486 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,6 +1,10 @@
body {
display: grid;
height: 100vh;
+ background: black;
+ /*background: linear-gradient(45deg, #79d570, #a28fff);*/
+ font-family: 'prstart';
+ color: white;
}
canvas {
--scale: 3;
@@ -10,4 +14,61 @@ canvas {
image-rendering: pixelated;
image-rendering: crisp-edges;
border: 1px solid black;
+ display: none;
+}
+.help {
+ position: absolute;
+ bottom: 2rem;
+ left: 50%;
+ transform: translateX(-50%);
+ width: max-content;
+ display: none;
+}
+
+.h-gradient {
+ font-size: 4rem;
+ text-align: center;
+ background: linear-gradient(-45deg, #6355a4, #e89a3e);
+ /* #f7ff6c */
+ background-size: 300%;
+ letter-spacing: 0.1rem;
+ font-weight: 900;
+ font-size: 4rem;
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ animation: bg-animation 6s ease-in-out infinite;
+ place-self: center;
+}
+@keyframes bg-animation {
+ 0% { background-position: 0px 50%; }
+ 50% { background-position: 100% 50%; }
+ 100% { background-position: 0px 50%; }
+}
+
+button {
+ font-family: 'prstart';
+ font-size: 3rem;
+ color: white;
+ padding: 2rem;
+ border-top-left-radius: 4rem;
+ border-bottom-right-radius: 4rem;
+ border-top-right-radius: 1rem;
+ border-bottom-left-radius: 1rem;
+ /*background-color: #6355a4;*/
+ background: linear-gradient(-45deg, #6355a4, #e89a3e);
+ place-self: center;
+ opacity: 0;
+}
+button.visible {
+ opacity: 1;
+ transition: opacity 1s ease-in-out;
+}
+
+@font-face {
+ font-family: 'prstart';
+ src: url('/src/static/prstart-webfont.woff2') format('woff2'),
+ url('/src/static/prstart-webfont.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
}