[Pharo] Personal fitness tracker web app.
1
/* =========================================================
2
Base document
3
========================================================= */
4
5
html {
6
font-size:12px;
7
}
8
9
body {
10
margin:0;
11
padding:0;
12
13
font-family:system-ui,-apple-system,,
14
"Segoe UI",,Helvetica,Arial,sans-serif;
15
16
line-height:1.5;
17
color:#222;
18
background-color:#fafafa;
19
}
20
21
22
/* =========================================================
23
Structural blocks
24
========================================================= */
25
26
header,
27
main,
28
footer,
29
section,
30
article {
31
display:block;
32
padding:1rem1.25rem;
33
}
34
35
header {
36
border-bottom:1pxsolid#ddd;
37
background-color:#ffffff;
38
}
39
40
footer {
41
border-top:1pxsolid#ddd;
42
font-size:0.875rem;
43
color:#666;
44
background-color:#ffffff;
45
}
46
47
48
/* =========================================================
49
Typography
50
========================================================= */
51
52
h1,
53
h2,
54
h3,
55
h4,
56
h5,
57
h6 {
58
margin:000.5rem0;
59
font-weight:600;
60
line-height:1.25;
61
}
62
63
h1 {font-size:1.75rem;}
64
h2 {font-size:1.4rem;}
65
h3 {font-size:1.15rem;}
66
67
p {
68
margin:000.75rem0;
69
}
70
71
small {
72
font-size:0.875rem;
73
color:#555;
74
}
75
76
77
/* =========================================================
78
Lists
79
========================================================= */
80
81
ul,
82
ol {
83
margin:001rem1.25rem;
84
padding:0;
85
}
86
87
li {
88
margin:0.25rem0;
89
}
90
91
92
/* =========================================================
93
Tables
94
========================================================= */
95
96
table {
97
width:100%;
98
border-collapse:collapse;
99
margin-bottom:1rem;
100
font-size:0.95rem;
101
}
102
103
thead {
104
background-color:#f0f0f0;
105
}
106
107
th,
108
td {
109
padding:0.5rem0.75rem;
110
text-align:left;
111
border:1pxsolid#ddd;
112
}
113
114
th {
115
font-weight:600;
116
}
117
118
119
/* =========================================================
120
Forms
121
========================================================= */
122
123
form {
124
margin-bottom:1rem;
125
}
126
127
label {
128
display:block;
129
margin-bottom:0.25rem;
130
font-weight:500;
131
}
132
133
input,
134
select,
135
textarea,
136
button {
137
font-family:inherit;
138
font-size:1rem;
139
}
140
141
input,
142
select,
143
textarea {
144
width:100%;
145
padding:0.4rem0.5rem;
146
margin-bottom:0.75rem;
147
148
border:1pxsolid#ccc;
149
border-radius:3px;
150
background-color:#ffffff;
151
}
152
153
textarea {
154
resize:vertical;
155
min-height:4rem;
156
}
157
158
button {
159
padding:0.45rem0.9rem;
160
border:1pxsolid#999;
161
border-radius:3px;
162
background-color:#f5f5f5;
163
cursor:pointer;
164
}
165
166
button:hover {
167
background-color:#eaeaea;
168
}
169
170
171
/* =========================================================
172
Inline elements
173
========================================================= */
174
175
a {
176
color:#0055aa;
177
text-decoration:none;
178
}
179
180
a:hover {
181
text-decoration:underline;
182
}
183
184
strong {
185
font-weight:600;
186
}
187
188
code {
189
font-family:ui-monospace,,,,monospace;
190
font-size:0.9em;
191
background-color:#f2f2f2;
192
padding:0.1rem0.25rem;
193
border-radius:3px;
194
}
195
196
197
/* =========================================================
198
Utility defaults (still element-based)
199
========================================================= */
200
201
hr {
202
border:none;
203
border-top:1pxsolid#ddd;
204
margin:1rem0;
205
}
206
207
208
/* =========================================================
209
Workout card
210
========================================================= */
211
212
. {
213
display:block;
214
padding:1rem1.25rem;
215
margin-bottom:1rem;
216
217
background-color:var(--bg-soft);
218
border:1pxsolidvar(--text-main);
219
border-radius:4px;
220
}
221
222
# {
223
margin:0auto;
224
padding:1rem;
225
max-width:40rem;
226
}
227