@use 'sass:math';
@use 'sass:list';

* {
	box-sizing: border-box;
}

article {
	border: solid 1px #333333;
	border-radius: 8px;
	margin: 0.5em;
}

article, div {
	overflow: hidden;
	text-overflow: ellipsis;
}

@mixin color-panel {
	background-color: #DDDDFF;
	border: solid 1px #8D8DA6;
	margin: -1px;
}

div > p {
	&:first-child {
		margin-top: 0;
	}
	&:last-child {
		margin-bottom: 0;
	}
}

time {
	text-decoration: dotted underline;
}

article.tag {
	padding: 0.5em 2em;
	& > h2 {
		margin: 0 0 0.25em -1em;
	}
}

article.contrib {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-areas:
		"uname submitted updated status"
		"uname url url url"
		"uname tag tag tag"
		"udesc desc desc desc";
	gap: 1px;

	& > div {
		padding: 0.5em;
	}
	
	div.contrib-upstream-name {
		grid-area: uname;
		@include color-panel;
		text-align: center;
		padding-top: 1em;
	}
	div.contrib-upstream-desc {
		grid-area: udesc;
		@include color-panel;
	}
	div.contrib-urls {
		grid-area: url;
		padding-bottom: 0;
	}
	div.contrib-tags {
		grid-area: tag;
		padding-top: 0;
	}
	div.contrib-submitted {
		grid-area: submitted;
		@include color-panel;
	}
	div.contrib-updated {
		grid-area: updated;
		@include color-panel;
	}
	div.contrib-status {
		grid-area: status;
		@include color-panel;
	}
	div.contrib-desc {
		grid-area: desc;
	}

	&.closed-contrib   div.contrib-status { background-color: #cf222e; color: white; }
	&.open-contrib     div.contrib-status { background-color: #d3ab3a; color: black; }
	&.merged-contrib   div.contrib-status {
		background: repeating-linear-gradient(315deg, #1f883d, #1f883d 1.0em, #d3ab3a 1.0em, #d3ab3a 1.4em);
		color: white;
		$shadow: [];
		@for $w from 1 through 3 {
			@for $a from 0 to 24 {
				$shadow: list.append($shadow, #{$w*math.cos($a*15deg)}px #{$w*math.sin($a*15deg)}px #1f883d);
			};
		};
		text-shadow: list.join($shadow, [], $separator: comma, $bracketed: false);
	}
	&.released-contrib div.contrib-status { background-color: #1f883d; color: white; }
}

article.standup {
	div {
		padding: 0.5em 1em;
	}
	div.standup-title {
		@include color-panel;
		text-align: center;
	}
}

$cal-inner-width: 0.3;
$cal-outer-width: 0.5;
$cal-total-width: (7*$cal-inner-width)+(2*$cal-outer-width);
section#standups {
	& > p, summary {
		text-align: center;
	}

	/* Calendar: Font styling */
	table {
		font-size: small;
	}
	td {
		text-align: right;
		&:has(a) {
			font-weight: bold;
		}
	}

	/* Calendar: Sizing */
	table {
		font-size: small;
		table-layout: fixed;
		width: #{$cal-total-width}in;
	}
	td, th {
		overflow: hidden;
		width: #{$cal-inner-width}in;
		max-width: #{$cal-inner-width}in;
		&:first-child, &:last-child {
			width: #{$cal-outer-width}in;
			max-width: #{$cal-outer-width}in;
		}
	}
	th {
		span {
			display: inline-block;
			transform-origin: 0 50%;
		}
		&:first-child span { transform: rotate(-90deg) translateX(-50%) translateY(50%); }
		&:last-child  span { transform: rotate(90deg) translateX(-50%) translateY(-50%); }
	}

	/* Calendar: Colors */
	td.odd-month:has(a)  { background-color: hsl(220, 50%, 88%); }
	td.odd-month         { background-color: hsl(220, 50%, 93%); }
	th.odd-month         { background-color: hsl(220, 50%, 80%); }
	td.even-month:has(a) { background-color: hsl(260, 50%, 88%); }
	td.even-month        { background-color: hsl(260, 50%, 93%); }
	th.even-month        { background-color: hsl(260, 50%, 80%); }

}

@media not (min-width: 8.5in) {
	kbd, code, samp, tt, pre {
		white-space: pre-wrap;
	}
}
@media (min-width: 8.5in) {
	body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) #{$cal-total-width}in;
		grid-template-rows:
			min-content
			min-content
			min-content
			min-content
			1fr
			min-content;
		grid-template-areas:
			"head1              head1"
			"head2              head2"
			"tags               standups"
			"contribs-pending   standups"
			"contribs-completed standups"
			"foot               foot";
	}
	body > header              { grid-area: head1; }
	section#intro              { grid-area: head2; }
	section#tags               { grid-area: tags; }
	section#contribs-pending   { grid-area: contribs-pending; }
	section#contribs-completed { grid-area: contribs-completed; }
	section#standups           { grid-area: standups; max-width: 3.2in; }
	body > footer              { grid-area: foot; }
	
	section#tags, section#standups {
		& > h2:first-child {
			margin-top: 0;
		}
	}
}