@charset "UTF-8";

html {
	--body-background: white;
	--header-background: #3c113e;
	--header-color: white;
	--text-background: white;
	--text-color: #222;
	--light-text-color: lighten(#222, 20%);
	--lighter-text-color: lighten(#222, 30%);
	--link-color: #0000ee;
	--visited-link-color: #551a8b;
	--gray: gray;
	--note-background: #fbf7c1;
	--blockquote-background: #eeeefd;
}

@media (prefers-color-scheme: dark) {
	html {
		--body-background: #113;
		--header-background: black;
		--text-background: #113;
		--text-color: #eef;
		--light-text-color: lighten(#eef, 20%);
		--lighter-text-color: lighten(#eef2, 30%);
		--link-color: #aaf;
		--visited-link-color: #b767ff;
		--gray: gray;
		--note-background: #867f11;
		--blockquote-background: #223;
	}
}

@import "opensans";

body {
	font-family: "Open Sans", sans-serif;
	background: var(--body-background);
	color: var(--text-color);
	font-size: 100%;
	padding: 0;
	margin: 0;
	display: flex;
	@media screen and (max-width: 50em) {
		flex-direction: column;
	}
}

a {
	color: var(--link-color);
	text-decoration: none;
	border-bottom: 0.1em dotted var(--link-color);
	&:visited {
		color: var(--visited-link-color);
		border-color: var(--visited-link-color);
	}
	&:hover {
		border-bottom-style: solid;
	}
}

header {
	background: var(--header-background);
	color: var(--header-color);
	display: inline-block;
	.header-title {
		font-size: 2em;
		font-weight: normal;
		text-transform: uppercase;
		margin: 4rem 1rem 2rem 1rem;
		padding: 0 0.5em;
		display: inline-block;
		transform: rotate(-2deg);
	}
	a {
		color: inherit;
		border-color: var(--header-color);
		&:visited {
			color: inherit;
			border-color: inherit;
		}
	}
	position: relative;
	z-index: 2;
	max-width: 20em;
	min-height: 100vh;
	p.contact {
		margin: 1rem 2rem;
	}
	nav {
		font-weight: bold;
		ul {
			margin: 1rem 2rem;
			padding: 0;
			list-style: none;
			li {
				margin: 0;
				padding: 0;
			}
		}
		span {
			display: block;
			font-size: 90%;
			font-weight: normal;
		}
	}
	.about {
		margin-top: 1em;
	}
	@media screen and (max-width: 50em) {
		.header-title {
			margin-top: 1em;
		}
		max-width: inherit;
		min-height: inherit;
		nav {
			ul {
				margin-top: 0;
				display: flex;
				flex-wrap: wrap;
				list-style: none;
				gap: 1em;
			}
			span {
				display: none;
			}
		}
		.about {
			margin-top: 0;
		}
	}
}

div.actions {
	position: absolute;
	top: 0.5rem;
	right: 1rem;
	z-index: 100;
	a {
		background: white;
		padding: 2px;
		border: 1px solid black;
		border-radius: 3px;
		color: black;
		margin-right: 1rem;
	}
}

main, footer {
	margin: 0 4em;
	padding: 1em;
	max-width: 70em;
	@media screen and (max-width: 50em) {
		margin: 0;
	}
}

main {
	position: relative;
	background: var(--text-background);
	min-height: 70vh;
	flex: 1;
}

article {
	margin-top: 2em;
	max-width: 50em;
	h1 {
		margin: 0;
		font-size: 400%;
		@media screen and (max-width: 50em) {
			font-size: 200%;
		}
		font-weight: bold;
		text-transform: uppercase;
	}
	.meta {
		padding-top: 0.5rem;
		padding-left: 0.5rem;
		color: var(--lighter-text-color);
	}
	div.figure {
		text-align: center;
		margin: 1em 0;
		img {
			border: 1px solid var(--gray);
			padding: 3px;
			max-width: 90%;
			max-height: 70vh;
		}
		.caption {
			margin-top: 0;
			font-style: italic;
		}
	}
	p {
		line-height: 160%;
	}
	code,
	pre.screen {
		background: #111;
		color: white;
		padding: 2px;
		overflow: auto;
	}
	div.note {
		background: var(--note-background);
		padding: 0.2em 0.5em 0.2em 2em;
		p {
			margin: 0.5em 0;
		}
	}
	blockquote {
		background: var(--blockquote-background);
		padding: 0.1em 1em;
		clip-path: polygon(0px 0px, 94.27% 2px, 99.63% 2.65%, 98.39% 97.48%, 10% 100%, 0% 100%, 0px 0px);
	}
}

.post-list {
	margin-top: 2em;
	h1 {
		margin: 0;
		font-size: 400%;
		@media screen and (max-width: 50em) {
			font-size: 200%;
		}
		font-weight: bold;
		text-transform: uppercase;
	}
	ul, li {
		margin: 0;
		padding: 0;
		list-style: none;
		display: inline-block;
	}
	li.unpublished {
		opacity: 0.5;
	}
	a {
		text-transform: uppercase;
		display: inline-block;
		text-decoration: none;
		font-size: 200%;
		font-weight: bold;
		padding-top: 0.5em;
		margin-right: 1em;
		span {
			font-size: 60%;
		}
	}
}

.older.post-list {
	margin: 5em 0 2em 0;
	padding: 1em 0;
	border-top: 0.1em dotted var(--link-color);
	border-bottom: 0.1em dotted var(--link-color);
	line-height: 200%;
	li {
		display: inline;
		a {
			padding-top: 0;
			display: inline;
			font-size: 120%;
		}
	}
}

footer {
	p {
		text-align: right;
		font-size: 100%;
	}
}

div[contenteditable=true]:focus-within {
	outline: 1px solid var(--gray);
	outline-offset: 3px;
}

.inline-style-popup,
.block-style-popup {
	background: white;
	box-shadow: 0 0 5px #666;
	input {
		display: none;
		padding: 3px;
		border: 1px inset #ccc;
		background: white;
		width: 0px;
		transition: width ease 2s;
		&.shown {
			display: inline-block;
			width: 400px;
		}
	}
	button {
		padding: 0 0.5em;
		height: 2em;
		text-align: center;
		background: #eee;
		border: 0px;
		&:hover {
			background: #ccc;
		}
		&[data-action=createLink] {
			color: blue;
			text-decoration: underline;
		}
		&.on {
			background: #444;
			color: white;
		}
	}
	&.inline-style-popup button {
		width: 2em;
		padding: 0;
	}
	&.block-style-popup {
		&.selected button {
			display: none;
			&.on {
				display: block;
			}
		}
	}
}

#quickedit {
	position: sticky;
	bottom: 10px;
	display: flex;
	justify-content: flex-end;
	label {
		display: inline-block;
		margin-left: 6px;
		cursor: pointer;
	}
	input {
		display: none;
	}

	button,
	span {
		display: inline-block;
		font-weight: normal;
		background: white;
		border: 1px solid #386ede;
		box-shadow: 0 0 0 5px white;
		padding: 1ex;
		border-radius: 3px;
		color: #386ede;
		font-size: inherit;
		letter-spacing: inherit;
		line-height: inherit;
	}
	button:hover {
		&:hover {
			color: white;
			background: #386ede;
		}
	}
	button.error {
		background: red;
		color: white;
		&:hover {
			background: darken(red, 10%);
		}
	}

	input:checked + span {
		background: #386ede;
		color: white;
	}
}

main.post {
	[contenteditable=true] div.figure {
		cursor: pointer;
	}
	div.figure {
		text-align: center;
		line-height: initial;
		span.empty::before {
			min-height: 50px;
			margin: 0 auto;
			display: block;
			width: 90%;
			background: #eee;
			padding: 1rem;
			font-size: 200px;
			content: "(image)";
			color: #aaa;
		}
	}
}

.wiki-anchor-auto {
	display: none;
}

#image-upload, #document-upload {
	display: none;
}