gave up and sorted files into a directory structure. made snippets for header, nav and footer. made it easier to add additional css files as themes. prepare a little for addition of a real template engine. added a css reset file to share between themes, if warranted.

2 files changed, 282 insertions, 0 deletions

diff --git a/css/microblog.css b/css/microblog.css
new file mode 100644
index 0000000..deb68c8
--- /dev/null
+++ b/css/microblog.css
@@ -0,0 +1,259 @@
+@import './reset.css';
+
+:root {
+	--primary-color: #007aff;
+	--secondary-color: #fffceb;
+
+	--background-color: #b5b5af;
+	--text-color: #080f15;
+}
+
+html {
+	font: 100%/1.4 system-ui, Helvetica, sans-serif;
+	background-color: var(--background-color);
+	color: var(--text-color);
+}
+
+.wrap {
+	width: min(95%, 40rem);
+	margin: 2rem auto;
+	padding: 1rem;
+	background-color: var(--secondary-color);
+	box-shadow: 0 1.25rem 1rem -1rem rgba(0,0,0,0.25);
+}
+
+.button {
+	display: block;
+	background: var(--primary-color);
+	color: var(--secondary-color);
+	text-decoration: none;
+	border-radius: 0.4rem;
+	padding: 0.2rem 0.5rem;
+	font-weight: bold;
+	text-align: center;
+}
+
+.button.alert {
+	background: coral;
+}
+
+nav.main ul {
+	display: flex;
+	margin-bottom: 2rem;
+}
+
+nav.main li {
+	list-style: none;
+	flex: 1;
+}
+
+nav.main li a {
+	/* inherits from .button */
+}
+
+nav.main li + li a {
+	margin-left: 0.2rem;
+}
+
+.wrap .posts {
+
+}
+
+.wrap .posts > li {
+	list-style: none;
+	margin-bottom: 1rem;
+	border-bottom: 1px solid rgba(0,0,0,0.1);
+	padding-bottom: 1rem;
+
+	display: grid;
+	grid-template-columns: repeat(6, 1fr);
+}
+
+.wrap .posts > li > * {
+	outline: 0px solid #f0f;
+}
+
+.wrap .posts > li:last-child {
+	margin-bottom: 2rem;
+	border-bottom: 0;
+	padding-bottom: 0;
+}
+
+.timeline .pagination { overflow: hidden; }
+.timeline .pagination a {
+	display: block;
+	background: var(--primary-color);
+	color: var(--secondary-color);
+	text-decoration: none;
+	border-radius: 0.4rem;
+	padding: 0.2rem 0.6rem;
+	font-weight: bold;
+	float: left;
+}
+.timeline .pagination .next { float: right; }
+
+.wrap .post-timestamp {
+	display: block;
+	color: var(--primary-color);
+	text-decoration: none;
+	font-size: 0.8rem;
+	text-transform: uppercase;
+	font-weight: bold;
+	margin-bottom: 0.5rem;
+	grid-column-start: span 3;
+}
+
+.wrap .post-meta {
+	grid-column-start: span 3;
+}
+
+.wrap .post-meta ul {
+	display: flex;
+	justify-content: flex-end;
+	gap: 0.75ch;
+}
+
+.wrap .post-meta li {
+	list-style: none;
+}
+
+.wrap .post-meta li a {
+	display: block;
+	color: hsla(0, 0%, 0%, 0.2);
+	mix-blend-mode: multiply;
+	text-decoration: none;
+	font-size: 0.8rem;
+	text-transform: uppercase;
+	font-weight: bold;
+	margin-bottom: 0.5rem;
+}
+
+.wrap .post-meta li a:is(:hover, :focus) {
+	color: currentColor;
+}
+
+.wrap .post-content {
+	font-size: 1.25rem;
+	overflow-wrap: break-word;
+	grid-column-start: span 6;
+}
+
+.wrap .post-content a {
+	color: var(--primary-color);
+	text-decoration: none;
+}
+
+.wrap form.delete {
+	width: 100%;
+	grid-column-start: span 6;
+	display: flex;
+	margin-block-start: 2rem;
+}
+
+.wrap form.delete input[type="submit"] {
+	flex: 1;
+	line-height: 1.4;
+	cursor: pointer;
+}
+
+.wrap .posts li .message {
+	width: 100%;
+	grid-column-start: span 6;
+	margin-block-start: 2rem;
+}
+
+.postform form,
+form.edit,
+.login form {
+	grid-column-start: span 6;
+	overflow: hidden;
+}
+
+:is(.postform, .edit) textarea {
+	width: 100%;
+	border: 2px solid var(--background-color);
+	background: #fff;
+	padding: 0.5rem;
+	font-size: 1.25rem;
+	resize: vertical;
+	min-height: 10rem;
+	margin-bottom: 0.5rem;
+}
+
+:is(.postform, .edit) textarea:focus {
+	border-color: var(--primary-color);
+	outline: none;
+}
+
+:is(.postform, .edit) input[type="submit"],
+.login input[type="submit"] {
+	-webkit-appearance: none;
+	appearance: none;
+	border: 0;
+	display: block;
+	background: var(--primary-color);
+	color: var(--secondary-color);
+	text-decoration: none;
+	border-radius: 0.4rem;
+	padding: 0.3rem 0.8rem 0.4rem;
+	font-weight: bold;
+	text-align: center;
+	cursor: pointer;
+	float: right;
+}
+
+:is(.postform, .edit) #count {
+	float: left;
+	color: var(--background-color);
+}
+
+:is(.postform, .edit) .message,
+.login .message {
+	background-color: #87b26c;
+	padding: 0.5rem;
+	color: var(--secondary-color);
+	border-radius: 0.4rem;
+	margin-bottom: 0.5rem;
+}
+
+:is(.postform, .edit) .error,
+.login .error {
+	background-color: #9c2128;
+}
+
+.login input[type="text"],
+.login input[type="password"] {
+	width: 100%;
+	border: 2px solid var(--background-color);
+	padding: 0.5rem;
+	font-size: 1.25rem;
+	resize: vertical;
+	margin-bottom: 0.5rem;
+}
+
+.login input[type="text"]:focus,
+.login input[type="password"]:focus {
+	border-color: var(--primary-color);
+	outline: none;
+}
+
+footer {
+	width: min(95%, 40rem);
+	margin: 0.5rem auto 2rem;
+}
+
+footer ul {
+	list-style: none;
+	display: flex;
+	justify-content: center;
+	gap: 1rem;
+}
+
+footer li a {
+	color: hsla(0, 0%, 0%, 0.3);
+	text-decoration: none;
+	font-size: 0.8rem;
+	text-transform: uppercase;
+	font-weight: bold;
+	margin-bottom: 0.5rem;
+}
diff --git a/css/reset.css b/css/reset.css
new file mode 100644
index 0000000..43415e4
--- /dev/null
+++ b/css/reset.css
@@ -0,0 +1,23 @@
+/*
+	The new CSS reset - version 1.7.3 (last updated 7.8.2022)
+	GitHub page: https://github.com/elad2412/the-new-css-reset
+*/
+*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
+	all: unset;
+	display: revert;
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+a, button { cursor: revert; }
+ol, ul, menu { list-style: none; }
+img { max-width: 100%; }
+table { border-collapse: collapse; }
+input, textarea { -webkit-user-select: auto; }
+textarea { white-space: revert; }
+::placeholder {	color: unset; }
+:where([hidden]) { display: none; }