www-app-microjournal/htdocs/journal.css

/* Colors */

:root {
	--page-background: #fff;
	--text-color: #000;
	--secondary-text-color: #888;
	--nav-background: #fff;
	--menu-background: #eee;
	--menu-border: #ccc;

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

@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;
	}
}

/* Base */

:root, input, textarea {
	font-family: Garamond, Times New Roman, serif;
	line-height: 1.25;
	font-size: 12pt;
}
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;
}
summary {
	-webkit-user-select: none;
	user-select: none;
}
summary.no-indicator {
	list-style-type: none;
}
summary.no-indicator::-webkit-details-marker {
	display: none;
}
.secondary-text {
	color: var(--secondary-text-color);
	font-size: 0.8rem;
}
details.menu ul {
	position: relative;
	z-index: 1;
	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;
}
details.menu li a {
	color: var(--highlight);
}
details.menu li a:hover {
	background-color: var(--highlight);
	color: black;
}
details.menu li {
}
details.menu li a {
	padding: 0.4em 1em;
	display: inline-block;
	position: relative;
	width: 10ch;
}
details.menu li + li {
	border-top: 1px solid var(--menu-border);
}
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);
}
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;
}
details[open] summary.menu-button > span:first-child {
	background-color: var(--highlight);
	color: white;
}


/* Navigation */

.top-nav {
	position: fixed;
	top: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	height: 2em;
	text-align: center;
	background-color: var(--nav-background);
	box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
}
.title {
	display: inline-block;
	font-size: 1.2rem;
	line-height: 1.2rem;
	font-weight: bold;
	padding-top: 0.4rem;
}
.menu-container {
	position: absolute;
	top: 0;
	right: 0;
}
.menu-container summary {
	text-align: right;
}

/* Content container */

.content {
	max-width: 66ch;
	margin: 2.5em 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 */

textarea {
	width: 100%;
	height: 8em;
	font-family: inherit;
	font-size: 1rem;
	margin: 0;
	box-sizing: border-box;
}
textarea::placeholder {
	font-size: 1rem;
}
.submit-post {
	text-align: right;
}
input[type="submit"] {
	margin-top: 0.5em;
	min-width: 15ch;
}

/* Posts */

.post-container {
	margin-top: 1.5rem;
}
.post {
	margin-top: 0.5em;
	margin-bottom: 1em;
}
.post p {
	margin: 0 0 1em 0;
}
.post p:last-child {
	margin: 0;
}
.post-date {
	margin-top: 0.5em;
}
.post-footer {
	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);
}


/* Mobile */

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