improved alpenglow theme

StaticGalleryBuilder.code-workspace

@@ -32,7 +32,7 @@
                     "-t",
                     "Pictures",
                     "--theme",
-                    "themes/aritim-dark.css",
+                    "themes/alpenglow.css",
                     "--use-fancy-folders",
                     "--web-manifest",
                     "-l",

builder.py

@@ -19,7 +19,7 @@ from modules.generate_html import list_folder, EXCLUDES
 # Constants
 STATIC_FILES_DIR = os.path.join(os.path.abspath(os.path.dirname(__file__)), "files")
 SCRIPT_DIR = os.path.abspath(os.path.dirname(__file__))
-VERSION = "2.2.1"
+VERSION = "2.2.2"
 RAW_EXTENSIONS = [
     ".3fr", ".ari", ".arw", ".bay", ".braw", ".crw", ".cr2", ".cr3", ".cap", ".data", ".dcs", ".dcr",
     ".dng", ".drf", ".eip", ".erf", ".fff", ".gpr", ".iiq", ".k25", ".kdc", ".mdc", ".mef", ".mos",

files/global.css

@@ -83,6 +83,16 @@ figure {
   min-height: calc(6.75pt + 12px);
 }
 
+.footer a {
+  display: inline-block;
+}
+
+.footer a img {
+  height: 22px !important;
+  margin-left: 3px;
+  vertical-align: text-bottom
+}
+
 .navbar {
   list-style-type: none;
   margin: 0;

generate_previews.py

@@ -12,6 +12,7 @@ from typing import List
 from selenium import webdriver
 from selenium.webdriver.chrome.service import Service
 from selenium.webdriver.chrome.options import Options
+from selenium.webdriver.common.by import By
 
 from modules.svg_handling import extract_colorscheme
 
@@ -91,6 +92,10 @@ def take_screenshot(html_file_path: str, css_file: str, output_file: str, driver
         # Wait for a while to ensure CSS is applied
         time.sleep(2)
 
+        # Move mouse to info
+        hoverable = driver.find_element(By.CLASS_NAME, "tooltip")
+        webdriver.ActionChains(driver).move_to_element(hoverable).perform()
+
         # Capture screenshot
         driver.save_screenshot(output_file)
         logging.info("Screenshot saved to %s", output_file)
@@ -133,7 +138,8 @@ def create_preview(html_file_path: str, css_file: str, previews_folder: str):
             svg = svg.replace("{{ color3 }}", colorscheme["color3"])
             svg = svg.replace("{{ color4 }}", colorscheme["color4"])
         svg = urllib.parse.quote(svg)
-        os.remove(os.path.join(path, "previews", basename))
+        if os.path.exists(os.path.join(path, "previews", basename)):
+            os.remove(os.path.join(path, "previews", basename))
         with open(os.path.join(path, "previews", basename), "x", encoding="utf-8") as f:
             f.write(themehead + '\n.foldericon {\n  content: url("data:image/svg+xml,' + svg + '");\n}\n' + themetail)
 

templates/index.html.j2

@@ -37,16 +37,18 @@
       {%- endif %}
       <li class="title"><span class="header">{{ header }}</span></li>
       {%- if license %}
-      <li class="license"><a href="{{ license.url }}" target="_blank">License</a></li>
+      <li class="license"><a href="{{ license.url }}" rel="license noopener noreferrer" target="_blank">License</a></li>
       {%- endif %}
     </ul>
     {% if subdirectories %}
     <div class="folders">
       {%- for subdirectory in subdirectories %}
-      <figure>
+      <a href="{{ subdirectory.url }}">
-        <a href="{{ subdirectory.url }}"><img class="foldericon" /></a>
+        <figure>
-        <figcaption><a href="{{ subdirectory.url }}">{{ subdirectory.name }}</a></figcaption>
+          <img class="foldericon" />
-      </figure>
+          <figcaption>{{ subdirectory.name }}</figcaption>
+        </figure>
+      </a>
       {%- endfor %}
     </div>
     {%- endif %}
@@ -86,22 +88,21 @@
     </a>
     {%- else %}
     <a property="dct:title" rel="cc:attributionURL" href="{{ root }}">{{ license.project }}</a> by <span property="cc:attributionName">{{ license.author }}</span> is licensed under
-    <a href="{{ license.url }}" target="_blank" rel="license noopener noreferrer" style="display: inline-block">{{ license.type }}
+    <a href="{{ license.url }}" target="_blank" rel="license noopener noreferrer">{{ license.type }}
       {%- for pic in license.pics %}
-      <img style="height: 22px !important; margin-left: 3px; vertical-align: text-bottom" src="{{ pic }}" alt="" />
+      <img src="{{ pic }}" alt="" />
       {%- endfor %}
     </a>
     {%- endif %}
-    <span class="attribution">Made with <a href="https://github.com/greflm13/StaticGalleryBuilder" target="_blank">StaticGalleryBuilder {{ version }}</a> by <a href="https://github.com/greflm13"
+    <span class="attribution">Made with <a href="https://github.com/greflm13/StaticGalleryBuilder" target="_blank" rel="noopener noreferrer">StaticGalleryBuilder {{ version }}</a> by <a
-        target="_blank">Flo Greistorfer</a>.</span>
+        href="https://github.com/greflm13" target="_blank" rel="noopener noreferrer">Flo Greistorfer</a>.</span>
     <button onclick="topFunction()" id="totop" title="Back to Top">Back to Top</button>
   </div>
   {%- endif %}
   {%- else %}
   <div class="footer">
     <span class="attribution">Made with <a href="https://github.com/greflm13/StaticGalleryBuilder" target="_blank" rel="noopener noreferrer">StaticGalleryBuilder {{ version }}</a> by <a
-        href="https://github.com/greflm13"
+        href="https://github.com/greflm13" target="_blank" rel="noopener noreferrer">Flo Greistorfer</a>.</span>
-        target="_blank" rel="noopener noreferrer">Flo Greistorfer</a>.</span>
     <button onclick="topFunction()" id="totop" title="Back to Top">Back to Top</button>
   </div>
   {%- endif %}

themes/README.md

@@ -29,6 +29,10 @@ Replace the SVG data URI (`url("data:image/svg+xml,...")`) with your desired SVG
 
 ## Previews of included themes
 
+### alpenglow-dark
+
+![alpenglow-dark](screenshots/alpenglow-dark.png)
+
 ### alpenglow
 
 ![alpenglow](screenshots/alpenglow.png)

themes/alpenglow-dark.css

@@ -0,0 +1,100 @@
+@import url('https://fonts.cdnfonts.com/css/metropolis-2');
+
+* {
+  --color1: #FFA769;
+  --color2: #FC4CA0;
+  --color3: #7542E5;
+  --color4: #FF4AD9;
+  --color5: #5F2ECA;
+  --color6: #7033CA;
+  --color7: #FF778E;
+  --bcolor1: #e2d9f8;
+  --bcolor2: #20123A;
+  --bcolor3: #2B1753;
+  --bcolor4: #321C64;
+  --gradient: linear-gradient(80deg, var(--bcolor2) 0%, var(--color5) 1%, var(--color3) 2%, var(--color2) 3%, var(--color1) 4%, var(--color1) 96%, var(--color2) 97%, var(--color3) 98%, var(--color5) 99%, var(--bcolor2) 100%);
+}
+
+body {
+  color: var(--bcolor1);
+  background-color: var(--bcolor3);
+  font-family: "Metropolis", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 500;
+  font-style: normal;
+}
+
+.navbar {
+  font-weight: 800;
+  color: var(--bcolor1);
+  background-color: var(--color3);
+  background-image: var(--gradient);
+}
+
+.navbar li a {
+  font-weight: 800;
+  color: var(--bcolor1);
+}
+
+.navbar li a:hover {
+  text-decoration: none;
+  background-color: var(--color4);
+}
+
+.footer {
+  color: var(--bcolor2);
+  background-color: var(--color1);
+  font-weight: 600;
+}
+
+.footer a {
+  color: var(--color2);
+  text-decoration: none;
+}
+
+.footer a:hover {
+  text-decoration: none;
+}
+
+.foldericon {
+  content: "themes/icons/subfolder.svg.j2";
+}
+
+.folders a {
+  font-weight: 500;
+  color: var(--bcolor1);
+  text-decoration: none;
+}
+
+.folders a:hover {
+  text-decoration: none;
+}
+
+.row a {
+  font-weight: 500;
+  color: var(--color7);
+  text-decoration: none;
+}
+
+.row a:hover {
+  text-decoration: underline;
+}
+
+.tooltiptext {
+  font-weight: 500;
+  background-color: var(--color6);
+}
+
+.column img {
+  background-color: var(--bcolor2);
+}
+
+#totop:hover {
+  background-color: var(--color6);
+}
+
+#totop {
+  background-color: var(--bcolor4);
+  color: var(--bcolor1);
+  font-weight: 600;
+}

themes/alpenglow.css

@@ -2,21 +2,22 @@
 
 * {
   --color1: #FFA769;
-  --color2: #FC4CA0;
+  --color2: #FF778E;
-  --color3: #7542E5;
+  --color3: #FF4AD9;
-  --color4: #FF4AD9;
+  --color4: #FC4CA0;
-  --color5: #5F2ECA;
+  --color5: #7542E5;
-  --color6: #7033CA;
+  --color6: #ffe7ea;
-  --color7: #FF778E;
+  --color7: #5F2ECA;
   --bcolor1: #e2d9f8;
-  --bcolor2: #20123A;
+  --bcolor2: #20123b;
   --bcolor3: #2B1753;
   --bcolor4: #321C64;
+  --gradient: linear-gradient(80deg, var(--bcolor2) 0%, var(--color5) 1%, var(--color3) 2%, var(--color2) 3%, var(--color1) 4%, var(--color1) 96%, var(--color2) 97%, var(--color3) 98%, var(--color5) 99%, var(--bcolor2) 100%);
 }
 
 body {
-  color: var(--bcolor1);
+  color: var(--bcolor2);
-  background-color: var(--bcolor3);
+  background-color: var(--color6);
   font-family: "Metropolis", sans-serif;
   font-optical-sizing: auto;
   font-weight: 500;
@@ -25,13 +26,14 @@ body {
 
 .navbar {
   font-weight: 800;
-  color: var(--bcolor1);
+  color: var(--bcolor2);
-  background-color: var(--color3);
+  background-color: var(--color2);
+  background-image: var(--gradient);
 }
 
 .navbar li a {
   font-weight: 800;
-  color: var(--bcolor1);
+  color: var(--bcolor2);
 }
 
 .navbar li a:hover {
@@ -40,8 +42,8 @@ body {
 }
 
 .footer {
-  color: var(--bcolor2);
+  color: var(--bcolor1);
-  background-color: var(--color1);
+  background-color: var(--bcolor4);
   font-weight: 600;
 }
 
@@ -60,7 +62,7 @@ body {
 
 .folders a {
   font-weight: 500;
-  color: var(--bcolor1);
+  color: var(--bcolor2);
   text-decoration: none;
 }
 
@@ -79,20 +81,21 @@ body {
 }
 
 .tooltiptext {
-  font-weight: 400;
+  font-weight: 500;
-  background-color: var(--bcolor2);
+  color: var(--bcolor1);
+  background-color: var(--color5);
 }
 
 .column img {
-  background-color: var(--bcolor2);
+  background-color: var(--bcolor1);
 }
 
 #totop:hover {
-  background-color: var(--color6);
+  background-color: var(--color5);
 }
 
 #totop {
-  background-color: var(--bcolor4);
+  background-color: var(--color4);
-  color: var(--bcolor1);
+  color: var(--bcolor2);
   font-weight: 600;
 }

themes/index.html

@@ -5,7 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Themes</title>
 </head>
-<body><a href="previews/alpenglow.html">alpenglow</a><br>
+<body><a href="previews/alpenglow-dark.html">alpenglow-dark</a><br>
+<a href="previews/alpenglow.html">alpenglow</a><br>
 <a href="previews/aritim-dark.html">aritim-dark</a><br>
 <a href="previews/aritim.html">aritim</a><br>
 <a href="previews/autumn.html">autumn</a><br>

themes/steam.css

@@ -58,7 +58,7 @@
   content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg height='512' width='512' version='1.1' id='Layer_1' viewBox='0 0 327.68 327.68' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cg id='icon' transform='translate(-128.08785,-19.123746)'%3E%3Cpath id='fg' style='fill:%23dcdedf;fill-opacity:1;stroke:none;stroke-width:6.4;stroke-linecap:round' d='m 428.2793,160.97461 c -78.34525,0.002 -156.69075,-0.007 -235.03585,0.0159 -6.54719,0.16827 -12.82625,4.35683 -15.37415,10.41233 -1.13922,2.74038 -1.79474,5.64883 -2.74311,8.45618 -10.27476,33.32809 -20.56379,66.65251 -30.78952,99.99526 -1.21885,4.66702 0.98496,9.97729 5.17832,12.3776 2.40372,1.49255 5.31559,1.67974 8.07056,1.58986 78.16762,-0.0305 156.33557,0.008 234.503,-0.0259 6.43644,-0.17102 12.61041,-4.22124 15.23762,-10.1162 1.2077,-2.75858 1.84495,-5.72012 2.81312,-8.56426 10.08283,-32.66775 20.13843,-65.34481 30.20361,-98.01744 0.84274,-2.37238 1.35887,-4.96865 0.67937,-7.45078 -0.98831,-4.2533 -4.6015,-7.82876 -8.96172,-8.48315 -1.24947,-0.20685 -2.51789,-0.23068 -3.78125,-0.18945 z' /%3E%3Cpath id='bg' style='fill:%231a9fff;fill-opacity:1;stroke:none;stroke-width:6.4;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:normal' d='m 214.44922,72.089844 c -20.32611,0.01324 -40.65359,-0.03032 -60.97883,0.03325 -5.06767,0.228794 -9.72081,4.176673 -10.64873,9.186171 -0.54368,2.865585 -0.16202,5.794266 -0.28069,8.688777 -4.6e-4,27.527908 -0.008,55.056498 0.0176,82.583978 0.17186,3.22428 3.44977,5.89016 6.64757,5.28488 2.4037,-0.30447 4.32209,-2.31086 4.87898,-4.61617 3.53052,-10.60549 6.98896,-21.23707 10.60492,-31.81263 1.14174,-2.71356 4.14972,-4.41014 7.06111,-4.12697 16.80704,-0.0631 33.61433,-0.01 50.42149,-0.0279 55.72175,-0.002 111.44406,0.006 167.16547,-0.0191 5.71319,-0.19462 10.82844,-5.25566 10.91838,-11.00339 0.12602,-2.9908 -0.0352,-5.98579 0.0574,-8.97822 0.0534,-2.61272 -0.3941,-5.33067 -1.94259,-7.50013 -2.21535,-3.37352 -6.26106,-5.45808 -10.30253,-5.1988 -44.42303,-0.0315 -88.8461,0.006 -133.26914,-0.0339 -1.35699,0.0355 -2.86726,0.10531 -3.94821,-0.87625 -1.14131,-0.86056 -1.57137,-2.31551 -1.50179,-3.694889 -0.0148,-5.79966 0.0803,-11.603104 -0.0604,-17.400318 -0.41681,-5.210159 -4.80455,-9.807583 -10.02134,-10.361315 -2.37314,-0.240789 -4.76368,-0.0457 -7.14443,-0.12428 -5.89141,-0.0074 -11.78281,-0.0066 -17.67422,-0.0028 z' /%3E%3C/g%3E%3C/svg%3E%0A");
 }
 
-.folders figure:hover a {
+.folders a:hover {
   text-decoration: underline;
   text-decoration-thickness: 0.3ex;
   text-underline-offset: 0.5ex;