Batman: I forgot to commit the new website branch so I guess here it is

with bun and a cool game page
2026-09-06 15:46:06 -04:00
commit b5fb570df4
12 changed files with 580 additions and 0 deletions
@@ -0,0 +1,167 @@
+html {
+        background-color: moccasin;
+        height: 100%;
+}
+
+body {
+        background-color: cadetblue;
+        transition: background-color 0.1s ease-out;
+        margin: 20px;
+        padding: 0;
+        font-family: "Almendra";
+}
+
+header {
+        background-color: moccasin;
+        padding: 10px;
+        border-bottom: 2px dashed gray;
+
+        .header-container {
+                display: flex;
+                flex-direction: row-reverse;
+                align-items: center;
+
+                h1 {
+                        color: cornflowerblue;
+                        font-family: "Almendra";
+                        text-align: left;
+                        font-size: clamp(20px, 10vh, 55px);
+                        height: auto;
+                        max-height: 100px;
+                        flex: 1;
+                }
+
+                .boat {
+                        height: auto;
+                        max-width: 150px;
+                        width: 100%;
+                        pointer-events: none;
+                        display: block;
+                }
+
+                .boat-container {
+                        display: flex;
+                        justify-content: left;
+                        align-items: left;
+                        width: 100%;
+                        flex: 2;
+                }
+        }
+}
+
+.Content {
+        margin-left: 10px;
+        margin-right: 10px;
+
+
+        .Instruction {
+                display: flex;
+                align-items: baseline;
+                gap: 10px;
+
+                details {
+                        p {
+                                line-height: 1.4;
+                                font-size: 20px;
+                                color: black;
+                        }
+                }
+
+                p {
+                        font-size: 40px;
+                        text-align: left;
+                        line-height: 1;
+                        margin-top: 5px;
+                        margin-bottom: 5px;
+                }
+
+                li {
+                        line-height: 1.4;
+                        font-size: 20px;
+                        color: black;
+
+                }
+
+        }
+
+        .game {
+                display: flex;
+                width: 100%;
+                gap: 10px;
+
+                .table-container {
+                        padding: 10px;
+                        flex: 1;
+                        background-color: cadetblue;
+
+                        table,
+                        th,
+                        td,
+                        tr {
+                                border: 1px solid black;
+                        }
+
+                        tr:nth-child(even) {
+                                background-color: rgba(0, 0, 0, 0.2);
+                        }
+
+                        tr:nth-child(odd) {
+                                background-color: rgba(0, 0, 0, 0.125);
+                        }
+
+                        table {
+                                border-collapse: collapse;
+                                width: 100%;
+                        }
+
+                        th,
+                        td {
+                                padding: 10px;
+                                text-align: center;
+                        }
+
+                        th {
+                                background-color: darkseagreen;
+                        }
+                }
+
+                .button-container {
+                        flex: 1;
+                        padding: 10px;
+
+                        .button-container-part {
+                                display: flex;
+
+                                button {
+                                        font-family: "Almendra";
+                                        font-size: 18px;
+                                        width: 100%;
+                                        text-align: center;
+                                        transition-duration: 0.2s;
+                                        padding: 7px;
+                                        height: clamp(30px, 15vh, 85px);
+                                }
+
+                                button:hover {
+                                        background-color: darkseagreen;
+                                        color: black;
+                                        cursor: grab;
+                                        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6);
+                                        border: 2px solid black;
+                                }
+
+                                button:disabled {
+                                        pointer-events: none;
+                                }
+                        }
+                }
+        }
+}
+
+footer {
+        background-color: moccasin;
+        width: 100%;
+        margin-top: 25px;
+        text-align: center;
+        border-top: 2px dashed gray;
+}