@import '_fonts';
@import '_common';

html {
	font-size: $font-size;
	font-family: $code-font;
	background: #111  url("lapalma-o-10.jpg") fixed no-repeat;
	background-size: cover;
	height: 100%;
	box-sizing: border-box;
}

body {
	line-height: $line-height*1.33;
	background: transparent url("lapalma-o-100.jpg") fixed no-repeat;
	background-size: cover;
	min-height: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 1rem;

	&.post {
		display: block;
	}

	>div {
		max-width: 120ch;
		border: 1px outset black;
		border-top-left-radius: 1.33rem;
		border-top-right-radius: 1.33rem;
		margin: auto;
		>header {
			background: linear-gradient(180deg, rgba(175,175,175,.8), rgba(240,240,240,.8));
			padding: .33rem;
			border-top-left-radius: 1rem;
			border-top-right-radius: 1rem;

			font-family: sans-serif;
			text-align: center;
			font-weight: bold;

			display: grid;

			>h1 {
				grid-column: 1 / 8;
				margin: 0;
				font-size: 1.6rem;
			}
			>div {
				grid-column: 9 / 10;
				text-align: right;
				margin-right: .5rem;
				span {
					display: inline-block;
					border: 1px solid #000;
					border-radius: .2rem;
					background: linear-gradient(0deg, #afafaf, #f0f0f0);
					width: 1.2rem;
					line-height: 120%;
					text-align: center;
					padding: .1rem;
					margin: .2rem;
					animation: 1s linear 0s background;
					&:hover {
						background: linear-gradient(180deg, #afafaf, #f0f0f0);
					}
				}
			}
		}
		>main {
			>div {
				background: #333;
				color: #eee;
				font-size: 1.5em;
				padding: 1rem;
				p {
					&::before {
						content: "~$ \A";
						color: lime;
						font-weight: 100;
					}
				}
				blockquote p::before, .pubinfo p::before {
					content: none;
					color: white;
				}
				blockquote p:first-child::before {
					content: "» ";
					vertical-align: baseline;
					font-size: 4rem;
					opacity: .33;
				}
				blockquote p:last-child::after {
					content: " «";
					vertical-align: bottom;
					font-size: 4rem;
					opacity: .33;

				}
				&:last-child::after {
					content: "_";
					animation: 1s steps(2,end) 0s infinite blink;
				}

				h1,h2,h3,h4,h5,h6 {
					font-weight: normal;
					font-size: 1em;
					color: lime;
					margin-top:2em;
					&::before {
						content: "# ";
					}
					&::after {
						content: " ⏎";
					}
				}
			}
		}
	}

	>footer {
		line-height: 150%;
		text-align: center;
		max-width: 120ch;
		margin: auto;
		border-bottom-left-radius: 1.33rem;
		border-bottom-right-radius: 1.33rem;
//		background: rgba(255,255,255, .80);
		background: linear-gradient(0deg, rgba(175,175,175,.8), rgba(240,240,240,.8));
		border: 1px outset black;
	}
}

.pubinfo {
	text-align: right;
	font-size: 1rem;
}

.cc-sa {
	width: 50%;
	padding: 1rem;
	margin: auto;
}

@keyframes blink {
	from {background: transparent;}
	to {background: white;}
}

a {
	&:link {
		color: #00afff;
	}
	&:visited {
		color: #cf00af;
		opacity: .8;
	}
	&:hover {
		color: #30ff00;
	}
}

pre {
	line-height: 150%;
	font-size: 1.2rem;

	background: black;
	color: white;

	border: 1px solid #1c1;

	counter-increment: examples;
	counter-reset: lines;
	&::after {
		background: #1c1;
		color: black;
		display: block;
		content: " example" counter(examples) ".txt  " counter(lines) "L                                                                1,1     Top";
	}

	code {
		opacity: .8;
		span.newline {
			counter-increment: lines;
			&::before {
				content: counter(lines) " ";
				width: 2rem;
				display: inline-block;
				text-align: right;
				opacity: .5;
			}
		}
		padding: 1em 1em 1em 1em;
		display: block;
		overflow-x: auto;
	}
}