]> git.cworth.org Git - lmno.games/commitdiff
tictactoe: Integrate the standard LMNO styling
authorCarl Worth <cworth@cworth.org>
Tue, 26 May 2020 03:02:12 +0000 (20:02 -0700)
committerCarl Worth <cworth@cworth.org>
Tue, 26 May 2020 03:53:38 +0000 (20:53 -0700)
Include the LMNO CSS files and add a header. The LMNO button styling
looks better here than I expected. Just required a couple of padding
tweaks to get things looking correct.

tictactoe/index.html
tictactoe/tictactoe.css

index 6a6d289f9fc3b2b141c629b550edff35b740cf87..b9136b7a5ceda9c4595fb8add62fe4839aad3773 100644 (file)
@@ -6,12 +6,30 @@
 
     <title>Tic-tac-toe</title>
 
 
     <title>Tic-tac-toe</title>
 
+    <link rel="stylesheet" href="/reset.css" type="text/css" />
+    <link rel="stylesheet" href="/style.css" type="text/css" />
+    <link rel="stylesheet" href="tictactoe.css" type="text/css" />
+
     <script src="/react.js"></script>
     <script src="/react-dom.js"></script>
     <script src="/react.js"></script>
     <script src="/react-dom.js"></script>
-    <link rel="stylesheet" href="tictactoe.css" type="text/css" />
     <script type="module" src="tictactoe.js"></script>
   </head>
   <body>
     <script type="module" src="tictactoe.js"></script>
   </head>
   <body>
-    <div id="tictactoe"></div>
+
+    <div id="page">
+
+      <h1>Tic Tac Toe</h1>
+
+      <p>
+        Just the classic game.
+      </p>
+
+      <div id="message-area">
+      </div>
+
+      <div id="tictactoe"></div>
+
+    </div>
+
   </body>
 </html>
   </body>
 </html>
index 0e56082c8fa7e495d1c82200f2103ea5d073a557..10ad37052f266b90fcdd9a0c5509f5737a657404 100644 (file)
@@ -1,8 +1,3 @@
-body {
-  font: 14px "Century Gothic", Futura, sans-serif;
-  margin: 20px;
-}
-
 ol, ul {
   padding-left: 30px;
 }
 ol, ul {
   padding-left: 30px;
 }
@@ -19,6 +14,7 @@ ol, ul {
 
 .square {
   background: #fff;
 
 .square {
   background: #fff;
+  color: black;
   border: 1px solid #999;
   float: left;
   font-size: 24px;
   border: 1px solid #999;
   float: left;
   font-size: 24px;
@@ -47,4 +43,5 @@ ol, ul {
 
 .game-info {
   margin-left: 20px;
 
 .game-info {
   margin-left: 20px;
+  margin-bottom: 20px;
 }
 }