improve CSS styles - also add animationsdevelop

author: Paul Buetow <paul@buetow.org> 2022-02-20 13:44:42 +0000
committer: Paul Buetow <paul@buetow.org> 2022-02-20 13:44:42 +0000
commit: e88eea122ee112e63f7e544fd777ca8ab4cee323 (patch)
tree: 3e9f7af4b1d318b37b7eb2b99f8a011a88d50bc1 /share/templates
parent: 66c34c39d75d73159fe82c1d07961e0505fc8d6c (diff)
6 files changed, 58 insertions, 26 deletions
diff --git a/share/templates/default/footer.tmpl b/share/templates/default/footer.tmpl
index b3ce543..e1139c5 100644
--- a/share/templates/default/footer.tmpl
+++ b/share/templates/default/footer.tmpl
@@ -1,19 +1,16 @@
 cat <<END
-</div>
-END
-
-cat <<END
 <div class="footer">
 END
 
 if [ "${TARBALL_INCLUDE}" = 'yes' ]; then
 cat <<END
-  Download all photos in original size <a href='${backhref}/${tarball_name}'>here</a><br /><br />
+    Download all photos in original size <a href='${backhref}/${tarball_name}'>here</a><br /><br />
 END
 fi
 
 cat <<END
-  Page generated at $(date) using Bash and ImageMagick at $(uname); &lt;photoalbum@dev.buetow.org&gt;
+    Page generated at $(date) using Bash+ImageMagick -
+    <a href="https://codeberg.org/foozone/photoalbum">codeberg.org/foozone/photoalbum</a>
 </div>
 
 </body>
diff --git a/share/templates/default/header.tmpl b/share/templates/default/header.tmpl
index 564d547..c0f81fb 100644
--- a/share/templates/default/header.tmpl
+++ b/share/templates/default/header.tmpl
@@ -1,5 +1,5 @@
 if [ "${is_subalbum}" = yes ]; then
-  GOTO_OVERVIEW="<a href='${backhref}/index.html'>Go to Album overview</a>"
+    GOTO_OVERVIEW="<a href='${backhref}/index.html'>Go to Album overview</a>"
 fi
 
 cat <<END
@@ -8,19 +8,52 @@ cat <<END
     <title>${TITLE}</title>
     <style type="text/css">
         body {
-            background-color: #000000;
-            color: #FFFFFF;
+            background-color: #ffffff;
+            background-image: url('${backhref}/${blurs_dir}/${background_image}');
+            background-size: cover;
+            background-repeat: no-repeat;
+            text-align: center;
+
+            color: #000000;
             font-family: verdana, sans-serif;
             width: 100%;
         }
+
         a {
-            color: #FFFFFF;
+            color: #000000;
         }
+
+        div.text, div.footer, div.navigator {
+            background-color: #ffffff;
+            width: 1024px;
+            border: 15px solid #000000;
+            padding: 10px;
+            margin-left: auto;
+            margin-right: auto;
+            margin-top: 10;
+            margin-bottom: 10;
+        }
+
+        img {
+            padding: 5px;
+        }
+
+        img.thumb:hover {
+            -webkit-transform: scaleX(-1);
+            transform: scaleX(-1);
+        }
+
+        .animate-none{}
+        .animate-fading{animation:fading 10s}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
+        .animate-opacity{animation:opac 0.4s}@keyframes opac{from{opacity:0} to{opacity:1}}
+        .animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+        .animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
+        .animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
+        .animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+        .animate-zoom {animation:animatezoom 0.4s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
     </style>
 </head>
 
 <body>
-  <h1>${TITLE}</h1>
   <p>${GOTO_OVERVIEW}</p>
-  <div>
 END
diff --git a/share/templates/default/next.tmpl b/share/templates/default/next.tmpl
index a4165dc..48287af 100644
--- a/share/templates/default/next.tmpl
+++ b/share/templates/default/next.tmpl
@@ -1,5 +1,5 @@
 cat <<END
-<p>
-  <a href='${next}.html'>Next ${MAXPREVIEWS} pictures of current Album</a>
-</p>
+<div class="navigator">
+    <a href='${next}.html'>Next ${MAXPREVIEWS} pictures&rArr;</a>
+</div>
 END
diff --git a/share/templates/default/prev.tmpl b/share/templates/default/prev.tmpl
index 98dd874..7c7c630 100644
--- a/share/templates/default/prev.tmpl
+++ b/share/templates/default/prev.tmpl
@@ -1,5 +1,5 @@
 cat <<END
-<p>
-    <a href='${prev}.html'>Previous ${MAXPREVIEWS} pictures of current Album</a>
-</p>
+<div class="navigator">
+    <a href='${prev}.html'>Previous ${MAXPREVIEWS} pictures</a>
+</div>
 END
diff --git a/share/templates/default/preview.tmpl b/share/templates/default/preview.tmpl
index feaa1cf..ddd036d 100644
--- a/share/templates/default/preview.tmpl
+++ b/share/templates/default/preview.tmpl
@@ -1,5 +1,5 @@
 cat <<END
 <a name='${photo}' href='${backhref}/${html_dir}/${num}-${i}.html'>
-  <img border='0' src='${backhref}/${thumbs_dir}/${photo}' />
+  <img class='thumb ${animation_class}' src='${backhref}/${thumbs_dir}/${photo}' />
 </a>
 END
diff --git a/share/templates/default/view.tmpl b/share/templates/default/view.tmpl
index 8a64035..a4a41a0 100644
--- a/share/templates/default/view.tmpl
+++ b/share/templates/default/view.tmpl
@@ -1,13 +1,15 @@
 cat <<END
-<p>
-    <a href="${num}-$((i-1)).html">&lt;&lt;&lt;</a>
+<div class="text">
+    <a href="${num}-$((i-1)).html">&lArr;</a>
     <a href="page-${num}.html#$photo">Thumbnails</a>
-    <a href="${num}-$((i+1)).html">&gt;&gt;&gt;</a>
-</p>
+    <a href="${num}-$((i+1)).html">&rArr;</a>
+</div>
 
-<a href="${num}-$((i+1)).html">
-    <img border='0' src='${backhref}/${photos_dir}/${photo}' />
-</a>
+<div class='view'>
+    <a href="${num}-$((i+1)).html">
+        <img class='view ${animation_class}' border='0' src='${backhref}/${photos_dir}/${photo}' />
+    </a>
+</div>
 
 <p>
     <a href="${backhref}/${photos_dir}/${photo}">Direct link</a>
author	Paul Buetow <paul@buetow.org>	2022-02-20 13:44:42 +0000
committer	Paul Buetow <paul@buetow.org>	2022-02-20 13:44:42 +0000
commit	e88eea122ee112e63f7e544fd777ca8ab4cee323 (patch)
tree	3e9f7af4b1d318b37b7eb2b99f8a011a88d50bc1 /share/templates
parent	66c34c39d75d73159fe82c1d07961e0505fc8d6c (diff)