playing with text rendering together, not in the tabset layout. This …

…version has all three renderings stacked on top of each other with sticky headers. Close, but not exactly what I'm aiming for
leeloren · Nov 11, 2024 · 318bd6f · 318bd6f
1 parent 752fd97
commit 318bd6f
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 12 deletions.
diff --git a/chapter4.qmd b/chapter4.qmd
@@ -9,9 +9,10 @@ This is the fourth chapter of my Quarto book.
 library(xml2)
 ```
 
-::: {.panel-tabset}
+<div class="edition-container">
 
-## Transcription
+<div class="edition-column" id="transcription">
+<h2>Transcription</h2>
 
 ```{r results='asis'}
 # Read the XML content
@@ -96,7 +97,7 @@ formatted_text <- paste(c("<div class='column-break'>", processed_lines, "</div>
 cat(formatted_text, sep = "")
 ```
 
-## Expanded Abbreviations
+</div> <div class="edition-column" id="expanded"> <h2>Expanded Abbreviations</h2>
 
 ```{r results='asis'}
 # Read the XML content
@@ -190,7 +191,7 @@ formatted_text <- paste(c("<div class='column-break'>", processed_lines, "</div>
 cat(formatted_text, sep = "")
 ```
 
-## Regularized Text
+</div> <div class="edition-column" id="regularized"> <h2>Regularized Text</h2>
 
 ```{r results='asis'}
 # Read the XML content
@@ -275,4 +276,4 @@ formatted_text <- paste(c("<div class='column-break'>", processed_lines, "</div>
 cat(formatted_text, sep = "")
 ```
 
-:::
+</div> </div> 
diff --git a/docs/chapter4.html b/docs/chapter4.html
@@ -214,10 +214,11 @@ <h1 class="title"><span class="chapter-title">The Edition</span></h1>
 
 
 <p>This is the fourth chapter of my Quarto book.</p>
-<div class="tabset-margin-container"></div><div class="panel-tabset page-columns page-full">
-<ul class="nav nav-tabs" role="tablist"><li class="nav-item" role="presentation"><a class="nav-link active" id="tabset-1-1-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-1" role="tab" aria-controls="tabset-1-1" aria-selected="true">Transcription</a></li><li class="nav-item" role="presentation"><a class="nav-link" id="tabset-1-2-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-2" role="tab" aria-controls="tabset-1-2" aria-selected="false">Expanded Abbreviations</a></li><li class="nav-item" role="presentation"><a class="nav-link" id="tabset-1-3-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-3" role="tab" aria-controls="tabset-1-3" aria-selected="false">Regularized Text</a></li></ul>
-<div class="tab-content page-columns page-full">
-<div id="tabset-1-1" class="tab-pane active page-columns page-full" role="tabpanel" aria-labelledby="tabset-1-1-tab">
+<div class="edition-container page-columns page-full">
+<div id="transcription" class="edition-column page-columns page-full">
+<h2 class="anchored">
+Transcription
+</h2>
 <details class="code-fold">
 <summary>show the code</summary>
 <div class="sourceCode cell-code" id="cb1"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Read the XML content</span></span>
@@ -6075,7 +6076,10 @@ <h1 class="title"><span class="chapter-title">The Edition</span></h1>
 
 </div>
 </div>
-<div id="tabset-1-2" class="tab-pane page-columns page-full" role="tabpanel" aria-labelledby="tabset-1-2-tab">
+<div id="expanded" class="edition-column page-columns page-full">
+<h2 class="anchored">
+Expanded Abbreviations
+</h2>
 <details class="code-fold">
 <summary>show the code</summary>
 <div class="sourceCode cell-code" id="cb2"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Read the XML content</span></span>
@@ -11942,7 +11946,10 @@ <h1 class="title"><span class="chapter-title">The Edition</span></h1>
 
 </div>
 </div>
-<div id="tabset-1-3" class="tab-pane page-columns page-full" role="tabpanel" aria-labelledby="tabset-1-3-tab">
+<div id="regularized" class="edition-column page-columns page-full">
+<h2 class="anchored">
+Regularized Text
+</h2>
 <details class="code-fold">
 <summary>show the code</summary>
 <div class="sourceCode cell-code" id="cb3"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Read the XML content</span></span>
@@ -17801,7 +17808,6 @@ <h1 class="title"><span class="chapter-title">The Edition</span></h1>
 </div>
 </div>
 </div>
-</div>
 
 
 

diff --git a/styles.css b/styles.css
@@ -1,3 +1,55 @@
+.edition-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2em;
+  position: relative;
+  max-width: 100%;
+  margin: 2em auto;
+}
+
+.edition-column {
+  position: sticky;
+  top: 2em;
+  height: fit-content;
+  padding: 1em;
+  transition: opacity 0.3s ease;
+  overflow-y: auto;
+  max-height: 90vh;
+}
+
+/* Base state */
+.edition-column {
+  opacity: 0.7;
+}
+
+/* Hover state */
+.edition-column:hover {
+  opacity: 1;
+}
+
+/* Non-hovered columns when any column is hovered */
+.edition-container:hover .edition-column:not(:hover) {
+  opacity: 0.4;
+}
+
+/* Maintain existing column-break and number styling */
+.edition-column {
+  margin-left: 70px;
+  position: relative;
+  line-height: 1.2;
+}
+
+/* Headers */
+.edition-column h2 {
+  position: sticky;
+  top: 0;
+  background: white;
+  padding: 0.5em 0;
+  margin-bottom: 1em;
+  text-align: center;
+  z-index: 1;
+}
+
 .column-break {
   margin-bottom: 2em; /* Adjust the margin to create the desired spacing */
   margin-left: 70px; /* Space for folio numbers and line numbers*/