Anthony Correa
e4b981d676
fixed the loop in eventlineup slots so they will show duplicate eventlineupentries if they exist refined some styling in eventsheet
961 lines
17 KiB
SCSS
961 lines
17 KiB
SCSS
@import url('https://fonts.googleapis.com/css2?family=Pacifico');
|
|
@import url('https://fonts.googleapis.com/css2?family=Oswald');
|
|
@import url('https://fonts.googleapis.com/css2?family=Graduate');
|
|
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wdth,wght@50..200,200..900&display=swap');
|
|
@import url('/font/helvetica-now/stylesheet.css');
|
|
|
|
@font-face {
|
|
font-family: "Futura Now";
|
|
src: url("/font/futura-now/futura-now.ttf") format("truetype");
|
|
font-weight: 125 900;
|
|
font-stretch: 50% 150%;
|
|
}
|
|
|
|
@page {
|
|
margin: 0;
|
|
}
|
|
|
|
/** For Print **/
|
|
@media print {
|
|
body {
|
|
margin:0;
|
|
}
|
|
body .sheet {
|
|
size: B5;
|
|
padding: 0.175in;
|
|
}
|
|
}
|
|
|
|
/** For screen preview **/
|
|
@media screen {
|
|
body .sheet {
|
|
padding: 0.175in;
|
|
}
|
|
body {
|
|
background: #e0e0e0;
|
|
}
|
|
.sheet {
|
|
background: white;
|
|
box-shadow: 0 0.5mm 2mm rgba(0, 0, 0, 0.3);
|
|
}
|
|
}
|
|
|
|
.sheet {
|
|
overflow: hidden;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
page-break-after: always;
|
|
}
|
|
|
|
/** Paper sizes **/
|
|
body.B5 .sheet {
|
|
width: 176mm;
|
|
height: 250mm;
|
|
}
|
|
|
|
body.index-card .sheet {
|
|
width: 3.5in;
|
|
height: 5in;
|
|
}
|
|
|
|
:root {
|
|
--color-success: #b7e1cd;
|
|
--color-danger: #f4c7c3;
|
|
--color-neutral: #acc9fe;
|
|
--color-warning: rgb(249, 228, 180);
|
|
--color-grey-100: #f8f9fa;
|
|
--color-grey-200: #e9ecef;
|
|
--color-grey-300: #dee2e6;
|
|
--color-grey-400: #ced4da;
|
|
--color-grey-500: #adb5bd;
|
|
--color-grey-600: #6c757d;
|
|
--color-grey-700: #495057;
|
|
--color-grey-800: #343a40;
|
|
--color-grey-900: #212529;
|
|
--row-height: 14px;
|
|
--monospace-font: "Inconsolata", monospace;
|
|
}
|
|
|
|
body {
|
|
font-family: "Helvetica Now", "Helvetica", sans-serif;
|
|
position: relative;
|
|
font-size: 11px;
|
|
}
|
|
|
|
table {
|
|
position: inherit;
|
|
font-size: inherit;
|
|
border-collapse: collapse;
|
|
empty-cells: show;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
width: 100%;
|
|
border: 0.5px solid black;
|
|
display: inline-table;
|
|
|
|
tr {
|
|
border-bottom-width: 0.5px;
|
|
border-color: grey;
|
|
border-bottom-style: solid;
|
|
|
|
&:nth-child(odd) {
|
|
background-color: rgb(242, 242, 242, 0.85);
|
|
}
|
|
|
|
&:nth-child(even) {
|
|
background-color: rgb(256, 256, 256, 0.85);
|
|
}
|
|
|
|
th {
|
|
font-stretch: extra-condensed;
|
|
width: 1em;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
|
|
td {
|
|
&.player-name {
|
|
text-transform: uppercase;
|
|
font-stretch: 75%;
|
|
}
|
|
&.position, &.jersey-number {
|
|
font-family: var(--monospace-font);
|
|
width: 2ch;
|
|
text-align: right;
|
|
overflow: hidden;
|
|
}
|
|
|
|
}
|
|
|
|
th, td {
|
|
border-left: 0.5px solid grey;
|
|
border-right: 0.5px solid grey;
|
|
overflow: hidden;
|
|
padding: 0 2px 0 2px;
|
|
|
|
&:empty::after {
|
|
content: "\00a0";
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
|
|
.float-left {
|
|
float: left;
|
|
}
|
|
|
|
.B5 > .eventsheet {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
column-gap: 0.35in;
|
|
row-gap: 0.35in;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.eventsheet > section {
|
|
box-sizing: content-box;
|
|
overflow: hidden;
|
|
/* outline: 0.5px dashed lightgrey; */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
|
|
> div {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: stretch;
|
|
height: auto;
|
|
}
|
|
|
|
&.NW {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
}
|
|
&.NE {
|
|
grid-area: 1 / 2 / 2 / 3;
|
|
}
|
|
&.SW {
|
|
grid-area: 2 / 1 / 3 / 2;
|
|
}
|
|
&.SE {
|
|
grid-area: 2 / 2 / 3 / 3;
|
|
}
|
|
|
|
}
|
|
|
|
.eventsheet > .section-divider {
|
|
position: absolute;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 0px;
|
|
height: 100%;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
--divider-border: lightgrey dashed 1px;
|
|
|
|
.NW {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
border-right:var(--divider-border);
|
|
border-bottom:var(--divider-border);
|
|
}
|
|
.NE {
|
|
grid-area: 1 / 2 / 2 / 3;
|
|
border-bottom:var(--divider-border);
|
|
}
|
|
.SW {
|
|
grid-area: 2 / 1 / 3 / 2;
|
|
border-right:var(--divider-border);
|
|
}
|
|
.SE {
|
|
grid-area: 2 / 2 / 3 / 3;
|
|
}
|
|
|
|
}
|
|
|
|
.lineup-card th {
|
|
width: inherit;
|
|
}
|
|
|
|
#lineup-card-dugout div.grid-container,
|
|
#lineup-card-dugout-blank div.grid-container {
|
|
display: grid;
|
|
grid-template-columns: 60% auto;
|
|
grid-template-rows: fit-content(16px) auto;
|
|
grid-template-areas:
|
|
"header header"
|
|
"sarting-lineup-table substitution-table";
|
|
}
|
|
|
|
#lineup-card-exchange div.grid-container,
|
|
#lineup-card-exchange-blank div.grid-container {
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
grid-template-rows: fit-content(16px) auto;
|
|
grid-template-areas:
|
|
"header"
|
|
"sarting-lineup-table";
|
|
}
|
|
|
|
#lineup-card-exchange .substitution,
|
|
#lineup-card-exchange .homeaway,
|
|
#lineup-card-exchange-blank .substitution,
|
|
#lineup-card-exchange-blank .homeaway {
|
|
display: none;
|
|
}
|
|
|
|
.lineup-card div.grid-container > header {
|
|
grid-area: "header";
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.lineup-card div.grid-container > header:empty::after {
|
|
content: "\00a0";
|
|
}
|
|
|
|
div.grid-container > .starting-lineup-table {
|
|
grid-area: "starting-lineup-table";
|
|
}
|
|
|
|
div.grid-container > .substitution-table {
|
|
grid-area: "substitution-table";
|
|
}
|
|
|
|
section.lineup-card {
|
|
counter-reset: lineup-sequence-counter 0;
|
|
|
|
thead th {
|
|
color: var(--color-grey-600);
|
|
font-size: 0.7em;
|
|
}
|
|
th.sequence {
|
|
counter-increment: lineup-sequence-counter 1;
|
|
color: var(--color-grey-600);
|
|
font-size: inherit;
|
|
width: 2ch;
|
|
|
|
&.counter::before {
|
|
content: counter(lineup-sequence-counter);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.lineup-card table {
|
|
font-size: 21px;
|
|
}
|
|
|
|
.lineup-card td {
|
|
/* height: 34px; */
|
|
}
|
|
|
|
.lineup-card td.substitution {
|
|
width: 8ch;
|
|
}
|
|
|
|
.lineup-card td.substitution::after {
|
|
content: "";
|
|
}
|
|
|
|
#lineup-card-exchange tr,
|
|
#lineup-card-exchange-blank tr,
|
|
#lineup-card-dugout .starting-lineup-table tr,
|
|
#lineup-card-dugout-blank .starting-lineup-table tr,
|
|
#lineup-card-dugout .substitution-table tr:nth-child(odd) {
|
|
border-top: 1px solid black;
|
|
}
|
|
|
|
#lineup-card-exchange tr,
|
|
#lineup-card-exchange-blank tr,
|
|
#lineup-card-dugout .starting-lineup-table tr,
|
|
#lineup-card-dugout-blank .starting-lineup-table tr,
|
|
#lineup-card-dugout .substitution-table tr:nth-child(even) {
|
|
border-bottom: 1px solid black;
|
|
}
|
|
|
|
td.substitution {
|
|
border-left: 1px solid black;
|
|
}
|
|
|
|
section.blank {
|
|
filter: opacity(0.4);
|
|
img, header {
|
|
filter: grayscale(1);
|
|
}
|
|
td.substitution {
|
|
border-width: 0.5;
|
|
}
|
|
}
|
|
|
|
#lineup-card-exchange td.player-name {
|
|
font-stretch: 100%;
|
|
}
|
|
|
|
#lineup-card-dugout td.player-name {
|
|
width: 10ch;
|
|
}
|
|
|
|
.lineup-card .position,
|
|
.lineup-card .jersey-number {
|
|
width: 2ch;
|
|
}
|
|
|
|
#lineup-card-dugout .position,
|
|
#lineup-card-dugout .jersey-number {
|
|
font-stretch: 75%;
|
|
padding-left: 2.5px;
|
|
padding-right: 2.5px;
|
|
}
|
|
|
|
.lineup-card header {
|
|
font-size: inherit;
|
|
text-transform: uppercase;
|
|
font-stretch: 85%;
|
|
}
|
|
|
|
|
|
#todays-game {
|
|
> div {
|
|
display: grid;
|
|
grid-template-columns: 110px auto;
|
|
grid-template-rows: auto auto;
|
|
grid-template-areas:
|
|
"offense defense"
|
|
"footer footer";
|
|
}
|
|
|
|
#offense-pane {
|
|
grid-area: offense;
|
|
}
|
|
|
|
#defense-pane {
|
|
grid-area: defense;
|
|
}
|
|
|
|
.footer {
|
|
/* height:var(--row-height); */
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
grid-area: footer;
|
|
/* border: 1px solid black; */
|
|
height: 100%;
|
|
border-right: 0.5px solid grey;
|
|
border-left: 0.5px solid grey;
|
|
|
|
table {
|
|
height: 100%;
|
|
outline: none;
|
|
border-style: none;
|
|
|
|
tr {
|
|
background-color: white;
|
|
outline: none;
|
|
border-bottom: 0.5px solid var(--color-grey-500);
|
|
|
|
:last-child {
|
|
background-color: white;
|
|
outline: none;
|
|
border-bottom-style: none;
|
|
}
|
|
}
|
|
|
|
th {
|
|
text-align: left;
|
|
color: var(--color-grey-600);
|
|
}
|
|
|
|
td {
|
|
height: var(--row-height);
|
|
border: none;
|
|
&empty::after {
|
|
content: "";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
table {
|
|
&.notes {
|
|
th {
|
|
border-left: none;
|
|
border-right: none;
|
|
line-height: 1em;
|
|
}
|
|
td:empty::after {
|
|
content: "";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#defense-card {
|
|
#defense-pane {
|
|
width: 100%;
|
|
}
|
|
|
|
.footer {
|
|
display: none;
|
|
}
|
|
|
|
.slot-set {
|
|
table {
|
|
font-size: 14px;
|
|
width: 120px;
|
|
tbody > tr:last-child {
|
|
// display: none;
|
|
}
|
|
}
|
|
|
|
&.pos-c {
|
|
grid-area: 6 / 1 / 7 / 5 !important;
|
|
}
|
|
|
|
&.pos-p {
|
|
table {
|
|
width: 120px !important;
|
|
tbody > tr:last-child {
|
|
display: table-row;
|
|
}
|
|
}
|
|
justify-content: center !important;
|
|
align-items: center;
|
|
margin-bottom: inherit !important;
|
|
grid-area: 5 / 1 / 6 / 5 !important;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
#defense-pane {
|
|
position: relative;
|
|
grid-area: defense;
|
|
padding: 4px 4px 0px 4px; /* top right bottom left */
|
|
display: flex;
|
|
border: 0.5px solid grey;
|
|
// border-bottom: 0.5px solid grey;
|
|
|
|
.field-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: repeat(6, 1fr);
|
|
grid-column-gap: 4px;
|
|
width: 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
img {
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
|
|
.slot-set {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
$positions: "cf", "lf", "rf", "ss", "2b", "3b", "1b", "c", "p";
|
|
|
|
@each $position in $positions {
|
|
&.pos-#{$position} tr:first-child {
|
|
th.position:empty::after {
|
|
content: $position;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.pos-cf {
|
|
justify-content: center;
|
|
// align-items: start;
|
|
grid-area: 1 / 1 / 2 / 5;
|
|
}
|
|
|
|
&.pos-lf {
|
|
justify-content: flex-start;
|
|
grid-area: 2 / 1 / 3 / 3;
|
|
}
|
|
|
|
&.pos-rf {
|
|
justify-content: flex-end;
|
|
grid-area: 2 / 3 / 3 / 5;
|
|
}
|
|
|
|
&.pos-ss {
|
|
justify-content: flex-end;
|
|
grid-area: 3 / 1 / 4 / 3;
|
|
}
|
|
|
|
&.pos-2b {
|
|
justify-content: flex-start;
|
|
grid-area: 3 / 3 / 4 / 5;
|
|
}
|
|
|
|
&.pos-3b {
|
|
justify-content: flex-start;
|
|
grid-area: 4 / 1 / 5 / 3;
|
|
}
|
|
|
|
&.pos-1b {
|
|
justify-content: flex-end;
|
|
grid-area: 4 / 3 / 5 / 5;
|
|
}
|
|
|
|
&.pos-c {
|
|
justify-content: center;
|
|
grid-area: 5 / 1 / 6 / 5;
|
|
}
|
|
|
|
&.pos-p {
|
|
table {
|
|
width: 100%;
|
|
}
|
|
align-items: end;
|
|
margin-bottom: 4px;
|
|
grid-area: 6 / 1 / 7 / 5;
|
|
tr.substitute .position:empty::after{
|
|
content: "RP";
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
#offense-pane {
|
|
position: relative;
|
|
/* box-sizing: border-box; */
|
|
height: 100%;
|
|
// grid-area: offense;
|
|
border-bottom: 0.5px solid black;
|
|
counter-reset: lineup-sequence-counter 0;
|
|
/* outline: 0.5px solid black; */
|
|
|
|
table {
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
th.sequence{
|
|
counter-increment: lineup-sequence-counter 1;
|
|
&.counter::before {
|
|
content: counter(lineup-sequence-counter);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.slot-set table {
|
|
width: 77px;
|
|
}
|
|
|
|
.slot-set.pos-slot-p table {
|
|
width: 100%;
|
|
}
|
|
|
|
.index-card .defense-slot-set {
|
|
width: 65px;
|
|
}
|
|
|
|
.index-card .defense-slot-set .player-name {
|
|
font-stretch: 70%;
|
|
}
|
|
|
|
.container .row {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
header {
|
|
background-color: #cadcf9;
|
|
font-family: "Oswald";
|
|
/* font-size: 8.8px; */
|
|
/* outline: 1px solid black; */
|
|
/* height: var(--row-height); */
|
|
width: auto;
|
|
// grid-area: header;
|
|
text-align: center;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
border: 0.5px solid black;
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
|
|
.cell-checkbox {
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.in-starting-lineup {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.gametitle {
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
font-stretch: semi-condensed;
|
|
}
|
|
|
|
.homeaway {
|
|
text-transform: uppercase;
|
|
font-stretch: normal;
|
|
font-weight: bolder;
|
|
float: right;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.cell-smalltext {
|
|
font-stretch: condensed;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.statscell {
|
|
font-family: "m+1m";
|
|
text-align: center;
|
|
font-stretch: extra-condensed;
|
|
font-size: 9px;
|
|
width: 60px;
|
|
}
|
|
|
|
.condensedNameCell {
|
|
width: 70px;
|
|
text-transform: uppercase;
|
|
font-stretch: condensed;
|
|
}
|
|
|
|
.cell-square {
|
|
height: var(--row-height);
|
|
width: 14px;
|
|
text-align: center;
|
|
}
|
|
|
|
.cell-square.narrow {
|
|
width: 10px;
|
|
}
|
|
.cell-mono {
|
|
font-family: "m+1m";
|
|
}
|
|
|
|
.cell-condensed {
|
|
font-stretch: condensed;
|
|
}
|
|
|
|
.available-status-code-1 {
|
|
color: rgb(0, 85, 0);
|
|
background-color: #b7e1cd;
|
|
}
|
|
|
|
.available-status-code-0 {
|
|
color: rgb(170, 0, 0);
|
|
background-color: #f4c7c3;
|
|
}
|
|
|
|
.past.available-status-code-0,
|
|
.past.available-status-code-null {
|
|
color: var(--color-grey-600);
|
|
background-color: inherit;
|
|
}
|
|
|
|
.past.available-status-code-1.Y {
|
|
color: inherit;
|
|
background-color: var(--color-warning);
|
|
}
|
|
|
|
.available-status-code-2 {
|
|
color: blue;
|
|
background-color: #acc9fe;
|
|
}
|
|
|
|
#roster-and-history .player-name {
|
|
font-stretch: 95%;
|
|
}
|
|
|
|
.starting {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#roster-and-history {
|
|
// #today-availability {
|
|
// font-stretch: normal;
|
|
// text-transform: uppercase;
|
|
// font-size: 0.8em;
|
|
// }
|
|
thead {
|
|
border: black solid 1px;
|
|
}
|
|
> div > table {
|
|
/* font-size: 10.5px; */
|
|
padding: 0;
|
|
line-height: 1em;
|
|
/* outline: 0.5px black; */
|
|
}
|
|
|
|
td, th {
|
|
border-left: none;
|
|
border-right: none;
|
|
padding: 0.2em 0.1em 0.2em 0.1em; /* top right bottom left */
|
|
|
|
&.availability-on-day {
|
|
font-family: var(--monospace-font);
|
|
font-stretch: 60%;
|
|
text-align: center;
|
|
max-width: 0.8em;
|
|
min-width: 0.8em;
|
|
}
|
|
|
|
&.availability-on-day.future,
|
|
&.availability-on-day.past {
|
|
font-family: var(--monospace-font);
|
|
font-stretch: condensed;
|
|
font-weight: normal;
|
|
font-size: 0.8em;
|
|
padding: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
&.position-capability {
|
|
font-size: 8px;
|
|
font-stretch: 50%;
|
|
width: 5px;
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
&.player-stats {
|
|
display:none;
|
|
font-family: var(--monospace-font);
|
|
font-size: 1em;
|
|
font-stretch: 60%;
|
|
font-weight: 300;
|
|
|
|
.delimiter,
|
|
.decimal-point {
|
|
font-family: Helvetica Now;
|
|
font-stretch: expanded;
|
|
color: var(--color-grey-500);
|
|
}
|
|
|
|
.decimal-point {
|
|
color: rgb(0, 0, 0, 0);
|
|
}
|
|
|
|
.delimiter {
|
|
color: var(--color-grey-500);
|
|
}
|
|
}
|
|
}
|
|
|
|
td{
|
|
&.player-name {
|
|
color: black;
|
|
text-align: left;
|
|
font-stretch: 95%;
|
|
}
|
|
&.jersey-number {
|
|
color: black;
|
|
border-left: 0.5px solid lightgrey;
|
|
}
|
|
}
|
|
|
|
colgroup {
|
|
border-left-width: 1px;
|
|
border-left-style: solid;
|
|
border-left-color: black;
|
|
border-right-width: 1px;
|
|
border-right-style: solid;
|
|
border-right-color: black;
|
|
}
|
|
|
|
col.player-stats {
|
|
// visibility:collapse;
|
|
border: inherit;
|
|
}
|
|
|
|
th {
|
|
background-color: #cadcf9;
|
|
color: black;
|
|
border: none;
|
|
|
|
&.availability-on-day div {
|
|
transform: rotate(270deg);
|
|
margin-bottom: -5;
|
|
/* font-stretch: 40%; */
|
|
font-stretch: 75%;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
}
|
|
|
|
// .position-capability {
|
|
// font-size: inherit;
|
|
// }
|
|
}
|
|
|
|
thead > tr, tfoot > tr {
|
|
border-bottom: solid black 1px;
|
|
}
|
|
|
|
tbody {
|
|
border-bottom: solid black 1px;
|
|
}
|
|
|
|
tr.border-top {
|
|
border-top: 1px solid black;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
td.position-capability:not(:empty) {
|
|
color: var(--color-grey-700);
|
|
background-color: var(--color-grey-200);
|
|
}
|
|
|
|
td.is-present-checkbox {
|
|
font-size: 0.5em;
|
|
text-align: center;
|
|
color: white;
|
|
/* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
|
|
1px 1px 0 #000; */
|
|
}
|
|
|
|
td.is-present-checkbox.available-status-code-0 > span {
|
|
display: none;
|
|
}
|
|
|
|
td.is-present-checkbox.available-status-code-None > span {
|
|
display: none;
|
|
}
|
|
|
|
#front-cover {
|
|
border: solid 1px black;
|
|
|
|
Header {
|
|
font-family: "Helvetica Now";
|
|
font-weight: 600;
|
|
line-height: 1.5em;
|
|
background-color: #323669;
|
|
color: white;
|
|
display: inline-flex;
|
|
border: none;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.game-number, .homeaway{
|
|
display: grid;
|
|
align-content: center;
|
|
width: 1.4em;
|
|
}
|
|
|
|
.homeaway {
|
|
font-weight: 800;
|
|
font-size: xx-large;
|
|
}
|
|
|
|
.game-number {
|
|
font-size: large;
|
|
font-stretch: extra-condensed;
|
|
font-weight: 700;
|
|
text-wrap: nowrap;
|
|
}
|
|
|
|
.title {
|
|
display: grid;
|
|
font-size: small;
|
|
flex-grow: 1;
|
|
align-content: center;
|
|
}
|
|
|
|
.head-to-head {
|
|
padding:5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.opponent, .team {
|
|
text-align: center;
|
|
font-weight: 800;
|
|
font-size: x-large;
|
|
align-items: center;
|
|
font-family: 'Pacifico';
|
|
display: inline-flex;
|
|
width: 100%;
|
|
flex-grow:1;
|
|
height: 100%;
|
|
}
|
|
|
|
.opponent img, .team img{
|
|
height: 115px;
|
|
}
|
|
|
|
.opponent div:has(.name), .team div:has(.name){
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.opponent name{
|
|
text-align: left;
|
|
}
|
|
|
|
.team name{
|
|
text-align: right;
|
|
}
|
|
}
|
|
|