Major changes: Include extensions lightbox and accordion, several text revisions

Author: aputtu

docs/images/archives/archives-create-freezearchive.png renamed to docs/_static/archives/archives-create-freezearchive.png

@@ -1,4 +1,88 @@
+/*
+Modifications for the Sphinx based Read the Docs theme sphinx_rtd_theme.
+Changes are made in order to adhere to University of Copenhagen's style guide.
+*/
+a {
+	color: #679c5b;
+}
+
+body {
+	font-family: "Open Sans",Helvetica,Arial,sans-serif
+}
+.wy-side-nav-search {background-color: white;}
+.wy-menu-vertical a {color: #252525;}
+.wy-menu-vertical li.current > a {color:#901a1e;}
+
+.wy-menu-vertical a:hover {
+    background-color:#eee;
+	cursor:pointer;
+	color: #901a1e !important;
+}
+.wy-menu-vertical p.caption {color: #252525;}
+
+.wy-menu-vertical li.toctree-l2.current li.toctree-l3 > a {background: #eee;border:0;}
+@media screen and (max-width: 1100px) {
+  .wy-nav-content-wrap {
+    margin-left: 0;
+  }
+
+  .wy-nav-side {
+    left: -300px;
+  }
+
+  .wy-nav-side.shift {
+    left: 0px;
+    width: 300px;
+    background: unset;
+  }
+
+  .wy-nav-content-wrap.shift {
+    position: fixed;
+    min-width: 100%;
+    left: 300px;
+    top: 0;
+    height: 100%;
+    overflow: hidden;
+  }
 
+  .wy-menu.wy-menu-vertical, .wy-side-nav-search, .wy-side-scroll {
+    width: 300px;
+  }
+
+  .wy-nav-top {
+    display: block;
+    background: white;
+  }
+
+  [data-toggle="wy-nav-top"] {
+      color: #404040;
+  }
+
+  nav.wy-nav-top a {
+    color: #404040;
+    font-family: Roboto Slab,ff-tisa-web-pro,Georgia,Arial,sans-serif;
+    font-size: 200%;
+  }
+}
+
+@media screen and (min-width: 1100px) {
+  .wy-grid-for-nav nav {
+   background: white;
+  }
+}
+
+/* Distinguishing images from text content  */
+.rst-content img.with-border {
+        border-color: lightgrey;
+        border-width: 2px;
+        border-style: solid;
+    }
+
+
+.wy-nav-content a {
+  color: #2c6694;
+  text-decoration: underline;
+    
 a {
 	color: #679c5b;
 }
@@ -37,7 +121,7 @@ body {
 
   .wy-nav-top {
     display: block;
-    background: #c9c9c9;
+    background: white;
   }
 
   [data-toggle="wy-nav-top"] {
@@ -64,57 +148,83 @@ body {
         border-style: solid;
     }
 
-/* Details expand-collaps boxes 
-summary {
-  list-style: none;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: bold;
-  width: 100%;
-  font-size: 15px;
-  background: lightgrey;
-  padding: 3px 2px 0 5px;
-} */
+
 .wy-nav-content a {
-  color: #666 !important;
-}
-/*
-summary::after {
-  content: '';
-  width: 18px;
-  height: 10px;
-  background: url('arrow_down.svg') no-repeat;
-  background-size: 14px;
-  margin-left: .75em;
-  transition: 0.2s;
+    color: #666 !important;
+    
+a {
+	color: #679c5b;
 }
 
-details[open] > summary::after {
-  transform: rotate(180deg);
-  position: relative;
-  bottom: 2px;
-  right: 4px;
+body {
+	font-family: "Open Sans",Helvetica,Arial,sans-serif
 }
 
-summary::-webkit-details-marker {
-  display: none;
-}
+@media screen and (max-width: 1100px) {
+  .wy-nav-content-wrap {
+    margin-left: 0;
+  }
+
+  .wy-nav-side {
+    left: -300px;
+  }
 
-summary {
-  border-radius: 0px;
+  .wy-nav-side.shift {
+    left: 0px;
+    width: 300px;
+    background: unset;
+  }
+
+  .wy-nav-content-wrap.shift {
+    position: fixed;
+    min-width: 100%;
+    left: 300px;
+    top: 0;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .wy-menu.wy-menu-vertical, .wy-side-nav-search, .wy-side-scroll {
+    width: 300px;
+  }
+
+  .wy-nav-top {
+    display: block;
+    background: white;
+  }
+
+  [data-toggle="wy-nav-top"] {
+    color: #404040;
+  }
+
+  nav.wy-nav-top a {
+    color: #404040;
+    font-family: Roboto Slab,ff-tisa-web-pro,Georgia,Arial,sans-serif;
+    font-size: 200%;
+  }
 }
 
-details[open] summary {
-  border-radius: 0px 0px 0 0;
+@media screen and (min-width: 1100px) {
+  .wy-grid-for-nav nav {
+    background: white;
+  }
 }
 
-details {
-  border-radius: 0px;
-  border: 1px solid #666;
-  margin-bottom: 10px;
+/* Distinguishing images from text content  */
+.rst-content img.with-border {
+        border-color: lightgrey;
+        border-width: 2px;
+        border-style: solid;
+    }
+
+
+.wy-nav-content a {
+  color: #2c6694;
+  text-decoration: underline;
+}
+    
 }
-*/
+
 
     /* Coloring */    
     .rst-content .note .admonition-title, 
@@ -200,13 +310,9 @@ details {
 	background: lightgrey
     }
 
-    .wy-menu-vertical a:hover {
-	background-color:lightgray;
-	cursor:pointer
-    }
 
     .wy-side-nav-search {
-	background: white;
+	background: white !important;
     }
 
     .wy-side-nav-search input[type="text"] {

docs/images/archives/archives-createnew.png renamed to docs/_static/archives/archives-createnew.png

@@ -40,7 +40,8 @@ class Lightbox(Directive):
         .. lightbox:: path/to/image.jpg
            :alt: Alternative text for the image
            :caption: A caption for the image
-           :percentage: 50 80
+           :percentage: 50 80 95
+           :class: border-box
     """
 
     has_content = True
@@ -51,8 +52,10 @@ class Lightbox(Directive):
         'alt': directives.unchanged,
         'caption': directives.unchanged,
         'percentage': directives.positive_int_list,
+        'class': directives.unchanged,
     }
 
+
     def run(self):
         """
         Create a lightbox element.
@@ -65,26 +68,38 @@ def run(self):
         alt_text = self.options.get('alt', '')
         caption = self.options.get('caption', '')
         percentages = self.options.get('percentage', [])
+        custom_class = self.options.get('class', '')
 
+        # Set default values for thumbnail_width, lightbox_width, and height_style. Can be overridden by percentage option.
+        # Initial value uses full width, or with of the image.
         thumbnail_width = '100%'
-        lightbox_width = '100%'
+        # Initial value uses 95 % of width, specifically to allow for Close image icon.
+        # Initial value uses 95 % of height, specifically to allow for caption text.
 
+        # Inside the run() method
         if percentages:
-            # The first percentage is the thumbnail width according to container width.
             thumbnail_width = f'{percentages[0]}%'
             if len(percentages) > 1:
-                # vw is a CSS unit that represents a percentage of the viewport width
-                lightbox_width = f'{percentages[1]}vw'
+                scale_percentage = percentages[1]
+                # Use min() function in CSS to automatically choose the constraining dimension
+                size_style = f"""
+                    width: min({scale_percentage}vw, calc({scale_percentage}vh * var(--aspect-ratio)));
+                    height: min({scale_percentage}vh, calc({scale_percentage}vw / var(--aspect-ratio)));
+                """
 
         # Generate a unique ID for the checkbox
         checkbox_id = f"lightbox-{env.new_serialno('lightbox')}"
 
         # Construct the full source path
         src_image_path = os.path.join(env.srcdir, image_path)
 
-        # Copy the image to _static directory
+        # Copy the image to _static directory while preserving subdirectories
         static_dir = '_static'
-        new_image_path = os.path.join(static_dir, os.path.basename(image_path))
+        rel_path = os.path.relpath(image_path)
+        new_image_path = os.path.join(static_dir, rel_path)
+
+        # Create subdirectories if they don't exist
+        os.makedirs(os.path.dirname(os.path.join(env.app.outdir, new_image_path)), exist_ok=True)
 
         try:
             copy_asset_file(src_image_path, os.path.join(env.app.outdir, new_image_path))
@@ -95,24 +110,28 @@ def run(self):
         # Generate the correct relative path
         current_page_path = env.docname
         image_url = relative_uri(current_page_path, new_image_path)
-
         # Use image_url in your HTML generation
         html = f"""
         <label for="{checkbox_id}">
-            <img src="{image_url}" alt="{alt_text}" class="lightbox-trigger" style="width: {thumbnail_width};">
+            <img src="{image_url}" alt="{alt_text}" class="lightbox-trigger {custom_class}" 
+                style="width: {thumbnail_width};">
         </label>
         <input type="checkbox" id="{checkbox_id}" class="lightbox-toggle">
         <div class="lightbox">
-            <label for="{checkbox_id}" class="close-btn">×</label>
             <label for="{checkbox_id}">
-                <div class="lightbox-content">
-                    <img src="{image_url}" alt="{alt_text}" style="width: {lightbox_width};">
-                    <p class="lightbox-caption">{caption}</p>
+                <div class="lightbox-content" style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                    <div class="image-container" style="text-align: center;">
+                        <img src="{image_url}" alt="{alt_text}" class="{custom_class}" style="{size_style}"
+                            onload="this.style.setProperty('--aspect-ratio', this.naturalWidth / this.naturalHeight);">
+                        <div class="caption-overlay" style="text-align: center;">{caption}</div>
+                        <label for="{checkbox_id}" class="close-btn-overlay">×</label>
+                    </div>
+                    <p class="caption-below" style="text-align: center;">{caption}</p>
+                    <label for="{checkbox_id}" class="close-btn-side">×</label>
                 </div>
             </label>
         </div>
         """
-
         return [nodes.raw('', html, format='html')]
 
 def setup(app):