Ver código fonte

Refining CSS

master
Rocketsoup 3 anos atrás
pai
commit
cb61039f43
2 arquivos alterados com 200 adições e 123 exclusões
  1. 21
    17
      htdocs/index.php
  2. 179
    106
      htdocs/journal.css

+ 21
- 17
htdocs/index.php Ver arquivo

131
 		$date_iso = self::date_string($timestamp, iso: true);
131
 		$date_iso = self::date_string($timestamp, iso: true);
132
 		return "(updated <time datetime=\"{$date_iso}\" title=\"{$date_full}\">{$date}</time>)";
132
 		return "(updated <time datetime=\"{$date_iso}\" title=\"{$date_full}\">{$date}</time>)";
133
 	}
133
 	}
134
-	public const post_menu = "actions";
134
+	public const post_menu = "☰ Post";
135
 	public const post_menu_edit = "Edit";
135
 	public const post_menu_edit = "Edit";
136
 	public const post_menu_delete = "Delete";
136
 	public const post_menu_delete = "Delete";
137
 
137
 
138
 	// Search form
138
 	// Search form
139
+	public const search_placeholder = "Search terms";
139
 	public const search_submit = "Search";
140
 	public const search_submit = "Search";
140
 	public const search_cancel = "Cancel";
141
 	public const search_cancel = "Cancel";
141
 
142
 
948
 				<body>
949
 				<body>
949
 					<nav>
950
 					<nav>
950
 						<div class="top-nav">
951
 						<div class="top-nav">
951
-							<span class="title">{$str_title}</span>
952
+							<span class="title-container">
953
+								<span class="title">{$str_title}</span>
954
+							</span>
952
 			HTML
955
 			HTML
953
 		);
956
 		);
954
 		if (User::$current) {
957
 		if (User::$current) {
956
 			$str_search = L10n::menu_search;
959
 			$str_search = L10n::menu_search;
957
 			$str_log_out = L10n::menu_log_out;
960
 			$str_log_out = L10n::menu_log_out;
958
 			print(<<<HTML
961
 			print(<<<HTML
959
-							<div class="menu-container">
962
+							<div class="nav-menu-container">
960
 								<details class="menu">
963
 								<details class="menu">
961
 									<summary class="no-indicator menu-button"><span>{$str_hamburger}</span></summary>
964
 									<summary class="no-indicator menu-button"><span>{$str_hamburger}</span></summary>
962
 
965
 
1019
 		$str_placeholder = L10n::post_form_placeholder;
1022
 		$str_placeholder = L10n::post_form_placeholder;
1020
 		print(<<<HTML
1023
 		print(<<<HTML
1021
 			<form id="post-form" method="POST">
1024
 			<form id="post-form" method="POST">
1022
-				<div class="text-container"><textarea name="body" placeholder="$str_placeholder">$body_html</textarea></div>
1025
+				<div class="form-row"><textarea name="body" placeholder="$str_placeholder">$body_html</textarea></div>
1023
 				<input type="hidden" name="action" value="{$action}" />
1026
 				<input type="hidden" name="action" value="{$action}" />
1024
 			HTML
1027
 			HTML
1025
 		);
1028
 		);
1030
 		if ($edit_id) {
1033
 		if ($edit_id) {
1031
 			$url = BASE_URL;
1034
 			$url = BASE_URL;
1032
 			$str_cancel = L10n::post_form_cancel;
1035
 			$str_cancel = L10n::post_form_cancel;
1033
-			print("<a class=\"cancel-edit\" href=\"{$url}\">{$str_cancel}</a> ");
1036
+			print("<a class=\"pseudobutton back-button secondary-button\" href=\"{$url}\"><span>{$str_cancel}</span></a> ");
1034
 		}
1037
 		}
1035
 		print(<<<HTML
1038
 		print(<<<HTML
1036
-				<input type="submit" value="{$str_submit}" /></div>
1039
+				<input type="submit" value="{$str_submit}" class="forward-button primary-button" /></div>
1037
 			</form>
1040
 			</form>
1038
 			HTML
1041
 			HTML
1039
 		);
1042
 		);
1119
 		$q = validate($_GET, 'search', INPUT_TYPE_STRING | INPUT_TYPE_TRIMMED, required: false);
1122
 		$q = validate($_GET, 'search', INPUT_TYPE_STRING | INPUT_TYPE_TRIMMED, required: false);
1120
 		$q_html = htmlentities($q);
1123
 		$q_html = htmlentities($q);
1121
 		$cancel = BASE_URL;
1124
 		$cancel = BASE_URL;
1125
+		$str_placeholder = L10n::search_placeholder;
1122
 		$str_submit = L10n::search_submit;
1126
 		$str_submit = L10n::search_submit;
1123
 		$str_cancel = L10n::search_cancel;
1127
 		$str_cancel = L10n::search_cancel;
1124
 		print(<<<HTML
1128
 		print(<<<HTML
1125
 			<div class="form-container">
1129
 			<div class="form-container">
1126
 				<form id="search-form" method="GET">
1130
 				<form id="search-form" method="GET">
1127
-					<div>
1128
-						<input type="search" name="search" id="search" value="{$q_html}" size="40" autocapitalize="off" />
1131
+					<div class="form-row">
1132
+						<input type="search" name="search" id="search" value="{$q_html}" size="40" autocapitalize="off" placeholder="{$str_placeholder}" />
1129
 					</div>
1133
 					</div>
1130
 					<div class="form-buttons">
1134
 					<div class="form-buttons">
1131
-						<a class="cancel-search" href="{$cancel}">{$str_cancel}</a>
1132
-						<input type="submit" value="{$str_submit}" />
1135
+						<a class="pseudobutton back-button secondary-button" href="{$cancel}"><span>{$str_cancel}</span></a>
1136
+						<input type="submit" value="{$str_submit}" class="forward-button primary-button" />
1133
 					</div>
1137
 					</div>
1134
 				</form>
1138
 				</form>
1135
 			</div>
1139
 			</div>
1144
 		print(<<<HTML
1148
 		print(<<<HTML
1145
 			<div class="form-container">
1149
 			<div class="form-container">
1146
 				<form id="signin-form" method="POST">
1150
 				<form id="signin-form" method="POST">
1147
-					<div style="text-align: end;">
1151
+					<div class="form-row" style="text-align: end;">
1148
 						<label for="username">{$str_username}</label>
1152
 						<label for="username">{$str_username}</label>
1149
 						<input type="text" name="username" id="username" autocapitalize="off" autocorrect="off" />
1153
 						<input type="text" name="username" id="username" autocapitalize="off" autocorrect="off" />
1150
 					</div>
1154
 					</div>
1151
-					<div style="text-align: end;">
1155
+					<div class="form-row" style="text-align: end;">
1152
 						<label for="password">{$str_password}</label>
1156
 						<label for="password">{$str_password}</label>
1153
 						<input type="password" name="password" id="password" />
1157
 						<input type="password" name="password" id="password" />
1154
 					</div>
1158
 					</div>
1155
 					<input type="hidden" name="action" value="signin" />
1159
 					<input type="hidden" name="action" value="signin" />
1156
 					<div class="form-buttons">
1160
 					<div class="form-buttons">
1157
-						<input type="submit" value="{$str_submit}" />
1161
+						<input type="submit" value="{$str_submit}" class="forward-button primary-button" />
1158
 					</div>
1162
 					</div>
1159
 				</form>
1163
 				</form>
1160
 			</div>
1164
 			</div>
1171
 			<div class="important">{$str_prompt}</div>
1175
 			<div class="important">{$str_prompt}</div>
1172
 			<div class="form-container">
1176
 			<div class="form-container">
1173
 				<form id="setup-form" method="POST">
1177
 				<form id="setup-form" method="POST">
1174
-					<div style="text-align: end;">
1178
+					<div class="form-row" style="text-align: end;">
1175
 						<label for="username">{$str_username}</label>
1179
 						<label for="username">{$str_username}</label>
1176
 						<input type="text" id="username" name="username" autocapitalize="off" autocorrect="off" />
1180
 						<input type="text" id="username" name="username" autocapitalize="off" autocorrect="off" />
1177
 					</div>
1181
 					</div>
1178
-					<div style="text-align: end;">
1182
+					<div class="form-row" style="text-align: end;">
1179
 						<label for="password">{$str_password}</label>
1183
 						<label for="password">{$str_password}</label>
1180
 						<input type="password" id="password" name="password" />
1184
 						<input type="password" id="password" name="password" />
1181
 					</div>
1185
 					</div>
1182
-					<div>
1186
+					<div class="form-row">
1183
 						<label for="timezone">{$str_time_zone}</label>
1187
 						<label for="timezone">{$str_time_zone}</label>
1184
 						<select name="timezone" id="timezone">
1188
 						<select name="timezone" id="timezone">
1185
 			HTML
1189
 			HTML
1196
 						</select></div>
1200
 						</select></div>
1197
 					<input type="hidden" name="action" value="createaccount" />
1201
 					<input type="hidden" name="action" value="createaccount" />
1198
 					<div class="form-buttons">
1202
 					<div class="form-buttons">
1199
-						<input type="submit" value="{$str_submit}" />
1203
+						<input type="submit" value="{$str_submit}" class="forward-button primary-button" />
1200
 					</div>
1204
 					</div>
1201
 				</form>
1205
 				</form>
1202
 			</div>
1206
 			</div>

+ 179
- 106
htdocs/journal.css Ver arquivo

1
-/* Colors */
1
+/* Variables */
2
 
2
 
3
 :root {
3
 :root {
4
-	--page-background: #fff;
4
+	--page-background: #eee;
5
 	--text-color: #000;
5
 	--text-color: #000;
6
 	--secondary-text-color: #888;
6
 	--secondary-text-color: #888;
7
 	--nav-background: #fff;
7
 	--nav-background: #fff;
8
 	--menu-background: #eee;
8
 	--menu-background: #eee;
9
 	--menu-border: #ccc;
9
 	--menu-border: #ccc;
10
-
11
-	--highlight: #d83;
10
+	--menu-divider: #ddd;
11
+	--secondary-button-color: #ccc;
12
+	--post-background: #fff;
13
+	--highlight: #c72;
12
 	--highlight-contrast: #000;
14
 	--highlight-contrast: #000;
15
+
13
 	--error-text: #d00;
16
 	--error-text: #d00;
14
 	--error-background: #fcc;
17
 	--error-background: #fcc;
15
 	--error-border: #400;
18
 	--error-border: #400;
20
 	--destructive-contrast: #fff;
23
 	--destructive-contrast: #fff;
21
 
24
 
22
 	--font-size: 12pt;
25
 	--font-size: 12pt;
26
+	--font-ui: sans-serif;
27
+	--font-text: Garamond, Times New Roman, serif;
23
 }
28
 }
24
 
29
 
25
-@media(prefers-color-scheme: dark) {
30
+@media (prefers-color-scheme: dark) {
26
 	:root {
31
 	:root {
27
 		--page-background: #222;
32
 		--page-background: #222;
28
 		--text-color: #fff;
33
 		--text-color: #fff;
30
 		--nav-background: #444;
35
 		--nav-background: #444;
31
 		--menu-background: #444;
36
 		--menu-background: #444;
32
 		--menu-border: #000;
37
 		--menu-border: #000;
38
+		--menu-divider: #282828;
39
+		--secondary-button-color: #444;
40
+		--post-background: #444;
41
+		--highlight: #e94;
42
+		--highlight-contrast: #000;
43
+	}
44
+}
45
+
46
+@media screen and (max-width: 450px) {
47
+	:root {
48
+		--font-size: 19px;
33
 	}
49
 	}
34
 }
50
 }
35
 
51
 
36
-/* Base */
52
+/* General */
37
 
53
 
38
-:root, input, textarea {
39
-	font-family: Garamond, Times New Roman, serif;
40
-	line-height: 1.25;
54
+:root, input {
55
+	font-family: var(--font-ui);
41
 	font-size: var(--font-size);
56
 	font-size: var(--font-size);
57
+	line-height: 1.25;
42
 }
58
 }
43
 body, textarea, input, select {
59
 body, textarea, input, select {
44
 	background-color: var(--page-background);
60
 	background-color: var(--page-background);
52
 	color: var(--highlight);
68
 	color: var(--highlight);
53
 	text-decoration: none;
69
 	text-decoration: none;
54
 }
70
 }
71
+:focus {
72
+	outline: var(--highlight) solid 2px;
73
+}
74
+.secondary-text {
75
+	color: var(--secondary-text-color);
76
+	font-size: 0.8rem;
77
+}
78
+
79
+/* Forms */
80
+
81
+.form-container {
82
+	position: relative;
83
+	text-align: center;
84
+	margin-left: auto;
85
+	margin-right: auto;
86
+}
87
+.form-container form {
88
+	display: inline-block;
89
+	text-align: start;
90
+}
91
+textarea {
92
+	width: 100%;
93
+	height: 8em;
94
+	font-family: var(--font-text);
95
+	font-size: 1rem;
96
+	margin: 0;
97
+	padding: 0.5em;
98
+	border-radius: 0.2em;
99
+	box-sizing: border-box;
100
+	resize: vertical;
101
+}
102
+textarea::placeholder {
103
+	font-size: 1rem;
104
+}
105
+.form-row {
106
+	margin-bottom: 0.5em;
107
+}
108
+.form-buttons {
109
+	margin-top: 0.5em;
110
+	position: relative;
111
+	min-height: 44px;
112
+}
113
+textarea, input[type="text"], input[type="search"], input[type="password"] {
114
+	border: 1px solid var(--text-color);
115
+	font-size: 20px;
116
+	padding: 0.25em;
117
+}
118
+textarea:focus, input[type="text"]:focus, input[type="search"]:focus, input[type="password"]:focus {
119
+	border: 1px solid transparent;
120
+}
121
+input[type="submit"] {
122
+	-webkit-appearance: none;
123
+}
124
+a.pseudobutton {
125
+	display: flex;
126
+	align-items: center;
127
+	justify-content: center;
128
+	user-select: none;
129
+	-webkit-user-select: none;
130
+	-webkit-touch-callout: none;
131
+}
132
+input[type="submit"], .pseudobutton, .primary-button, .secondary-button {
133
+	padding: 0.3em 1.5em;
134
+	min-width: 12ch;
135
+	min-height: 44px;
136
+	border-radius: 0.2em;
137
+	font-size: 1rem;
138
+	box-sizing: border-box;
139
+	text-align: center;
140
+}
141
+.primary-button {
142
+	color: var(--highlight);
143
+	border: 1px solid var(--highlight);
144
+}
145
+.primary-button:hover {
146
+	background-color: var(--highlight);
147
+	color: var(--highlight-contrast);
148
+}
149
+.secondary-button {
150
+	color: var(--text-color);
151
+	border: 1px solid var(--secondary-button-color);
152
+}
153
+.secondary-button:hover {
154
+	background-color: var(--secondary-button-color);
155
+}
156
+.forward-button {
157
+	float: right;
158
+	float: inline-end;
159
+}
160
+.back-button {
161
+	float: left;
162
+	float: inline-start;
163
+}
164
+
165
+/* Menus */
166
+
55
 summary {
167
 summary {
168
+	/* prevent rapid clicking from selecting menu text */
56
 	-webkit-user-select: none;
169
 	-webkit-user-select: none;
57
 	user-select: none;
170
 	user-select: none;
58
 }
171
 }
62
 summary.no-indicator::-webkit-details-marker {
175
 summary.no-indicator::-webkit-details-marker {
63
 	display: none;
176
 	display: none;
64
 }
177
 }
65
-.secondary-text {
66
-	color: var(--secondary-text-color);
67
-	font-size: 0.8rem;
178
+summary.menu-button:hover {
179
+	color: var(--highlight);
180
+}
181
+summary.menu-button > span:first-child {
182
+	display: inline-block;
183
+	line-height: 1em;
184
+	padding: 0.5rem 0.7em;
185
+	margin: 0;
186
+	border-radius: 0.5em;
187
+}
188
+summary:focus {
189
+	outline-style: none;
190
+}
191
+details[open] summary.menu-button > span:first-child {
192
+	background-color: var(--highlight);
193
+	color: var(--highlight-contrast);
68
 }
194
 }
69
 details.menu ul {
195
 details.menu ul {
70
 	position: relative;
196
 	position: relative;
71
-	z-index: 1;
197
+	z-index: 2;
72
 	margin: 0;
198
 	margin: 0;
73
 	padding: 0;
199
 	padding: 0;
74
 	list-style-type: none;
200
 	list-style-type: none;
76
 	background-color: var(--menu-background);
202
 	background-color: var(--menu-background);
77
 	box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
203
 	box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
78
 	text-align: start;
204
 	text-align: start;
205
+	font-size: 1rem;
79
 }
206
 }
80
 details.menu li a {
207
 details.menu li a {
81
 	color: var(--highlight);
208
 	color: var(--highlight);
209
+	font-weight: bolder;
210
+	padding: 0.6em 1em;
211
+	display: inline-block;
212
+	position: relative;
213
+	width: 10ch;
82
 }
214
 }
83
 details.menu li a:hover {
215
 details.menu li a:hover {
84
 	background-color: var(--highlight);
216
 	background-color: var(--highlight);
85
 	color: var(--highlight-contrast);
217
 	color: var(--highlight-contrast);
86
 }
218
 }
87
-details.menu li {
88
-}
89
-details.menu li a {
90
-	padding: 0.4em 1em;
91
-	display: inline-block;
92
-	position: relative;
93
-	width: 10ch;
94
-}
95
 details.menu li + li {
219
 details.menu li + li {
96
-	border-top: 1px solid var(--menu-border);
220
+	border-top: 1px solid var(--menu-divider);
97
 }
221
 }
98
 details.menu li.menu-divider {
222
 details.menu li.menu-divider {
99
 	padding-top: 0.75em;
223
 	padding-top: 0.75em;
105
 	background-color: var(--destructive);
229
 	background-color: var(--destructive);
106
 	color: var(--destructive-contrast);
230
 	color: var(--destructive-contrast);
107
 }
231
 }
108
-summary.menu-button:hover {
109
-	color: var(--highlight);
110
-}
111
-summary.menu-button > span:first-child {
112
-	display: inline-block;
113
-	line-height: 1em;
114
-	padding: 0.5rem 0.7em;
115
-	margin: 0;
116
-	border-radius: 0.5em;
117
-}
118
-details[open] summary.menu-button > span:first-child {
119
-	background-color: var(--highlight);
120
-	color: var(--highlight-contrast);
121
-}
122
-.form-container {
123
-	position: relative;
124
-	text-align: center;
125
-	margin-left: auto;
126
-	margin-right: auto;
127
-}
128
-.form-container form {
129
-	display: inline-block;
130
-	text-align: start;
131
-}
132
-
133
 
232
 
134
 /* Navigation */
233
 /* Navigation */
135
 
234
 
138
 	top: 0;
237
 	top: 0;
139
 	inset-inline-start: 0;
238
 	inset-inline-start: 0;
140
 	inset-inline-end: 0;
239
 	inset-inline-end: 0;
141
-	height: 2em;
240
+	min-height: 44px;
241
+	z-index: 1;
142
 	text-align: center;
242
 	text-align: center;
143
 	background-color: var(--nav-background);
243
 	background-color: var(--nav-background);
144
 	box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
244
 	box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
145
 }
245
 }
246
+.title-container {
247
+	position: absolute;
248
+	display: flex;
249
+	align-items: center;
250
+	justify-content: center;
251
+	top: 0;
252
+	bottom: 0;
253
+	inset-inline-start: 0;
254
+	inset-inline-end: 0;
255
+}
146
 .title {
256
 .title {
147
-	display: inline-block;
148
 	font-size: 1.2rem;
257
 	font-size: 1.2rem;
149
-	line-height: 1.2rem;
150
 	font-weight: bold;
258
 	font-weight: bold;
151
-	padding-top: 0.4rem;
259
+	line-height: 1.2rem;
152
 }
260
 }
153
-.menu-container {
261
+.nav-menu-container {
154
 	position: absolute;
262
 	position: absolute;
155
-	top: 0;
263
+	top: 0.1rem;
156
 	right: 0;
264
 	right: 0;
157
 }
265
 }
158
-.menu-container summary {
266
+.nav-menu-container summary {
159
 	text-align: right;
267
 	text-align: right;
160
 }
268
 }
269
+.nav-menu-container .menu-button {
270
+	font-size: 1.2rem;
271
+}
161
 
272
 
162
 /* Content container */
273
 /* Content container */
163
 
274
 
164
 .content {
275
 .content {
165
 	max-width: 66ch;
276
 	max-width: 66ch;
166
-	margin: 2.5em auto 2em auto;
277
+	margin: 3em auto 2em auto;
167
 	padding: 0.5em;
278
 	padding: 0.5em;
168
 }
279
 }
169
 
280
 
187
 
298
 
188
 /* Post form */
299
 /* Post form */
189
 
300
 
190
-textarea {
191
-	width: 100%;
192
-	height: 8em;
193
-	font-family: inherit;
194
-	font-size: 1rem;
195
-	margin: 0;
196
-	box-sizing: border-box;
197
-}
198
-textarea::placeholder {
199
-	font-size: 1rem;
200
-}
201
 .submit-post {
301
 .submit-post {
202
 	text-align: right;
302
 	text-align: right;
203
 }
303
 }
204
-.cancel-edit {
205
-	display: inline-block;
206
-	padding-inline-end: 2em;
207
-}
208
-.form-buttons {
209
-	text-align: end;
210
-}
211
-input[type="submit"] {
212
-	margin-top: 0.5em;
213
-	min-width: 15ch;
214
-	padding: 0.3em 1.5em;
215
-	color: var(--highlight);
216
-	border: 1px solid var(--highlight);
217
-	border-radius: 0.2em;
218
-	font-size: 1rem;
219
-	-webkit-appearance: none;
220
-}
221
-input[type="submit"]:hover {
222
-	background-color: var(--highlight);
223
-	color: var(--highlight-contrast);
224
-}
225
 
304
 
226
 /* Search */
305
 /* Search */
227
 
306
 
228
 #search-form input[type="search"] {
307
 #search-form input[type="search"] {
229
 	width: 100%;
308
 	width: 100%;
230
 }
309
 }
231
-.cancel-search {
232
-	display: inline-block;
233
-	padding-inline-end: 1em;
234
-}
235
 
310
 
236
 /* Posts */
311
 /* Posts */
237
 
312
 
238
 .post-container {
313
 .post-container {
239
-	margin-top: 1.5rem;
314
+	margin-top: 2.5rem;
240
 }
315
 }
241
 .post {
316
 .post {
242
 	margin-top: 0.5em;
317
 	margin-top: 0.5em;
243
-	margin-bottom: 1em;
318
+	margin-bottom: 2em;
319
+}
320
+.post-body {
321
+	font-family: var(--font-text);
322
+	background-color: var(--post-background);
323
+	padding: 0.5em;
324
+	box-shadow: 0 0.15rem 0.15rem rgba(0, 0, 0, 0.25);
244
 }
325
 }
245
-.post p {
326
+.post-body p {
246
 	margin: 0 0 1em 0;
327
 	margin: 0 0 1em 0;
247
 }
328
 }
248
-.post p:last-child {
329
+.post-body p:last-child {
249
 	margin: 0;
330
 	margin: 0;
250
 }
331
 }
251
-.post-date {
252
-	margin-top: 0.5em;
253
-}
254
 .post-footer {
332
 .post-footer {
333
+	margin-top: 0.5em;
255
 	position: relative;
334
 	position: relative;
256
 }
335
 }
257
 .post-actions {
336
 .post-actions {
273
 	background-color: var(--destructive);
352
 	background-color: var(--destructive);
274
 	color: var(--destructive-contrast);
353
 	color: var(--destructive-contrast);
275
 }
354
 }
276
-
277
-
278
-/* Mobile */
279
-
280
-@media screen and (max-width: 450px) {
281
-	:root {
282
-		--font-size: 16px;
283
-	}
355
+.next {
356
+	text-align: end;
284
 }
357
 }

Carregando…
Cancelar
Salvar