lab-manual.css

/* lab-manual.css - Custom styles for lab manual HTML version */

/* Dartmouth green links */
a { color: #00693E; }
a:hover { color: #004d2e; }

/* Headings */
h1, h2, h3 { color: #333; }

/* Typography - use viewport-relative widths matching Tufte-CSS */
body {
  font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  background-color: #fffff8;
  color: #111;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2em;
  width: 87.5%;
  padding-left: 12.5%;
  box-sizing: border-box;
}

/* Main article layout for Tufte-style margins */
article {
  position: relative;
}

/*
 * Tufte-style content width: 55% for main content, leaving room for sidenotes
 * IMPORTANT: Apply 55% width ONLY at the top level to avoid compound narrowing
 * (55% of 55% = 30%, which is too narrow)
 *
 * tex4ht generates: article > direct content (p, h2, dl, etc.)
 * Content inside these should be 100% of their parent
 */

/* Direct children of article get 55% width */
article > p,
article > h2,
article > h3,
article > ul,
article > ol,
article > dl,
article > div:not(.fullwidth):not(.marginnote):not(.sidenote) {
  width: 55%;
}

/* Section intro paragraphs created by JavaScript wrapper */
p.section-intro {
  width: 55%;
  margin-bottom: 1em;
}

/* Table of contents styling */
nav.toc {
  margin: 2em 0;
  width: 55%;
}

nav.toc ul {
  list-style: none;
  padding-left: 1em;
}

nav.toc li {
  margin: 0.5em 0;
}

nav.toc a {
  text-decoration: none;
}

nav.toc a:hover {
  text-decoration: underline;
}

/* Fix logo size - match LaTeX document (~50px) */
img[alt="PIC"],
img[src*="CDL_Avatar"],
p.noindent img {
  max-width: 50px !important;
  width: 50px !important;
  height: auto !important;
  display: block;
  margin-bottom: 1em;
}

/* Lab member lists - display in two balanced columns */
/* tex4ht generates text nodes directly in a div - CSS grid can't work with those.
   JavaScript will wrap text nodes in spans so grid can lay them out. */
div.columns-2,
.columns-2,
.personnel-list {
  width: 80%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2em 2em;
}

/* Individual personnel items (wrapped by JavaScript) */
.personnel-item {
  display: block;
  font-size: 1.4rem;
  line-height: 1.8;
  white-space: nowrap;
}

/* Margin notes styling - positioned in right margin */
.marginnote, .sidenote, span.marginnote, span.sidenote {
  float: right;
  clear: right;
  margin-right: -60%;
  width: 50%;
  margin-top: 0.3rem;
  margin-bottom: 0;
  font-size: 0.9rem;
  line-height: 1.3;
  vertical-align: baseline;
  position: relative;
}

/* Make margin toggles hidden on desktop */
label.margin-toggle:not(.sidenote-number) {
  display: none;
}

input.margin-toggle {
  display: none;
}

label.sidenote-number {
  display: inline-block;
}

/* Definition lists (used for numbered items) */
/* Only top-level dl gets 55% width; nested dl inherits parent width.
   position: relative makes this the containing block for absolutely
   positioned margin notes inside dd elements. */
article > dl {
  width: 55%;
  position: relative;
}

dt {
  float: left;
  clear: left;
  width: 2em;
  font-weight: bold;
}

dd {
  margin-left: 2.5em;
  margin-bottom: 0.5em;
}

/* Nested definition lists inside dd should take full width of parent */
dd dl {
  width: 100%;
}

/* Margin notes inside definition lists: absolutely positioned relative
   to the top-level dl. This removes them from flow so dd elements don't
   expand vertically. left:110% aligns with non-dl margin notes. */
dd .marginnote, dd .sidenote {
  position: absolute;
  left: 110%;
  width: 50%;
  float: none;
  clear: none;
  margin-right: 0;
}

/* Checklist styling - make checkboxes visible */
/* The checklist uses Unicode checkbox characters */

/* Fullwidth sections */
.fullwidth, div.fullwidth {
  max-width: 90%;
  clear: both;
}

/* Mobile responsive - show margin notes inline on smaller screens */
@media (max-width: 760px) {
  body {
    width: 84%;
    padding-left: 8%;
    padding-right: 8%;
  }

  article > p,
  article > section > p,
  article > h2,
  article > section > h2,
  article > ul,
  article > ol,
  article > dl,
  section > p,
  section > ul,
  section > ol,
  section > dl,
  nav.toc,
  div.columns-2,
  dl {
    width: 100%;
  }

  /* Show the toggle label on mobile */
  label.margin-toggle:not(.sidenote-number) {
    display: inline;
    cursor: pointer;
  }

  /* Hide margin notes by default on mobile */
  .sidenote,
  .marginnote {
    display: none;
  }

  /* Show margin notes when toggle is checked */
  .margin-toggle:checked + .sidenote,
  .margin-toggle:checked + .marginnote {
    display: block;
    float: left;
    left: 1rem;
    clear: both;
    width: 95%;
    margin: 1rem 2.5%;
    vertical-align: baseline;
    position: relative;
  }
}

/* Ensure text doesn't overflow on any screen */
* {
  max-width: 100%;
  box-sizing: border-box;
}

/* But don't constrain body itself */
body, html {
  max-width: none;
}

/* Personnel single-entry sections (like PI) should not use grid */
section h3 + p {
  display: block;
}

/* Interactive checklist styles */
.interactive-checklist {
  width: 55%;
  margin: 1.5em 0;
}

.interactive-checklist .checklist-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.75em;
  padding: 0.5em;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.interactive-checklist .checklist-item:hover {
  background-color: rgba(0, 105, 62, 0.05);
}

.interactive-checklist .checklist-item input[type="checkbox"] {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.75em;
  margin-top: 0.2em;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #00693E;
}

.interactive-checklist .checklist-item label {
  cursor: pointer;
  line-height: 1.5;
}

.interactive-checklist .checklist-item.completed label {
  color: #666;
}

/* Signature section styles */
.signature-section {
  width: 55%;
  margin: 2em 0;
  padding: 1.5em;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fafaf8;
}

.signature-section h3 {
  margin-top: 0;
  color: #00693E;
}

.signature-field {
  margin: 1em 0;
}

.signature-field label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.signature-field input[type="text"],
.signature-field input[type="date"] {
  width: 100%;
  max-width: 300px;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1em;
}

.signature-field input[type="text"]:focus,
.signature-field input[type="date"]:focus {
  outline: none;
  border-color: #00693E;
  box-shadow: 0 0 0 2px rgba(0, 105, 62, 0.2);
}

/* Canvas for signature drawing */
.signature-canvas-container {
  margin: 1em 0;
}

.signature-canvas {
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: crosshair;
  touch-action: none;
  background-color: white;
}

.signature-buttons {
  margin-top: 0.5em;
}

.signature-buttons button {
  margin-right: 0.5em;
}

/* Email button */
.email-checklist-btn {
  background-color: #00693E;
  color: white;
  border: none;
  padding: 0.75em 1.5em;
  font-size: 1em;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 1em;
  transition: background-color 0.2s;
}

.email-checklist-btn:hover {
  background-color: #004d2e;
}

.email-checklist-btn:disabled {
  background-color: #999;
  cursor: not-allowed;
}

/* Clear signature button */
.clear-signature-btn {
  background-color: #666;
  color: white;
  border: none;
  padding: 0.5em 1em;
  font-size: 0.9em;
  border-radius: 4px;
  cursor: pointer;
}

.clear-signature-btn:hover {
  background-color: #444;
}

/* Mobile responsive for checklist */
@media (max-width: 760px) {
  .interactive-checklist,
  .signature-section {
    width: 100%;
  }
}