ialbert
/
www-app-microjournal
Observar 1
Favorito 0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
Ver código fonte

Refining CSS

master
Rocketsoup 3 anos atrás
pai
9cebf7e554
commit
cb61039f43
2 arquivos alterados com 200 adições e 123 exclusões
Visão unificada Mostrar estatísticas do Diff
  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 
 }

Escrever Pré-visualização
Carregando…
Cancelar
Salvar