Initial pull of 5x5 into the Textual examples directory

examples/five_by_five.css

@@ -0,0 +1,88 @@
+$animation-type: linear;
+$animatin-speed: 175ms;
+
+Game {
+    align: center middle;
+    layers: gameplay messages;
+}
+
+GameGrid {
+    layout: grid;
+    grid-size: 5 5;
+    layer: gameplay;
+}
+
+GameHeader {
+    background: $primary-background;
+    color: $text;
+    height: 1;
+    dock: top;
+    layer: gameplay;
+}
+
+GameHeader #app-title {
+    width: 60%;
+}
+
+GameHeader #moves {
+    width: 20%;
+}
+
+GameHeader #progress {
+    width: 20%;
+}
+
+Footer {
+    height: 1;
+    dock: bottom;
+    layer: gameplay;
+}
+
+GameCell {
+    width: 100%;
+    height: 100%;
+    background: $surface;
+    border: round $surface-darken-1;
+    transition: background $animatin-speed $animation-type, color $animatin-speed $animation-type;
+}
+
+GameCell:hover {
+    background: $panel-lighten-1;
+    border: round $panel;
+}
+
+GameCell.filled {
+    background: $secondary;
+    border: round $secondary-darken-1;
+}
+
+GameCell.filled:hover {
+    background: $secondary-lighten-1;
+    border: round $secondary;
+}
+
+WinnerMessage {
+    width: 50%;
+    height: 25%;
+    layer: messages;
+    visibility: hidden;
+    content-align: center middle;
+    text-align: center;
+    background: $success;
+    color: $text;
+    border: round;
+    padding: 2;
+}
+
+.visible {
+    visibility: visible;
+}
+
+Help {
+    background: $primary;
+    color: $text;
+    border: round $primary-lighten-3;
+    padding: 2;
+}
+
+/* five_by_five.css ends here */

examples/five_by_five.md

@@ -0,0 +1,17 @@
+# 5x5
+
+## Introduction
+
+An annoying puzzle for the terminal, built with
+[Textual](https://www.textualize.io/).
+
+## Objective
+
+The object of the game is to fill all of the squares. When you click on a
+square, it, and the squares above, below and to the sides will be toggled.
+
+It is possible to solve the puzzle in as few as 14 moves.
+
+Good luck!
+
+[//]: # (README.md ends here)