styling updates

2024-05-19 08:52:48 -05:00
parent 4ee466e7cb
commit c2b1898b91
5 changed files with 191 additions and 133 deletions
--- a/src/public/css/eventsheet.css
+++ b/src/public/css/eventsheet.css
@@ -19,6 +19,7 @@
  --color-grey-700: #495057;
  --color-grey-800: #343a40;
  --color-grey-900: #212529;
+  --header-height: 17px;
  --row-height: 14px;
  --monospace-font: "Inconsolata", monospace;
  --section-border: 0.5px solid black;
@@ -82,7 +83,7 @@ body {
  text-transform: uppercase;
 }

-table, .lineup-card {
+table, .lineup-card table {
  font-size: inherit;
  border-collapse: collapse;
  empty-cells: show;
@@ -92,18 +93,20 @@ table, .lineup-card {
  overflow-y: hidden;
  width: 100%;
 }
-table th, .lineup-card th, table td, table #roster-and-history .position, #roster-and-history table .position, .lineup-card td, .lineup-card #roster-and-history .position, #roster-and-history .lineup-card .position {
+table th, .lineup-card table th {
+  color: var(--color-grey-700);
+}
+table th, .lineup-card table th, table td, table #roster-and-history .position, #roster-and-history table .position, .lineup-card table td {
  overflow: hidden;
  padding: 0 2px 0 2px;
 }
-table th:empty::after, .lineup-card th:empty::after, table td:empty::after, table #roster-and-history .position:empty::after, #roster-and-history table .position:empty::after, .lineup-card td:empty::after, .lineup-card #roster-and-history .position:empty::after, #roster-and-history .lineup-card .position:empty::after {
+table th:empty::after, table td:empty::after, table #roster-and-history .position:empty::after, #roster-and-history table .position:empty::after {
  content: " ";
 }
-
-table.striped tr:nth-child(odd), .lineup-card tr:nth-child(odd) {
+table.striped tr:nth-child(odd), .lineup-card table tr:nth-child(odd) {
  background-color: whitesmoke;
 }
-table.striped tr:nth-child(even), .lineup-card tr:nth-child(even) {
+table.striped tr:nth-child(even), .lineup-card table tr:nth-child(even) {
  background-color: white;
 }

@@ -115,56 +118,83 @@ table.striped tr:nth-child(even), .lineup-card tr:nth-child(even) {
  float: left;
 }

-section {
+.eventsheet {
+  --page-margin: 0.175in;
+}
+.eventsheet:has(section) {
+  display: grid;
+}
+.eventsheet:has(section) section {
+  --divider-border: lightgrey dashed 1px;
  box-sizing: content-box;
  overflow: hidden;
-  /* outline: 0.5px dashed lightgrey; */
  display: flex;
  flex-direction: column;
  align-items: stretch;
+  outline-style: solid;
+  outline-width: calc(var(--divider-border) / 4);
+  outline-color: lightgray;
 }
-section > div {
+.eventsheet:has(section) section > div {
  display: flex;
  flex: 1;
  align-items: stretch;
  height: auto;
+  width: 100%;
 }
-
-.eventsheet.quarters, .eventsheet.quarters .section-divider {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
-  column-gap: 0.35in;
-  row-gap: 0.35in;
-}
-.eventsheet.quarters.NW {
+.eventsheet:has(section) section.NW {
  grid-area: 1/1/2/2;
 }
-.eventsheet.quarters.NE {
+.eventsheet:has(section) section.NE {
  grid-area: 1/2/2/3;
 }
-.eventsheet.quarters.SW {
+.eventsheet:has(section) section.SW {
  grid-area: 2/1/3/2;
 }
-.eventsheet.quarters.SE {
+.eventsheet:has(section) section.SE {
  grid-area: 2/2/3/3;
 }
-.eventsheet.quarters > .section-divider {
-  --divider-border: lightgrey dashed 1px;
-  position: absolute;
-  grid-column-gap: 0px;
-  grid-row-gap: 0px;
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-}
-.eventsheet.quarters > .section-divider .NW, .eventsheet.quarters > .section-divider .SW {
+.eventsheet:has(section) section.NW .divider, .eventsheet:has(section) section.SW .divider {
  border-right: var(--divider-border);
 }
-.eventsheet.quarters > .section-divider .NW, .eventsheet.quarters > .section-divider .NE {
+.eventsheet:has(section) section.NW .divider, .eventsheet:has(section) section.NE .divider {
  border-bottom: var(--divider-border);
 }

+.eventsheet.quarters {
+  --section-margin: calc(var(--page-margin)/2);
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  column-gap: calc(var(--page-margin) * 2);
+  row-gap: calc(var(--page-margin) * 2);
+  outline-offset: var(--section-margin);
+}
+.eventsheet.quarters section {
+  outline-offset: var(--page-margin);
+}
+
+.letter .eventsheet.index-cards-4x6 {
+  --section-margin: calc(var(--page-margin)/2);
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 125mm;
+  column-gap: calc(var(--page-margin) * 2);
+  row-gap: calc(var(--page-margin) * 2);
+}
+.letter .eventsheet.index-cards-4x6 section {
+  outline-offset: var(--page-margin);
+}
+
+.letter .eventsheet.index-cards-3x5 {
+  --section-margin: calc(var(--page-margin)/2);
+  grid-template-columns: 3in 3in;
+  grid-template-rows: 5in 5in;
+  column-gap: calc(var(--page-margin) * 2);
+  row-gap: calc(var(--page-margin) * 2);
+}
+.letter .eventsheet.index-cards-3x5 section {
+  outline-offset: var(--page-margin);
+}
+
 .lineup-card {
  counter-reset: lineup-sequence-counter 0;
  --border: 0.5px solid grey;
@@ -176,6 +206,7 @@ section > div {
  font-stretch: 85%;
  border-style: none;
  border-bottom: var(--border);
+  height: var(--header-height);
 }
 .lineup-card header:empty::after {
  content: " ";
@@ -199,7 +230,7 @@ section > div {
  font-size: 0.7em;
  border-bottom: var(--border);
 }
-.lineup-card table, .lineup-card .lineup-card {
+.lineup-card table {
  font-size: 21px;
 }
 .lineup-card td, .lineup-card #roster-and-history .position, #roster-and-history .lineup-card .position {
@@ -238,13 +269,13 @@ section > div {
  display: none;
 }

-section.blank {
+section.blank img, section.blank header {
+  filter: grayscale(1) opacity(0.4);
+}
+section.blank > div {
  filter: opacity(0.4);
 }
-section.blank img, section.blank header {
-  filter: grayscale(1);
-}
-section.blank td.substitution, section.blank #roster-and-history .substitution.position, #roster-and-history section.blank .substitution.position {
+section.blank > div td.substitution, section.blank > div #roster-and-history .substitution.position, #roster-and-history section.blank > div .substitution.position {
  border-width: 0.5;
 }

@@ -270,38 +301,38 @@ section.blank td.substitution, section.blank #roster-and-history .substitution.p
  border-right: 0.5px solid grey;
  border-left: 0.5px solid grey;
 }
-#todays-game .footer table, #todays-game .footer .lineup-card {
+#todays-game .footer table {
  height: 100%;
  outline: none;
  border-style: none;
 }
-#todays-game .footer table tr, #todays-game .footer .lineup-card tr {
+#todays-game .footer table tr {
  background-color: white;
  outline: none;
  border-bottom: 0.5px solid var(--color-grey-500);
 }
-#todays-game .footer table tr :last-child, #todays-game .footer .lineup-card tr :last-child {
+#todays-game .footer table tr :last-child {
  background-color: white;
  outline: none;
  border-bottom-style: none;
 }
-#todays-game .footer table th, #todays-game .footer .lineup-card th {
+#todays-game .footer table th {
  text-align: left;
  color: var(--color-grey-600);
 }
-#todays-game .footer table td, #todays-game .footer table #roster-and-history .position, #roster-and-history #todays-game .footer table .position, #todays-game .footer .lineup-card td, #todays-game .footer .lineup-card #roster-and-history .position, #roster-and-history #todays-game .footer .lineup-card .position {
+#todays-game .footer table td, #todays-game .footer table #roster-and-history .position, #roster-and-history #todays-game .footer table .position {
  height: var(--row-height);
  border: none;
 }
-#todays-game .footer table tdempty::after, #todays-game .footer .lineup-card tdempty::after {
+#todays-game .footer table tdempty::after {
  content: "";
 }
-#todays-game table.notes th, #todays-game .notes.lineup-card th {
+#todays-game table.notes th {
  border-left: none;
  border-right: none;
  line-height: 1em;
 }
-#todays-game table.notes td:empty::after, #todays-game table.notes #roster-and-history .position:empty::after, #roster-and-history #todays-game table.notes .position:empty::after, #todays-game .notes.lineup-card td:empty::after, #todays-game .notes.lineup-card #roster-and-history .position:empty::after, #roster-and-history #todays-game .notes.lineup-card .position:empty::after {
+#todays-game table.notes td:empty::after, #todays-game table.notes #roster-and-history .position:empty::after, #roster-and-history #todays-game table.notes .position:empty::after {
  content: "";
 }

@@ -311,7 +342,7 @@ section.blank td.substitution, section.blank #roster-and-history .substitution.p
 #defense-card .footer {
  display: none;
 }
-#defense-card .slot-set table, #defense-card .slot-set .lineup-card {
+#defense-card .slot-set table {
  font-size: 14px;
  width: 120px;
 }
@@ -324,10 +355,10 @@ section.blank td.substitution, section.blank #roster-and-history .substitution.p
  margin-bottom: inherit !important;
  grid-area: 5/1/6/5 !important;
 }
-#defense-card .slot-set.pos-p table, #defense-card .slot-set.pos-p .lineup-card {
+#defense-card .slot-set.pos-p table {
  width: 120px !important;
 }
-#defense-card .slot-set.pos-p table tbody > tr:last-child, #defense-card .slot-set.pos-p .lineup-card tbody > tr:last-child {
+#defense-card .slot-set.pos-p table tbody > tr:last-child {
  display: table-row;
 }

@@ -360,17 +391,18 @@ section.blank td.substitution, section.blank #roster-and-history .substitution.p
 #defense-pane .slot-set .player-name {
  font-stretch: 80%;
 }
-#defense-pane .slot-set table, #defense-pane .slot-set .lineup-card {
+#defense-pane .slot-set table {
  --border: grey solid 0.5px;
  border: var(--border);
+  opacity: 85%;
 }
-#defense-pane .slot-set table tr:first-child th, #defense-pane .slot-set .lineup-card tr:first-child th {
+#defense-pane .slot-set table tr:first-child th {
  border-bottom: var(--border);
 }
-#defense-pane .slot-set table tr + tr, #defense-pane .slot-set .lineup-card tr + tr {
+#defense-pane .slot-set table tr + tr {
  border-top: var(--border);
 }
-#defense-pane .slot-set table tr th.position, #defense-pane .slot-set .lineup-card tr th.position {
+#defense-pane .slot-set table tr th.position {
  font-family: var(--monospace-font);
  width: 2ch;
  text-align: right;
@@ -466,7 +498,7 @@ section.blank td.substitution, section.blank #roster-and-history .substitution.p
  margin-bottom: 4px;
  grid-area: 6/1/7/5;
 }
-#defense-pane .slot-set.pos-p table, #defense-pane .slot-set.pos-p .lineup-card {
+#defense-pane .slot-set.pos-p table {
  width: 100%;
 }
 #defense-pane .slot-set.pos-p tr.substitute .position:empty {
@@ -484,7 +516,7 @@ section.blank td.substitution, section.blank #roster-and-history .substitution.p
  counter-reset: lineup-sequence-counter 0;
  /* outline: 0.5px solid black; */
 }
-#offense-pane table, #offense-pane .lineup-card {
+#offense-pane table {
  height: 100%;
  border: none;
 }
@@ -595,8 +627,9 @@ header {
 }
 #roster-and-history thead {
  border: black solid 1px;
+  height: var(--header-height);
 }
-#roster-and-history > div > table, #roster-and-history > div > .lineup-card {
+#roster-and-history > div > table {
  /* font-size: 10.5px; */
  padding: 0;
  line-height: 1em;
@@ -672,7 +705,6 @@ header {
 }
 #roster-and-history td.jersey-number, #roster-and-history .jersey-number.position {
  color: black;
-  border-left: 0.5px solid lightgrey;
 }
 #roster-and-history colgroup {
  border-left-width: 1px;
@@ -692,7 +724,6 @@ header {
 }
 #roster-and-history th.availability-on-day div, #roster-and-history th.position div {
  transform: rotate(270deg);
-  margin-bottom: -5;
  /* font-stretch: 40%; */
  font-stretch: 75%;
  font-weight: 500;
@@ -756,7 +787,6 @@ td.is-present-checkbox.available-status-code-None > span, #roster-and-history .i
 #front-cover Header .game-number, #front-cover Header .homeaway {
  display: grid;
  align-content: center;
-  width: 1.4em;
 }
 #front-cover Header .game-number {
  font-size: large;
@@ -764,6 +794,9 @@ td.is-present-checkbox.available-status-code-None > span, #roster-and-history .i
  font-weight: 700;
  text-wrap: nowrap;
 }
+#front-cover > div {
+  width: inherit;
+}
 #front-cover th {
  background-color: whitesmoke;
 }
--- a/src/public/css/eventsheet.css.map
+++ b/src/public/css/eventsheet.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/eventsheet.scss"],"names":[],"mappings":";AAAQ;AACA;AACA;AACA;AACA;AACA;AAER;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;AACA;EACE;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;;AAIJ;AACA;EACE;IACE;;EAEF;IACE;;EAEF;IACE;IACA;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EAA+B;EAAc;;;AAC7C;EAA+B;EAAc;;;AAC7C;EAA+B;EAAc;;;AAE7C;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEA;EACE;;;AAOF;EACE;;AAGF;EACE;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;AACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;AAKN;EACE;EAEA;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAIJ;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAMN;EACE;EACA;EACA;;AAGF;EACE;;AAGF;AACE;;AACA;EACE;;AACA;EACE;;AAGJ;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAIJ;EAEE;;AAIA;EACE;EACA;;AAEF;EACE;;AAKF;EACE;;AAGF;EACE;;;AAKN;EACE;;AACA;EACE;;AAEF;EACE;;;AAMF;EACE;EACA;EACA;EACA,qBACE;;AAIJ;EACE;;AAGF;EACE;;AAGF;AACE;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAQJ;EACE;EACA;EACA;;AAEF;EACE;;;AAON;EACE;;AAGF;EACE;;AAIA;EACE;EACA;;AAMF;EACE;;AAGF;EAOE;EACA;EACA;EACA;;AATA;EACE;;AACA;EACE;;;AAcV;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIA;EACE;;AAGF;EACE;EACA;;AAEE;EACE;;AAEF;EACE;;AAEF;EACA;EACA;EACA;;AAQA;EACE;;AACA;EACA,SA9BM;;AA2BR;EACE;;AACA;EACA,SA9BM;;AA2BR;EACE;;AACA;EACA,SA9BM;;AA2BR;EACE;;AACA;EACA,SA9BM;;AA2BR;EACE;;AACA;EACA,SA9BM;;AA2BR;EACE;;AACA;EACA,SA9BM;;AA2BR;EACE;;AACA;EACA,SA9BM;;AA2BR;EACE;;AACA;EACA,SA9BM;;AA2BR;EACE;;AACA;EACA,SA9BM;;AAmCZ;EACE;EAEA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EAIE;EACA;EACA;;AALA;EACE;;AAKF;EACE;;AACA;EACE;;;AASV;EACE;AACA;EACA;EAEA;EACA;AACA;;AAEA;EACE;EACA;;AAGF;EACE;;AACA;EACE;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;AACA;EACE;;AAEF;AACE;EACA;EACA;AACA;;AAIA;EACA;;AAIF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAOF;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAMN;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;AACA;EACA;EACA;EACA;;AAQJ;EACE;;AAGF;EACE;;AAGF;EACE;;;AAOJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;AACA;AAAA;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE","file":"eventsheet.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/eventsheet.scss"],"names":[],"mappings":";AAAQ;AACA;AACA;AACA;AACA;AACA;AAER;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;AACA;EACE;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;;AAIJ;AACA;EACE;IACE;;EAEF;IACE;;EAEF;IACE;IACA;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EAA+B;EAAc;;;AAC7C;EAA+B;EAAc;;;AAC7C;EAA+B;EAAc;;;AAE7C;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AAEA;EACE;;AAMA;EACE;;AAGF;EACE;;;AAOR;EACE;;;AAGF;EACE;;;AAGF;EACE;;AACA;EACE;;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMN;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAIN;EACE;EACE;EACA;EACA;EACA;;AACA;EACE;;;AAIN;EACE;EACE;EACA;EACA;EACA;;AACA;EACE;;;AAIN;EACE;EAEA;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAIJ;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAMN;EACE;EACA;EACA;;AAGF;EAEE;;AAGF;AACE;;AACA;EACE;;AACA;EACE;;AAGJ;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAIJ;EAEE;;AAIA;EACE;EACA;;AAEF;EACE;;AAKF;EACE;;AAGF;EACE;;;AAMJ;EACE;;AAEF;EACE;;AACA;EACE;;;AAOJ;EACE;EACA;EACA;EACA,qBACE;;AAIJ;EACE;;AAGF;EACE;;AAGF;AACE;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAQJ;EACE;EACA;EACA;;AAEF;EACE;;;AAON;EACE;;AAGF;EACE;;AAIA;EACE;EACA;;AAMF;EACE;;AAGF;EAOE;EACA;EACA;EACA;;AATA;EACE;;AACA;EACE;;;AAcV;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIA;EACE;;AAGF;EACE;EACA;EACA;;AAEE;EACE;;AAEF;EACE;;AAEF;EACA;EACA;EACA;;AAQA;EACE;;AACA;EACA,SA/BM;;AA4BR;EACE;;AACA;EACA,SA/BM;;AA4BR;EACE;;AACA;EACA,SA/BM;;AA4BR;EACE;;AACA;EACA,SA/BM;;AA4BR;EACE;;AACA;EACA,SA/BM;;AA4BR;EACE;;AACA;EACA,SA/BM;;AA4BR;EACE;;AACA;EACA,SA/BM;;AA4BR;EACE;;AACA;EACA,SA/BM;;AA4BR;EACE;;AACA;EACA,SA/BM;;AAoCZ;EACE;EAEA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EAIE;EACA;EACA;;AALA;EACE;;AAKF;EACE;;AACA;EACE;;;AASV;EACE;AACA;EACA;EAEA;EACA;AACA;;AAEA;EACE;EACA;;AAGF;EACE;;AACA;EACE;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;AACA;EACE;EACA;;AAEF;AACE;EACA;EACA;AACA;;AAIA;EACA;;AAIF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAOF;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAMN;EACE;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;AACA;EACA;EACA;EACA;;AAQJ;EACE;;AAGF;EACE;;AAGF;EACE;;;AAOJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;AACA;AAAA;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE","file":"eventsheet.css"}
--- a/src/scss/eventsheet.scss
+++ b/src/scss/eventsheet.scss
@@ -19,6 +19,7 @@
  --color-grey-700: #495057;
  --color-grey-800: #343a40;
  --color-grey-900: #212529;
+  --header-height: 17px;
  --row-height: 14px;
  --monospace-font: "Inconsolata", monospace;
  --section-border: 0.5px solid black; 
@@ -83,6 +84,9 @@ table {
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
+  th {
+    color: var(--color-grey-700);
+  }
  th, td {
    overflow: hidden;
    padding: 0 2px 0 2px; 
@@ -91,20 +95,21 @@ table {
      content: "\00a0";
    }
  }
-}

-table.striped {
-  tr {
-    &:nth-child(odd) {
-      background-color: whitesmoke;
-    }
+  &.striped {
+    tr {
+      &:nth-child(odd) {
+        background-color: whitesmoke;
+      }
      
-    &:nth-child(even) {
-      background-color: white;
+      &:nth-child(even) {
+        background-color: white;
+      }
    }
  }
 }

+
 .float-right {
  float: right;
 }
@@ -113,30 +118,28 @@ table.striped {
  float: left;
 }

-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;
-  }
-}
-
-.eventsheet.quarters {
-  &, .section-divider {
+.eventsheet{
+  --page-margin: 0.175in;
+  &:has(section) {
    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    column-gap: 0.35in;
-    row-gap: 0.35in;
-  }
+    section {
+    --divider-border: lightgrey dashed 1px;
+    box-sizing: content-box;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    outline-style: solid;
+    outline-width: calc(var(--divider-border)/4);
+    outline-color: lightgray;
+  
+    > div {
+      display: flex;
+      flex: 1;
+      align-items: stretch;
+      height: auto;
+      width:100%
+    }

    &.NW {
      grid-area: 1 / 1 / 2 / 2;
@@ -151,28 +154,54 @@ section {
      grid-area: 2 / 2 / 3 / 3;
      }

-  > .section-divider {
-    --divider-border: lightgrey dashed 1px;
-    position:  absolute;
-    grid-column-gap: 0px;
-    grid-row-gap: 0px;
-    height: 100%;
-    width: 100%;
-    box-sizing: border-box;
-
-    .NW, .SW {
+    &.NW .divider, &.SW .divider {
      border-right:var(--divider-border);
    }
  
-    .NW, .NE {
+    &.NW .divider, &.NE .divider {
      border-bottom:var(--divider-border);
    }
+    }
  }
 }

+.eventsheet.quarters {
+    --section-margin: calc(var(--page-margin)/2);
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    column-gap: calc(var(--page-margin)*2);
+    row-gap: calc(var(--page-margin)*2);
+    outline-offset: var(--section-margin);
+    section {
+      outline-offset: var(--page-margin);
+    }
+}
+
+.letter .eventsheet.index-cards-4x6 {
+  --section-margin: calc(var(--page-margin)/2);
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 125mm;
+    column-gap: calc(var(--page-margin)*2);
+    row-gap: calc(var(--page-margin)*2);
+    section {
+      outline-offset: var(--page-margin);
+    }
+}
+
+.letter .eventsheet.index-cards-3x5 {
+  --section-margin: calc(var(--page-margin)/2);
+    grid-template-columns: 3in 3in;
+    grid-template-rows: 5in 5in;
+    column-gap: calc(var(--page-margin)*2);
+    row-gap: calc(var(--page-margin)*2);
+    section {
+      outline-offset: var(--page-margin);
+    }
+}
+
 .lineup-card {
  counter-reset: lineup-sequence-counter 0;
-  @extend table, .striped;
+  
  --border: 0.5px solid grey;

  border: var(--section-border);
@@ -183,6 +212,7 @@ section {
    font-stretch: 85%;
    border-style: none;
    border-bottom: var(--border);
+    height: var(--header-height);
    &:empty::after {
      content: "\00a0";
    }
@@ -211,6 +241,7 @@ section {
  }

  table {
+    @extend table, .striped;
    font-size: 21px;
  }
  
@@ -261,12 +292,14 @@ section {
 } 

 section.blank {
-  filter: opacity(0.4);
  img, header {
-    filter: grayscale(1);
+    filter: grayscale(1) opacity(0.4);
  }
-  td.substitution {
-    border-width: 0.5;
+  > div {
+    filter: opacity(0.4);
+    td.substitution {
+      border-width: 0.5;
+    }  
  } 
 }

@@ -422,6 +455,7 @@ section.blank {
    table {
      --border: grey solid 0.5px;
      border: var(--border);
+      opacity: 85%;
      tr {
        &:first-child th{
          border-bottom: var(--border);
@@ -630,6 +664,7 @@ header {
  --border: var(--section-border);
  thead {
    border: black solid 1px;
+    height: var(--header-height);
  }
  > div > table {
    /* font-size: 10.5px; */
@@ -725,7 +760,6 @@ header {
    }
    &.jersey-number {
      color: black;
-      border-left: 0.5px solid lightgrey;
    }
  }

@@ -750,7 +784,6 @@ header {

    &.availability-on-day div {
      transform: rotate(270deg);
-      margin-bottom: -5;
      /* font-stretch: 40%; */
      font-stretch: 75%;
      font-weight: 500;
@@ -827,7 +860,6 @@ td.is-present-checkbox.available-status-code-None > span {
    .game-number, .homeaway{
      display: grid;
      align-content: center;
-      width: 1.4em;
    }
  
    .game-number {
@@ -838,6 +870,10 @@ td.is-present-checkbox.available-status-code-None > span {
    }
  }

+  > div {
+    width: inherit;
+  }
+
  th {
    background-color: whitesmoke;
  }
@@ -853,8 +889,6 @@ td.is-present-checkbox.available-status-code-None > span {
    text-transform: none;
  }
  
-  
-  
  .head-to-head {
    padding:5px;
    display: flex;
--- a/src/views/eventsheet/partials/page_section_divider.hbs
+++ b/src/views/eventsheet/partials/page_section_divider.hbs
@@ -1,7 +0,0 @@
-
-<div class="section-divider">
-    <section class="NW"></section>
-    <section class="NE"></section>
-    <section class="SW"></section>
-    <section class="SE"></section>
-</div>
--- a/src/views/eventsheet/sheet.hbs
+++ b/src/views/eventsheet/sheet.hbs
@@ -1,8 +1,8 @@
 <link rel="stylesheet" href="/css/eventsheet.css">

-<body class="B5">
-  <div class="sheet eventsheet quarters" id="page-1">
-    <section class="NW" id="defense-card">
+<body class="{{#if sheet_size}}{{sheet_size}}{{else}}B5{{/if}}">
+  <div class="sheet eventsheet {{#if sheet_layout}}{{sheet_layout}}{{else}}quarters{{/if}}" id="page-1">
+    <section class="NE" id="defense-card">
      <header>
        <div class="event-title float-left">
          {{event.formattedTitle}} – {{dateFormat event.startDate "ddd, MMM D h:mm A" }}
@@ -31,7 +31,7 @@
        </div>
      </div>
    </section>
-    <section class="NE" id="roster-and-history">
+    <section class="SW" id="roster-and-history">
      <div class="roster-and-history">
        {{> roster_and_history 
          event=event 
@@ -42,7 +42,7 @@
          }}
      </div>
    </section>
-    <section class="SW lineup-card dugout" id="lineup-card-dugout">
+    <section class="NW lineup-card dugout" id="lineup-card-dugout">
      <header>
        <div class="float-left event-title">{{event.formattedTitle}}</div>
        <div class="float-right homeaway">{{event.gameType}}</div>
@@ -118,10 +118,9 @@
        </table>
      </div>
    </section>
-    {{>page_section_divider}}
  </div>
-  <div class="sheet eventsheet quarters" id="page-2">
-    <section class="NW" id="front-cover">
+  <div class="sheet eventsheet {{#if sheet_layout}}{{sheet_layout}}{{else}}quarters{{/if}}" id="page-2">
+    <section class="SE" id="front-cover">
      <header>
        <div class="game-number">
          {{event.label}}
@@ -177,7 +176,7 @@
        {{/if}}
      </div>
    </section>
-    <section class="NE blank" id="defense-card">
+    <section class="NW blank" id="defense-card">
      <header>
        <div class="event-title float-left">
          &nbsp;
@@ -239,7 +238,7 @@
        </table>
      </div>
    </section>
-    <section class="SE lineup-card dugout blank" id="lineup-card-dugout-blank">
+    <section class="NE lineup-card dugout blank" id="lineup-card-dugout-blank">
      <header></header>
      <div class="starting-lineup-table">
        <table>
@@ -274,6 +273,5 @@
        </table>
      </div>
    </section>
-    {{>page_section_divider}}
  </div>
 </body>