Figg
/
ColorTubes
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

un peu de css

pull/2/head
demisel 9 months ago
parent
07097d72c9
commit
b31f6481e5
2 changed files with 42 additions and 20 deletions
Unified View Show Diff Stats
  1. 29
    9
      css/style.css
  2. 13
    11
      index.html

+ 29
- 9
css/style.css View File

3 
 	margin: 0;
 3 
 	margin: 0;
4 
 }
 4 
 }
5
5
6 
-menu {
7 
-	padding: 0;
8 
-	margin: 5px;
6 
+.menuitem label::after {
7 
+	content: " :";
9 
 }
 8 
 }
10
9
11 
-menuitem {
12 
-	margin-right: 10px;
10 
+.menuitem input {
11 
+	max-width: 50px;
13 
 }
 12 
 }
14
13
15 
-menuitem label::after {
16 
-	content: " :";
14 
+.row {
15 
+	display: flex;
16 
+	flex-direction: row;
17 
 }
 17 
 }
18
18
19 
-menuitem input {
20 
-	max-width: 50px;
19 
+.w-max {
20 
+	width: max-content;
21 
+}
22 
+
23 
+.justify-evenly {
24 
+	justify-content: space-evenly;
25 
+}
26 
+
27 
+.justify-center {
28 
+	justify-content: center;
29 
+}
30 
+
31 
+.border {
32 
+	border: 1px solid black;
33 
+}
34 
+
35 
+.p-2 {
36 
+	padding: 0.5rem;
37 
+}
38 
+
39 
+.m-2 {
40 
+	margin: 0.5rem;
21 
 }
 41 
 }

+ 13
- 11
index.html View File

15 
 </head>
 15 
 </head>
16
16
17 
 <body>
 17 
 <body>
18 
-	<menu>
19 
-		<menuitem>
18 
+	<div class="row w-full justify-evenly border p-2 m-2">
19 
+		<span class="menuitem">
20 
 			<label>Tubes Number</label>
 20 
 			<label>Tubes Number</label>
21 
 			<input type="number" size="5" id="tbNumber" value="10">
 21 
 			<input type="number" size="5" id="tbNumber" value="10">
22 
-		</menuitem>
23 
-		<menuitem>
22 
+		</span>
23 
+		<span class="menuitem">
24 
 			<label>Tubes Levels</label>
 24 
 			<label>Tubes Levels</label>
25 
 			<input type="number" size="5" id="tbLevel" value="6">
 25 
 			<input type="number" size="5" id="tbLevel" value="6">
26 
-		</menuitem>
27 
-		<menuitem>
26 
+		</span>
27 
+		<span class="menuitem">
28 
 			<label>Padding</label>
 28 
 			<label>Padding</label>
29 
 			<input type="number" size="5" id="padding" value="10">
 29 
 			<input type="number" size="5" id="padding" value="10">
30 
-		</menuitem>
31 
-		<menuitem>
30 
+		</span>
31 
+		<span class="menuitem">
32 
 			<label>Tube Size</label>
 32 
 			<label>Tube Size</label>
33 
 			<input type="number" size="5" id="tbSize" value="50">
 33 
 			<input type="number" size="5" id="tbSize" value="50">
34 
-		</menuitem>
34 
+		</span>
35 
 		<button type="button" onclick="newGame()">New game</button>
 35 
 		<button type="button" onclick="newGame()">New game</button>
36 
-	</menu>
37 
-	<main oncontextmenu="return false;">
36 
+	</div>
37 
+	<div class="row justify-center">
38 
+		<main oncontextmenu="return false;">
39 
+	</div>
38 
 	</main>
 40 
 	</main>
39 
 </body>
 41 
 </body>
40
42

Write Preview
Loading…
Cancel
Save