orchard

 1.layout-area {
 2  display: grid;
 3  grid-template-columns: 60px 15% 1fr 1fr 15% 60px;
 4  grid-template-rows: 1fr auto 1fr;
 5  grid-template-areas:
 6    ". . .    .    . ."
 7    ". . main main . ."
 8    ". . .    .    . .";
 9  min-height: 100vh;
10  width: 100%;
11}
12
13@media (max-width: 1023.98px) {
14  .layout-area {
15    grid-template-columns: 10px 5% 1fr 1fr 5% 10px;
16  }
17}
18
19.layout-lines {
20  position: fixed;
21  pointer-events: none;
22  display: grid;
23  grid-template-columns: 60px 15% 1fr 1fr 15% 60px;
24  grid-template-rows: 1fr auto 1fr;
25  grid-template-areas:
26    ". . .    .    . ."
27    ". . main main . ."
28    ". . .    .    . .";
29  min-height: 100vh;
30  width: 100%;
31}
32
33@media (max-width: 1023.98px) {
34  .layout-lines {
35    display: none;
36  }
37}
38
39.layout-line {
40  border-right: 1px solid rgba(125, 125, 125, 0.2);
41  grid-row: 1 / -1;
42}
43
44/* The lines are fixed with no z-index of their own, so on any page that paints
45   a full bleed background after them in the document they are simply covered.
46   About, code and art put their white panels at z-index -2 and keep them, but
47   contact's two columns and the home page's image and word overlay are in
48   normal stacking order and hide them. These two rules lift the lines back
49   over those pages.
50
51   Contact's columns are transformed for their entrance, which makes each one a
52   stacking context, so the lines cannot be slipped underneath the columns and
53   above their backgrounds. They go over the top instead, which is what about
54   and code already look like. */
55[data-page="contact"] .layout-lines {
56  z-index: 1;
57}
58
59/* Home sits under a darkening overlay at z-index 10, so the lines have to
60   clear it, while staying below the hero text at 20. */
61[data-page="index"] .layout-lines {
62  z-index: 15;
63}