ialbert
/
www-app-microjournal
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Refining CSS

master
Rocketsoup 3 years ago
parent
9cebf7e554
commit
cb61039f43
2 changed files with 200 additions and 123 deletions
Split View Show Diff Stats
  1. 21
    17
      htdocs/index.php
  2. 179
    106
      htdocs/journal.css

+ 21
- 17
htdocs/index.php View File 

@@ -131,11 +131,12 @@ class L10n {
131 131 
 		$date_iso = self::date_string($timestamp, iso: true);
132 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 135 
 	public const post_menu_edit = "Edit";
136 136 
 	public const post_menu_delete = "Delete";
137 137
138 138 
 	// Search form
139 
+	public const search_placeholder = "Search terms";
139 140 
 	public const search_submit = "Search";
140 141 
 	public const search_cancel = "Cancel";
141 142 
 
@@ -948,7 +949,9 @@ class HTMLPage {
948 949 
 				<body>
949 950 
 					<nav>
950 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 955 
 			HTML
953 956 
 		);
954 957 
 		if (User::$current) {
 
@@ -956,7 +959,7 @@ class HTMLPage {
956 959 
 			$str_search = L10n::menu_search;
957 960 
 			$str_log_out = L10n::menu_log_out;
958 961 
 			print(<<<HTML
959 
-							<div class="menu-container">
962 
+							<div class="nav-menu-container">
960 963 
 								<details class="menu">
961 964 
 									<summary class="no-indicator menu-button"><span>{$str_hamburger}</span></summary>
962 965 
 
@@ -1019,7 +1022,7 @@ class HTMLPage {
1019 1022 
 		$str_placeholder = L10n::post_form_placeholder;
1020 1023 
 		print(<<<HTML
1021 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 1026 
 				<input type="hidden" name="action" value="{$action}" />
1024 1027 
 			HTML
1025 1028 
 		);
 
@@ -1030,10 +1033,10 @@ class HTMLPage {
1030 1033 
 		if ($edit_id) {
1031 1034 
 			$url = BASE_URL;
1032 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 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 1040 
 			</form>
1038 1041 
 			HTML
1039 1042 
 		);
 
@@ -1119,17 +1122,18 @@ class HTMLPage {
1119 1122 
 		$q = validate($_GET, 'search', INPUT_TYPE_STRING | INPUT_TYPE_TRIMMED, required: false);
1120 1123 
 		$q_html = htmlentities($q);
1121 1124 
 		$cancel = BASE_URL;
1125 
+		$str_placeholder = L10n::search_placeholder;
1122 1126 
 		$str_submit = L10n::search_submit;
1123 1127 
 		$str_cancel = L10n::search_cancel;
1124 1128 
 		print(<<<HTML
1125 1129 
 			<div class="form-container">
1126 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 1133 
 					</div>
1130 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 1137 
 					</div>
1134 1138 
 				</form>
1135 1139 
 			</div>
 
@@ -1144,17 +1148,17 @@ class HTMLPage {
1144 1148 
 		print(<<<HTML
1145 1149 
 			<div class="form-container">
1146 1150 
 				<form id="signin-form" method="POST">
1147 
-					<div style="text-align: end;">
1151 
+					<div class="form-row" style="text-align: end;">
1148 1152 
 						<label for="username">{$str_username}</label>
1149 1153 
 						<input type="text" name="username" id="username" autocapitalize="off" autocorrect="off" />
1150 1154 
 					</div>
1151 
-					<div style="text-align: end;">
1155 
+					<div class="form-row" style="text-align: end;">
1152 1156 
 						<label for="password">{$str_password}</label>
1153 1157 
 						<input type="password" name="password" id="password" />
1154 1158 
 					</div>
1155 1159 
 					<input type="hidden" name="action" value="signin" />
1156 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 1162 
 					</div>
1159 1163 
 				</form>
1160 1164 
 			</div>
 
@@ -1171,15 +1175,15 @@ class HTMLPage {
1171 1175 
 			<div class="important">{$str_prompt}</div>
1172 1176 
 			<div class="form-container">
1173 1177 
 				<form id="setup-form" method="POST">
1174 
-					<div style="text-align: end;">
1178 
+					<div class="form-row" style="text-align: end;">
1175 1179 
 						<label for="username">{$str_username}</label>
1176 1180 
 						<input type="text" id="username" name="username" autocapitalize="off" autocorrect="off" />
1177 1181 
 					</div>
1178 
-					<div style="text-align: end;">
1182 
+					<div class="form-row" style="text-align: end;">
1179 1183 
 						<label for="password">{$str_password}</label>
1180 1184 
 						<input type="password" id="password" name="password" />
1181 1185 
 					</div>
1182 
-					<div>
1186 
+					<div class="form-row">
1183 1187 
 						<label for="timezone">{$str_time_zone}</label>
1184 1188 
 						<select name="timezone" id="timezone">
1185 1189 
 			HTML
 
@@ -1196,7 +1200,7 @@ class HTMLPage {
1196 1200 
 						</select></div>
1197 1201 
 					<input type="hidden" name="action" value="createaccount" />
1198 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 1204 
 					</div>
1201 1205 
 				</form>
1202 1206 
 			</div>

+ 179
- 106
htdocs/journal.css View File 

@@ -1,15 +1,18 @@
1 
-/* Colors */
1 
+/* Variables */
2 2
3 3 
 :root {
4 
-	--page-background: #fff;
4 
+	--page-background: #eee;
5 5 
 	--text-color: #000;
6 6 
 	--secondary-text-color: #888;
7 7 
 	--nav-background: #fff;
8 8 
 	--menu-background: #eee;
9 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 14 
 	--highlight-contrast: #000;
15 
+
13 16 
 	--error-text: #d00;
14 17 
 	--error-background: #fcc;
15 18 
 	--error-border: #400;
 
@@ -20,9 +23,11 @@
20 23 
 	--destructive-contrast: #fff;
21 24
22 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 31 
 	:root {
27 32 
 		--page-background: #222;
28 33 
 		--text-color: #fff;
 
@@ -30,15 +35,26 @@
30 35 
 		--nav-background: #444;
31 36 
 		--menu-background: #444;
32 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 56 
 	font-size: var(--font-size);
57 
+	line-height: 1.25;
42 58 
 }
43 59 
 body, textarea, input, select {
44 60 
 	background-color: var(--page-background);
 
@@ -52,7 +68,104 @@ a {
52 68 
 	color: var(--highlight);
53 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 167 
 summary {
168 
+	/* prevent rapid clicking from selecting menu text */
56 169 
 	-webkit-user-select: none;
57 170 
 	user-select: none;
58 171 
 }
 
@@ -62,13 +175,26 @@ summary.no-indicator {
62 175 
 summary.no-indicator::-webkit-details-marker {
63 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 195 
 details.menu ul {
70 196 
 	position: relative;
71 
-	z-index: 1;
197 
+	z-index: 2;
72 198 
 	margin: 0;
73 199 
 	padding: 0;
74 200 
 	list-style-type: none;
 
@@ -76,24 +202,22 @@ details.menu ul {
76 202 
 	background-color: var(--menu-background);
77 203 
 	box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
78 204 
 	text-align: start;
205 
+	font-size: 1rem;
79 206 
 }
80 207 
 details.menu li a {
81 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 215 
 details.menu li a:hover {
84 216 
 	background-color: var(--highlight);
85 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 219 
 details.menu li + li {
96 
-	border-top: 1px solid var(--menu-border);
220 
+	border-top: 1px solid var(--menu-divider);
97 221 
 }
98 222 
 details.menu li.menu-divider {
99 223 
 	padding-top: 0.75em;
 
@@ -105,31 +229,6 @@ details.menu li.destructive a:hover {
105 229 
 	background-color: var(--destructive);
106 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 233 
 /* Navigation */
135 234 
 
@@ -138,32 +237,44 @@ details[open] summary.menu-button > span:first-child {
138 237 
 	top: 0;
139 238 
 	inset-inline-start: 0;
140 239 
 	inset-inline-end: 0;
141 
-	height: 2em;
240 
+	min-height: 44px;
241 
+	z-index: 1;
142 242 
 	text-align: center;
143 243 
 	background-color: var(--nav-background);
144 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 256 
 .title {
147 
-	display: inline-block;
148 257 
 	font-size: 1.2rem;
149 
-	line-height: 1.2rem;
150 258 
 	font-weight: bold;
151 
-	padding-top: 0.4rem;
259 
+	line-height: 1.2rem;
152 260 
 }
153 
-.menu-container {
261 
+.nav-menu-container {
154 262 
 	position: absolute;
155 
-	top: 0;
263 
+	top: 0.1rem;
156 264 
 	right: 0;
157 265 
 }
158 
-.menu-container summary {
266 
+.nav-menu-container summary {
159 267 
 	text-align: right;
160 268 
 }
269 
+.nav-menu-container .menu-button {
270 
+	font-size: 1.2rem;
271 
+}
161 272
162 273 
 /* Content container */
163 274
164 275 
 .content {
165 276 
 	max-width: 66ch;
166 
-	margin: 2.5em auto 2em auto;
277 
+	margin: 3em auto 2em auto;
167 278 
 	padding: 0.5em;
168 279 
 }
169 280 
 
@@ -187,71 +298,39 @@ details[open] summary.menu-button > span:first-child {
187 298
188 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 301 
 .submit-post {
202 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 305 
 /* Search */
227 306
228 307 
 #search-form input[type="search"] {
229 308 
 	width: 100%;
230 309 
 }
231 
-.cancel-search {
232 
-	display: inline-block;
233 
-	padding-inline-end: 1em;
234 
-}
235 310
236 311 
 /* Posts */
237 312
238 313 
 .post-container {
239 
-	margin-top: 1.5rem;
314 
+	margin-top: 2.5rem;
240 315 
 }
241 316 
 .post {
242 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 327 
 	margin: 0 0 1em 0;
247 328 
 }
248 
-.post p:last-child {
329 
+.post-body p:last-child {
249 330 
 	margin: 0;
250 331 
 }
251 
-.post-date {
252 
-	margin-top: 0.5em;
253 
-}
254 332 
 .post-footer {
333 
+	margin-top: 0.5em;
255 334 
 	position: relative;
256 335 
 }
257 336 
 .post-actions {
 
@@ -273,12 +352,6 @@ details.menu li.post-action-delete a:hover {
273 352 
 	background-color: var(--destructive);
274 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 
 }

Write Preview
Loading…
Cancel
Save