From 2e6bfe0010393b184f64238102a248771e210b40 Mon Sep 17 00:00:00 2001
From: John Bowdre <john@bowdre.net>
Date: Wed, 8 Nov 2023 22:04:06 -0600
Subject: [PATCH] spruce up torchlight css

---
 assets/css/torchlight.css | 50 ++++++++++++++++++++++++++-------------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/assets/css/torchlight.css b/assets/css/torchlight.css
index d5b2edd..e3d8efb 100644
--- a/assets/css/torchlight.css
+++ b/assets/css/torchlight.css
@@ -1,3 +1,7 @@
+/*********************************************
+* Basic styling for Torchlight code blocks.  *
+**********************************************/
+
 /*
  Margin and rounding are personal preferences,
  overflow-x-auto is recommended.
@@ -40,10 +44,36 @@ pre.torchlight .summary-caret {
   margin-right: 1rem;
 }
 
+/*********************************************
+* Focus styling                              *
+**********************************************/
+
+/*
+Blur and dim the lines that don't have the `.line-focus` class,
+but are within a code block that contains any focus lines.
+*/
+.torchlight.has-focus-lines .line:not(.line-focus) {
+transition: filter 0.35s, opacity 0.35s;
+filter: blur(.095rem);
+opacity: .65;
+}
+
+/*
+When the code block is hovered, bring all the lines into focus.
+*/
+.torchlight.has-focus-lines:hover .line:not(.line-focus) {
+filter: blur(0px);
+opacity: 1;
+}
+
 .torchlight summary:focus {
   outline: none;
 }
 
+/*********************************************
+* Collapse styling                           *
+**********************************************/
+
 /* Hide the default markers, as we provide our own */
 .torchlight details > summary::marker,
 .torchlight details > summary::-webkit-details-marker {
@@ -81,23 +111,9 @@ pre.torchlight .summary-caret {
   display: initial;
 }
 
-/*
-  Blur and dim the lines that don't have the `.line-focus` class,
-  but are within a code block that contains any focus lines.
-*/
-.torchlight.has-focus-lines .line:not(.line-focus) {
-  transition: filter 0.35s, opacity 0.35s;
-  filter: blur(.095rem);
-  opacity: .65;
-}
-
-/*
-When the code block is hovered, bring all the lines into focus.
-*/
-.torchlight.has-focus-lines:hover .line:not(.line-focus) {
-  filter: blur(0px);
-  opacity: 1;
-}
+/*********************************************
+* Additional styling                         *
+**********************************************/
 
 .highlight div {
   overflow-x: visible;