[Pharo] Personal fitness tracker web app.

Add main CSS stylesheet as a separate file.

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