/* [ʞ] serenity.scss <https://hale.su/serenity.html>
 *  ~ lexi hale <lexi@hale.su>
 *  © GNU affero general public license v3
 *  $ sassc -t compressed serenity.{scss,css}

 * a stylesheet designed for flexibility and for minimalistic,
 * hand-coded websites. ideally, it should be possible to
 * drop it right into any existing plain-html document and
 * have it immediately spice up the look.

 NOTE i'm fine with people other than me using and modifying
      this stylesheet under the terms of the AGPL, under two
	  conditions:

	    1) this block-comment be left in place per the AGPL,
		   and at least the first three lines copied verbatim
		   to the top of any CSS file generated from it

		2) you change the default hue in :root to something
		   other than rose-red, which is the signature hue
		   of my own websites

	  i would also appreciate being credited somewhere
	  visible to visitors of the website, but it's not
	  required as long as the credit at the top of this
	  file is preserved. */

/* bring in a fallback font in case the user doesn't have
 * a garamond on hand */
//@import url(https://fonts.googleapis.com/css?family=EB+Garamond&display=swap);
@import "font.scss";

$use: [endnote, pathbar, directory, code, hilite];

// glow: currently don't feel like the glow looks good on my
//       site anymore; it's also very un-minimalistic, which
//       goes against my entire ethos. leaving a switch in
//       place in case i change my mind later tho
// endnote (~2kb): include code for the endnote mechanism
// pathbar (~100b): include styles to make <h1> and <h3> suitable for
//          use as a pathbar at the top of the document?
// directory: include styles for automatic "directory lists,"
//            lists with descriptive bodies indented under an
//            emphasized (bold) link or other title element?
// code (~0.5kb): includes styles for inline code and code
//                listings 
// hilite (~1kb): includes styles for highlighting parts of
//                code listings 

@function using($feature) {
	@if $use!=[] and index($use, $feature)
	      { @return true;  }
	@else { @return false; }
}

@font-face {
	/* if there's any japanese text in the document,
	 * do what we can to make sure it's not hideous */
	font-family: "mincho";
	unicode-range: u+4e00-9fbf,
	               u+3040-309f,
				   u+30a0-30ff;
	src: local("Kochi Mincho"),
	     local("Hiragino Mincho Pro"),
		 local("Yu Mincho"),
		 local("MS Mincho");
}

@viewport {
	zoom: 1;
	width: device-width;
}

%root {
	// this pseudo-class is used to improve compat
	// with CSS1 renderers that don't support :root
	font-size: 14pt;
}

:root {
	@extend %root;
	--hue: 338;
	--width: 35rem;
	--bright: 12%;
	--link-br: 73%;
	--hover: 22%;
}

::selection {
	background-color:hsl(var(--hue),100%,60%);
	color:white;
	@if using(glow) == yes { text-shadow:none; }
}

body {
	@extend %root;
	margin-top: 1em;
	padding: 0 1em;
	font-family: mincho, ipa, Garamond, GaramondNo8,
	             "Garamond Premier Pro",
				 "Adobe Garamond Pro", "Adobe Garamond",
                 "EB Garamond", "Junicode", serif;

	hanging-punctuation: first last force-end;
	text-align: justify;

	@media print {
		--faint-color: #666;
		@if using(glow) { text-shadow:none; }
		color: black;
	}
	@media screen {
		   --fg-color: hsl(var(--hue),100%,89%);
		   --bg-color: hsl(var(--hue),84%,var(--bright));
		--faint-color: hsl(var(--hue),64%,64%);

		max-width: var(--width);
		margin: auto; margin-top: 1em;

		background: var(--bg-color);
		color: var(--fg-color);
		@if using(glow) {
			--glow-color: hsl(var(--hue),60%,61%);
			text-shadow: 0px 0px 30pt var(--glow-color);
		}
	}
	@media all and (min-resolution: 400dpi) and (max-width: 1080px) {
		max-width: calc(1080px - 1em);
		margin: auto;
		margin: {
			top: 1em;
			bottom: 1em;
		}
	}

	/* browser specific hacks */
	&::-webkit-scrollbar { width: 20px; }
	&::-webkit-scrollbar-track {
		// { background: hsl(var(--hue),96%,8%); }
		background: linear-gradient(to left, var(--bg-color) -50%, hsl(var(--hue),100%,calc(var(--bright) / 2)) 130%);
	}
	&::-webkit-scrollbar-thumb {
		// background: 
		background: url(scroller.svg), hsl(var(--hue),100%,21%);
		background-size: 80%;
		background-repeat: no-repeat;
		background-position: center;
		border-left: 1px outset hsl(var(--hue), 60%, 30%);
		border-radius: 1.5px 0 0 1.5px;
		&:hover {
			background-color: hsl(var(--hue),100%,28%);
			border-color: hsl(var(--hue), 60%, 40%);
		}
	}
}

img { max-height: 100vh; }

h1, h2, h3, h4, h5, h6 { /* sigh */
	all: unset;
	display: block;
	text-align: left;

	a[href] {
		@media screen {
			color: hsl(var(--hue),60%,80%);
			&:hover { color: var(--fg-color); }
		}
		@media print {
			text-decoration: none;
		}
	}

	line-height: 1em;
	margin-top: 0.3em;
}

@for $i from 1 to 6 {
	h#{$i} {
		font-size: (((6em - $i) / 6) * 2) + 0.3em;
		@if $i >= 2 {
			&::before {
				display: inline;
				margin-right: 0.2em;
			}
		}

		section > & ~ * {
			margin-left: 0.5em * $i;
		}
	}
}

@if using(pathbar) {
	@media screen {
		/* dim the pathbar */
		h1, h3 { a[href] { color: hsl(var(--hue),50%,70%); } }
	}
}

p {
	margin: 0.7em 0;
	line-height: 1.5em;
}

del {
	color: var(--faint-color);
	text-decoration-color: hsl(var(--hue), 80%, 60%);
}

ins {
	all: unset;
	border: 1px solid black;
	@media screen {
		color: hsl(142, 100%, 65%);
		background-color: hsl(142, 100%, 10%);
	};
	padding: 0.3ex 0.8ex;
	font-style: italic;
}

@if using(code) {
	%listing, p code, li code, {
		display: inline-block;
		background-color: hsl(var(--hue), 71%, 25%);
		font-size: 0.8em;
		padding: 0 0.5em;
		// border-radius: 0.3em;
		text-shadow: 0px 1.2px 0px #2A0017;
		border: 1px solid #2A0017;
		font-family: "Inconsolata", monospace;
		
		box-shadow: 0 0 5px -2px black inset;

		@if using(hilite) {
			strong { /* keywords */  color: hsl(var(--hue), 100%, 70%); }
			var    { /* variables */ color: hsl(calc(var(--hue) - 30), 80%, 50%); }
			dfn    { /* literals */  color: hsl(calc(var(--hue) + 30), 50%, 60%); }
			em     { /* strings */   color: hsl(calc(var(--hue) - 20), 90%, 70%); }
			i      { /* comments */  color: hsl(var(--hue), 70%, 70%); }
			  em i { font-style: italic; }

			b { /* pragmata */
				font-weight: normal;
				color: hsl(calc(var(--hue) - 20), 50%, 65%);
			}

			cite { /* imports */
				font-style: normal;
				color: hsl(calc(var(--hue) - 40), 70%, 70%);
			}
		}
	}

	body > code,
	pre > code,
	code.listing {
		@extend %listing;
		display: block;
		box-shadow: 0 0 8px -2px black inset;
		white-space: pre-wrap;
		padding: 0.5em 1em;
		line-height: 1.2em;
		tab-size: 4;
		width: 100%;
		overflow: scroll;
	}
}

a[href] {
	@media print { color: black; }
	@media screen {
		/* define the numbers */
		--link-t: var(--hue), 100%, var(--link-br);
		  --hi-t: var(--hue), 100%, calc(var(--link-br) + var(--hover));

		/* define the two alpha variants */
		--link-c: hsl(var(--link-t));  --ul-c: hsla(var(--link-t), 30%);
		  --hi-c: hsl(var(--hi-t)); --ul-hi-c: hsla(var(--hi-t), 60%);
		  --glow-c: hsla(var(--link-t), 50%);

		                color: var(--link-c); 
		text-decoration-color: var(--ul-c);
		// otherwise sass tries to intercept the hsl call
		text-decoration-width: 1px; // it'll look nice when CSS4 gets here
		text-underline-offset: 2px;
		  
		@if using(glow) {
			text-shadow: 0px 0px 30pt hsl(var(--hue),60%,40%);
		}

		%linkbody &:focus, %linkbody &:hover:focus { 
			/* a11y: keyboard users need an unambiguous, easy-to
			 * spot identifier for what's currently focused. this
			 * style inverts the default colors to create a highly-
			 * visible reverse-video effect. */
			     color: var(--bg-color) !important; 
			background: var(--fg-color) !important;
			box-shadow: 0 0 30px var(--ul-c);
			text-decoration: none;

			/* browsers normally supply their own (ugly, useless) 
			 * indicator; we suppress these by blanking outline */
			outline: none;
		}
		@at-root p, li, span, h1, h2, h3 { @extend %linkbody; }

		&:hover, &:active {
			color: var(--hi-c);
			text-decoration: underline;
			text-decoration-color: var(--ul-hi-c);

			text-shadow: 0px 0px 30px var(--glow-c);
			background: none !important;
			box-shadow: none;
		}
	}
}

@if using(directory) {
	div.dir > div {
		/* for div-type directory lists */
		> *:first-child { font-weight: bold; }
		margin-left: 2em;
		text-indent: -2em;
	}
}

ol, ul {
	padding-left: 1.2em;
	list-style: none;
	line-height: 1.4em;

	ol, ul, li { margin-top: 0.5em; }
	li > a[href]:first-child { display: inline-block; }

	li::before {
		display: inline-block;
		color: hsl(var(--hue), 40%, 60%);
	}

	@if using(directory) == yes {
		&.dir > li {
			margin-left: 2em;
			&::before { margin-left: -2em; }

			> *:first-child { font-weight: bold; }
		}
	}
}

ul li::before {
	hanging-punctuation: none; // eurghhhh
	content: "»";
	width: 0.7em;
	margin-left: -0.7em;
}

ol {
	counter-reset: li;
	li::before {
		counter-increment: li;
		content: counter(li);
		width: 1.5em;
		margin-left: -1.9em;
		text-align: right;
		padding-right: 0.4em;
	}
}


.byline {
	margin-left: 1.5em;
	margin-top: -0.5;
	padding: 0em;
	font-style: italic;
	color: var(--faint-color);
}

hr {
	border: none;
	border-bottom: 1px solid hsl(var(--hue),50%,30%);
	width: 90%;
	&[data-dec]::before {
		display: block;
		content: attr(data-dec);
		position: relative;
		letter-spacing: 1em;
		text-align:center;
		top: 0.8em;
		color: hsl(var(--hue),50%,40%);
		font-size: 60%;
		@if using(glow) {
			text-shadow: 0px 0px 15px hsl(var(--hue),30%,70%),
				4px 0px 0px var(--bg-color),
				-4px 0px 0px var(--bg-color);
		}
	}
	&[data-dec=""]::before {content: "◆";}
}

.imgbox {
	margin: 0 calc((20vw - 20%) * -1);
	break-inside: avoid;
}

/* entries in definition lists, numbered footnotes */
.entry {
	$spacing: 1em;
	margin-left: $spacing; 
	text-indent: 0-$spacing;
}

/* links to previous and next chapter */
nav {
	@media print { display: none; }

	padding-bottom: 1em;
	/* hideous evil clearfix */
	&::after {
		display: table;
		content: "";
		/* ಠ_ಠ */
		clear:both;
	}
	a[href] {
		--fg-color: hsl(var(--hue), 100%, 80%);

		display: block;
		color: var(--fg-color);
		background-color: hsl(var(--hue),100%,
			calc(var(--bright) / 2));
		border: 1px solid var(--fg-color);
		text-decoration:none;
		line-height: .7em;

		transition-property: border-color, text-shadow,
			color, --fg-color, background;
		transition-duration: 0.2s;

		&:hover {
			--fg-color: hsl(var(--hue),80%,90%);
			background: hsl(var(--hue),70%,10%) !important;
			text-decoration: none;
		}
		&:active, &:focus {
			padding: 0;
			margin: 0;
		}
		
		/* back and forward buttons */
		&.next::after, &.prev::before {
			display: inline-block;
			color: var(--bg-color);
			font-weight:bold;
			background-color: var(--fg-color);
			padding: 1.7ex 1.5ex;
			text-shadow:none;
			transition-property: background-color, --fg-color;
			transition-duration: 0.2s;
		}
		&.next {
			float: right;
			padding-left: 2ex;
			border-radius: 0 0 0 10px;
			&::after {
				margin-left:2ex;
				content: "⮞";
			}
		}
		&.prev {
			float: left;
			padding-right: 2ex;
			border-radius: 0 0 10px 0;
			&::before {
				margin-right:2ex;
				content: "⮜";
			}
		}
	}
}

%box {
	page-break-inside: avoid;
	margin-left: 1em;
	margin-right: 1em;
	padding: 0.1px 1em; /* heavy sigh */
	//background: hsl(var(--hue), 84%, calc(var(--bright) - 5%));
	font-size: 90%;

	@media screen {
		background: rgba(0,0,0,0.5);
		outline: 1px solid hsl(var(--hue), 100%, calc(var(--bright) - 8%));
	}

	&>& { margin-bottom: 1em; }
	&+& { margin-top: 1em; }
}

blockquote {
	@extend %box; 
	margin: 0;
	border-left: 5px solid hsl(var(--hue), 60%, calc(var(--bright) + 20%));
	@media print {
		border-color: black;
	}
}

aside {
	--asize: 28px;
	--padsize: 4px;
	@extend %box;
	padding-left: calc(var(--asize) + (var(--padsize) * 2) + 0.5em;
	transform: translateY(-50%);
	&::before {
		line-height: 55px;
		display: block;
		position: absolute;
		left: 0;
		padding: 0 var(--padsize);
		height: 100%;
		content: "➤";
		color: black;
		font-size: var(--asize);
		@media screen {
			background: hsl(var(--hue), 60%, calc(var(--bright) + 20%));
		}
	}
	@media (min-width: 60em) {
		// float: right;
		position: absolute;
		left: calc(10px + var(--width) + (50vw - (var(--width) / 2)));
		margin: 0;
		// width: 70%;
		// margin-left: 0.5em;
		// margin-right: calc(-1 * (50vw - (var(--width) / 2)) + 10em);
	}
}


/* endnote mechanism */
@if using(endnote) {
	.endnote .entry a.backlink {
		text-decoration: underline !important;
		font-weight: bold; 
	}
	@media screen {
		%el {
			display: inline-block;
			text-decoration:none;
			color: var(--fg-color);
			background-color: hsl(var(--hue),60%,25%);

			/* yes, this is weird. unfortunately padding
			 * doesn't work to provide a consistent height -
			 * webkit uses x-height as the font's bounding
			 * box whereas blink uses the em square. */
			height: 100%;
			padding: 0 0.4em;
			margin: 0em;

			/* the following two stanzas are unfortunately
			 * necessary and i don't know why; trying to
			 * incorporate them into one consistently
			 * breaks cross-browser. shruggo */
			--border-color: hsl(var(--hue),80%,8%);
			border: 1px solid var(--border-color);
		}
		a[href].endnote-link {
			@extend %el;
			&:focus, &:hover:focus {
				@extend %el; // this is such bullshit but necessary
			}
			&:hover {
				background-color: hsl(var(--hue),76%,35%) !important;
				/* i don't know why the hell the !important is
				   needed, and the inspector won't tell me */
			}
		}

		.endnote {
			bottom: 0.5em;

			/* try to only use the popup mechanism in browsers
			 * that can support it - this is a little wacky */
			@supports(position: fixed) {
				position: fixed;
				display: none; // hide until needed
				
				border: 1px solid rgba(255,255,255,0.5);
				background-color: hsl(var(--hue),61%,15%);
				--box-shadow-color: hsla(var(--hue),54%,30%,0.7);
				box-shadow: 0 0 40px 0 var(--box-shadow-color);

				/* center the element */
				left: 0; right: 0;
				max-width: calc(var(--width) + 2em); /* same width as body */
				margin:auto;
			}

			&:target { display: block; }
			> * { font-size: 90%; }

			.entry {
				margin-left: 0em;
				padding: 0.7em 1.0em;
				text-indent: -0.5em;
				max-height: calc(100vh - 2em);
				overflow-x: visible;
				overflow-y: auto;
				line-height: 1.4em;
				a.backlink { text-decoration: none; }
			}
			.ui { display: none; }
			@supports(position: fixed) {
				%uilink { 
					text-decoration: none;
					font-weight: bold;
				}
				.ui {
					display: block;
					
					/* hover it over the corner of the interface */
					position: absolute;
					top: -1.2em;
					right: -0.8em;

					a[href] { @extend %uilink; }

					background: hsl(var(--hue),51%,5%);
					border: 1px solid rgba(255,255,255,0.5);
					padding: 0.1em .5em;
					
				}
				a[href].ui {
					@extend %uilink;
					background: hsl(var(--hue),51%,5%) !important;
					cursor: default;

					&:hover  { border-style: outset; }
					&:active { border-style: inset;  }
				}
			}
		}
	}

	@media print {
		a[href].endnote-link {
			text-decoration: none;
			color: black;
		}
		.endnote {
			.ui { display: none; }
			.entry a.backlink {
				color: black;
			}
		}
	}

	/* this is a grotesque hack and i don't understand
	 * why it works, but: for some reason, the following
	 * line does not succeed in removing the underline in
	 * Dillo (which doesn't obey media queries or feature
	 * queries properly), so we have to rely on the
	 * glitched behavior of !important to produce the
	 * desired effect. */
	@supports(position: fixed) {
		.endnote .entry a.backlink {
			text-decoration: none !important;
		}
	}
}