upd: web page

1 files changed, 152 insertions, 23 deletions

diff --git a/html/webapp/styles.css b/html/webapp/styles.css
index e768a39..a879a6f 100644
--- a/html/webapp/styles.css
+++ b/html/webapp/styles.css
@@ -1,34 +1,163 @@
-canvas {
-    cursor: default;
-    outline: none;
+* {
+    padding: 0;
+    margin: 0;
 }
 
 body {
-    background-color: #222222;
+    font-family: 'Times New Roman', Times, serif;
+    background-color: #000a03;
 }
 
-p {
-    text-align: center;
-    color: #eeeeee;
+h1,
+h2 {
+    font-size: 32px;
 }
 
 a {
+    color: #6b8e78;
+    font-size: 20px;
+    padding: 0 6px;
+}
+
+a:hover {
+    color: #011702;
+    background-color: #6b8e73;
+    text-decoration: line-through;
+}
+
+.container {
+    width: 100%;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/** Wrapper */
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.background {
+    position: absolute;
+    background: no-repeat center url('img/bg.png');
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+    z-index: -2;
+    filter: brightness(0.25);
+}
+
+.background-gradient {
+    background: linear-gradient(0deg, #000a03, #00000000, #00000000);
+    z-index: -1;
+    filter: brightness(1);
+}
+
+.preview {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 100vh;
+}
+
+.play-me {
+    display: flex;
+    width: 100%;
+    justify-content: right;
+    align-items: center;
+    margin-top: 12px;
+}
+
+.play-me img {
+    height: 50px;
+    width: auto;
+}
+
+/** Under main */
+.description {
+    width: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: rgb(212, 236, 214);
+
+    margin-top: 64px;
+
+    gap: 64px;
+}
+
+.description h1 {
     text-align: center;
-    color: #bbbbff;
+}
+
+.screenshots {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.screenshots a {
+    padding: 0;
+}
+
+.screenshots a:hover {
+    background-color: transparent;
+}
+
+.screenshots img {
+    width: 256px;
+}
+
+/** Footer */
+.footer {
+    width: 100%;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+
+    margin-bottom: 32px;
+}
+
+/** Media screen */
+@media only screen and (min-width: 700px) {
+    .wrapper {
+        width: 50%;
+    }
+
+    .screenshots {
+        display: grid;
+        grid-template-columns: auto auto;
+        gap: 20px;
+    }
+}
+
+canvas {
+    cursor: default;
+    outline: none;
+    box-shadow: black 0px 0px 32px 16px;
+    border-radius: 4px;
 }
 
 .superdev {
-    color: rgb(37,37,37);
-    text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
+    color: rgb(37, 37, 37);
+    text-shadow: 0px 1px 1px rgba(250, 250, 250, 0.1);
     font-size: 50pt;
     display: block;
     position: relative;
     text-decoration: none;
-    background-color: rgb(83,87,93);
-    box-shadow: 0px 3px 0px 0px rgb(34,34,34),
-                0px 7px 10px 0px rgb(17,17,17),
-                inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
-                inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
+    background-color: rgb(83, 87, 93);
+    box-shadow: 0px 3px 0px 0px rgb(34, 34, 34),
+        0px 7px 10px 0px rgb(17, 17, 17),
+        inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
+        inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
     width: 70px;
     height: 70px;
     border: 0;
@@ -38,16 +167,16 @@ a {
 }
 
 .superdev:active {
-    box-shadow: 0px 0px 0px 0px rgb(34,34,34),
-                0px 3px 7px 0px rgb(17,17,17),
-                inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
-                inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
-    background-color: rgb(83,87,93);
+    box-shadow: 0px 0px 0px 0px rgb(34, 34, 34),
+        0px 3px 7px 0px rgb(17, 17, 17),
+        inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
+        inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
+    background-color: rgb(83, 87, 93);
     top: 3px;
     color: #fff;
-    text-shadow: 0px 0px 3px rgb(250,250,250);
+    text-shadow: 0px 0px 3px rgb(250, 250, 250);
 }
 
 .superdev:hover {
-    background-color: rgb(100,100,100);
-}
+    background-color: rgb(100, 100, 100);
+}
\ No newline at end of file