Hugging Face's logo

Spaces:
christopher
/
chess
Sleeping

App Files Community
christopher commited on
Commit
f3451f7
·
verified ·
1 Parent(s): 5c43cea

Update static/styles.css

Browse files
Files changed (1) hide show
  1. static/styles.css +100 -19
static/styles.css CHANGED
@@ -1,19 +1,100 @@
1
- body { font-family: Arial; max-width: 1200px; margin: 50px auto; padding: 20px; }
2
- .container { display: flex; gap: 40px; margin: 20px 0; }
3
- #board { width: 400px; }
4
- .info-panel { flex: 1; }
5
- .info-panel h3 { margin-top: 0; }
6
- button { padding: 10px 20px; margin: 5px; cursor: pointer; }
7
- #fen { background: #f0f0f0; padding: 10px; margin: 10px 0; font-family: monospace; }
8
- #results { margin-top: 15px; }
9
- .pagination { text-align: center; margin: 20px 0; }
10
- .pagination button { padding: 10px 20px; margin: 0 5px; }
11
- .pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
12
- .puzzle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
13
- .puzzle { border: 1px solid #ddd; padding: 12px; }
14
- .puzzle-board { width: 100%; aspect-ratio: 1; }
15
- .puzzle-info h3 { margin: 8px 0 4px; font-size: 14px; }
16
- .puzzle-info p { margin: 4px 0; font-size: 12px; }
17
- .puzzle-info a { color: #0066cc; }
18
- .themes { display: flex; gap: 5px; flex-wrap: wrap; margin: 5px 0; }
19
- .theme { background: #e0e0e0; padding: 3px 8px; border-radius: 3px; font-size: 11px; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ font-family: Arial;
3
+ max-width: 1200px;
4
+ margin: 50px auto;
5
+ padding: 20px;
6
+ }
7
+
8
+ .container {
9
+ display: flex;
10
+ gap: 40px;
11
+ margin: 20px 0;
12
+ }
13
+
14
+ #board {
15
+ width: 400px;
16
+ }
17
+
18
+ .info-panel {
19
+ flex: 1;
20
+ }
21
+
22
+ .info-panel h3 {
23
+ margin-top: 0;
24
+ }
25
+
26
+ button {
27
+ padding: 10px 20px;
28
+ margin: 5px;
29
+ cursor: pointer;
30
+ }
31
+
32
+ #fen {
33
+ background: #f0f0f0;
34
+ padding: 10px;
35
+ margin: 10px 0;
36
+ font-family: monospace;
37
+ }
38
+
39
+ #results {
40
+ margin-top: 15px;
41
+ }
42
+
43
+ .pagination {
44
+ text-align: center;
45
+ margin: 20px 0;
46
+ }
47
+
48
+ .pagination button {
49
+ padding: 10px 20px;
50
+ margin: 0 5px;
51
+ }
52
+
53
+ .pagination button:disabled {
54
+ opacity: 0.5;
55
+ cursor: not-allowed;
56
+ }
57
+
58
+ .puzzle-grid {
59
+ display: grid;
60
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
61
+ gap: 16px;
62
+ }
63
+
64
+ .puzzle {
65
+ border: 1px solid #ddd;
66
+ padding: 12px;
67
+ }
68
+
69
+ .puzzle-board {
70
+ width: 100%;
71
+ aspect-ratio: 1;
72
+ }
73
+
74
+ .puzzle-info h3 {
75
+ margin: 8px 0 4px;
76
+ font-size: 14px;
77
+ }
78
+
79
+ .puzzle-info p {
80
+ margin: 4px 0;
81
+ font-size: 12px;
82
+ }
83
+
84
+ .puzzle-info a {
85
+ color: #0066cc;
86
+ }
87
+
88
+ .themes {
89
+ display: flex;
90
+ gap: 5px;
91
+ flex-wrap: wrap;
92
+ margin: 5px 0;
93
+ }
94
+
95
+ .theme {
96
+ background: #e0e0e0;
97
+ padding: 3px 8px;
98
+ border-radius: 3px;
99
+ font-size: 11px;
100
+ }