www-app-microjournal/htdocs/journal.css

/* Variables */

:root {
	--page-background: #eee;
	--text-color: #000;
	--secondary-text-color: #888;
	--nav-background: #fff;
	--menu-background: #eee;
	--menu-border: #ccc;
	--menu-divider: #ddd;
	--secondary-button-color: #ccc;
	--post-background: #fff;
	--highlight: #c72;
	--highlight-contrast: #000;

	--error-text: #d00;
	--error-background: #fcc;
	--error-border: #400;
	--callout-text: #000;
	--callout-background: #ffc;
	--callout-border: #886;
	--destructive: #e00;
	--destructive-contrast: #fff;

	--font-size: 12pt;
	--font-ui: sans-serif;
	--font-text: Garamond, Times New Roman, serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--page-background: #222;
		--text-color: #fff;
		--secondary-text-color: #888;
		--nav-background: #444;
		--menu-background: #444;
		--menu-border: #000;
		--menu-divider: #282828;
		--secondary-button-color: #444;
		--post-background: #444;
		--highlight: #e94;
		--highlight-contrast: #000;
	}
}

@media screen and (max-width: 450px) {
	:root {
		--font-size: 19px;
	}
}

/* General */

:root, input {
	font-family: var(--font-ui);
	font-size: var(--font-size);
	line-height: 1.25;
}
body, textarea, input, select {
	background-color: var(--page-background);
	color: var(--text-color);
}
body {
	margin: 0;
	padding: 0;
}
a {
	color: var(--highlight);
	text-decoration: none;
}
:focus {
	outline: var(--highlight) solid 2px;
}
.secondary-text {
	color: var(--secondary-text-color);
	font-size: 0.8rem;
}

/* Forms */

.form-container {
	position: relative;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.form-container form {
	display: inline-block;
	text-align: start;
}
textarea {
	width: 100%;
	height: 8em;
	font-family: var(--font-text);
	font-size: 1rem;
	margin: 0;
	padding: 0.5em;
	border-radius: 0.2em;
	box-sizing: border-box;
	resize: vertical;
}
textarea::placeholder {
	font-size: 1rem;
}
.form-row {
	margin-bottom: 0.5em;
}
.form-buttons {
	margin-top: 0.5em;
	position: relative;
	min-height: 44px;
}
textarea, input[type="text"], input[type="search"], input[type="password"] {
	border: 1px solid var(--text-color);
	font-size: 20px;
	padding: 0.25em;
}
textarea:focus, input[type="text"]:focus, input[type="search"]:focus, input[type="password"]:focus {
	border: 1px solid transparent;
}
input[type="submit"] {
	-webkit-appearance: none;
}
a.pseudobutton {
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
input[type="submit"], .pseudobutton, .primary-button, .secondary-button {
	padding: 0.3em 1.5em;
	min-width: 12ch;
	min-height: 44px;
	border-radius: 0.2em;
	font-size: 1rem;
	box-sizing: border-box;
	text-align: center;
}
.primary-button {
	color: var(--highlight);
	border: 1px solid var(--highlight);
}
.primary-button:hover {
	background-color: var(--highlight);
	color: var(--highlight-contrast);
}
.secondary-button {
	color: var(--text-color);
	border: 1px solid var(--secondary-button-color);
}
.secondary-button:hover {
	background-color: var(--secondary-button-color);
}
.forward-button {
	float: right;
	float: inline-end;
}
.back-button {
	float: left;
	float: inline-start;
}

/* Menus */

summary {
	/* prevent rapid clicking from selecting menu text */
	-webkit-user-select: none;
	user-select: none;
}
summary.no-indicator {
	list-style-type: none;
}
summary.no-indicator::-webkit-details-marker {
	display: none;
}
summary.menu-button:hover {
	color: var(--highlight);
}
summary.menu-button > span:first-child {
	display: inline-block;
	line-height: 1em;
	padding: 0.5rem 0.7em;
	margin: 0;
	border-radius: 0.5em;
}
summary:focus {
	outline-style: none;
}
details[open] summary.menu-button > span:first-child {
	background-color: var(--highlight);
	color: var(--highlight-contrast);
}
details.menu ul {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 0;
	list-style-type: none;
	border: 1px solid var(--menu-border);
	background-color: var(--menu-background);
	box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
	text-align: start;
	font-size: 1rem;
}
details.menu li a {
	color: var(--highlight);
	font-weight: bolder;
	padding: 0.6em 1em;
	display: inline-block;
	position: relative;
	width: 10ch;
}
details.menu li a:hover {
	background-color: var(--highlight);
	color: var(--highlight-contrast);
}
details.menu li + li {
	border-top: 1px solid var(--menu-divider);
}
details.menu li.menu-divider {
	padding-top: 0.75em;
}
details.menu li.destructive a {
	color: var(--destructive);
}
details.menu li.destructive a:hover {
	background-color: var(--destructive);
	color: var(--destructive-contrast);
}

/* Navigation */

.top-nav {
	position: fixed;
	top: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	min-height: 44px;
	z-index: 1;
	text-align: center;
	background-color: var(--nav-background);
	box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
}
.title-container {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	bottom: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
}
.title {
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.2rem;
}
.nav-menu-container {
	position: absolute;
	top: 0.1rem;
	right: 0;
}
.nav-menu-container summary {
	text-align: right;
}
.nav-menu-container .menu-button {
	font-size: 1.2rem;
}

/* Content container */

.content {
	max-width: 66ch;
	margin: 3em auto 2em auto;
	padding: 0.5em;
}

/* Errors and alerts */

.error {
	padding: 1em;
	border: 1px solid var(--error-border);
	background-color: var(--error-background);
	color: var(--error-text);
	font-weight: bold;
	margin-bottom: 1em;
}
.important {
	padding: 1em;
	border: 1px solid var(--callout-border);
	background-color: var(--callout-background);
	color: var(--callout-text);
	margin-bottom: 1em;
}

/* Post form */

.submit-post {
	text-align: right;
}

/* Search */

#search-form input[type="search"] {
	width: 100%;
}

/* Posts */

.post-container {
	margin-top: 2.5rem;
}
.post {
	margin-top: 0.5em;
	margin-bottom: 2em;
}
.post-body {
	font-family: var(--font-text);
	background-color: var(--post-background);
	padding: 0.5em;
	box-shadow: 0 0.15rem 0.15rem rgba(0, 0, 0, 0.25);
}
.post-body p {
	margin: 0 0 1em 0;
}
.post-body p:last-child {
	margin: 0;
}
.post-footer {
	margin-top: 0.5em;
	position: relative;
}
.post-actions {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
}
.post-actions summary {
	text-align: end;
}
.post-actions summary > span:first-child {
	padding-top: 0;
	padding-bottom: 0;
}
details.menu li.post-action-delete a {
	color: var(--destructive);
}
details.menu li.post-action-delete a:hover {
	background-color: var(--destructive);
	color: var(--destructive-contrast);
}
.next {
	text-align: end;
}