$color: hsl(323,100%,65%);
%sans { font-family: "Alegreya Sans", "Open Sans", sans-serif; }
%serif { font-family: Alegreya, GaramondNo8, "Garamond Premier Pro", "Adobe Garamond", Garamond, Junicode, serif; }
%teletype { font-family: "Inconsolata LGC", Inconsolata, monospace; font-size: 12pt !important; }

@function tone($pct, $alpha: 0) { @return adjust-color($color, $lightness: $pct, $alpha: $alpha) }

body {
	@extend %sans;
	background-color: tone(-55%);
	color: tone(25%);
	font-size: 14pt;
	margin: 0;
	padding: 0;
}
a[href] {
	color: tone(10%);
	text-decoration-color: tone(10%,-0.5);
	&:hover {
		color: white;
		text-shadow: 0 0 15px tone(20%);
		text-decoration-color: tone(10%,-0.1);
	}
}
a[href^="//"],
a[href^="http://"],
a[href^="https://"] { // external link
	&:hover::after {
		color: black;
		background-color: white;
	}
	&::after {
		content: "↗";
		display: inline-block;
		color: black;
		margin-left: 4pt;
		background-color: tone(10%);
		padding: 0 4px;
		text-shadow: none;
		padding-right: 5px;
		vertical-align: baseline;
		font-size: 80%;
	}
}

%content {
	width: 8in;
	margin: auto;
}

%glow {
	box-shadow: 0 0 20px tone(0%,-0.8);
}

%button {
	@extend %sans;
	font-size: 14pt;
	padding: 0.1in 0.2in;
	border: 1px solid black;
	color: tone(25%);
	text-shadow: 1px 1px black;
	text-decoration: none;
	text-align: center;
	cursor: default;
	background: linear-gradient(to bottom,
		tone(-47%),
		tone(-50%) 15%,
		tone(-50%) 75%,
		tone(-53%)
	);
	&:hover, &:focus {
		@extend %glow;
		outline: none;
		color: tone(-55%);
		text-shadow: none;
		background: linear-gradient(to bottom,
			tone(-27%),
			tone(-30%) 15%,
			tone(-30%) 75%,
			tone(-35%)
		);
	}
	&:active {
		color: black;
		padding-bottom: calc(0.1in - 2px);
		padding-top: calc(0.1in + 2px);
		background: linear-gradient(to top,
			tone(-25%),
			tone(-30%) 15%,
			tone(-30%) 75%,
			tone(-35%)
		);
	}
}

button { @extend %button;
	&:first-of-type {
		@extend %button;
		color: white;
		box-shadow: inset 0 1px  tone(-25%),
		            inset 0 -1px tone(-50%);
		background: linear-gradient(to bottom,
			tone(-35%),
			tone(-40%) 15%,
			tone(-40%) 75%,
			tone(-45%)
		);
		&:hover, &:focus {
			box-shadow: inset 0 1px  tone(-15%),
						inset 0 -1px tone(-40%);
		}
		&:active {
			box-shadow: inset 0 1px  tone(-50%),
						inset 0 -1px tone(-25%);
			background: linear-gradient(to top,
				tone(-30%),
				tone(-35%) 15%,
				tone(-35%) 75%,
				tone(-40%)
			);
		}
	}
	&:hover { font-weight: bold; }
}

$grad-ui-focus: linear-gradient(to bottom,
	tone(-50%),
	tone(-35%)
);

input[type='text'], input[type='password'], textarea {
	@extend %serif;
	padding: 0.08in 0.1in;
	box-sizing: border-box;
	border: 1px solid black;
	background: linear-gradient(to bottom, tone(-55%), tone(-40%));
	font-size: 16pt;
	color: tone(25%);
	box-shadow: inset 0 0 20px -3px tone(-55%);
	&:focus {
		color: white;
		border-image: linear-gradient(to bottom, tone(-10%), tone(-30%)) 1 / 1px;
		background: $grad-ui-focus;
		outline: none;
		@extend %glow;
	}
}

@mixin glass {
	@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
		backdrop-filter: blur(40px);
		-webkit-backdrop-filter: blur(40px);
		background-color: tone(-53%, -0.7);
	}
	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		background-color: tone(-53%, -0.1);
	}
}

h1 { margin-top: 0 }

header {
	position: fixed;
	height: min-content;
	width: 100vw;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid black;
	z-index: 1;
	@include glass;
	background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3));
	> div {
		position: relative;
		max-width: 10in;
		margin: auto;

		display: grid;
		grid-template-columns: 1fr max-content;
		grid-template-rows: 1fr;
		h1 {
			all: unset;
			display: block;
			font-size: 1.4em;
			padding: 0.25in 0;
			text-shadow: 2px 2px 1px black;
			grid-column: 1/2; grid-row: 1/2;
		}
		nav {
			all: unset;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			grid-column: 2/3; grid-row: 1/2;
			> a[href] {
				display: block;
				padding: 0.25in 0.10in;
				//padding: calc((25% - 1em)/2) 0.15in;
				&, &::after { transition: 0.3s; }
				text-shadow: 1px 1px 1px black;
				&:hover{
					transform: scale(120%);
				}
			}
		}
	}
}

main {
	@extend %content;
	display: block;
	position: relative;
	min-height: calc(100vh - 1.1in);
	margin-top: 0;
	margin-bottom: 0;
	padding: 0 0.4in;
	padding-top: 1.1in;
	padding-bottom: 0.1in;
	background-color: tone(-45%,-0.3);
	border: {
		left: 1px solid black;
		right: 1px solid black;
	}
}

div.profile {
	padding: 0.1in;
	position: relative;
	display: grid;
	margin-bottom: 0.4in;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: max-content 1fr;
	width: 100%;
	> .banner {
		grid-column: 1 / 3;
		grid-row: 1 / 2;
		display: grid;
		grid-template-columns: 1.1in 1fr;
		grid-template-rows: max-content 1fr;
		> .avatar {
			display: block;
			width: 1in; height: 1in;
			grid-column: 1 / 2;
			grid-row: 1 / 3;
			border: 1px solid black;
		}
		> .id {
			grid-column: 2 / 3;
			grid-row: 1 / 2;
			color: tone(25%,-0.4);
			> .nym {
				font-weight: bold;
				color: tone(25%);
			}
			> .xid {
				color: tone(20%,-0.1);
				font-size: 80%;
				vertical-align: text-top;
			}
		}
		> .bio {
			grid-column: 2 / 3;
			grid-row: 2 / 3;
		}
	}
	> .stats {
		grid-column: 3 / 4;
		grid-row: 1 / 3;
	}
	> .menu {
		grid-column: 1 / 3; grid-row: 2 / 3;
		padding-top: 0.075in;
		flex-wrap: wrap;
		display: flex;
		justify-content: center;
		align-items: center;
		> a[href] {
			@extend %button;
			display: block;
			margin: 0.025in 0.05in;
		}
		> hr {
			all: unset;
			display: block;
			height: 0.3in;
			width: 1px;
			border-left: 1px solid rgba(0,0,0,0.6);
		}
	}
}

.epithet {
	display: inline-block;
	background: tone(20%);
	color: tone(-45%);
	text-shadow: 0 0 3px tone(-30%, -0.4);
	border-radius: 3px;
	padding: 6px;
	padding-top: 2px;
	padding-bottom: 4px;
	font-size: 80%;
	vertical-align: top;
	font-weight: 300;
	letter-spacing: 0.5px;
	margin: 0 5pt;
	// transform: scale(80%) translateX(-10pt); // cheating!
}

%box {
	margin: auto;
	border: 1px solid tone(-55%);
	border-bottom: 3px solid black;
	box-shadow: 0 0 1px black;
	border-image: linear-gradient(to bottom,
		tone(-40%),
		tone(-52%) 10%,
		tone(-55%) 90%,
		tone(-60%)
	) 1 / 1px;
	background: linear-gradient(to bottom,
		tone(-58%),
		tone(-55%) 10%,
		tone(-50%) 80%,
		tone(-45%)
	);
	// outline: 1px solid black;
}

body.error .message {
	@extend %box;
	width: 4in;
	margin:auto;
	padding: 0.5in;
	text-align: center;
}

div.login {
	@extend %box;
	width: 4in;
	padding: 0.4in;
	> .msg {
		text-align: center;
		padding: 0.3in;
	}
	> .msg:first-child { padding-top: 0; }
	> .user {
		width: min-content; margin: auto;
		background: tone(-20%,-0.3);
		border: 1px solid black;
		color: tone(-50%);
		padding: 0.1in;
		> img { width: 1in; height: 1in; border: 1px solid black; }
		> .name { @extend %serif; text-align: center; font-size: 130%; font-weight: bold; margin-top: 0.08in; }
	}
	>form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1.2em 1fr 1fr;
		grid-gap: 5px;
		> label, input, button { display: block; }
		> label { grid-column: 1 / 3; grid-row: 1/2; font-weight: bold }
		> input { grid-column: 1 / 3; grid-row: 2/3; }
		> button { grid-column: 2 / 3; grid-row: 3/4; }
		> a { @extend %button; grid-column: 1 / 2; grid-row: 3/4; }
	}
}

form.compose {
	@extend %box;
	display: grid;
	grid-template-columns: 1.1in 2fr min-content 1fr 1.5fr;
	grid-template-rows: 1fr min-content;
	grid-gap: 2px;
	padding: 0.1in;
	> img { grid-column: 1/2; grid-row: 1/3; width: 1in; height: 1in;}
	> textarea {
		grid-column: 2/6; grid-row: 1/2; height: 3in;
		resize: vertical;
		margin-bottom: 0.08in;
	}
	> input[name="acl"] { grid-column: 2/3; grid-row: 2/3; }
	> button[value="post"] { grid-column: 5/6; grid-row: 2/3; }
	> button[value="attach"] { grid-column: 4/5; grid-row: 2/3; }
	a.help[href] { margin-right: 0.05in }
}

a.help[href] {
	display: block;
	text-align: center;
	padding: 0.09in 0.2in;
	background: tone(-40%);
	border: 1px solid black;
	font-weight: bold;
	text-decoration: none;
	cursor: help;
}

input.acl {
	@extend %teletype;
	background: url(/s/padlock.webp) no-repeat;
	background-size: 20pt;
	background-position: 0.05in 50%;
	&:focus {
		background: url(/s/padlock.webp) no-repeat, $grad-ui-focus;
		background-size: 20pt;
		background-position: 0.05in 50%;
	};
	padding-left: 0.40in;
}

div.modal {
	@extend %box;
	position: fixed;
	display: none;
	left: 0; right: 0; bottom: 0; top: 0;
	max-width: 7in;
	margin: 1in auto;
	padding: 0.2in 0.3in;
	&:target { display: block; }
	box-shadow: 0 0 4in 5in rgba(0,0,0,0.5);
	z-index: 2;
	> div {
		height: 100%;
		overflow-y: scroll;
		>p:first-of-type { margin-top: 0; }
	}
	>a[href="#0"] { // close link
		@extend %button;
		cursor: default;
		display: block;
		position: absolute;
		top: -0.3in;
		right: 0.1in;
		margin: 0.1in;
		padding: 0.1in;
		&:hover { font-weight: bold; }
	}
}

code {
	@extend %teletype;
	background: tone(-55%);
	border: 1px inset tone(-20%);
	padding: 2px 6px;
	font-size: 1.5ex !important;
	letter-spacing: 1.3px;
	padding-bottom: 3px;
	border-radius: 2px;
	vertical-align: baseline;
	box-shadow: 1px 1px 1px black;
}

div.post {
	@extend %box;
	display: grid;
	grid-template-columns: 1in 1fr max-content;
	grid-template-rows: min-content max-content;
	margin-bottom: 0.1in;
	>.avatar {
		grid-column: 1/2; grid-row: 1/2;
		img { display: block; width: 1in; margin:0; }
		background: linear-gradient(to bottom, tone(-53%), tone(-57%));
	}
	>a[href].username {
		display: block;
		grid-column: 1/3;
		grid-row: 2/3;
		text-align: left;
		text-decoration: none;
		padding: 0.1in;
		padding-left: 0.15in;
		>.nym { font-weight: bold; }
		color: tone(0%,-0.4);
		> span.nym { color: tone(10%) }
		> span.handle { color: tone(-5%) }
		background: linear-gradient(to right, tone(-55%), transparent);
	}
	>.content {
		grid-column: 2/4; grid-row: 1/2;
		padding: 0.2in;
		@extend %serif;
		font-size: 110%;
		text-align: justify;
	}
	> a[href].permalink {
		display: block;
		grid-column: 3/4; grid-row: 2/3;
		font-size: 80%;
		text-align: right;
		padding: 0.1in;
		padding-right: 0.15in;
		font-style: italic;
		background: linear-gradient(to left, tone(-55%,-0.5), transparent);
	}
}

a[href].rawlink {
	@extend %teletype;
}

body.doc main {
	@extend %serif;
	text-align: justify;
	li { margin-top: 0.05in; }
	li:first-child { margin-top: 0; }
	h1, h2, h3, h4, h5, h6 {
		background: linear-gradient(to right, tone(-50%), transparent);
		margin-left: -0.4in;
		padding-left: 0.2in;
		text-shadow: 0 2px 0 black;
	}
}

body.conf main {
	display: grid;
	grid-template-columns: 2in 1fr;
	grid-template-rows: max-content 1fr;
	> .menu {
		margin-left: -0.25in;
		grid-column: 1/2; grid-row: 1/2;
		background: linear-gradient(to bottom, tone(-45%),tone(-55%));
		border: 1px solid black;
		padding: 0.1in;
		> a[href] {
			@extend %button;
			display: block;
			text-align: left;
		}
		> a[href] + a[href] {
			border-top: none;
		}
		hr {
			border: none;
		}
	}
	> .panel {
		grid-column: 2/3; grid-row: 1/3;
		padding-left: 0.15in;
		> h1 {
			padding-bottom: 0.1in;
			margin-bottom: 0.1in;
			margin-left: -0.15in;
			padding-left: 0.15in;
			padding-top: 0.12in;
			background: linear-gradient(to right, tone(-50%), tone(-50%,-0.7));
			border: 1px solid tone(-55%);
			border-left: none;
			text-shadow: 1px 1px 0 black;
		}
	}

}

form {
	.elem {
		margin: 0.1in 0;
		label { display:block; font-weight: bold; padding: 0.03in 0; }
		.txtbox {
			@extend %serif;
			box-sizing: border-box;
			padding: 0.08in 0.1in;
			border: 1px solid black;
			background: tone(-55%);
		}
		input, textarea, .txtbox {
			display: block;
			width: 100%;
		}
		button { float: right; width: 50%; }
	}
}
