feat: description

Author: kacperwyczawski

index.html

@@ -18,9 +18,20 @@ <h1>Arx Chess</h1>
     </li>
     <li><a href="play" class="filled">Local game</a></li>
     <li><a href="#" class="filled">Online game (soon)</a></li>
-    <li><a href="play?tutorial" class="filled">Tutorial</a></li>
-    <li><a href="pieces">Pieces</a></li>
+    <li>
+      The main objective of Arx Chess is to capture all of the opponent's castles. To achieve this, you must gain
+      control of the board and acquire new pieces. These include not only regular pieces but also compound ones. You
+      unlock the compound pieces by purchasing the basic ones first. You need to manage your gold wisely between
+      expanding your forces and upgrading your castles. Have fun!
+    </li>
+    <li>
+      To buy new pieces or upgrade a castle: <span class="touch">long-press</span><span class="no-touch">right-click
+        on</span> the castle.
+    </li>
+    <li>
+      To move a piece: left-click on the piece, then click on the desired destination.
+    </li>
+    <li><a href="pieces">All pieces</a></li>
     <li><a href="https://github.com/kacperwyczawski/arx-chess">Source code</a></li>
-    <li><a href="https://github.com/kacperwyczawski/arx-chess/blob/main/README.md">About</a></li>
   </menu>
 </body>

play.css

@@ -45,7 +45,8 @@ menu {
 
   & li {
     width: 100%;
-    max-width: 16rem;
+    max-width: 24rem;
+    text-align: justify;
 
     &:first-child {
       display: flex;
@@ -61,7 +62,7 @@ menu {
     background-color: transparent;
     color: var(--dark);
     padding: 1rem 2rem;
-    max-width: 16rem;
+    max-width: 24rem;
     width: 100%;
     display: block;
     text-align: center;
@@ -77,6 +78,24 @@ menu {
   }
 }
 
+span.touch {
+  display: none;
+}
+
+span.no-touch {
+  display: inline;
+}
+
+@media not (hover: hover) {
+  span.touch {
+    display: inline;
+  }
+
+  span.no-touch {
+    display: none;
+  }
+}
+
 #white,
 #black {
   position: absolute;
@@ -305,4 +324,4 @@ a.button {
   & p {
     margin-top: 0;
   }
-}
+}