styling updates

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;
-    }
-    
-    &:nth-child(even) {
-      background-color: white;
+  &.striped {
+    tr {
+      &:nth-child(odd) {
+        background-color: whitesmoke;
+      }
+      
+      &:nth-child(even) {
+        background-color: white;
+      }
     }
   }
 }
 
+
 .float-right {
   float: right;
 }
@@ -113,31 +118,29 @@ 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,13 +292,15 @@ section {
 } 
 
 section.blank {
-  filter: opacity(0.4);
   img, header {
-    filter: grayscale(1);
-  }
-  td.substitution {
-    border-width: 0.5;
+    filter: grayscale(1) opacity(0.4);
   }
+  > 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;
   }
@@ -852,8 +888,6 @@ td.is-present-checkbox.available-status-code-None > span {
     font-family: "Futura Now";
     text-transform: none;
   }
-
-  
   
   .head-to-head {
     padding:5px;