schedule-printable/styles/styles.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

:root {
	font-family: "Noto Sans", Arial, Helvetica, sans-serif;
	--black-border: solid black 2px;
}

header {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;

	img {
		&.placeholder{
			background-color: lightblue;
		}
	}
	h1 {
		text-transform: uppercase;
	}
}

.border {
	border: var(--black-border);
}
.radius {
	border-radius: 1em;
}

.flex {
	display: flex;
	flex-direction: column;
}

section {
	flex: 1;
	display: grid;
	grid-template-columns:  50% 50%;
	grid-template-rows: auto;

	.grid-item {
		display: flex;
		align-items: center;
		justify-content: center;
		/* padding: 0.5em; */
	}
}

.team-id-112 {
	th {
		background-color: navy !important;
	}
}

.calendar {
	h2 {
		margin: 0;
		text-transform: uppercase;
	}
	table {
		/* width:100%; */
		border-collapse: collapse;
		th {
			background-color: black;
			color: white;
			text-transform: uppercase;
			font-weight: 900;
		}
		th, td {
			border: black solid 1px;
			width: 65px;
			&:has(.half){
				padding: 0;
			}

			&:has(.home) {
				/* background-color: lightblue; */
			}
			&:has(.away) {
				background-color: #e9ecef;
			}
		}
		td > div {
			height: auto;
			aspect-ratio: 10 / 10;
			align-items: center;
			& {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-template-rows: repeat(3, 1fr);
				grid-column-gap: 0px;
				grid-row-gap: 0px;
				}

				.day-date { 
					grid-area: 1 / 1 / 2 / 2;
				}
				.opponent { 
					grid-area: 2 / 1 / 3 / 4;
				}
				.annotation {
					margin-right: 2px;
					grid-area: 1 / 2 / 2 / 4;
				}
				.time {
					grid-area: 3 / 1 / 4 / 4;
				}

				.friday9_80 {
					font-size: .7em;
					font-weight: 900;
					text-align: right;
					&.A{
						color: gray;
						text-decoration: underline;
					}
					&.B{
						color: grey;
					}
				}

				&.half {
					height: inherit;
					aspect-ratio: inherit;
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-template-rows: auto auto;
					grid-column-gap: 0px;
					grid-row-gap: 0px;

					&:first-child{
						border-bottom: black solid 1px;
						align-items: top;
					}
	
					.day-date { 
						font-size: .9em;
						margin-left: 1px;
						grid-area: 1 / 1 / 2 / 2;
					}
					.opponent { 
						font-size: .9em;
						line-height: .9em;
						grid-area: 2 / 1 / 3 / 3;
						margin-bottom: 1px;
					}
					.annotation {
						display:none;
					}
					.time {
						margin-right: 1px;
						text-wrap: nowrap;
						grid-area: 1 / 2 / 2 / 3; 
						font-size: .9em;
						font-stretch: condensed;
					}
				}
		}
		
		.opponent {
			font-size: 1.1em;
			font-weight: bold;
			text-align: center;
			text-transform: uppercase;
		}

		.day-date{
			font-weight: 500;
			font-stretch: semi-condensed;
		}
		.time {
			text-align: center;
			font-size: .8em;
		}
	}
}

.ledger {
	font-size: 16px;
	header {
		padding: 2em;
	
		img {
			width: 1.5in;
			height: 1.5in;
		}
		h1 {
			margin-left: 1em;
			font-size: xxx-large;
		}
	}

	.calendar {
		h2 {
			line-height: .9em;
			margin-bottom: .3em;
		}
	
		table {
			th {
				font-size: .8em;
			}
			th, td {
				width: 65px;
			}
	
			.opponent {
				font-size: 1.3em;
			}
	
			.month-number{
				font-size: 1em;
			}
			.time {
				font-size: .8em;
			}
		}
	}
}

.letter, .A4 {
	header {
		padding: 1em;
	
		img {
			width: .9in;
			height: .9in;
		}
		h1 {
			margin-left: 1em;
			font-size: xx-large;

		}
	}

	.calendar {
		font-size: 11px;
		h2 {
			line-height: .9em;
			margin-bottom: .3em;
		}
	
		table {
			th {
				font-size: .8em;
			}
			th, td {
				width: 45px;
			}

	
			.opponent {
				font-size: 1.3em;
			}
	
			.month-number{
				font-size: 1em;
			}
			.time {
				font-size: .8em;
			}
		}
	}
	
}